Bug 1847517 - [devtools] Tweak preview popup style. r=devtools-reviewers,ochameau.

Don't display the arrow on the root node, and remove the ability to collapse it. Add a border at the bottom of the root node so it looks like a header Add a new `HEADER` Rep mode that will be used for the root node, so we're showing relevant information in this context (e.g. the object type/class name) but not the preview when it would be redundant with the content of the tooltip. For example, we don't want to show the preview for simple objects, arrays, maps, … but we still have a "longer" description for objects where the properties in the preview are handpicked (e.g. elements, window, document, …) Differential Revision: https://phabricator.services.mozilla.com/D185770
2023-08-16 09:53:17 +00:00 · 2023-08-16 09:53:17 +00:00 · 69d2ab5554
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.css
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.css
@ -11,8 +11,9 @@
 }

 .popover .preview-popup {
-  padding: 10px;
+  padding: 5px 10px;
  max-width: 450px;
+  min-width: 200px;
 }

 .tooltip .preview-popup {
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@ -118,8 +118,9 @@ export class Popup extends Component {
        roots: [root],
        autoExpandDepth: 1,
        autoReleaseObjectActors: false,
-        mode: usesCustomFormatter ? MODE.LONG : null,
+        mode: usesCustomFormatter ? MODE.LONG : MODE.SHORT,
        disableWrap: true,
+        displayRootNodeAsHeader: true,
        focusable: false,
        openLink: this.props.openLink,
        defaultRep: Grip,
--- a/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js
@ -22,7 +22,8 @@ add_task(async function () {
    {
      line: 8,
      column: 4,
-      fields: [["secondCall()"]],
+      header: `function secondCall()`,
+      fields: [["name", `"secondCall"`]],
      expression: "secondCall",
    },
  ]);
@ -35,7 +36,8 @@ add_task(async function () {
    {
      line: 6,
      column: 12,
-      fields: [["firstCall()"]],
+      header: `function firstCall()`,
+      fields: [["name", `"firstCall"`]],
      expression: "firstCall",
    },
  ]);
@ -43,7 +45,8 @@ add_task(async function () {
    {
      line: 8,
      column: 4,
-      fields: [["secondCall()"]],
+      header: `function secondCall()`,
+      fields: [["name", `"secondCall"`]],
      expression: "secondCall",
    },
  ]);
--- a/devtools/client/debugger/test/mochitest/browser_dbg-preview-getter.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-preview-getter.js
@ -8,6 +8,9 @@
 "use strict";

 add_task(async function () {
+  // Make sure the toolbox is tall enough to be able to display the whole popup.
+  await pushPref("devtools.toolbox.footer.height", 500);
+
  const dbg = await initDebugger(
    "doc-preview-getter.html",
    "preview-getter.js"
@ -20,11 +23,7 @@ add_task(async function () {
  info("Hovers over 'this' token to display the preview.");
  const { tokenEl } = await tryHovering(dbg, 5, 8, "previewPopup");

-  info("Wait for top level node to expand");
-  await waitForElementWithSelector(
-    dbg,
-    ".preview-popup .tree-node:first-of-type .arrow.expanded"
-  );
+  info("Wait for properties to be loaded");
  await waitUntil(
    () => dbg.win.document.querySelectorAll(".preview-popup .node").length > 1
  );
--- a/devtools/client/debugger/test/mochitest/browser_dbg-preview.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-preview.js
@ -28,7 +28,7 @@ add_task(async function () {
  ]);

  await testPreviews(dbg, "objects", [
-    { line: 27, column: 10, expression: "empty", result: "{}" },
+    { line: 27, column: 10, expression: "empty", result: "Object" },
    { line: 28, column: 22, expression: "foo", result: 1 },
  ]);

@ -124,10 +124,6 @@ async function testBucketedArray(dbg) {
  );

  info("Wait for top level node to expand and child nodes to load");
-  await waitForElementWithSelector(
-    dbg,
-    ".preview-popup .node:first-of-type .arrow.expanded"
-  );
  await waitUntil(
    () => popupEl.querySelectorAll(".preview-popup .node").length > 1
  );
--- a/devtools/client/debugger/test/mochitest/shared-head.js
+++ b/devtools/client/debugger/test/mochitest/shared-head.js
@ -2311,7 +2311,7 @@ async function assertPreviewTextValue(
 * @param {Array} previews
 */
 async function assertPreviews(dbg, previews) {
-  for (const { line, column, expression, result, fields } of previews) {
+  for (const { line, column, expression, result, header, fields } of previews) {
    info(" # Assert preview on " + line + ":" + column);

    if (result) {
@ -2329,19 +2329,24 @@ async function assertPreviews(dbg, previews) {
        "popup"
      );

-      info("Wait for top level node to expand and child nodes to load");
-      await waitForElementWithSelector(
-        dbg,
-        ".preview-popup .node:first-of-type .arrow.expanded"
-      );
+      info("Wait for child nodes to load");
      await waitUntil(
        () => popupEl.querySelectorAll(".preview-popup .node").length > 1
      );
+      ok(true, "child nodes loaded");

      const oiNodes = Array.from(
        popupEl.querySelectorAll(".preview-popup .node")
      );

+      if (header) {
+        is(
+          oiNodes[0].querySelector(".objectBox").textContent,
+          header,
+          "popup has expected value"
+        );
+      }
+
      for (const [field, value] of fields) {
        const node = oiNodes.find(
          oiNode => oiNode.querySelector(".object-label")?.textContent === field
--- a/devtools/client/shared/components/object-inspector/components/ObjectInspector.css
+++ b/devtools/client/shared/components/object-inspector/components/ObjectInspector.css
@ -97,3 +97,19 @@ button.remove-watchpoint-getorset {
 .theme-light button[class*="remove-watchpoint-"]:hover {
  background-color: transparent;
 }
+
+
+/* Specific style for when root nodes are displayed as header (e.g. in debugger preview popup */
+.tree.object-inspector.header-root-node {
+  .tree-node[aria-level="1"] {
+    border-block-end: 1px solid var(--theme-splitter-color);
+    padding-block-end: 4px;
+    margin-block-end: 4px;
+    overflow-x: clip;
+    word-break: keep-all;
+  }
+
+  .tree-node:not([aria-level="1"]) .tree-indent:first-of-type {
+    width: 0;
+  }
+}
--- a/devtools/client/shared/components/object-inspector/components/ObjectInspector.js
+++ b/devtools/client/shared/components/object-inspector/components/ObjectInspector.js
@ -45,6 +45,9 @@ const {
  nodeHasGetter,
  nodeHasSetter,
 } = Utils.node;
+const {
+  MODE,
+} = require("resource://devtools/client/shared/components/reps/reps/constants.js");

 // This implements a component that renders an interactive inspector
 // for looking at JavaScript objects. It expects descriptions of
@ -224,7 +227,15 @@ class ObjectInspector extends Component {
  }

  setExpanded(item, expand) {
-    if (!this.isNodeExpandable(item)) {
+    if (
+      !this.isNodeExpandable(item) ||
+      // Don't allow to collapse header root node
+      (
+        this.props.displayRootNodeAsHeader &&
+        !expand &&
+        this.props.roots[0] == item
+      )
+    ) {
      return;
    }

@ -293,6 +304,7 @@ class ObjectInspector extends Component {
      disableWrap = false,
      expandedPaths,
      inline,
+      displayRootNodeAsHeader = false,
    } = this.props;

    const classNames = ["object-inspector"];
@ -302,6 +314,9 @@ class ObjectInspector extends Component {
    if (disableWrap) {
      classNames.push("nowrap");
    }
+    if (displayRootNodeAsHeader) {
+      classNames.push("header-root-node");
+    }

    return Tree({
      className: classNames.join(" "),
@ -332,6 +347,7 @@ class ObjectInspector extends Component {
          depth,
          focused,
          arrow,
+          mode: displayRootNodeAsHeader && this.props.roots[0] == item ? MODE.HEADER : this.props.mode ,
          expanded,
          setExpanded: this.setExpanded,
        }),
--- a/devtools/client/shared/components/object-inspector/components/ObjectInspectorItem.js
+++ b/devtools/client/shared/components/object-inspector/components/ObjectInspectorItem.js
@ -273,7 +273,7 @@ class ObjectInspectorItem extends Component {

    return dom.div(
      this.getTreeItemProps(),
-      arrow,
+      this.props.mode === MODE.HEADER ? null : arrow,
      labelElement,
      delimiter,
      value,
--- a/devtools/client/shared/components/reps/reps/comment-node.js
+++ b/devtools/client/shared/components/reps/reps/comment-node.js
@ -33,7 +33,7 @@ define(function (require, exports, module) {
    const { object, mode = MODE.SHORT, shouldRenderTooltip } = props;

    let { textContent } = object.preview;
-    if (mode === MODE.TINY) {
+    if (mode === MODE.TINY || mode === MODE.HEADER) {
      textContent = cropMultipleLines(textContent, 30);
    } else if (mode === MODE.SHORT) {
      textContent = cropString(textContent, 50);
--- a/devtools/client/shared/components/reps/reps/constants.js
+++ b/devtools/client/shared/components/reps/reps/constants.js
@ -11,6 +11,8 @@ define(function (require, exports, module) {
      TINY: Symbol("TINY"),
      SHORT: Symbol("SHORT"),
      LONG: Symbol("LONG"),
+      // Used by Debugger Preview popup
+      HEADER: Symbol("HEADER"),
    },
  };
 });
--- a/devtools/client/shared/components/reps/reps/error.js
+++ b/devtools/client/shared/components/reps/reps/error.js
@ -58,30 +58,15 @@ define(function (require, exports, module) {
  function ErrorRep(props) {
    const { object, mode, shouldRenderTooltip, depth } = props;
    const preview = object.preview;
-    const customFormat = props.customFormat && mode !== MODE.TINY && !depth;
+    const customFormat =
+      props.customFormat &&
+      mode !== MODE.TINY &&
+      mode !== MODE.HEADER &&
+      !depth;

-    let name;
-    if (
-      preview &&
-      preview.name &&
-      typeof preview.name === "string" &&
-      preview.kind
-    ) {
-      switch (preview.kind) {
-        case "Error":
-          name = preview.name;
-          break;
-        case "DOMException":
-          name = preview.kind;
-          break;
-        default:
-          throw new Error("Unknown preview kind for the Error rep.");
-      }
-    } else {
-      name = "Error";
-    }
-
-    const errorTitle = mode === MODE.TINY ? name : `${name}: `;
+    const name = getErrorName(props);
+    const errorTitle =
+      mode === MODE.TINY || mode === MODE.HEADER ? name : `${name}: `;
    const content = [];

    if (customFormat) {
@ -92,7 +77,7 @@ define(function (require, exports, module) {
      );
    }

-    if (mode !== MODE.TINY) {
+    if (mode !== MODE.TINY && mode !== MODE.HEADER) {
      const {
        Rep,
      } = require("devtools/client/shared/components/reps/reps/rep");
@ -131,6 +116,29 @@ define(function (require, exports, module) {
    );
  }

+  function getErrorName(props) {
+    const { object } = props;
+    const preview = object.preview;
+
+    let name;
+    if (typeof preview?.name === "string" && preview.kind) {
+      switch (preview.kind) {
+        case "Error":
+          name = preview.name;
+          break;
+        case "DOMException":
+          name = preview.kind;
+          break;
+        default:
+          throw new Error("Unknown preview kind for the Error rep.");
+      }
+    } else {
+      name = "Error";
+    }
+
+    return name;
+  }
+
  /**
   * Returns a React element reprensenting the Error stacktrace, i.e.
   * transform error.stack from:
--- a/devtools/client/shared/components/reps/reps/grip-array.js
+++ b/devtools/client/shared/components/reps/reps/grip-array.js
@ -84,6 +84,10 @@ define(function (require, exports, module) {
      );
    }

+    if (mode === MODE.HEADER) {
+      return span(config, title);
+    }
+
    const max = maxLengthMap.get(mode);
    const items = arrayIterator(props, object, max);
    brackets = needSpace(!!items.length);
@ -150,6 +154,10 @@ define(function (require, exports, module) {
      return span({ className: "objectTitle" }, title, length, trailingSpace);
    }

+    if (props.mode === MODE.HEADER) {
+      return span({ className: "objectTitle" }, title, length);
+    }
+
    return span({ className: "objectTitle" }, title, length, " ");
  }

--- a/devtools/client/shared/components/reps/reps/grip-map.js
+++ b/devtools/client/shared/components/reps/reps/grip-map.js
@ -51,7 +51,7 @@ define(function (require, exports, module) {
    const title = getTitle(props, object);
    const isEmpty = getLength(object) === 0;

-    if (isEmpty || mode === MODE.TINY) {
+    if (isEmpty || mode === MODE.TINY || mode === MODE.HEADER) {
      return span(config, title);
    }

--- a/devtools/client/shared/components/reps/reps/grip.js
+++ b/devtools/client/shared/components/reps/reps/grip.js
@ -85,6 +85,11 @@ define(function (require, exports, module) {
      return span(config, ...tinyModeItems);
    }

+    if (mode === MODE.HEADER) {
+      config.title = shouldRenderTooltip ? getTitle(props, object) : null;
+      return span(config, getTitleElement(props, object));
+    }
+
    const propsArray = safePropIterator(props, object, maxLengthMap.get(mode));

    config.title = shouldRenderTooltip ? getTitle(props, object) : null;
--- a/devtools/client/shared/components/reps/reps/promise.js
+++ b/devtools/client/shared/components/reps/reps/promise.js
@ -59,7 +59,7 @@ define(function (require, exports, module) {
      };
    }

-    if (props.mode !== MODE.TINY) {
+    if (props.mode !== MODE.TINY && props.mode !== MODE.HEADER) {
      return Grip.rep(props);
    }

@ -70,6 +70,10 @@ define(function (require, exports, module) {
      title: shouldRenderTooltip ? "Promise" : null,
    };

+    if (props.mode === MODE.HEADER) {
+      return span(config, getTitle(object));
+    }
+
    const { Rep } = require("devtools/client/shared/components/reps/reps/rep");

    return span(
--- a/devtools/client/shared/components/reps/reps/text-node.js
+++ b/devtools/client/shared/components/reps/reps/text-node.js
@ -46,7 +46,7 @@ define(function (require, exports, module) {
    const config = getElementConfig({ ...props, isInTree });
    const inspectIcon = getInspectIcon({ ...props, isInTree });

-    if (mode === MODE.TINY) {
+    if (mode === MODE.TINY || mode === MODE.HEADER) {
      return span(config, getTitle(grip), inspectIcon);
    }

--- a/devtools/client/shared/components/test/node/components/reps/snapshots/error.test.js.snap
+++ b/devtools/client/shared/components/test/node/components/reps/snapshots/error.test.js.snap
@ -710,6 +710,21 @@ exports[`Error - URI error renders with expected text for URIError 1`] = `
 </span>
 `;

+exports[`Error - base-loader.sys.mjs renders as expected in HEADER mode 1`] = `
+<span
+  className="objectBox-stackTrace "
+  data-link-actor-id="server1.conn1.child1/obj1020"
+  title={null}
+>
+  <span
+    className="objectTitle"
+    key="title"
+  >
+    Error
+  </span>
+</span>
+`;
+
 exports[`Error - base-loader.sys.mjs renders as expected in tiny mode 1`] = `
 <span
  className="objectBox-stackTrace "
--- a/devtools/client/shared/components/test/node/components/reps/comment-node.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/comment-node.test.js
@ -67,6 +67,12 @@ describe("CommentNode", () => {
    );
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toEqual(
+      "<!-- test\\nand test\\na… test\\nand test -->"
+    );
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.LONG });
    expect(component.text()).toEqual(`<!-- ${stub.preview.textContent} -->`);
    expectActorAttribute(component, object.actor);
--- a/devtools/client/shared/components/test/node/components/reps/element-node.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/element-node.test.js
@ -47,6 +47,20 @@ describe("ElementNode - BodyNode", () => {
    expectActorAttribute(renderedComponent, stub.actor);
  });

+  it("renders with expected text content in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ElementNode.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual(
+      '<body id="body-id" class="body-class">'
+    );
+    expectActorAttribute(renderedComponent, stub.actor);
+  });
+
  it("renders with expected text content on tiny mode", () => {
    const renderedComponent = shallow(
      ElementNode.rep({
--- a/devtools/client/shared/components/test/node/components/reps/error.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/error.test.js
@ -55,6 +55,17 @@ describe("Error - Simple error", () => {
    expect(renderedComponent.text()).toEqual("Error");
  });

+  it("renders with expected text for simple error in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("Error");
+  });
+
  it("renders with error type and preview message when in short mode", () => {
    const renderedComponent = shallow(
      ErrorRep.rep({
@ -129,6 +140,17 @@ describe("Error - Multi line stack error", () => {

    expect(renderedComponent.text()).toEqual("Error");
  });
+
+  it("renders expected text for simple multiline error in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("Error");
+  });
 });

 describe("Error - Error without stacktrace", () => {
@ -190,6 +212,17 @@ describe("Error - Eval error", () => {

    expect(renderedComponent.text()).toEqual("EvalError");
  });
+
+  it("renders with expected text for an EvalError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("EvalError");
+  });
 });

 describe("Error - Internal error", () => {
@ -221,6 +254,17 @@ describe("Error - Internal error", () => {

    expect(renderedComponent.text()).toEqual("InternalError");
  });
+
+  it("renders with expected text for an InternalError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("InternalError");
+  });
 });

 describe("Error - Range error", () => {
@ -252,6 +296,17 @@ describe("Error - Range error", () => {

    expect(renderedComponent.text()).toEqual("RangeError");
  });
+
+  it("renders with expected text for RangeError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("RangeError");
+  });
 });

 describe("Error - Reference error", () => {
@ -283,6 +338,17 @@ describe("Error - Reference error", () => {

    expect(renderedComponent.text()).toEqual("ReferenceError");
  });
+
+  it("renders with expected text for ReferenceError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("ReferenceError");
+  });
 });

 describe("Error - Syntax error", () => {
@ -314,6 +380,17 @@ describe("Error - Syntax error", () => {

    expect(renderedComponent.text()).toEqual("SyntaxError");
  });
+
+  it("renders with expected text for SyntaxError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("SyntaxError");
+  });
 });

 describe("Error - Type error", () => {
@ -345,6 +422,17 @@ describe("Error - Type error", () => {

    expect(renderedComponent.text()).toEqual("TypeError");
  });
+
+  it("renders with expected text for TypeError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("TypeError");
+  });
 });

 describe("Error - URI error", () => {
@ -376,6 +464,17 @@ describe("Error - URI error", () => {

    expect(renderedComponent.text()).toEqual("URIError");
  });
+
+  it("renders with expected text for URIError in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("URIError");
+  });
 });

 describe("Error - DOMException", () => {
@ -408,6 +507,17 @@ describe("Error - DOMException", () => {

    expect(renderedComponent.text()).toEqual("DOMException");
  });
+
+  it("renders with expected text for DOMException in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent.text()).toEqual("DOMException");
+  });
 });

 describe("Error - base-loader.sys.mjs", () => {
@ -434,6 +544,17 @@ describe("Error - base-loader.sys.mjs", () => {

    expect(renderedComponent).toMatchSnapshot();
  });
+
+  it("renders as expected in HEADER mode", () => {
+    const renderedComponent = shallow(
+      ErrorRep.rep({
+        object: stub,
+        mode: MODE.HEADER,
+      })
+    );
+
+    expect(renderedComponent).toMatchSnapshot();
+  });
 });

 describe("Error - longString stacktrace", () => {
--- a/devtools/client/shared/components/test/node/components/reps/grip-array.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/grip-array.test.js
@ -52,6 +52,11 @@ describe("GripArray - basic", () => {
    expect(component.prop("title")).toBe("Array");
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true });
+    expect(component.text()).toBe("Array");
+    expect(component.prop("title")).toBe("Array");
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe("Array");
@ -76,7 +81,7 @@ describe("GripArray - max props", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);

@ -110,7 +115,7 @@ describe("GripArray - more than short mode max props", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
@ -145,6 +150,12 @@ describe("GripArray - more than long mode max props", () => {
    expect(
      renderRep({ mode: MODE.TINY, shouldRenderTooltip: true }).prop("title")
    ).toBe("Array");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).text()
+    ).toBe(`Array${length}`);
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).prop("title")
+    ).toBe("Array");
    expect(
      renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true }).text()
    ).toBe(defaultOutput);
@ -176,7 +187,7 @@ describe("GripArray - recursive array", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -194,6 +205,7 @@ describe("GripArray - preview limit", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(shortOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(shortOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -210,7 +222,7 @@ describe("GripArray - empty slots", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
@ -229,7 +241,7 @@ describe("GripArray - empty slots", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
@ -247,6 +259,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -261,6 +274,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -275,6 +289,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -288,6 +303,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(
      `Array${length} [ 0, <1 empty slot>, 2, <1 empty slot>, 4, 5 ]`
@ -303,6 +319,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(
      `Array${length} [ 0, <2 empty slots>, 3, <3 empty slots>, 7, 8 ]`
@ -319,6 +336,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -333,6 +351,7 @@ describe("GripArray - empty slots", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(longOutput);
  });
@ -353,6 +372,9 @@ describe("GripArray - NamedNodeMap", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`NamedNodeMap${length}`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(
+      `NamedNodeMap${length}`
+    );

    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
@ -374,6 +396,7 @@ describe("GripArray - NodeList", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`NodeList${length}`);
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`NodeList${length}`);

    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
@ -453,6 +476,9 @@ describe("GripArray - DocumentFragment", () => {
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(
      `DocumentFragment${length}`
    );
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(
+      `DocumentFragment${length}`
+    );

    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

@ -486,6 +512,10 @@ describe("GripArray - Items not in preview", () => {
    expect(component.text()).toBe(`${length} […]`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`Array${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -516,6 +546,10 @@ describe("GripArray - Set", () => {
    expect(component.text()).toBe(`Set${length}`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`Set${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -540,6 +574,10 @@ describe("GripArray - Set", () => {
    expect(component.text()).toBe(`Set${length}`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`Set${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -577,6 +615,10 @@ describe("GripArray - WeakSet", () => {
    expect(component.text()).toBe(`WeakSet${length}`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`WeakSet${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -605,6 +647,10 @@ describe("GripArray - WeakSet", () => {
    expect(component.text()).toBe(`WeakSet${length}`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`WeakSet${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -635,6 +681,10 @@ describe("GripArray - DOMTokenList", () => {
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe(`DOMTokenList${length}`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -657,7 +707,7 @@ describe("GripArray - accessor", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
@ -676,7 +726,7 @@ describe("GripArray - accessor", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
@ -695,7 +745,7 @@ describe("GripArray - accessor", () => {

    length = getGripLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`${length} […]`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Array${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getGripLengthBubbleText(object, { mode: MODE.LONG });
--- a/devtools/client/shared/components/test/node/components/reps/grip-map.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/grip-map.test.js
@ -53,6 +53,11 @@ describe("GripMap - empty map", () => {
    expect(component.prop("title")).toBe(`Map(${getLength(object)})`);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true });
+    expect(component.text()).toBe(defaultOutput);
+    expect(component.prop("title")).toBe(`Map(${getLength(object)})`);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe(`Map(${getLength(object)})`);
@ -83,7 +88,7 @@ describe("GripMap - Symbol-keyed Map", () => {

    length = getMapLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`Map${length}`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Map${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(out);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(out);
  });
@ -116,6 +121,14 @@ describe("GripMap - WeakMap", () => {
      renderRep({ mode: MODE.TINY, shouldRenderTooltip: true }).prop("title")
    ).toBe(`WeakMap(${getLength(object)})`);

+    length = getMapLengthBubbleText(object, { mode: MODE.HEADER });
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).text()
+    ).toBe(`WeakMap${length}`);
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).prop("title")
+    ).toBe(`WeakMap(${getLength(object)})`);
+
    expect(
      renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true }).text()
    ).toBe(defaultOutput);
@ -167,7 +180,7 @@ describe("GripMap - max entries", () => {

    length = getMapLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`Map${length}`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Map${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(out);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(out);
  });
@ -193,7 +206,7 @@ describe("GripMap - more than max entries", () => {

    length = getMapLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`Map${length}`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Map${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    const longString = Array.from({ length: maxLengthMap.get(MODE.LONG) }).map(
@ -225,7 +238,7 @@ describe("GripMap - uninteresting entries", () => {

    length = getMapLengthBubbleText(object, { mode: MODE.TINY });
    expect(renderRep({ mode: MODE.TINY }).text()).toBe(`Map${length}`);
-
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe(`Map${length}`);
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    length = getMapLengthBubbleText(object, { mode: MODE.LONG });
--- a/devtools/client/shared/components/test/node/components/reps/grip.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/grip.test.js
@ -54,6 +54,10 @@ describe("Grip - empty object", () => {
    expect(component.text()).toBe("{}");
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe("Object");
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -78,6 +82,7 @@ describe("Grip - Boolean object", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("Boolean");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Boolean");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -97,6 +102,7 @@ describe("Grip - Number object", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("Number");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Number");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -126,6 +132,12 @@ describe("Grip - String object", () => {
    expect(
      renderRep({ mode: MODE.TINY, shouldRenderTooltip: true }).prop("title")
    ).toBe("String");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).text()
+    ).toBe("String");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).prop("title")
+    ).toBe("String");
    expect(
      renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true }).text()
    ).toBe(defaultOutput);
@ -159,6 +171,7 @@ describe("Grip - Proxy", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(out);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("Proxy");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Proxy");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(out);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(out);
  });
@ -188,6 +201,12 @@ describe("Grip - ArrayBuffer", () => {
    expect(
      renderRep({ mode: MODE.TINY, shouldRenderTooltip: true }).prop("title")
    ).toBe("ArrayBuffer");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).text()
+    ).toBe("ArrayBuffer");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).prop("title")
+    ).toBe("ArrayBuffer");
    expect(
      renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true }).text()
    ).toBe(defaultOutput);
@ -217,6 +236,7 @@ describe("Grip - SharedArrayBuffer", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("SharedArrayBuffer");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("SharedArrayBuffer");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -237,6 +257,7 @@ describe("Grip - ApplicationCache", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("OfflineResourceList");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("OfflineResourceList");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    const longOutput =
@ -262,6 +283,7 @@ describe("Grip - Object with max props", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -291,6 +313,12 @@ describe("Grip - Object with more than short mode max props", () => {
    expect(
      renderRep({ mode: MODE.TINY, shouldRenderTooltip: true }).prop("title")
    ).toBe("Object");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).text()
+    ).toBe("Object");
+    expect(
+      renderRep({ mode: MODE.HEADER, shouldRenderTooltip: true }).prop("title")
+    ).toBe("Object");
    expect(
      renderRep({ mode: MODE.SHORT, shouldRenderTooltip: true }).text()
    ).toBe(defaultOutput);
@ -322,6 +350,7 @@ describe("Grip - Object with more than long mode max props", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);

    const props = Array.from({ length: maxLengthMap.get(MODE.LONG) }).map(
@ -346,6 +375,7 @@ describe("Grip - Object with non-enumerable properties", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -365,6 +395,7 @@ describe("Grip - Object with nested object", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);

@ -397,6 +428,7 @@ describe("Grip - Object with nested array", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -421,6 +453,7 @@ describe("Grip - Object with connected nodes", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -500,6 +533,7 @@ describe("Grip - Object with getter", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -518,6 +552,7 @@ describe("Grip - Object with setter", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -536,6 +571,7 @@ describe("Grip - Object with getter and setter", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -556,6 +592,7 @@ describe("Grip - Object with symbol properties", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(
      'Object { x: 10, Symbol(): "first unnamed symbol", ' +
@ -580,6 +617,7 @@ describe("Grip - Object with more than max symbol properties", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(
      'Object { Symbol("i-0"): "value-0", Symbol("i-1"): "value-1", ' +
@ -611,6 +649,10 @@ describe("Grip - Without preview", () => {
    expect(component.text()).toBe("{}");
    expectActorAttribute(component, object.actor);

+    component = renderRep({ mode: MODE.HEADER });
+    expect(component.text()).toBe("Object");
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);
@ -639,6 +681,7 @@ describe("Grip - Generator object", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("Generator");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Generator");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -660,6 +703,7 @@ describe("Grip - DeadObject object", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("DeadObject");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("DeadObject");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -679,6 +723,7 @@ describe.skip("Grip - Object with __proto__ property", () => {

    expect(renderRep({ mode: undefined }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.TINY }).text()).toBe("{…}");
+    expect(renderRep({ mode: MODE.HEADER }).text()).toBe("Object");
    expect(renderRep({ mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep({ mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
--- a/devtools/client/shared/components/test/node/components/reps/promise.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/promise.test.js
@ -50,6 +50,14 @@ describe("Promise - Pending", () => {
    expect(component.prop("title")).toBe("Promise");
    expectActorAttribute(component, object.actor);

+    component = renderRep(object, {
+      mode: MODE.HEADER,
+      shouldRenderTooltip: true,
+    });
+    expect(component.text()).toBe("Promise");
+    expect(component.prop("title")).toBe("Promise");
+    expectActorAttribute(component, object.actor);
+
    component = renderRep(object, {
      mode: MODE.SHORT,
      shouldRenderTooltip: true,
@ -81,6 +89,7 @@ describe("Promise - fulfilled with string", () => {
    expect(renderRep(object, { mode: MODE.TINY }).text()).toBe(
      'Promise { "fulfilled" }'
    );
+    expect(renderRep(object, { mode: MODE.HEADER }).text()).toBe("Promise");
    expect(renderRep(object, { mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep(object, { mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -99,6 +108,7 @@ describe("Promise - fulfilled with object", () => {
    expect(renderRep(object, { mode: MODE.TINY }).text()).toBe(
      'Promise { "fulfilled" }'
    );
+    expect(renderRep(object, { mode: MODE.HEADER }).text()).toBe("Promise");
    expect(renderRep(object, { mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep(object, { mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -123,6 +133,7 @@ describe("Promise - fulfilled with array", () => {
    expect(renderRep(object, { mode: MODE.TINY }).text()).toBe(
      'Promise { "fulfilled" }'
    );
+    expect(renderRep(object, { mode: MODE.HEADER }).text()).toBe("Promise");
    expect(renderRep(object, { mode: MODE.SHORT }).text()).toBe(out);
    expect(renderRep(object, { mode: MODE.LONG }).text()).toBe(out);
  });
@ -192,6 +203,7 @@ describe("Promise - rejected with number", () => {
    expect(renderRep(object, { mode: MODE.TINY }).text()).toBe(
      'Promise { "rejected" }'
    );
+    expect(renderRep(object, { mode: MODE.HEADER }).text()).toBe("Promise");
    expect(renderRep(object, { mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep(object, { mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
@ -210,6 +222,7 @@ describe("Promise - rejected with object", () => {
    expect(renderRep(object, { mode: MODE.TINY }).text()).toBe(
      'Promise { "rejected" }'
    );
+    expect(renderRep(object, { mode: MODE.HEADER }).text()).toBe("Promise");
    expect(renderRep(object, { mode: MODE.SHORT }).text()).toBe(defaultOutput);
    expect(renderRep(object, { mode: MODE.LONG }).text()).toBe(defaultOutput);
  });
--- a/devtools/client/shared/components/test/node/components/reps/text-node.test.js
+++ b/devtools/client/shared/components/test/node/components/reps/text-node.test.js
@ -49,6 +49,11 @@ describe("TextNode", () => {
    expect(component.prop("title")).toBe(defaultOutput);
    expectActorAttribute(component, object.actor);

+    component = renderRep({ shouldRenderTooltip: true, mode: MODE.HEADER });
+    expect(component.text()).toBe("#text");
+    expect(component.prop("title")).toBe(defaultOutput);
+    expectActorAttribute(component, object.actor);
+
    component = renderRep({ shouldRenderTooltip: true, mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe(defaultOutput);
@ -75,6 +80,10 @@ describe("TextNode", () => {
    expect(component.text()).toBe("#text");
    expect(component.prop("title")).toBe(defaultTooltip);

+    component = renderRep({ shouldRenderTooltip: true, mode: MODE.HEADER });
+    expect(component.text()).toBe("#text");
+    expect(component.prop("title")).toBe(defaultTooltip);
+
    component = renderRep({ shouldRenderTooltip: true, mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe(defaultTooltip);
@ -99,6 +108,10 @@ describe("TextNode", () => {
    expect(component.text()).toBe("#text");
    expect(component.prop("title")).toBe(defaultTooltip);

+    component = renderRep({ shouldRenderTooltip: true, mode: MODE.HEADER });
+    expect(component.text()).toBe("#text");
+    expect(component.prop("title")).toBe(defaultTooltip);
+
    component = renderRep({ shouldRenderTooltip: true, mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe(defaultTooltip);
@ -124,6 +137,10 @@ describe("TextNode", () => {
    expect(component.text()).toBe("#text");
    expect(component.prop("title")).toBe(defaultTooltip);

+    component = renderRep({ shouldRenderTooltip: true, mode: MODE.HEADER });
+    expect(component.text()).toBe("#text");
+    expect(component.prop("title")).toBe(defaultTooltip);
+
    component = renderRep({ shouldRenderTooltip: true, mode: MODE.SHORT });
    expect(component.text()).toBe(defaultOutput);
    expect(component.prop("title")).toBe(defaultTooltip);