Bug 1580064 - Replace ObjectInspector symbol with better delimeter. r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D45286 --HG-- extra : moz-landing-system : lando
2024-10-22 17:55:50 +00:00 · 2019-09-10 22:47:42 +00:00 · 2019-09-10 22:47:42 +00:00 · 7e368acde2
commit 7e368acde2
parent fa6e0d0d38
15 changed files with 89 additions and 119 deletions
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/snapshots/window.js.snap
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/snapshots/window.js.snap
@ -17,7 +17,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders collapsed top-level window
    aria-level={1}
    className="tree-node"
    data-expandable={true}
-    id="Symbol(window)"
+    id="window"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
@ -56,7 +56,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders collapsed top-level window

 exports[`ObjectInspector - dimTopLevelWindow renders sub-level window 1`] = `
 <div
-  aria-activedescendant="Symbol(root)"
+  aria-activedescendant="root"
  className="tree object-inspector"
  onBlur={[Function]}
  onFocus={[Function]}
@ -72,7 +72,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders sub-level window 1`] = `
    aria-level={1}
    className="tree-node focused"
    data-expandable={true}
-    id="Symbol(root)"
+    id="root"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
@ -96,7 +96,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders sub-level window 1`] = `
    aria-level={2}
    className="tree-node"
    data-expandable={true}
-    id="Symbol(window)"
+    id="window"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
@ -155,7 +155,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders window as expected when dim
    aria-level={1}
    className="tree-node"
    data-expandable={true}
-    id="Symbol(window)"
+    id="window"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
@ -194,7 +194,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders window as expected when dim

 exports[`ObjectInspector - dimTopLevelWindow renders window as expected when dimTopLevelWindow is true 2`] = `
 <div
-  aria-activedescendant="Symbol(window)"
+  aria-activedescendant="window"
  className="tree object-inspector"
  onBlur={[Function]}
  onFocus={[Function]}
@ -210,7 +210,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders window as expected when dim
    aria-level={1}
    className="tree-node focused"
    data-expandable={true}
-    id="Symbol(window)"
+    id="window"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
@ -248,7 +248,7 @@ exports[`ObjectInspector - dimTopLevelWindow renders window as expected when dim
    aria-level={2}
    className="tree-node"
    data-expandable={false}
-    id="Symbol(window/<prototype>)"
+    id="window◦<prototype>"
    onClick={[Function]}
    onKeyDownCapture={null}
    role="treeitem"
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/basic.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/basic.js
@ -335,7 +335,7 @@ describe("ObjectInspector - renders", () => {
      autoExpandDepth: 1,
    });

-    await waitForLoadedProperties(store, ["Symbol(Block)"]);
+    await waitForLoadedProperties(store, ["Block"]);
    wrapper.update();

    const blockElementNode = wrapper.find(".node").first();
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/create-object-client.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/create-object-client.js
@ -49,7 +49,10 @@ describe("createObjectClient", () => {

  it("is called with the expected object for entries node", () => {
    const grip = Symbol();
-    const mapStubNode = createNode({ name: "map", contents: { value: grip } });
+    const mapStubNode = createNode({
+      name: "map",
+      contents: { value: grip },
+    });
    const entriesNode = makeNodesForEntries(mapStubNode);

    const { client } = mount({
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/entries.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/entries.js
@ -74,8 +74,8 @@ describe("ObjectInspector - entries", () => {
    );

    await waitForLoadedProperties(store, [
-      "Symbol(root/<entries>/0)",
-      "Symbol(root/<entries>/1)",
+      "root◦<entries>◦0",
+      "root◦<entries>◦1",
    ]);

    wrapper.update();
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/expand.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/expand.js
@ -138,7 +138,7 @@ describe("ObjectInspector - state", () => {
      storeHasExactExpandedPaths(store, [
        "root-1",
        "root-2",
-        "Symbol(root-1/<prototype>)",
+        "root-1◦<prototype>",
      ])
    ).toBeTruthy();

@ -178,9 +178,7 @@ describe("ObjectInspector - state", () => {
    // Once all the loading promises are resolved, actors and loadedProperties
    // should have the expected values.
    expect(formatObjectInspector(wrapper)).toMatchSnapshot();
-    expect(
-      storeHasLoadedProperty(store, "Symbol(root-1/<prototype>)")
-    ).toBeTruthy();
+    expect(storeHasLoadedProperty(store, "root-1◦<prototype>")).toBeTruthy();

    expect(
      getActors(store.getState()).has(protoStub.prototype.actor)
@ -217,9 +215,7 @@ describe("ObjectInspector - state", () => {
    wrapper.update();

    expect(formatObjectInspector(wrapper)).toMatchSnapshot();
-    expect(
-      storeHasLoadedProperty(store, "Symbol(root-2/<handler>)")
-    ).toBeTruthy();
+    expect(storeHasLoadedProperty(store, "root-2◦<handler>")).toBeTruthy();
  });

  it("does not expand if the user selected some text", async () => {
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/test-utils.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/test-utils.js
@ -42,14 +42,14 @@ const {
 * Takes an Enzyme wrapper (obtained with mount/shallow/…) and
 * returns a stringified version of the ObjectInspector, e.g.
 *
- *   ▼ Map { Symbol(a) → "value-a", Symbol(b) → "value-b" }
+ *   ▼ Map { "a" → "value-a", "b" → "value-b" }
 *   |    size : 2
 *   |  ▼ <entries>
- *   |  |  ▼ 0 : Symbol(a) → "value-a"
- *   |  |  |    <key> : Symbol(a)
+ *   |  |  ▼ 0 : "a" → "value-a"
+ *   |  |  |    <key> : "a"
 *   |  |  |    <value> : "value-a"
- *   |  |  ▼ 1 : Symbol(b) → "value-b"
- *   |  |  |    <key> : Symbol(b)
+ *   |  |  ▼ 1 : "b" → "value-b"
+ *   |  |  |    <key> : "b"
 *   |  |  |    <value> : "value-b"
 *   |  ▼ <prototype> : Object { … }
 *
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/snapshots/promises.js.snap
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/snapshots/promises.js.snap
@ -24,7 +24,7 @@ Array [
      },
      "path": "root",
    },
-    "path": Symbol(root/<state>),
+    "path": "root◦<state>",
    "type": Symbol(<state>),
  },
  Object {
@ -51,7 +51,7 @@ Array [
      },
      "path": "root",
    },
-    "path": Symbol(root/<reason>),
+    "path": "root◦<reason>",
    "type": Symbol(<reason>),
  },
 ]
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/create-node.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/create-node.js
@ -60,7 +60,7 @@ describe("createNode", () => {
  it("uses the name property for the path when path is not provided", () => {
    expect(
      createNode({ name: "name", contents: "contents" }).path.toString()
-    ).toBe("Symbol(name)");
+    ).toBe("name");
  });

  it("wraps the path in a Symbol when provided", () => {
@ -70,7 +70,7 @@ describe("createNode", () => {
        path: "path",
        contents: "contents",
      }).path.toString()
-    ).toBe("Symbol(path)");
+    ).toBe("path");
  });

  it("uses parent path to compute its path", () => {
@ -82,6 +82,6 @@ describe("createNode", () => {
        path: "path",
        contents: "contents",
      }).path.toString()
-    ).toBe("Symbol(root/path)");
+    ).toBe("root◦path");
  });
 });
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/get-children.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/get-children.js
@ -41,7 +41,7 @@ describe("getChildren", () => {
    const paths = children.map(n => n.path.toString());

    expect(names).toEqual(["x", "<get x()>"]);
-    expect(paths).toEqual(["Symbol(rootpath/x)", "Symbol(rootpath/<get x()>)"]);
+    expect(paths).toEqual(["rootpath◦x", "rootpath◦<get x()>"]);
  });

  it("accessors - setter", () => {
@ -53,7 +53,7 @@ describe("getChildren", () => {
    const paths = children.map(n => n.path.toString());

    expect(names).toEqual(["x", "<set x()>"]);
-    expect(paths).toEqual(["Symbol(rootpath/x)", "Symbol(rootpath/<set x()>)"]);
+    expect(paths).toEqual(["rootpath◦x", "rootpath◦<set x()>"]);
  });

  it("accessors - getter & setter", () => {
@ -68,9 +68,9 @@ describe("getChildren", () => {

    expect(names).toEqual(["x", "<get x()>", "<set x()>"]);
    expect(paths).toEqual([
-      "Symbol(rootpath/x)",
-      "Symbol(rootpath/<get x()>)",
-      "Symbol(rootpath/<set x()>)",
+      "rootpath◦x",
+      "rootpath◦<get x()>",
+      "rootpath◦<set x()>",
    ]);
  });

@ -88,10 +88,7 @@ describe("getChildren", () => {
    const paths = nodes.map(n => n.path.toString());

    expect(names).toEqual(["<target>", "<handler>"]);
-    expect(paths).toEqual([
-      "Symbol(rootpath/<target>)",
-      "Symbol(rootpath/<handler>)",
-    ]);
+    expect(paths).toEqual(["rootpath◦<target>", "rootpath◦<handler>"]);
  });

  it("safeGetterValues", () => {
@ -138,9 +135,7 @@ describe("getChildren", () => {
      ["unloadEventStart", 0],
      ["<prototype>", stub.prototype],
    ];
-    const childrenPaths = childrenEntries.map(
-      ([name]) => `Symbol(rootpath/${name})`
-    );
+    const childrenPaths = childrenEntries.map(([name]) => `rootpath◦${name}`);

    expect(nodeEntries).toEqual(childrenEntries);
    expect(nodePaths).toEqual(childrenPaths);
@ -153,7 +148,7 @@ describe("getChildren", () => {
        value: gripMapStubs.get("testSymbolKeyedMap"),
      },
    });
-    const cachedData = Symbol();
+    const cachedData = "";
    const children = getChildren({
      cachedNodes: new Map([[mapNode.path, cachedData]]),
      item: mapNode,
@ -205,7 +200,7 @@ describe("getChildren", () => {

  it("adds children to cache when it already has some", () => {
    const cachedNodes = new Map();
-    const children = [Symbol()];
+    const children = [""];
    const rootNode = createNode({ name: "root", contents: children });
    getChildren({
      cachedNodes,
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/make-node-for-properties.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/make-node-for-properties.js
@ -44,11 +44,7 @@ describe("makeNodesForProperties", () => {
    expect(names).toEqual(["0", "length", "<prototype>"]);

    const paths = nodes.map(n => n.path.toString());
-    expect(paths).toEqual([
-      "Symbol(root/0)",
-      "Symbol(root/length)",
-      "Symbol(root/<prototype>)",
-    ]);
+    expect(paths).toEqual(["root◦0", "root◦length", "root◦<prototype>"]);
  });

  it("includes getters and setters", () => {
@ -93,12 +89,12 @@ describe("makeNodesForProperties", () => {
    ]);

    expect(paths).toEqual([
-      "Symbol(root/bar)",
-      "Symbol(root/baz)",
-      "Symbol(root/foo)",
-      "Symbol(root/<get bar()>)",
-      "Symbol(root/<set baz()>)",
-      "Symbol(root/<prototype>)",
+      "root◦bar",
+      "root◦baz",
+      "root◦foo",
+      "root◦<get bar()>",
+      "root◦<set baz()>",
+      "root◦<prototype>",
    ]);
  });

@ -143,12 +139,12 @@ describe("makeNodesForProperties", () => {

    expect(names).toEqual(["1", "2", "11", "_bar", "bar", "<prototype>"]);
    expect(paths).toEqual([
-      "Symbol(root/1)",
-      "Symbol(root/2)",
-      "Symbol(root/11)",
-      "Symbol(root/_bar)",
-      "Symbol(root/bar)",
-      "Symbol(root/<prototype>)",
+      "root◦1",
+      "root◦2",
+      "root◦11",
+      "root◦_bar",
+      "root◦bar",
+      "root◦<prototype>",
    ]);
  });

@ -167,7 +163,7 @@ describe("makeNodesForProperties", () => {
    const paths = nodes.map(n => n.path.toString());

    expect(names).toEqual(["bar", "<prototype>"]);
-    expect(paths).toEqual(["Symbol(root/bar)", "Symbol(root/<prototype>)"]);
+    expect(paths).toEqual(["root◦bar", "root◦<prototype>"]);

    expect(nodeIsPrototype(nodes[1])).toBe(true);
  });
@ -191,10 +187,7 @@ describe("makeNodesForProperties", () => {
    const paths = nodes.map(n => n.path.toString());

    expect(names).toEqual(["bar", "<default properties>"]);
-    expect(paths).toEqual([
-      "Symbol(root/bar)",
-      "Symbol(root/<default properties>)",
-    ]);
+    expect(paths).toEqual(["root◦bar", "root◦<default properties>"]);

    expect(nodeIsDefaultProperties(nodes[1])).toBe(true);
  });
@ -224,11 +217,7 @@ describe("makeNodesForProperties", () => {
    const paths = nodes.map(n => n.path.toString());

    expect(names).toEqual(["custom", "size", "<entries>"]);
-    expect(paths).toEqual([
-      "Symbol(root/custom)",
-      "Symbol(root/size)",
-      "Symbol(root/<entries>)",
-    ]);
+    expect(paths).toEqual(["root◦custom", "root◦size", "root◦<entries>"]);

    const entriesNode = nodes[2];
    expect(nodeIsEntries(entriesNode)).toBe(true);
@ -243,10 +232,7 @@ describe("makeNodesForProperties", () => {
    const childrenNames = children.map(n => n.name);
    const childrenPaths = children.map(n => n.path.toString());
    expect(childrenNames).toEqual([0, 1]);
-    expect(childrenPaths).toEqual([
-      "Symbol(root/<entries>/0)",
-      "Symbol(root/<entries>/1)",
-    ]);
+    expect(childrenPaths).toEqual(["root◦<entries>◦0", "root◦<entries>◦1"]);
  });

  it("quotes property names", () => {
@ -277,11 +263,11 @@ describe("makeNodesForProperties", () => {
      "<prototype>",
    ]);
    expect(paths).toEqual([
-      'Symbol(root/"")',
-      "Symbol(root/332217)",
-      'Symbol(root/"needs-quotes")',
-      "Symbol(root/unquoted)",
-      "Symbol(root/<prototype>)",
+      'root◦""',
+      "root◦332217",
+      'root◦"needs-quotes"',
+      "root◦unquoted",
+      "root◦<prototype>",
    ]);
  });
 });
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/make-numerical-buckets.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/utils/make-numerical-buckets.js
@ -21,9 +21,9 @@ describe("makeNumericalBuckets", () => {
    expect(names).toEqual(["[0…99]", "[100…199]", "[200…233]"]);

    expect(paths).toEqual([
-      "Symbol(root/[0…99])",
-      "Symbol(root/[100…199])",
-      "Symbol(root/[200…233])",
+      "root◦[0…99]",
+      "root◦[100…199]",
+      "root◦[200…233]",
    ]);
  });

@ -42,7 +42,7 @@ describe("makeNumericalBuckets", () => {

    expect(names).toEqual(["[0…99]", "100"]);

-    expect(paths).toEqual(["Symbol(root/bucket_0-99)", "Symbol(root/100)"]);
+    expect(paths).toEqual(["root◦bucket_0-99", "root◦100"]);
  });

  // TODO: Re-enable when we have support for lonely node.
@ -61,8 +61,8 @@ describe("makeNumericalBuckets", () => {
    expect(names).toEqual(["[0…99]", "[100…101]"]);

    expect(paths).toEqual([
-      "Symbol(root/bucket_0-99)",
-      "Symbol(root/bucket_100-101)",
+      "root◦bucket_0-99",
+      "root◦bucket_100-101",
    ]);
  });

@ -119,9 +119,9 @@ describe("makeNumericalBuckets", () => {
      "[800…899]",
      "[900…999]",
    ]);
-    expect(firstBucketPaths[0]).toEqual("Symbol(root/[0…999]/[0…99])");
+    expect(firstBucketPaths[0]).toEqual("root◦[0…999]◦[0…99]");
    expect(firstBucketPaths[firstBucketPaths.length - 1]).toEqual(
-      "Symbol(root/[0…999]/[900…999])"
+      "root◦[0…999]◦[900…999]"
    );

    const lastBucketNodes = makeNumericalBuckets(nodes[nodes.length - 1]);
@ -135,10 +135,10 @@ describe("makeNumericalBuckets", () => {
      "[23400…23455]",
    ]);
    expect(lastBucketPaths[0]).toEqual(
-      "Symbol(root/[23000…23455]/[23000…23099])"
+      "root◦[23000…23455]◦[23000…23099]"
    );
    expect(lastBucketPaths[lastBucketPaths.length - 1]).toEqual(
-      "Symbol(root/[23000…23455]/[23400…23455])"
+      "root◦[23000…23455]◦[23400…23455]"
    );
  });
 });
--- a/devtools/client/debugger/packages/devtools-reps/src/object-inspector/utils/node.js
+++ b/devtools/client/debugger/packages/devtools-reps/src/object-inspector/utils/node.js
@ -380,7 +380,7 @@ function makeNodesForEntries(item: Node): Node {
        return createNode({
          parent: item,
          name: index,
-          path: `${entriesPath}/${index}`,
+          path: createPath(entriesPath, index),
          contents: { value: GripMapEntryRep.createGripMapEntry(key, value) },
        });
      });
@ -389,7 +389,7 @@ function makeNodesForEntries(item: Node): Node {
        return createNode({
          parent: item,
          name: index,
-          path: `${entriesPath}/${index}`,
+          path: createPath(entriesPath, index),
          contents: { value },
        });
      });
@ -522,7 +522,7 @@ function makeDefaultPropsBucket(
      createNode({
        parent: defaultPropertiesNode,
        name: maybeEscapePropertyName(name),
-        path: `${index}/${name}`,
+        path: createPath(index, name),
        contents: ownProperties[name],
      })
    );
@ -676,16 +676,12 @@ function createNode(options: {

  // The path is important to uniquely identify the item in the entire
  // tree. This helps debugging & optimizes React's rendering of large
-  // lists. The path will be separated by property name, wrapped in a Symbol
-  // to avoid name clashing,
-  // i.e. `{ foo: { bar: { baz: 5 }}}` will have a path of Symbol(`foo/bar/baz`)
-  // for the inner object.
+  // lists. The path will be separated by property name.
+
  return {
    parent,
    name,
-    path: parent
-      ? Symbol(`${getSymbolDescriptor(parent.path)}/${path || name}`)
-      : Symbol(path || name),
+    path: createPath(parent && parent.path, path || name),
    contents,
    type,
    meta,
@ -710,10 +706,6 @@ function createSetterNode({ parent, property, name }) {
  });
 }

-function getSymbolDescriptor(symbol: Symbol | string): string {
-  return symbol.toString().replace(/^(Symbol\()(.*)(\))$/, "$2");
-}
-
 function setNodeChildren(node: Node, children: Array<Node>): Node {
  node.contents = children;
  return node;
@ -917,6 +909,10 @@ function getNonPrototypeParentGripValue(item: Node | null): Node | null {
  return getValue(parentGripNode);
 }

+function createPath(parentPath, path) {
+  return parentPath ? `${parentPath}◦${path}` : path;
+}
+
 module.exports = {
  createNode,
  createGetterNode,
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@ -1894,7 +1894,7 @@ function makeNodesForEntries(item) {
        return createNode({
          parent: item,
          name: index,
-          path: `${entriesPath}/${index}`,
+          path: createPath(entriesPath, index),
          contents: {
            value: GripMapEntryRep.createGripMapEntry(key, value)
          }
@ -1905,7 +1905,7 @@ function makeNodesForEntries(item) {
        return createNode({
          parent: item,
          name: index,
-          path: `${entriesPath}/${index}`,
+          path: createPath(entriesPath, index),
          contents: {
            value
          }
@ -2030,7 +2030,7 @@ function makeDefaultPropsBucket(propertiesNames, parent, ownProperties) {
    const defaultNodes = defaultProperties.map((name, index) => createNode({
      parent: defaultPropertiesNode,
      name: maybeEscapePropertyName(name),
-      path: `${index}/${name}`,
+      path: createPath(index, name),
      contents: ownProperties[name]
    }));
    nodes.push(setNodeChildren(defaultPropertiesNode, defaultNodes));
@ -2174,16 +2174,13 @@ function createNode(options) {
    return null;
  } // The path is important to uniquely identify the item in the entire
  // tree. This helps debugging & optimizes React's rendering of large
-  // lists. The path will be separated by property name, wrapped in a Symbol
-  // to avoid name clashing,
-  // i.e. `{ foo: { bar: { baz: 5 }}}` will have a path of Symbol(`foo/bar/baz`)
-  // for the inner object.
+  // lists. The path will be separated by property name.


  return {
    parent,
    name,
-    path: parent ? Symbol(`${getSymbolDescriptor(parent.path)}/${path || name}`) : Symbol(path || name),
+    path: createPath(parent && parent.path, path || name),
    contents,
    type,
    meta
@ -2220,10 +2217,6 @@ function createSetterNode({
  });
 }

-function getSymbolDescriptor(symbol) {
-  return symbol.toString().replace(/^(Symbol\()(.*)(\))$/, "$2");
-}
-
 function setNodeChildren(node, children) {
  node.contents = children;
  return node;
@ -2425,6 +2418,10 @@ function getNonPrototypeParentGripValue(item) {
  return getValue(parentGripNode);
 }

+function createPath(parentPath, path) {
+  return parentPath ? `${parentPath}◦${path}` : path;
+}
+
 module.exports = {
  createNode,
  createGetterNode,
--- a/devtools/client/webconsole/test/browser/browser_webconsole_object_ctrl_click.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_ctrl_click.js
@ -65,9 +65,6 @@ add_task(async function() {
    "The expected nodes are displayed"
  );

-  info("Expand the object in the console output");
-  object.click();
-  await waitFor(() => message.querySelectorAll(".node").length === 5);
  const cNode = message.querySelectorAll(".node")[3];
  info("Ctrl+click on the `c` property node to put it in the sidebar");
  EventUtils.sendMouseEvent(
--- a/devtools/client/webconsole/utils/object-inspector.js
+++ b/devtools/client/webconsole/utils/object-inspector.js
@ -103,7 +103,7 @@ function getObjectInspector(grip, serviceContainer, override = {}) {
 function createRootsFromGrip(grip) {
  return [
    {
-      path: Symbol((grip && grip.actor) || JSON.stringify(grip)),
+      path: (grip && grip.actor) || JSON.stringify(grip),
      contents: { value: grip },
    },
  ];