Do not create an ObjectInspector element for primitive grips.

When we have a single primitive root, there's no advantage rendering
them inside the ObjectInspector component. On the contrary, it adds
some overhead that can harm performances.
This patch allow us to branch early so we don't go through the ObjectInspector
element if we don't need to.

Author: nchevobbe

packages/devtools-reps/src/object-inspector/component.js

@@ -16,13 +16,6 @@ const Tree = createFactory(Components.Tree);
 require("./index.css");
 
 const classnames = require("classnames");
-
-const {
-  REPS: {
-    Rep,
-    Grip,
-  },
-} = require("../reps/rep");
 const {
   MODE,
 } = require("../reps/constants");
@@ -265,7 +258,7 @@ class ObjectInspector extends Component {
       )
     ) {
       return {
-        label: this.renderGrip(
+        label: Utils.renderRep(
           item,
           {
             ...this.props,
@@ -293,7 +286,7 @@ class ObjectInspector extends Component {
 
       return {
         label,
-        value: this.renderGrip(item, repsProp)
+        value: Utils.renderRep(item, repsProp)
       };
     }
 
@@ -412,19 +405,6 @@ class ObjectInspector extends Component {
     );
   }
 
-  renderGrip(
-    item: Node,
-    props: Props
-  ) {
-    const object = getValue(item);
-    return Rep({
-      ...props,
-      object,
-      mode: props.mode || MODE.TINY,
-      defaultRep: Grip,
-    });
-  }
-
   render() {
     const {
       autoExpandAll = true,
@@ -436,15 +416,6 @@ class ObjectInspector extends Component {
       inline,
     } = this.props;
 
-    let roots = this.getRoots();
-    if (roots.length === 1) {
-      const root = roots[0];
-      const name = root && root.name;
-      if (nodeIsPrimitive(root) && (name === null || typeof name === "undefined")) {
-        return this.renderGrip(root, this.props);
-      }
-    }
-
     return Tree({
       className: classnames({
         inline,

packages/devtools-reps/src/object-inspector/index.js

@@ -7,6 +7,11 @@ const { createElement, createFactory, PureComponent } = require("react");
 const { Provider } = require("react-redux");
 const ObjectInspector = createFactory(require("./component"));
 const createStore = require("./store");
+const Utils = require("./utils");
+const {
+  renderRep,
+  shouldRenderRootsInReps
+} = Utils;
 
 import type { Props, State } from "./types";
 
@@ -32,4 +37,10 @@ class OI extends PureComponent {
   }
 }
 
-module.exports = OI;
+module.exports = (props: Props) => {
+  let {roots} = props;
+  if (shouldRenderRootsInReps(roots)) {
+    return renderRep(roots[0], props);
+  }
+  return new OI(props);
+};

packages/devtools-reps/src/object-inspector/tests/component/basic.js

@@ -63,7 +63,7 @@ describe("ObjectInspector - renders", () => {
     expect(formatObjectInspector(oi)).toMatchSnapshot();
   });
 
-  it("directly renders a Rep with the stub is not expandable", () => {
+  it("directly renders a Rep when the stub is not expandable", () => {
     const object = 42;
 
     const renderObjectInspector = mode =>

packages/devtools-reps/src/object-inspector/tests/utils/should-render-roots-in-reps.js

@@ -0,0 +1,74 @@
+/* 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/. */
+
+const Utils = require("../../utils");
+const { shouldRenderRootsInReps } = Utils;
+
+const nullStubs = require("../../../reps/stubs/null");
+const numberStubs = require("../../../reps/stubs/number");
+const undefinedStubs = require("../../../reps/stubs/undefined");
+const gripStubs = require("../../../reps/stubs/grip");
+const gripArrayStubs = require("../../../reps/stubs/grip-array");
+const symbolStubs = require("../../../reps/stubs/symbol");
+
+describe("shouldRenderRootsInReps", () => {
+  it("returns true for a string", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: "Hello" }
+    }])).toBeTruthy();
+  });
+
+  it("returns true for an integer", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: numberStubs.get("Int") }
+    }])).toBeTruthy();
+  });
+
+  it("returns true for undefined", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: undefinedStubs.get("Undefined") }
+    }])).toBeTruthy();
+  });
+
+  it("returns true for null", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: nullStubs.get("Null") }
+    }])).toBeTruthy();
+  });
+
+  it("returns true for Symbols", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: symbolStubs.get("Symbol") }
+    }])).toBeTruthy();
+  });
+
+  it("returns false when there are multiple primitive roots", () => {
+    expect(shouldRenderRootsInReps([{
+      contents: { value: "Hello" }
+    }, {
+      contents: { value: 42 }
+    }])).toBeFalsy();
+  });
+
+  it("returns false for primitive when the root specifies a name", () => {
+    expect(shouldRenderRootsInReps([{
+      name: "label",
+      contents: {value: 42}
+    }])).toBeFalsy();
+  });
+
+  it("returns false for Grips", () => {
+    expect(shouldRenderRootsInReps([{
+      name: "label",
+      contents: {value: gripStubs.get("testMaxProps")}
+    }])).toBeFalsy();
+  });
+
+  it("returns false for Arrays", () => {
+    expect(shouldRenderRootsInReps([{
+      name: "label",
+      contents: {value: gripArrayStubs.get("testMaxProps")}
+    }])).toBeFalsy();
+  });
+});

packages/devtools-reps/src/object-inspector/utils/index.js

@@ -2,14 +2,51 @@
  * 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
+
 const client = require("./client");
 const loadProperties = require("./load-properties");
 const node = require("./node");
+const { nodeIsPrimitive } = node;
 const selection = require("./selection");
 
+const { MODE } = require("../../reps/constants");
+const {
+  REPS: {
+    Rep,
+    Grip,
+  },
+} = require("../../reps/rep");
+import type { Node, Props } from "../types";
+
+function shouldRenderRootsInReps(roots: Array<Node>) : boolean {
+  if (roots.length > 1) {
+    return false;
+  }
+
+  const root = roots[0];
+  const name = root && root.name;
+  return nodeIsPrimitive(root)
+    && (name === null || typeof name === "undefined");
+}
+
+function renderRep(
+  item: Node,
+  props: Props
+) {
+  return Rep({
+    ...props,
+    object: node.getValue(item),
+    mode: props.mode || MODE.TINY,
+    defaultRep: Grip,
+  });
+}
+
 module.exports = {
   client,
   loadProperties,
   node,
+  renderRep,
   selection,
+  shouldRenderRootsInReps,
 };