Add a new BLOCK node type in the ObjectInspector.

Fixes #940.

Author: nchevobbe

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

@@ -36,6 +36,7 @@ const {
   getValue,
   nodeHasAccessors,
   nodeHasProperties,
+  nodeIsBlock,
   nodeIsDefaultProperties,
   nodeIsFunction,
   nodeIsGetter,
@@ -359,7 +360,8 @@ class ObjectInspector extends Component {
               && nodeIsWindow(item)
               && depth === 0
             )
-        )
+        ),
+        block: nodeIsBlock(item)
       }),
       onClick: e => {
         e.stopPropagation();

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

@@ -22,6 +22,16 @@
   color: var(--theme-comment);
 }
 
+.tree.object-inspector .block .object-label,
+.tree.object-inspector .block .object-label * {
+  color: var(--grey-90, #0c0c0d);
+  font-weight: bold;
+}
+
+.tree.object-inspector .block .object-label:before {
+  content: "☲ ";
+}
+
 .object-inspector .object-delimiter {
   color: var(--theme-comment);
 }

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

@@ -10,6 +10,12 @@ exports[`ObjectInspector - renders renders as expected 4`] = `"▶︎ {…}"`;
 
 exports[`ObjectInspector - renders renders as expected when not provided a name 1`] = `"▶︎ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", … }"`;
 
+exports[`ObjectInspector - renders renders block nodes as expected 1`] = `
+"▼ ☲ Block
+|    a: 30
+|    b: 32"
+`;
+
 exports[`ObjectInspector - renders renders objects as expected when provided a name 1`] = `"▶︎ myproperty: Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", … }"`;
 
 exports[`ObjectInspector - renders renders primitives as expected when provided a name 1`] = `"  myproperty: 42"`;

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

@@ -240,6 +240,36 @@ describe("ObjectInspector - renders", () => {
     expect(protoElementNode.hasClass("lessen")).toBe(false);
   });
 
+  it("renders block nodes as expected", () => {
+    const blockNode = createNode(
+      null,
+      "Block",
+      "/block-1",
+      [{
+        name: "a",
+        contents: {
+          value: 30,
+        }
+      }, {
+        name: "b",
+        contents: {
+          value: 32,
+        }
+      }],
+      NODE_TYPES.BLOCK
+    );
+
+    let oi = mount(ObjectInspector(generateDefaults({
+      roots: [blockNode],
+      autoExpandDepth: 1,
+    })));
+
+    let blockElementNode = oi.find(".node").first();
+    expect(blockElementNode.hasClass("block")).toBe(true);
+
+    expect(formatObjectInspector(oi)).toMatchSnapshot();
+  });
+
   it("updates when the root changes", () => {
     let oi = mount(ObjectInspector(generateDefaults({
       roots: [{

packages/devtools-reps/src/object-inspector/tests/test-utils.js

@@ -34,7 +34,12 @@ function formatObjectInspector(wrapper: Object) {
       } else {
         arrowStr = "  ";
       }
-      return `${indentStr}${arrowStr}${getSanitizedNodeText(node)}`;
+
+      let icon = "";
+      if (node.find(".node").first().hasClass("block")) {
+        icon = "☲ ";
+      }
+      return `${indentStr}${arrowStr}${icon}${getSanitizedNodeText(node)}`;
     })
     .join("\n");
 }

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

@@ -27,6 +27,7 @@ const NODE_TYPES = {
   PROXY_TARGET: Symbol("<target>"),
   SET: Symbol("<set>"),
   PROTOTYPE: Symbol("__proto__"),
+  BLOCK: Symbol("☲"),
 };
 
 import type {
@@ -201,6 +202,12 @@ function nodeIsSetter(
   return getType(item) === NODE_TYPES.SET;
 }
 
+function nodeIsBlock(
+  item: Node
+) {
+  return getType(item) === NODE_TYPES.BLOCK;
+}
+
 function nodeHasAccessors(item: Node) : boolean {
   return !!getNodeGetter(item) || !!getNodeSetter(item);
 }
@@ -800,6 +807,7 @@ module.exports = {
   nodeHasChildren,
   nodeHasEntries,
   nodeHasProperties,
+  nodeIsBlock,
   nodeIsBucket,
   nodeIsDefaultProperties,
   nodeIsEntries,