[Preview] React Component pane (#5801)

Author: mmcote

assets/panel/prefs.js

@@ -29,6 +29,7 @@ pref("devtools.debugger.ui.variables-searchbox-visible", false);
 pref("devtools.debugger.ui.framework-grouping-on", true);
 pref("devtools.debugger.call-stack-visible", true);
 pref("devtools.debugger.scopes-visible", true);
+pref("devtools.debugger.component-visible", true);
 pref("devtools.debugger.workers-visible", true);
 pref("devtools.debugger.breakpoints-visible", true);
 pref("devtools.debugger.expressions-visible", true);

src/actions/pause/fetchScopes.js

@@ -6,6 +6,7 @@
 
 import { getSelectedFrame, getGeneratedFrameScope } from "../../selectors";
 import { mapScopes } from "./mapScopes";
+import { getExtra } from "../preview";
 import { PROMISE } from "../utils/middleware/promise";
 
 import type { ThunkArgs } from "../types";
@@ -17,9 +18,12 @@ 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)
     });
 

src/actions/preview.js

@@ -24,7 +24,7 @@ import { getMappedExpression } from "./expressions";
 import { isEqual } from "lodash";
 
 import type { ThunkArgs } from "./types";
-import type { Range, Position } from "../types";
+import type { Frame, Range, Position } from "../types";
 
 async function getReactProps(evaluate) {
   const reactDisplayName = await evaluate(
@@ -90,6 +90,20 @@ function isInvalidTarget(target: HTMLElement) {
   return invalidTarget || invalidToken || invaildType;
 }
 
+export function getExtra(
+  expression: string,
+  result: Object,
+  selectedFrame: Frame
+) {
+  return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
+    const extra = await getExtraProps(expression, result, expr =>
+      client.evaluateInFrame(selectedFrame.id, expr)
+    );
+
+    return extra;
+  };
+}
+
 export function updatePreview(target: HTMLElement, editor: any) {
   return ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
     const tokenPos = getTokenLocation(editor.codeMirror, target);
@@ -185,8 +199,8 @@ export function setPreview(
           return;
         }
 
-        const extra = await getExtraProps(expression, result, expr =>
-          client.evaluateInFrame(selectedFrame.id, expr)
+        const extra = await dispatch(
+          getExtra(expression, result, selectedFrame)
         );
 
         return {

src/actions/types.js

@@ -313,6 +313,7 @@ type PauseAction =
   | {
       type: "ADD_SCOPES",
       frame: Frame,
+      extra: any,
       status: AsyncStatus,
       value: Scope
     };

src/components/Editor/Preview/index.js

@@ -31,7 +31,6 @@ type Props = {
   editorRef: ?HTMLDivElement,
   selectedSource: SourceRecord,
   selectedLocation: SelectedLocation,
-  selectedFrame: any,
   clearPreview: () => void,
   preview: PreviewType,
   selectedFrameVisible: boolean,

src/components/SecondaryPanes/FrameworkComponent.js

@@ -0,0 +1,94 @@
+/* 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 React, { PureComponent } from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import actions from "../../actions";
+
+import { createObjectClient } from "../../client/firefox";
+
+import { getSelectedFrame, getAllPopupObjectProperties } from "../../selectors";
+
+import { ObjectInspector, ObjectInspectorUtils } from "devtools-reps";
+import { isReactComponent } from "../../utils/preview";
+
+import type { Frame } from "../../types";
+
+const { createNode, getChildren } = ObjectInspectorUtils.node;
+const { loadItemProperties } = ObjectInspectorUtils.loadProperties;
+
+type Props = {
+  setPopupObjectProperties: (Object, Object) => void,
+  selectedFrame: Frame,
+  popupObjectProperties: Object
+};
+
+class FrameworkComponent extends PureComponent<Props> {
+  async componentWillMount() {
+    const expression = "this;";
+    const { selectedFrame, setPopupObjectProperties } = this.props;
+    const value = selectedFrame.this;
+
+    const root = createNode(null, expression, expression, { value });
+    const properties = await loadItemProperties(root, createObjectClient);
+    if (properties) {
+      setPopupObjectProperties(value, properties);
+    }
+  }
+
+  renderReactComponent() {
+    const { selectedFrame, popupObjectProperties } = this.props;
+    const expression = "this;";
+    const value = selectedFrame.this;
+    const root = {
+      name: expression,
+      path: expression,
+      contents: { value }
+    };
+
+    const loadedRootProperties = popupObjectProperties[value.actor];
+
+    let roots = getChildren({
+      item: root,
+      loadedProperties: new Map([[root.path, loadedRootProperties]])
+    });
+
+    roots = roots.filter(r => ["state", "props"].includes(r.name));
+
+    return (
+      <div className="pane framework-component">
+        <ObjectInspector
+          roots={roots}
+          autoExpandAll={false}
+          autoExpandDepth={0}
+          disableWrap={true}
+          disabledFocus={true}
+          dimTopLevelWindow={true}
+          createObjectClient={grip => createObjectClient(grip)}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { selectedFrame } = this.props;
+    if (isReactComponent(selectedFrame.this)) {
+      return this.renderReactComponent();
+    }
+
+    return null;
+  }
+}
+
+export default connect(
+  state => {
+    return {
+      selectedFrame: getSelectedFrame(state),
+      popupObjectProperties: getAllPopupObjectProperties(state)
+    };
+  },
+  dispatch => bindActionCreators(actions, dispatch)
+)(FrameworkComponent);

src/components/SecondaryPanes/index.js

@@ -18,7 +18,8 @@ import {
   getIsWaitingOnBreak,
   getShouldPauseOnExceptions,
   getShouldIgnoreCaughtExceptions,
-  getWorkers
+  getWorkers,
+  getExtra
 } from "../../selectors";
 
 import Svg from "../shared/Svg";
@@ -34,6 +35,7 @@ import Accordion from "../shared/Accordion";
 import CommandBar from "./CommandBar";
 import UtilsBar from "./UtilsBar";
 import renderBreakpointsDropdown from "./BreakpointsDropdown";
+import FrameworkComponent from "./FrameworkComponent";
 
 import _chromeScopes from "./ChromeScopes";
 import _Scopes from "./Scopes";
@@ -67,6 +69,7 @@ function debugBtn(onClick, type, className, tooltip) {
 }
 
 type Props = {
+  extra: Object,
   evaluateExpressions: Function,
   hasFrames: boolean,
   horizontal: boolean,
@@ -151,6 +154,20 @@ class SecondaryPanes extends Component<Props> {
     };
   }
 
+  getComponentItem() {
+    const { extra: { react } } = this.props;
+
+    return {
+      header: react.displayName,
+      className: "component-pane",
+      component: <FrameworkComponent />,
+      opened: prefs.componentVisible,
+      onToggle: opened => {
+        prefs.componentVisible = opened;
+      }
+    };
+  }
+
   getWatchItem(): AccordionPaneItem {
     return {
       header: L10N.getStr("watchExpressions.header"),
@@ -224,7 +241,7 @@ class SecondaryPanes extends Component<Props> {
   }
 
   getStartItems() {
-    const { workers } = this.props;
+    const { extra, workers } = this.props;
 
     const items: Array<AccordionPaneItem> = [];
     if (this.props.horizontal) {
@@ -239,7 +256,12 @@ class SecondaryPanes extends Component<Props> {
 
     if (this.props.hasFrames) {
       items.push(this.getCallStackItem());
+
       if (this.props.horizontal) {
+        if (extra && extra.react) {
+          items.push(this.getComponentItem());
+        }
+
         items.push(this.getScopeItem());
       }
     }
@@ -260,7 +282,7 @@ class SecondaryPanes extends Component<Props> {
   }
 
   getEndItems() {
-    const { workers } = this.props;
+    const { extra, workers } = this.props;
 
     let items: Array<AccordionPaneItem> = [];
 
@@ -274,6 +296,10 @@ class SecondaryPanes extends Component<Props> {
 
     items.push(this.getWatchItem());
 
+    if (extra && extra.react) {
+      items.push(this.getComponentItem());
+    }
+
     if (this.props.hasFrames) {
       items = [...items, this.getScopeItem()];
     }
@@ -332,6 +358,7 @@ SecondaryPanes.contextTypes = {
 
 export default connect(
   state => ({
+    extra: getExtra(state),
     hasFrames: !!getTopFrame(state),
     breakpoints: getBreakpoints(state),
     breakpointsDisabled: getBreakpointsDisabled(state),

src/reducers/pause.js

@@ -32,6 +32,7 @@ export type Command =
   | "expression";
 
 export type PauseState = {
+  extra: ?Object,
   why: ?Why,
   isWaitingOnBreak: boolean,
   frames: ?(any[]),
@@ -68,6 +69,7 @@ export type PauseState = {
 };
 
 export const createPauseState = (): PauseState => ({
+  extra: {},
   why: null,
   isWaitingOnBreak: false,
   frames: undefined,
@@ -129,7 +131,7 @@ function update(
     }
 
     case "ADD_SCOPES": {
-      const { frame, status, value } = action;
+      const { frame, extra, status, value } = action;
       const selectedFrameId = frame.id;
 
       const generated = {
@@ -141,6 +143,7 @@ function update(
       };
       return {
         ...state,
+        extra: extra,
         frameScopes: {
           ...state.frameScopes,
           generated
@@ -330,6 +333,10 @@ export function getCanRewind(state: OuterState) {
   return state.pause.canRewind;
 }
 
+export function getExtra(state: OuterState) {
+  return state.pause.extra;
+}
+
 export function getFrames(state: OuterState) {
   return state.pause.frames;
 }

src/utils/prefs.js

@@ -19,6 +19,7 @@ if (isDevelopment()) {
   pref("devtools.debugger.ignore-caught-exceptions", false);
   pref("devtools.debugger.call-stack-visible", true);
   pref("devtools.debugger.scopes-visible", true);
+  pref("devtools.debugger.component-visible", true);
   pref("devtools.debugger.workers-visible", true);
   pref("devtools.debugger.expressions-visible", true);
   pref("devtools.debugger.breakpoints-visible", true);
@@ -61,6 +62,7 @@ export const prefs = new PrefsHelper("devtools", {
   ignoreCaughtExceptions: ["Bool", "debugger.ignore-caught-exceptions"],
   callStackVisible: ["Bool", "debugger.call-stack-visible"],
   scopesVisible: ["Bool", "debugger.scopes-visible"],
+  componentVisible: ["Bool", "debugger.component-visible"],
   workersVisible: ["Bool", "debugger.workers-visible"],
   breakpointsVisible: ["Bool", "debugger.breakpoints-visible"],
   expressionsVisible: ["Bool", "debugger.expressions-visible"],