Backed out 3 changesets (bug 1498115) for failures in browser_flexbox_container_properties.js

Backed out changeset e7f8e9c7301b (bug 1498115) Backed out changeset ad62c3439651 (bug 1498115) Backed out changeset 06b4d9761d46 (bug 1498115)
2018-11-15 18:28:19 +02:00 · 2018-11-15 18:28:19 +02:00 · f78fcf019c
--- a/devtools/client/inspector/flexbox/components/FlexContainer.js
+++ b/devtools/client/inspector/flexbox/components/FlexContainer.js
@ -75,55 +75,34 @@ class FlexContainer extends PureComponent {
      onHideBoxModelHighlighter,
      onShowBoxModelHighlighterForNode,
    } = this.props;
-    const {
-      nodeFront,
-      properties,
-    } = flexContainer;
+    const { nodeFront } = flexContainer;

    return createElement(Fragment, null,
-      dom.div({ className: "flex-header-container-label" },
-        Rep({
-          defaultRep: ElementNode,
-          mode: MODE.TINY,
-          object: translateNodeFrontToGrip(nodeFront),
-          onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-          onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-        }),
-        dom.div({
-          className: "layout-color-swatch",
-          ref: this.swatchEl,
-          style: {
-            backgroundColor: color,
-          },
-          title: color,
-        }),
-        // The SwatchColorPicker relies on the nextSibling of the swatch element to
-        // apply the selected color. This is why we use a span in display: none for
-        // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this
-        // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
-        dom.span(
-          {
-            className: "layout-color-value",
-            ref: this.colorValueEl,
-          },
-          color
-        )
-      ),
-      dom.div({ className: "flex-header-container-properties" },
-        dom.div(
-          {
-            className: "inspector-badge",
-            title: `flex-direction: ${properties["flex-direction"]}`,
-          },
-          properties["flex-direction"]
-        ),
-        dom.div(
-          {
-            className: "inspector-badge",
-            title: `flex-wrap: ${properties["flex-wrap"]}`,
-          },
-          properties["flex-wrap"]
-        )
+      Rep({
+        defaultRep: ElementNode,
+        mode: MODE.TINY,
+        object: translateNodeFrontToGrip(nodeFront),
+        onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+        onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+      }),
+      dom.div({
+        className: "layout-color-swatch",
+        ref: this.swatchEl,
+        style: {
+          backgroundColor: color,
+        },
+        title: color,
+      }),
+      // The SwatchColorPicker relies on the nextSibling of the swatch element to
+      // apply the selected color. This is why we use a span in display: none for
+      // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this
+      // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578
+      dom.span(
+        {
+          className: "layout-color-value",
+          ref: this.colorValueEl,
+        },
+        color
      )
    );
  }
--- a/devtools/client/inspector/flexbox/components/FlexContainerProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexContainerProperties.js
@ -0,0 +1,51 @@
+/* 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/. */
+
+"use strict";
+
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
+
+const ComputedProperty = createFactory(require("devtools/client/inspector/layout/components/ComputedProperty"));
+
+const Types = require("../types");
+
+class FlexContainerProperties extends PureComponent {
+  static get propTypes() {
+    return {
+      properties: PropTypes.shape(Types.flexContainerProperties).isRequired,
+    };
+  }
+
+  render() {
+    const { properties } =  this.props;
+
+    return (
+      dom.div(
+        {
+          id: "flex-container-properties",
+          className: "flexbox-container",
+        },
+        dom.div({ className: "layout-properties-header" },
+          getStr("flexbox.flexContainerProperties")
+        ),
+        dom.div(
+          {
+            className: "layout-properties-wrapper devtools-monospace",
+            tabIndex: 0,
+          },
+          Object.entries(properties).map(([name, value]) => ComputedProperty({
+            key: name,
+            name,
+            value,
+          }))
+        )
+      )
+    );
+  }
+}
+
+module.exports = FlexContainerProperties;
--- a/devtools/client/inspector/flexbox/components/FlexItem.js
+++ b/devtools/client/inspector/flexbox/components/FlexItem.js
@ -19,7 +19,6 @@ class FlexItem extends PureComponent {
  static get propTypes() {
    return {
      flexItem: PropTypes.shape(Types.flexItem).isRequired,
-      index: PropTypes.number.isRequired,
      onHideBoxModelHighlighter: PropTypes.func.isRequired,
      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
      setSelectedNode: PropTypes.func.isRequired,
@ -29,7 +28,6 @@ class FlexItem extends PureComponent {
  render() {
    const {
      flexItem,
-      index,
      onHideBoxModelHighlighter,
      onShowBoxModelHighlighterForNode,
      setSelectedNode,
@ -37,22 +35,23 @@ class FlexItem extends PureComponent {
    const { nodeFront } = flexItem;

    return (
-      dom.button(
-        {
-          className: "devtools-button devtools-monospace",
-          onClick: () => {
-            setSelectedNode(nodeFront);
-            onHideBoxModelHighlighter();
+      dom.li({},
+        dom.button(
+          {
+            className: "devtools-button devtools-monospace",
+            onClick: () => {
+              setSelectedNode(nodeFront);
+              onHideBoxModelHighlighter();
+            },
+            onMouseOut: () => onHideBoxModelHighlighter(),
+            onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
          },
-          onMouseOut: () => onHideBoxModelHighlighter(),
-          onMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-        },
-        dom.span({ className: "flex-item-index" }, index),
-        Rep({
-          defaultRep: ElementNode,
-          mode: MODE.TINY,
-          object: translateNodeFrontToGrip(nodeFront),
-        })
+          Rep({
+            defaultRep: ElementNode,
+            mode: MODE.TINY,
+            object: translateNodeFrontToGrip(nodeFront),
+          })
+        )
      )
    );
  }
--- a/devtools/client/inspector/flexbox/components/FlexItemList.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemList.js
@ -7,7 +7,6 @@
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { getStr } = require("devtools/client/inspector/layout/utils/l10n");

 const FlexItem = createFactory(require(("./FlexItem")));

@ -32,13 +31,11 @@ class FlexItemList extends PureComponent {
    } = this.props;

    return (
-      dom.div(
+      dom.ol(
        { className: "flex-item-list" },
-        dom.div({ className: "flex-item-list-header" }, getStr("flexbox.flexItems")),
-        flexItems.map((flexItem, index) => FlexItem({
+        flexItems.map(flexItem => FlexItem({
          key: flexItem.actorID,
          flexItem,
-          index: index + 1,
          onHideBoxModelHighlighter,
          onShowBoxModelHighlighterForNode,
          setSelectedNode,
--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@ -14,6 +14,9 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getStr } = require("devtools/client/inspector/layout/utils/l10n");

+loader.lazyGetter(this, "FlexContainerProperties", function() {
+  return createFactory(require("./FlexContainerProperties"));
+});
 loader.lazyGetter(this, "FlexItemList", function() {
  return createFactory(require("./FlexItemList"));
 });
@ -43,6 +46,12 @@ class Flexbox extends PureComponent {
    };
  }

+  renderFlexContainerProperties() {
+    return FlexContainerProperties({
+      properties: this.props.flexContainer.properties,
+    });
+  }
+
  renderFlexItemList() {
    const {
      onHideBoxModelHighlighter,
@ -124,6 +133,7 @@ class Flexbox extends PureComponent {
        }),
        !flexItemShown && flexItems.length > 0 ? this.renderFlexItemList() : null,
        flexItemShown ? this.renderFlexItemSizing() : null,
+        !flexItemShown ? this.renderFlexContainerProperties() : null
      )
    );
  }
--- a/devtools/client/inspector/flexbox/components/moz.build
+++ b/devtools/client/inspector/flexbox/components/moz.build
@ -7,6 +7,7 @@
 DevToolsModules(
    'Flexbox.js',
    'FlexContainer.js',
+    'FlexContainerProperties.js',
    'FlexItem.js',
    'FlexItemList.js',
    'FlexItemSelector.js',
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@ -20,7 +20,6 @@ support-files =
 [browser_flexbox_accordion_state.js]
 [browser_flexbox_container_and_item.js]
 [browser_flexbox_container_element_rep.js]
-[browser_flexbox_container_properties.js]
 [browser_flexbox_empty_state.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_properties.js
@ -1,65 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test that the flex container properties are shown when a flex container is selected.
-
-const TEST_URI = `
-  <style type='text/css'>
-    #container1 {
-      display: flex;
-    }
-
-    #container2 {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-    }
-  </style>
-  <div id="container1">
-    <div id="item"></div>
-  </div>
-  <div id="container2"></div>
-`;
-
-add_task(async function() {
-  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  const { inspector, flexboxInspector } = await openLayoutView();
-  const { document: doc } = flexboxInspector;
-
-  info("Selecting the flex container #container1 and checking the values of the flex " +
-    "container properties for #container1.");
-  let onFlexContainerPropertiesRendered = waitForDOM(doc,
-    ".flex-header-container-properties");
-  await selectNode("#container1", inspector);
-  let [flexContainerProperties] = await onFlexContainerPropertiesRendered;
-
-  ok(flexContainerProperties, "The flex container properties is rendered.");
-  is(flexContainerProperties.children[0].textContent, "row",
-    "Got expected flex-direction.");
-  is(flexContainerProperties.children[1].textContent, "nowrap",
-    "Got expected flex-wrap.");
-
-  info("Selecting a flex item and expecting the flex container properties to not be " +
-    "shown.");
-  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
-  await selectNode("#item", inspector);
-  const [flexHeader] = await onFlexHeaderRendered;
-
-  ok(!flexHeader.querySelector(".flex-header-container-properties"),
-    "The flex container properties is not shown in the header.");
-
-  info("Selecting the flex container #container2 and checking the values of the flex " +
-    "container properties for #container2.");
-  onFlexContainerPropertiesRendered = waitForDOM(doc,
-    ".flex-header-container-properties");
-  await selectNode("#container2", inspector);
-  [flexContainerProperties] = await onFlexContainerPropertiesRendered;
-
-  ok(flexContainerProperties, "The flex container properties is rendered.");
-  is(flexContainerProperties.children[0].textContent, "column",
-    "Got expected flex-direction.");
-  is(flexContainerProperties.children[1].textContent, "wrap",
-    "Got expected flex-wrap.");
-});
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
@ -18,7 +18,7 @@ add_task(async function() {

  info("Checking the initial state of the flex item list.");
  ok(flexItemList, "The flex item list is rendered.");
-  is(flexItemList.querySelectorAll("button").length, 1,
+  is(flexItemList.children.length, 1,
    "Got the correct number of flex items in the list.");

  info("Clicking on the first flex item to navigate to the flex item.");
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_pseudo_elements_are_listed.js
@ -19,7 +19,7 @@ add_task(async function() {
  await selectNode(".container", inspector);
  const [flexItemList] = await onItemsListRendered;

-  const items = [...flexItemList.querySelectorAll("button .objectBox")];
+  const items = [...flexItemList.querySelectorAll("li")];
  is(items.length, 2, "There are 2 items displayed in the list");

  is(items[0].textContent, "::before", "The first item is ::before");
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_text_nodes_are_listed.js
@ -19,7 +19,7 @@ add_task(async function() {
  await selectNode(".container", inspector);
  const [flexItemList] = await onItemsListRendered;

-  const items = [...flexItemList.querySelectorAll("button .objectBox")];
+  const items = [...flexItemList.querySelectorAll("li")];
  is(items.length, 3, "There are 3 items displayed in the list");

  is(items[0].textContent, "#text", "The first item is a text node");
--- a/devtools/client/inspector/index.xhtml
+++ b/devtools/client/inspector/index.xhtml
@ -10,7 +10,6 @@

  <link rel="stylesheet" href="chrome://devtools/skin/breadcrumbs.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/badge.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/changes.css"/>
--- a/devtools/client/inspector/markup/markup.xhtml
+++ b/devtools/client/inspector/markup/markup.xhtml
@ -7,7 +7,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/badge.css" type="text/css"/>
  <link rel="stylesheet" href="chrome://devtools/skin/markup.css" type="text/css"/>
  <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" type="text/css"/>
  <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" type="text/css"/>
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
@ -41,7 +41,7 @@ add_task(async function() {
  await selectNode("#grid", inspector);
  const gridContainer = await getContainerForSelector("#grid", inspector);
  const gridDisplayNode = gridContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+    ".markup-badge[data-display]");
  ok(gridDisplayNode, "#grid display node is shown.");
  is(gridDisplayNode.textContent, "grid", "Got the correct display type for #grid.");

@ -49,7 +49,7 @@ add_task(async function() {
  await selectNode("#subgrid", inspector);
  const subgridContainer = await getContainerForSelector("#subgrid", inspector);
  const subgridDisplayNode = subgridContainer.elt.querySelector(
-    ".inspector-badge[data-display]");
+    ".markup-badge[data-display]");
  ok(subgridDisplayNode, "#subgrid display node is shown");
  is(subgridDisplayNode.textContent, "subgrid",
    "Got the correct display type for #subgrid");
@ -58,7 +58,7 @@ add_task(async function() {
  await selectNode("#flex", inspector);
  const flexContainer = await getContainerForSelector("#flex", inspector);
  const flexDisplayNode = flexContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+    ".markup-badge[data-display]");
  ok(flexDisplayNode, "#flex display node is shown.");
  is(flexDisplayNode.textContent, "flex", "Got the correct display type for #flex");

@ -66,13 +66,13 @@ add_task(async function() {
  await selectNode("#block", inspector);
  const blockContainer = await getContainerForSelector("#block", inspector);
  const blockDisplayNode = blockContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+    ".markup-badge[data-display]");
  ok(!blockDisplayNode, "#block display node is hidden.");

  info("Check the display node is hidden for span.");
  await selectNode("span", inspector);
  const spanContainer = await getContainerForSelector("span", inspector);
  const spanDisplayNode = spanContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+    ".markup-badge[data-display]");
  ok(!spanDisplayNode, "span display node is hidden.");
 });
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@ -112,8 +112,7 @@ async function runTestData(inspector, testActor,
  await selectNode(selector, inspector);
  const container = await getContainerForSelector(selector, inspector);

-  const beforeBadge = container.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+  const beforeBadge = container.elt.querySelector(".markup-badge[data-display]");
  is(!!beforeBadge, before.visible,
    `Display badge is visible as expected for ${selector}: ${before.visible}`);
  if (before.visible) {
@ -138,8 +137,7 @@ async function runTestData(inspector, testActor,
  }
  ok(foundContainer, "Container is part of the list of changed nodes");

-  const afterBadge = container.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+  const afterBadge = container.elt.querySelector(".markup-badge[data-display]");
  is(!!afterBadge, after.visible,
    `Display badge is visible as expected for ${selector}: ${after.visible}`);
  if (after.visible) {
--- a/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-overflow.js
@ -34,8 +34,7 @@ add_task(async function() {
  const { inspector } = await openInspectorForURL(TEST_URL);

  const markupContainer = await getContainerForSelector("#events", inspector);
-  const evHolder = markupContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-event]");
+  const evHolder = markupContainer.elt.querySelector(".markup-badge[data-event]");
  const tooltip = inspector.markup.eventDetailsTooltip;

  info("Clicking to open event tooltip.");
--- a/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events-windowed-host.js
@ -32,8 +32,7 @@ add_task(async function() {

 async function runTests(inspector) {
  const markupContainer = await getContainerForSelector("#events", inspector);
-  const evHolder = markupContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-event]");
+  const evHolder = markupContainer.elt.querySelector(".markup-badge[data-event]");
  const tooltip = inspector.markup.eventDetailsTooltip;

  info("Clicking to open event tooltip.");
--- a/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_click_to_close.js
@ -27,12 +27,10 @@ add_task(async function() {
  await inspector.markup.expandAll();

  const container1 = await getContainerForSelector("#d1", inspector);
-  const evHolder1 = container1.elt.querySelector(
-    ".inspector-badge.interactive[data-event]");
+  const evHolder1 = container1.elt.querySelector(".markup-badge[data-event]");

  const container2 = await getContainerForSelector("#d2", inspector);
-  const evHolder2 = container2.elt.querySelector(
-    ".inspector-badge.interactive[data-event]");
+  const evHolder2 = container2.elt.querySelector(".markup-badge[data-event]");

  const tooltip = inspector.markup.eventDetailsTooltip;

--- a/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js
+++ b/devtools/client/inspector/markup/test/browser_markup_flex_display_badge.js
@ -26,8 +26,7 @@ add_task(async function() {
  info("Check the flex display badge is shown and not active.");
  await selectNode("#flex", inspector);
  const flexContainer = await getContainerForSelector("#flex", inspector);
-  const flexDisplayBadge = flexContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+  const flexDisplayBadge = flexContainer.elt.querySelector(".markup-badge[data-display]");
  ok(!flexDisplayBadge.classList.contains("active"), "flex display badge is not active.");
  ok(flexDisplayBadge.classList.contains("interactive"),
    "flex display badge is interactive.");
--- a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_01.js
@ -22,8 +22,7 @@ add_task(async function() {
  info("Check the grid display badge is shown and not active.");
  await selectNode("#grid", inspector);
  const gridContainer = await getContainerForSelector("#grid", inspector);
-  const gridDisplayBadge = gridContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+  const gridDisplayBadge = gridContainer.elt.querySelector(".markup-badge[data-display]");
  ok(!gridDisplayBadge.classList.contains("active"), "grid display badge is not active.");
  ok(gridDisplayBadge.classList.contains("interactive"),
    "grid display badge is interactive.");
--- a/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_grid_display_badge_02.js
@ -35,12 +35,9 @@ add_task(async function() {
  const grid1 = await getContainerForSelector("#grid1", inspector);
  const grid2 = await getContainerForSelector("#grid2", inspector);
  const grid3 = await getContainerForSelector("#grid3", inspector);
-  const gridDisplayBadge1 = grid1.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
-  const gridDisplayBadge2 = grid2.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
-  const gridDisplayBadge3 = grid3.elt.querySelector(
-    ".inspector-badge.interactive[data-display]");
+  const gridDisplayBadge1 = grid1.elt.querySelector(".markup-badge[data-display]");
+  const gridDisplayBadge2 = grid2.elt.querySelector(".markup-badge[data-display]");
+  const gridDisplayBadge3 = grid3.elt.querySelector(".markup-badge[data-display]");

  info("Check the initial state of the grid display badges and grid highlighters");
  ok(!gridDisplayBadge1.classList.contains("active"),
--- a/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_open_debugger.js
@ -63,8 +63,7 @@ async function runTest(inspector, toolbox, selector, contentMethod) {
  await selectNode(selector, inspector);
  const testFront = await getNodeFront(selector, inspector);
  const testContainer = inspector.markup.getContainer(testFront);
-  let customBadge = testContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-custom]");
+  let customBadge = testContainer.elt.querySelector(".markup-badge[data-custom]");

  // Verify that the "custom" badge and menu item are hidden.
  ok(!customBadge, "[custom] badge is hidden");
@ -81,8 +80,7 @@ async function runTest(inspector, toolbox, selector, contentMethod) {
  // Test element should now have a custom element definition.

  // Check that the badge opens the debugger.
-  customBadge = testContainer.elt.querySelector(
-    ".inspector-badge.interactive[data-custom]");
+  customBadge = testContainer.elt.querySelector(".markup-badge[data-custom]");
  ok(customBadge, "[custom] badge is visible");

  info("Click on the `custom` badge and verify that the debugger opens.");
--- a/devtools/client/inspector/markup/test/helper_events_test_runner.js
+++ b/devtools/client/inspector/markup/test/helper_events_test_runner.js
@ -55,8 +55,7 @@ async function checkEventsForNode(test, inspector, testActor) {
    await beforeTest(inspector, testActor);
  }

-  const evHolder = container.elt.querySelector(
-    ".inspector-badge.interactive[data-event]");
+  const evHolder = container.elt.querySelector(".markup-badge[data-event]");

  if (expected.length === 0) {
    // If no event is expected, check that event bubble is hidden.
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@ -287,7 +287,7 @@ ElementEditor.prototype = {

  _createEventBadge: function() {
    this._eventBadge = this.doc.createElement("div");
-    this._eventBadge.className = "inspector-badge interactive";
+    this._eventBadge.classList.add("markup-badge");
    this._eventBadge.dataset.event = "true";
    this._eventBadge.textContent = "event";
    this._eventBadge.title = INSPECTOR_L10N.getStr("markupView.event.tooltiptext");
@ -319,7 +319,7 @@ ElementEditor.prototype = {

  _createDisplayBadge: function() {
    this._displayBadge = this.doc.createElement("div");
-    this._displayBadge.className = "inspector-badge";
+    this._displayBadge.classList.add("markup-badge");
    this._displayBadge.addEventListener("click", this.onDisplayBadgeClick);
    // Badges order is [event][display][custom], insert display badge before custom.
    this.elt.insertBefore(this._displayBadge, this._customBadge);
@ -343,8 +343,6 @@ ElementEditor.prototype = {
    } else if (displayType === "grid" || displayType === "inline-grid") {
      this._displayBadge.classList.toggle("interactive",
        this.highlighters.canGridHighlighterToggle(this.node));
-    } else {
-      this._displayBadge.classList.remove("interactive");
    }
  },

@ -363,7 +361,7 @@ ElementEditor.prototype = {

  _createCustomBadge: function() {
    this._customBadge = this.doc.createElement("div");
-    this._customBadge.className = "inspector-badge interactive";
+    this._customBadge.classList.add("markup-badge");
    this._customBadge.dataset.custom = "true";
    this._customBadge.textContent = "custom…";
    this._customBadge.title = INSPECTOR_L10N.getStr("markupView.custom.tooltiptext");
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@ -93,7 +93,6 @@ devtools.jar:
    skin/images/add.svg (themes/images/add.svg)
    skin/images/alert.svg (themes/images/alert.svg)
    skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
-    skin/images/arrowhead-right.svg (themes/images/arrowhead-right.svg)
    skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg)
    skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg)
    skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg)
@ -180,7 +179,6 @@ devtools.jar:
    skin/images/dock-side-right.svg (themes/images/dock-side-right.svg)
    skin/images/dock-undock.svg (themes/images/dock-undock.svg)
    skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
-    skin/badge.css (themes/badge.css)
    skin/inspector.css (themes/inspector.css)
    skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
    skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@ -21,8 +21,9 @@ flexbox.flexItemOf=Flex Item of %S
 # flex containers to display.
 flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue.

-# LOCALIZATION NOTE (flexbox.flexItems): Header label displayed for the flex item list.
-flexbox.flexItems=Flex Items
+# LOCALIZATION NOTE (flexbox.flexContainerProperties): Header for the flex container
+# properties in the Flexbox panel.
+flexbox.flexContainerProperties=Flex Container Properties

 # LOCALIZATION NOTE (flexbox.itemSizing.baseSizeSectionHeader): Header label displayed
 # at the start of the flex item sizing Base Size section.
--- a/devtools/client/themes/badge.css
+++ b/devtools/client/themes/badge.css
@ -1,70 +0,0 @@
-/* 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/. */
-
-:root {
-  --badge-active-background-color: var(--blue-50);
-  --badge-active-border-color: #FFFFFFB3;
-  --badge-background-color: white;
-  --badge-border-color: #CACAD1;
-  --badge-color: var(--grey-60);
-  --badge-hover-background-color: #DFDFE8;
-  --badge-interactive-background-color: var(--grey-20);
-  --badge-interactive-color: var(--grey-90);
-}
-
-.theme-dark:root {
-  --badge-active-background-color: var(--blue-60);
-  --badge-active-border-color: #FFF6;
-  --badge-background-color: var(--grey-80);
-  --badge-border-color: var(--grey-50);
-  --badge-color: var(--grey-40);
-  --badge-hover-background-color: var(--grey-80);
-  --badge-interactive-background-color: var(--grey-70);
-  --badge-interactive-color: var(--grey-30);
-}
-
-/* Inspector badge */
-.inspector-badge {
-  display: inline-block;
-  /* 9px text is too blurry on low-resolution screens */
-  font-size: 10px;
-  font-weight: normal;
-  line-height: 10px;
-  height: 12px;
-  margin-top: 1px;
-  vertical-align: top;
-  border: 1px solid var(--badge-border-color);
-  border-radius: 3px;
-  padding: 0px 2px;
-  margin-inline-start: 5px;
-  -moz-user-select: none;
-  background-color: var(--badge-background-color);
-  color: var(--badge-color);
-  box-sizing: border-box;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .inspector-badge {
-    font-size: 9px;
-  }
-}
-
-/* Inspector badges that are interactive/clickable */
-.inspector-badge.interactive {
-  background-color: var(--badge-interactive-background-color);
-  color: var(--badge-interactive-color);
-  cursor: pointer;
-}
-
-.inspector-badge:not(.active).interactive:focus,
-.inspector-badge:not(.active).interactive:hover {
-  background-color: var(--badge-hover-background-color);
-}
-
-.inspector-badge.active,
-.inspector-badge.interactive.active {
-  background-color: var(--badge-active-background-color);
-  border-color: var(--badge-active-border-color);
-  color: var(--theme-selection-color);
-}
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@ -96,6 +96,19 @@
  flex-direction: column;
 }

+#layout-flexbox-container .flex-header-content:not(.flex-item-shown) {
+  overflow: hidden;
+  display: flex;
+}
+
+#layout-flexbox-container .flex-header-content:not(.flex-item-shown) .objectBox {
+  max-width: calc(100% - 20px);
+  margin-inline-end: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 /**
 * Header
 */
@ -103,7 +116,8 @@
 .flex-header {
  display: flex;
  align-items: center;
-  padding: 3px;
+  height: 32px;
+  padding: 0 3px;
  border-block-end: 1px solid var(--theme-splitter-color);
 }

@ -113,45 +127,18 @@
 }

 .flex-header-content {
-  display: flex;
  flex: 1;
-  padding: 2px 0;
+  padding-top: 2px;
  padding-inline-start: 20px;
  -moz-user-select: none;
 }

-.flex-header-content:not(.flex-item-shown) {
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.flex-header-content:not(.flex-item-shown) .objectBox {
-  max-width: calc(100% - 20px);
-  margin-inline-end: 5px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 .flex-header-content.flex-item-shown {
+  display: flex;
  justify-content: center;
  padding: 0;
 }

-.flex-header-container-properties {
-  display: flex;
-}
-
-.flex-header-container-properties .inspector-badge:first-child {
-  margin-inline-start: 0;
-}
-
-.flex-header-container-label,
-.flex-header-container-properties {
-  display: flex;
-  padding: 3px 0;
-}
-
 /**
 * Flex Item List
 */
@ -159,52 +146,18 @@
 .flex-item-list {
  font-size: 12px;
  margin: 0;
+  padding-inline-start: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow: hidden;
 }

-.flex-item-list .flex-item-list-header {
-  color: var(--theme-comment);
-  padding-inline-start: 23px;
-  margin-bottom: 4px;
-  -moz-user-select: none;
-}
-
 .flex-item-list .devtools-button {
  background-color: transparent;
  text-overflow: ellipsis;
  overflow: hidden;
  inline-size: 100%;
  text-align: start;
-  height: 24px;
-  margin: 0;
-  padding-inline-start: 28px;
-  padding-inline-end: 16px;
-  position: relative;
-}
-
-.flex-item-list .devtools-button::after {
-  content: "";
-  background-image: url(chrome://devtools/skin/images/arrowhead-right.svg);
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-position: center -1px;
-  fill: var(--theme-comment);
-  -moz-context-properties: fill;
-  position: absolute;
-  right: 7px;
-  width: 16px;
-  height: 16px;
-}
-
-.flex-item-list .flex-item-index {
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.flex-item-list .objectBox-node {
-  padding-inline-start: 8px;
 }

 /**
@ -491,6 +444,20 @@
  list-style: none;
 }

+/**
+ * Flex Container Properties
+ */
+
+#flex-container-properties {
+  border-block-start: 1px solid var(--theme-splitter-color);
+  margin-bottom: 5px;
+}
+
+#flex-container-properties .layout-properties-header {
+  padding: 5px 0;
+  padding-inline-start: 20px;
+}
+
 /**
 * Grid Container
 */
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@ -3,6 +3,14 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 :root {
+  --markup-badge-active-background-color: var(--blue-50);
+  --markup-badge-active-border-color: #FFFFFFB3;
+  --markup-badge-background-color: white;
+  --markup-badge-border-color: #CACAD1;
+  --markup-badge-color: var(--grey-60);
+  --markup-badge-hover-background-color: #DFDFE8;
+  --markup-badge-interactive-background-color: var(--grey-20);
+  --markup-badge-interactive-color: var(--grey-90);
  --markup-hidden-attr-name-color: #BA89B8;
  --markup-hidden-attr-value-color: #5C6D87;
  --markup-hidden-punctuation-color: #909090;
@ -11,6 +19,14 @@
 }

 .theme-dark:root {
+  --markup-badge-active-background-color: var(--blue-60);
+  --markup-badge-active-border-color: #FFF6;
+  --markup-badge-background-color: var(--grey-80);
+  --markup-badge-border-color: var(--grey-50);
+  --markup-badge-color: var(--grey-40);
+  --markup-badge-hover-background-color: var(--grey-80);
+  --markup-badge-interactive-background-color: var(--grey-70);
+  --markup-badge-interactive-color: var(--grey-30);
  --markup-hidden-attr-name-color: #B07EB3;
  --markup-hidden-attr-value-color: #9893A3;
  --markup-hidden-punctuation-color: #909090;
@ -233,13 +249,13 @@ ul.children + .tag-line::before {
 .expandable.collapsed .markup-expand-badge::before {
  /* Display an ellipsis character in collapsed nodes that can be expanded. */
  content: "";
-  background-color: var(--badge-interactive-background-color);
+  background-color: var(--markup-badge-interactive-background-color);
  background-image: url(chrome://devtools/skin/images/more.svg);
  background-repeat: no-repeat;
  background-position: center;
-  border: 1px solid var(--badge-border-color);
-  color: var(--badge-color);
-  fill: var(--badge-interactive-color);
+  border: 1px solid var(--markup-badge-border-color);
+  color: var(--markup-badge-color);
+  fill: var(--markup-badge-interactive-color);
  display: block;
  width: 12px;
  height: 8px;
@ -248,11 +264,6 @@ ul.children + .tag-line::before {
  -moz-context-properties: fill;
 }

-.expandable.collapsed .markup-expand-badge:focus::before,
-.expandable.collapsed .markup-expand-badge:hover::before {
-  background-color: var(--badge-hover-background-color);
-}
-
 /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
 * expanded (it can be if it has pseudo-elements attached) */
 .child.collapsed > .tag-line .void-element .close {
@ -401,3 +412,62 @@ ul.children + .tag-line::before {
 .doctype {
  font-style: italic;
 }
+
+/* Markup Badges */
+.markup-badge {
+  display: inline-block;
+  /* 9px text is too blurry on low-resolution screens */
+  font-size: 10px;
+  font-weight: normal;
+  line-height: 10px;
+  height: 10px;
+  margin-top: 1px;
+  vertical-align: top;
+  border: 1px solid var(--markup-badge-border-color);
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  -moz-user-select: none;
+  background-color: var(--markup-badge-background-color);
+  color: var(--markup-badge-color);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .markup-badge {
+    font-size: 9px;
+  }
+}
+
+/* Markup badges that are interactive/clickable */
+.markup-badge[data-custom],
+.markup-badge[data-display="flex"].interactive,
+.markup-badge[data-display="grid"].interactive,
+.markup-badge[data-display="inline-flex"].interactive,
+.markup-badge[data-display="inline-grid"].interactive,
+.markup-badge[data-event] {
+  background-color: var(--markup-badge-interactive-background-color);
+  color: var(--markup-badge-interactive-color);
+  cursor: pointer;
+}
+
+.markup-badge[data-display="flex"]:not(.active).interactive:focus,
+.markup-badge[data-display="flex"]:not(.active).interactive:hover,
+.markup-badge[data-display="grid"]:not(.active).interactive:focus,
+.markup-badge[data-display="grid"]:not(.active).interactive:hover,
+.markup-badge[data-display="inline-flex"]:not(.active).interactive:focus,
+.markup-badge[data-display="inline-flex"]:not(.active).interactive:hover,
+.markup-badge[data-display="inline-grid"]:not(.active).interactive:focus,
+.markup-badge[data-display="inline-grid"]:not(.active).interactive:hover,
+.markup-badge[data-event]:focus,
+.markup-badge[data-event]:hover,
+.expandable.collapsed .markup-expand-badge:focus::before,
+.expandable.collapsed .markup-expand-badge:hover::before {
+  background-color: var(--markup-badge-hover-background-color);
+}
+
+.markup-badge.active,
+.markup-badge.interactive.active {
+  background-color: var(--markup-badge-active-background-color);
+  border-color: var(--markup-badge-active-border-color);
+  color: var(--theme-selection-color);
+}