Apply SourceMaps type to redux actions (firefox-devtools#8077)

flow-typed/debugger-html.js

@@ -106,6 +106,18 @@ declare module "debugger-html" {
     this: Object
   };
 
+  /**
+   * Original Frame
+   *
+   * @memberof types
+   * @static
+   */
+  declare type OriginalFrame = {
+    displayName: string,
+    location?: SourceLocation,
+    thread?: string
+  };
+
   /**
    * why
    * @memberof types

packages/devtools-source-map/src/index.js

@@ -8,7 +8,13 @@ const {
   workerUtils: { WorkerDispatcher }
 } = require("devtools-utils");
 
-import type { SourceLocation, Source, SourceId } from "../../../src/types";
+import type {
+  OriginalFrame,
+  Range,
+  SourceLocation,
+  Source,
+  SourceId
+} from "../../../src/types";
 import type { SourceMapConsumer } from "source-map";
 import type { locationOptions } from "./source-map";
 
@@ -87,18 +93,7 @@ export const getGeneratedRangesForOriginal = async (
   sourceId: SourceId,
   url: string,
   mergeUnmappedRegions?: boolean
-): Promise<
-  Array<{
-    start: {
-      line: number,
-      column: number
-    },
-    end: {
-      line: number,
-      column: number
-    }
-  }>
-> =>
+): Promise<Range[]> =>
   dispatcher.invoke(
     "getGeneratedRangesForOriginal",
     sourceId,
@@ -108,8 +103,7 @@ export const getGeneratedRangesForOriginal = async (
 
 export const getFileGeneratedRange = async (
   originalSource: Source
-): Promise<?{ start: any, end: any }> =>
-  dispatcher.invoke("getFileGeneratedRange", originalSource);
+): Promise<Range> => dispatcher.invoke("getFileGeneratedRange", originalSource);
 
 export const getLocationScopes = dispatcher.task("getLocationScopes");
 
@@ -137,10 +131,8 @@ export const hasMappedSource = async (
 
 export const getOriginalStackFrames = async (
   generatedLocation: SourceLocation
-): Promise<?Array<{
-  displayName: string,
-  location?: SourceLocation
-}>> => dispatcher.invoke("getOriginalStackFrames", generatedLocation);
+): Promise<?Array<OriginalFrame>> =>
+  dispatcher.invoke("getOriginalStackFrames", generatedLocation);
 
 export {
   originalToGeneratedId,

packages/devtools-source-map/src/utils/getOriginalStackFrames.js

@@ -4,18 +4,15 @@
 
 // @flow
 
-import type { SourceLocation } from "debugger-html";
+import type { OriginalFrame, SourceLocation } from "debugger-html";
 
 const { getWasmXScopes } = require("./wasmXScopes");
 
 // Returns expanded stack frames details based on the generated location.
 // The function return null if not information was found.
 async function getOriginalStackFrames(
   generatedLocation: SourceLocation
-): Promise<?Array<{
-  displayName: string,
-  location?: SourceLocation
-}>> {
+): Promise<?Array<OriginalFrame>> {
   const wasmXScopes = await getWasmXScopes(generatedLocation.sourceId);
   if (!wasmXScopes) {
     return null;

packages/devtools-source-map/src/utils/wasmXScopes.js

@@ -5,7 +5,7 @@
 // @flow
 /* eslint camelcase: 0*/
 
-import type { SourceLocation, SourceId } from "debugger-html";
+import type { OriginalFrame, SourceLocation, SourceId } from "debugger-html";
 
 const { getSourceMap } = require("./sourceMapRequests");
 const { generatedToOriginalId } = require("./index");
@@ -153,12 +153,7 @@ class XScope {
     this.xScope = xScopeData;
   }
 
-  search(
-    generatedLocation: SourceLocation
-  ): Array<{
-    displayName: string,
-    location?: SourceLocation
-  }> {
+  search(generatedLocation: SourceLocation): Array<OriginalFrame> {
     const { code_section_offset, debug_info, sources, idIndex } = this.xScope;
     const pc = generatedLocation.line - (code_section_offset || 0);
     const scopes = filterScopes(debug_info, pc, null, idIndex);

src/actions/breakpoints/breakpointPositions.js

@@ -4,7 +4,10 @@
 
 // @flow
 
-import { isOriginalId, originalToGeneratedId } from "devtools-source-map";
+import SourceMaps, {
+  isOriginalId,
+  originalToGeneratedId
+} from "devtools-source-map";
 import { uniqBy, zip } from "lodash";
 
 import {
@@ -14,16 +17,15 @@ import {
   getBreakpointPositionsForSource
 } from "../../selectors";
 
-import type { MappedLocation, SourceLocation } from "../../types";
+import type { MappedLocation, Range, SourceLocation } from "../../types";
 import type { ThunkArgs } from "../../actions/types";
 import { makeBreakpointId } from "../../utils/breakpoint";
-import typeof SourceMaps from "../../../packages/devtools-source-map/src";
 
 const requests = new Map();
 
 async function mapLocations(
   generatedLocations: SourceLocation[],
-  { sourceMaps }: { sourceMaps: SourceMaps }
+  { sourceMaps }: { sourceMaps: typeof SourceMaps }
 ) {
   const originalLocations = await sourceMaps.getOriginalLocations(
     generatedLocations
@@ -65,7 +67,9 @@ async function _setBreakpointPositions(sourceId, thunkArgs) {
 
   let results = {};
   if (isOriginalId(sourceId)) {
-    const ranges = await sourceMaps.getGeneratedRangesForOriginal(
+    // Explicitly typing ranges is required to work around the following issue
+    // https://github.com/facebook/flow/issues/5294
+    const ranges: Range[] = await sourceMaps.getGeneratedRangesForOriginal(
       sourceId,
       generatedSource.url,
       true
@@ -81,8 +85,10 @@ async function _setBreakpointPositions(sourceId, thunkArgs) {
       // and because we know we don't care about the end-line whitespace
       // in this case.
       if (range.end.column === Infinity) {
-        range.end.line += 1;
-        range.end.column = 0;
+        range.end = {
+          line: range.end.line + 1,
+          column: 0
+        };
       }
 
       const bps = await client.getBreakpointPositions(generatedSource, range);

src/actions/breakpoints/remapLocations.js

@@ -4,12 +4,14 @@
 
 // @flow
 
+import typeof SourceMaps from "devtools-source-map";
+
 import type { Breakpoint } from "../../types";
 
 export default function remapLocations(
   breakpoints: Breakpoint[],
   sourceId: string,
-  sourceMaps: Object
+  sourceMaps: SourceMaps
 ) {
   const sourceBreakpoints: Promise<Breakpoint>[] = breakpoints.map(
     async breakpoint => {

src/actions/pause/mapFrames.js

@@ -14,11 +14,11 @@ import {
 import assert from "../../utils/assert";
 import { findClosestFunction } from "../../utils/ast";
 
-import type { Frame, ThreadId } from "../../types";
+import type { Frame, OriginalFrame, ThreadId } from "../../types";
 import type { State } from "../../reducers/types";
 import type { ThunkArgs } from "../types";
 
-import { isGeneratedId } from "devtools-source-map";
+import SourceMaps, { isGeneratedId } from "devtools-source-map";
 
 function isFrameBlackboxed(state, frame) {
   const source = getSource(state, frame.location.sourceId);
@@ -35,7 +35,10 @@ function getSelectedFrameId(state, thread, frames) {
   return selectedFrame && selectedFrame.id;
 }
 
-export function updateFrameLocation(frame: Frame, sourceMaps: any) {
+export function updateFrameLocation(
+  frame: Frame,
+  sourceMaps: typeof SourceMaps
+) {
   if (frame.isOriginal) {
     return Promise.resolve(frame);
   }
@@ -48,7 +51,7 @@ export function updateFrameLocation(frame: Frame, sourceMaps: any) {
 
 function updateFrameLocations(
   frames: Frame[],
-  sourceMaps: any
+  sourceMaps: typeof SourceMaps
 ): Promise<Frame[]> {
   if (!frames || frames.length == 0) {
     return Promise.resolve(frames);
@@ -104,7 +107,7 @@ function isWasmOriginalSourceFrame(frame, getState: () => State): boolean {
 
 async function expandFrames(
   frames: Frame[],
-  sourceMaps: any,
+  sourceMaps: typeof SourceMaps,
   getState: () => State
 ): Promise<Frame[]> {
   const result = [];
@@ -114,9 +117,9 @@ async function expandFrames(
       result.push(frame);
       continue;
     }
-    const originalFrames = await sourceMaps.getOriginalStackFrames(
-      frame.generatedLocation
-    );
+    const originalFrames: ?Array<
+      OriginalFrame
+    > = await sourceMaps.getOriginalStackFrames(frame.generatedLocation);
     if (!originalFrames) {
       result.push(frame);
       continue;
@@ -130,6 +133,10 @@ async function expandFrames(
     };
 
     originalFrames.forEach((originalFrame, j) => {
+      if (!originalFrame.location || !originalFrame.thread) {
+        return;
+      }
+
       // Keep outer most frame with true actor ID, and generate uniquie
       // one for the nested frames.
       const id = j == 0 ? frame.id : `${frame.id}-originalFrame${j}`;

src/actions/sources/newSources.js

@@ -98,8 +98,10 @@ function loadSourceMap(sourceId: SourceId) {
 
     let urls = null;
     try {
-      const urlInfo = { ...source };
-      if (!urlInfo.url) {
+      // Unable to correctly type the result of a spread on a union type.
+      // See https://github.com/facebook/flow/pull/7298
+      const urlInfo: Source = { ...(source: any) };
+      if (!urlInfo.url && typeof urlInfo.introductionUrl === "string") {
         // If the source was dynamically generated (via eval, dynamically
         // created script elements, and so forth), it won't have a URL, so that
         // it is not collapsed into other sources from the same place. The

src/actions/sources/prettyPrint.js

@@ -4,6 +4,8 @@
 
 // @flow
 
+import typeof SourceMaps from "devtools-source-map";
+
 import assert from "../../utils/assert";
 import { recordEvent } from "../../utils/telemetry";
 import { remapBreakpoints } from "../breakpoints";
@@ -28,7 +30,7 @@ import { selectSource } from "./select";
 import type { JsSource, Source } from "../../types";
 
 export async function prettyPrintSource(
-  sourceMaps: any,
+  sourceMaps: SourceMaps,
   prettySource: Source,
   generatedSource: any
 ) {

src/actions/types/index.js

@@ -4,6 +4,8 @@
 
 // @flow
 
+import typeof SourceMaps from "devtools-source-map";
+
 import type { WorkerList, MainThread } from "../../types";
 import type { State } from "../../reducers/types";
 import type { MatchedLocations } from "../../reducers/file-search";
@@ -34,7 +36,7 @@ export type ThunkArgs = {
   dispatch: (action: any) => Promise<any>,
   getState: () => State,
   client: typeof clientCommands,
-  sourceMaps: any,
+  sourceMaps: SourceMaps,
   panel: Panel
 };
 

src/types.js

@@ -217,6 +217,12 @@ export type ChromeFrame = {
   location: ?SourceLocation
 };
 
+export type OriginalFrame = {
+  displayName: string,
+  location?: SourceLocation,
+  thread: string
+};
+
 /**
  * ContextMenuItem
  *

src/utils/bootstrap.js

@@ -10,7 +10,10 @@ import ReactDOM from "react-dom";
 const { Provider } = require("react-redux");
 
 import { isFirefoxPanel, isDevelopment, isTesting } from "devtools-environment";
-import { startSourceMapWorker, stopSourceMapWorker } from "devtools-source-map";
+import SourceMaps, {
+  startSourceMapWorker,
+  stopSourceMapWorker
+} from "devtools-source-map";
 import * as search from "../workers/search";
 import * as prettyPrint from "../workers/pretty-print";
 import * as parser from "../workers/parser";
@@ -22,7 +25,6 @@ import App from "../components/App";
 import { asyncStore, prefs } from "./prefs";
 
 import type { Panel } from "../client/firefox/types";
-import typeof SourceMaps from "../../packages/devtools-source-map/src";
 
 function renderPanel(component, store) {
   const root = document.createElement("div");
@@ -42,7 +44,7 @@ function renderPanel(component, store) {
 
 export function bootstrapStore(
   client: any,
-  sourceMaps: SourceMaps,
+  sourceMaps: typeof SourceMaps,
   panel: Panel,
   initialState: Object
 ) {

src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js

@@ -4,6 +4,8 @@
 
 // @flow
 
+import typeof SourceMaps from "devtools-source-map";
+
 import type { BindingLocationType, BindingType } from "../../../workers/parser";
 import { positionCmp } from "./positionCmp";
 import { filterSortedArray } from "./filtering";
@@ -34,7 +36,7 @@ export async function originalRangeStartsInside(
     start: SourceLocation,
     end: SourceLocation
   },
-  sourceMaps: any
+  sourceMaps: SourceMaps
 ) {
   const endPosition = await sourceMaps.getGeneratedLocation(end, source);
   const startPosition = await sourceMaps.getGeneratedLocation(start, source);
@@ -58,11 +60,11 @@ export async function getApplicableBindingsForOriginalPosition(
   },
   bindingType: BindingType,
   locationType: BindingLocationType,
-  sourceMaps: any
+  sourceMaps: SourceMaps
 ): Promise<Array<ApplicableBinding>> {
   const ranges = await sourceMaps.getGeneratedRanges(start, source);
 
-  const resultRanges = ranges.map(mapRange => ({
+  const resultRanges: GeneratedRange[] = ranges.map(mapRange => ({
     start: {
       line: mapRange.line,
       column: mapRange.columnStart
@@ -91,8 +93,10 @@ export async function getApplicableBindingsForOriginalPosition(
         mappingContains(range, { start: startPosition, end: startPosition }) &&
         positionCmp(range.end, endPosition) < 0
       ) {
-        range.end.line = endPosition.line;
-        range.end.column = endPosition.column;
+        range.end = {
+          line: endPosition.line,
+          column: endPosition.column
+        };
         break;
       }
     }