Map frame display names (#5790)

Author: iocalebs

src/actions/ast.js

@@ -11,6 +11,7 @@ import {
   isPaused
 } from "../selectors";
 
+import { mapFrames } from "./pause";
 import { setInScopeLines } from "./ast/setInScopeLines";
 import {
   getSymbols,
@@ -59,6 +60,10 @@ export function setSymbols(sourceId: SourceId) {
       [PROMISE]: getSymbols(source.id)
     });
 
+    if (isPaused(getState())) {
+      await dispatch(mapFrames());
+    }
+
     await dispatch(setPausePoints(sourceId));
     await dispatch(setSourceMetaData(sourceId));
   };

src/actions/pause/mapFrames.js

@@ -1,8 +1,10 @@
 // @flow
 
-import { getFrames } from "../../selectors";
+import { getFrames, getSymbols, getSource } from "../../selectors";
+import { findClosestFunction } from "../../utils/ast";
 
 import type { Frame } from "../../types";
+import type { State } from "../../reducers/types";
 import type { ThunkArgs } from "../types";
 
 export function updateFrameLocation(frame: Frame, sourceMaps: any) {
@@ -26,12 +28,35 @@ function updateFrameLocations(
   );
 }
 
+export function mapDisplayNames(frames: Frame[], getState: () => State) {
+  return frames.map(frame => {
+    const source = getSource(getState(), frame.location.sourceId);
+    const symbols = getSymbols(getState(), source);
+
+    if (!symbols || !symbols.functions) {
+      return frame;
+    }
+
+    const originalFunction = findClosestFunction(
+      symbols.functions,
+      frame.location
+    );
+
+    if (!originalFunction) {
+      return frame;
+    }
+
+    const originalDisplayName = originalFunction.name;
+    return { ...frame, originalDisplayName };
+  });
+}
+
 /**
- * Map call stack frame locations to original locations.
+ * Map call stack frame locations and display names to originals.
  * e.g.
  * 1. When the debuggee pauses
  * 2. When a source is pretty printed
- *
+ * 3. When symbols are loaded
  * @memberof actions/pause
  * @static
  */
@@ -42,7 +67,8 @@ export function mapFrames() {
       return;
     }
 
-    const mappedFrames = await updateFrameLocations(frames, sourceMaps);
+    let mappedFrames = await updateFrameLocations(frames, sourceMaps);
+    mappedFrames = mapDisplayNames(mappedFrames, getState);
 
     dispatch({
       type: "MAP_FRAMES",

src/actions/tests/pause.spec.js

@@ -4,6 +4,7 @@ import {
   createStore,
   waitForState,
   makeSource,
+  makeOriginalSource,
   makeFrame
 } from "../../utils/test-head";
 
@@ -42,6 +43,11 @@ const mockThreadClient = {
             source: "function foo() {\n  return -5;\n}",
             contentType: "text/javascript"
           });
+        case "foo-original":
+          return resolve({
+            source: "\n\nfunction fooOriginal() {\n  return -5;\n}",
+            contentType: "text/javascript"
+          });
       }
     });
   }
@@ -145,6 +151,44 @@ describe("pause", () => {
       expect(getNextStepSpy).toBeCalled();
       getNextStepSpy.mockRestore();
     });
+
+    describe("pausing in a generated location", () => {
+      it("maps frame locations and names to original source", async () => {
+        const generatedLocation = {
+          sourceId: "foo",
+          line: 1,
+          column: 0
+        };
+        const originalLocation = {
+          sourceId: "foo-original",
+          line: 3,
+          column: 0
+        };
+        const sourceMapsMock = {
+          getOriginalLocation: () => Promise.resolve(originalLocation)
+        };
+        const store = createStore(mockThreadClient, {}, sourceMapsMock);
+        const { dispatch, getState } = store;
+        const mockPauseInfo = createPauseInfo(generatedLocation);
+
+        await dispatch(actions.newSource(makeSource("foo")));
+        await dispatch(actions.newSource(makeOriginalSource("foo")));
+        await dispatch(actions.loadSourceText(I.Map({ id: "foo" })));
+        await dispatch(actions.loadSourceText(I.Map({ id: "foo-original" })));
+        await dispatch(actions.setSymbols("foo-original"));
+
+        await dispatch(actions.paused(mockPauseInfo));
+        expect(selectors.getFrames(getState())).toEqual([
+          {
+            id: 1,
+            scope: [],
+            location: originalLocation,
+            generatedLocation,
+            originalDisplayName: "fooOriginal"
+          }
+        ]);
+      });
+    });
   });
 
   describe("resumed", () => {

src/selectors/test/getCallStackFrames.spec.js

@@ -47,7 +47,7 @@ describe("getCallStackFrames selector", () => {
     it("annotates frames related to Babel async transforms", () => {
       const preAwaitGroup = [
         {
-          displayName: "_callee$",
+          displayName: "asyncAppFunction",
           location: { sourceId: "bundle" }
         },
         {
@@ -86,7 +86,7 @@ describe("getCallStackFrames selector", () => {
 
       const postAwaitGroup = [
         {
-          displayName: "_callee$",
+          displayName: "asyncAppFunction",
           location: { sourceId: "bundle" }
         },
         {
@@ -160,6 +160,7 @@ describe("getCallStackFrames selector", () => {
         5,
         6,
         7,
+        8,
         10,
         11,
         12,

src/utils/pause/frames/annotateFrames.js

@@ -37,18 +37,28 @@ function annotateBabelAsyncFrames(frames: Frame[]) {
 // Receives an array of frames and looks for babel async
 // call stack groups.
 function getBabelFrameIndexes(frames) {
-  const startIndexes = getFrameIndices(
-    frames,
-    (displayName, url) =>
-      url.match(/regenerator-runtime/i) && displayName === "tryCatch"
-  );
+  const startIndexes = frames.reduce((accumulator, frame, index) => {
+    if (
+      getFrameUrl(frame).match(/regenerator-runtime/i) &&
+      frame.displayName === "tryCatch"
+    ) {
+      return [...accumulator, index];
+    }
+    return accumulator;
+  }, []);
 
-  const endIndexes = getFrameIndices(
-    frames,
-    (displayName, url) =>
-      displayName === "_asyncToGenerator/<" ||
-      (url.match(/_microtask/i) && displayName === "flush")
-  );
+  const endIndexes = frames.reduce((accumulator, frame, index) => {
+    if (
+      getFrameUrl(frame).match(/_microtask/i) &&
+      frame.displayName === "flush"
+    ) {
+      return [...accumulator, index];
+    }
+    if (frame.displayName === "_asyncToGenerator/<") {
+      return [...accumulator, index + 1];
+    }
+    return accumulator;
+  }, []);
 
   if (startIndexes.length != endIndexes.length || startIndexes.length === 0) {
     return frames;
@@ -61,13 +71,3 @@ function getBabelFrameIndexes(frames) {
     range(startIndex, endIndex + 1)
   );
 }
-
-function getFrameIndices(frames, predicate) {
-  return frames.reduce(
-    (accumulator, frame, index) =>
-      predicate(frame.displayName, getFrameUrl(frame))
-        ? [...accumulator, index]
-        : accumulator,
-    []
-  );
-}

src/utils/pause/frames/displayName.js

@@ -79,7 +79,8 @@ export function formatDisplayName(
   frame: LocalFrame,
   { shouldMapDisplayName = true }: formatDisplayNameParams = {}
 ) {
-  let { displayName, library } = frame;
+  let { displayName, originalDisplayName, library } = frame;
+  displayName = originalDisplayName || displayName;
   if (library && shouldMapDisplayName) {
     displayName = mapDisplayNames(frame, library);
   }

src/utils/pause/frames/tests/displayName.spec.js

@@ -54,6 +54,18 @@ describe("formatting display names", () => {
 
     expect(formatDisplayName(frame)).toEqual("...zbazbazbazbazbazbazbazbaz");
   });
+
+  it("returns the original function name when present", () => {
+    const frame = {
+      originalDisplayName: "originalFn",
+      displayName: "fn",
+      source: {
+        url: "entry.js"
+      }
+    };
+
+    expect(formatDisplayName(frame)).toEqual("originalFn");
+  });
 });
 
 describe("simplifying display names", () => {