Switched getExtraProps to use findClosestFunction to get the component name. (#5851)

Author: mmcote

src/actions/ast.js

@@ -11,7 +11,8 @@ import {
   isPaused
 } from "../selectors";
 
-import { mapFrames } from "./pause";
+import { mapFrames, setExtra } from "./pause";
+
 import { setInScopeLines } from "./ast/setInScopeLines";
 import {
   getSymbols,
@@ -68,6 +69,7 @@ export function setSymbols(sourceId: SourceId) {
     );
 
     if (isPaused(getState())) {
+      await dispatch(setExtra());
       await dispatch(mapFrames());
     }
 

src/actions/pause/fetchExtra.js

@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// @flow
+
+import { getSelectedFrame } from "../../selectors";
+import { getExtra } from "../preview";
+import type { ThunkArgs } from "../types";
+
+export function fetchExtra() {
+  return async function({ dispatch, getState }: ThunkArgs) {
+    const frame = getSelectedFrame(getState());
+    if (!frame) {
+      return;
+    }
+
+    const extra = await dispatch(getExtra("this;", frame.this, frame));
+    dispatch({
+      type: "ADD_EXTRA",
+      extra: extra
+    });
+  };
+}

src/actions/pause/fetchScopes.js

@@ -6,9 +6,8 @@
 
 import { getSelectedFrame, getGeneratedFrameScope } from "../../selectors";
 import { mapScopes } from "./mapScopes";
-import { getExtra } from "../preview";
 import { PROMISE } from "../utils/middleware/promise";
-
+import { setExtra } from "./setExtra";
 import type { ThunkArgs } from "../types";
 
 export function fetchScopes() {
@@ -18,15 +17,13 @@ export function fetchScopes() {
       return;
     }
 
-    const extra = await dispatch(getExtra("this;", frame.this, frame));
-
     const scopes = dispatch({
       type: "ADD_SCOPES",
       frame,
-      extra,
       [PROMISE]: client.getFrameScopes(frame)
     });
 
+    await dispatch(setExtra());
     await dispatch(mapScopes(scopes, frame));
   };
 }

src/actions/pause/index.js

@@ -25,6 +25,7 @@ export { resumed } from "./resumed";
 export { continueToHere } from "./continueToHere";
 export { breakOnNext } from "./breakOnNext";
 export { mapFrames } from "./mapFrames";
+export { setExtra } from "./setExtra";
 export { setPopupObjectProperties } from "./setPopupObjectProperties";
 export { pauseOnExceptions } from "./pauseOnExceptions";
 export { selectFrame } from "./selectFrame";

src/actions/pause/mapFrames.js

@@ -37,10 +37,7 @@ export function mapDisplayNames(frames: Frame[], getState: () => State) {
       return frame;
     }
 
-    const originalFunction = findClosestFunction(
-      symbols.functions,
-      frame.location
-    );
+    const originalFunction = findClosestFunction(symbols, frame.location);
 
     if (!originalFunction) {
       return frame;

src/actions/pause/setExtra.js

@@ -0,0 +1,18 @@
+// @flow
+
+import { getSymbols, getSource, getSelectedFrame } from "../../selectors";
+import { fetchExtra } from "./fetchExtra";
+
+import type { ThunkArgs } from "../types";
+
+export function setExtra() {
+  return async function({ dispatch, getState, sourceMaps }: ThunkArgs) {
+    const frame = getSelectedFrame(getState());
+    const source = getSource(getState(), frame.location.sourceId);
+    const symbols = getSymbols(getState(), source);
+
+    if (symbols && symbols.classes) {
+      dispatch(fetchExtra());
+    }
+  };
+}

src/actions/preview.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import { findBestMatchExpression } from "../utils/ast";
+import { findBestMatchExpression, findClosestClass } from "../utils/ast";
 import { getTokenLocation } from "../utils/editor";
 import { isReactComponent, isImmutable, isConsole } from "../utils/preview";
 import { isGeneratedId } from "devtools-source-map";
@@ -17,7 +17,8 @@ import {
   getSelectedSource,
   getSelectedFrame,
   getSymbols,
-  getCanRewind
+  getCanRewind,
+  getSource
 } from "../selectors";
 
 import { getMappedExpression } from "./expressions";
@@ -52,10 +53,24 @@ async function getImmutableProps(expression: string, evaluate) {
   };
 }
 
-async function getExtraProps(expression, result, evaluate) {
+async function getExtraProps(getState, expression, result, evaluate) {
   const props = {};
   if (isReactComponent(result)) {
-    props.react = await getReactProps(evaluate);
+    const selectedFrame = getSelectedFrame(getState());
+    const source = getSource(getState(), selectedFrame.location.sourceId);
+    const symbols = getSymbols(getState(), source);
+
+    if (symbols && symbols.classes) {
+      const originalClass = findClosestClass(symbols, selectedFrame.location);
+
+      if (originalClass) {
+        props.react = { displayName: originalClass.name };
+      }
+    }
+
+    if (!props.react) {
+      props.react = await getReactProps(evaluate);
+    }
   }
 
   if (isImmutable(result)) {
@@ -95,7 +110,7 @@ export function getExtra(
   selectedFrame: Frame
 ) {
   return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
-    const extra = await getExtraProps(expression, result, expr =>
+    const extra = await getExtraProps(getState, expression, result, expr =>
       client.evaluateInFrame(selectedFrame.id, expr)
     );
 

src/actions/types.js

@@ -316,10 +316,13 @@ type PauseAction =
       type: "MAP_FRAMES",
       frames: Frame[]
     |}
+  | {|
+      type: "ADD_EXTRA",
+      extra: any
+    |}
   | {|
       type: "ADD_SCOPES",
       frame: Frame,
-      extra: any,
       status: AsyncStatus,
       value: Scope
     |};

src/components/Editor/EditorMenu.js

@@ -251,7 +251,7 @@ export default connect(
           getSymbols(state, selectedSource)
         ),
       getFunctionLocation: line =>
-        findClosestFunction(getSymbols(state, selectedSource).functions, {
+        findClosestFunction(getSymbols(state, selectedSource), {
           line,
           column: Infinity
         })

src/reducers/pause.js

@@ -130,8 +130,12 @@ function update(
       return { ...state, frames: action.frames };
     }
 
+    case "ADD_EXTRA": {
+      return { ...state, extra: action.extra };
+    }
+
     case "ADD_SCOPES": {
-      const { frame, extra, status, value } = action;
+      const { frame, status, value } = action;
       const selectedFrameId = frame.id;
 
       const generated = {
@@ -143,7 +147,6 @@ function update(
       };
       return {
         ...state,
-        extra: extra,
         frameScopes: {
           ...state.frameScopes,
           generated