Backed out 5 changesets (bug 1478397) for failures on browser/base/content/test/static/browser_parsable_css.js on a CLOSED TREE
authorTiberius Oros <toros@mozilla.com>
Tue, 18 Sep 2018 18:10:34 +0300
changeset 437039 3655d882ad9c1762ffc8af04f8962cae986ee8f4
parent 437038 d48fc7e23aa71ef831048823cc435db20264dc45
child 437040 5fb38b2b939c28fa13a6396414e36eade5cb3fb7
push id107971
push usertoros@mozilla.com
push dateTue, 18 Sep 2018 15:11:11 +0000
treeherdermozilla-inbound@3655d882ad9c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1478397
milestone64.0a1
backs outc7db1d98d62b6fbf4e4920eb3f6c24b7136239b4
588d147e401bd18c70a7437e70b5270ed43809d5
b11a8565deffd3a6c7f8c1a2c15a34fbb87646ec
faf1ea0e1a15464d8c5acf09c4828d3c0ae557d8
8a5ca81f8429d223056db64a5466bc236e9556c0
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out 5 changesets (bug 1478397) for failures on browser/base/content/test/static/browser_parsable_css.js on a CLOSED TREE Backed out changeset c7db1d98d62b (bug 1478397) Backed out changeset 588d147e401b (bug 1478397) Backed out changeset b11a8565deff (bug 1478397) Backed out changeset faf1ea0e1a15 (bug 1478397) Backed out changeset 8a5ca81f8429 (bug 1478397)
devtools/client/inspector/flexbox/components/FlexContainer.js
devtools/client/inspector/flexbox/components/FlexItem.js
devtools/client/inspector/flexbox/components/FlexItemSelector.js
devtools/client/inspector/flexbox/components/Flexbox.js
devtools/client/inspector/flexbox/components/Header.js
devtools/client/inspector/flexbox/components/moz.build
devtools/client/inspector/flexbox/flexbox.js
devtools/client/inspector/flexbox/reducers/flexbox.js
devtools/client/inspector/grids/components/GridItem.js
devtools/client/jar.mn
devtools/client/themes/images/arrowhead-left.svg
devtools/client/themes/layout.css
--- a/devtools/client/inspector/flexbox/components/FlexContainer.js
+++ b/devtools/client/inspector/flexbox/components/FlexContainer.js
@@ -1,48 +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 {
-  createElement,
-  createRef,
-  Fragment,
-  PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, createRef, 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 { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
+loader.lazyGetter(this, "FlexItemSelector", function() {
+  return createFactory(require("./FlexItemSelector"));
+});
+
+// Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 class FlexContainer extends PureComponent {
   static get propTypes() {
     return {
       flexbox: PropTypes.shape(Types.flexbox).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+      onToggleFlexItemShown: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.colorValueEl = createRef();
     this.swatchEl = createRef();
 
+    this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this);
     this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this);
     this.setFlexboxColor = this.setFlexboxColor.bind(this);
   }
 
   componentDidMount() {
     const {
       flexbox,
       getSwatchColorPickerTooltip,
@@ -69,58 +72,117 @@ class FlexContainer extends PureComponen
     tooltip.removeSwatch(this.swatchEl.current);
   }
 
   setFlexboxColor() {
     const color = this.colorValueEl.current.textContent;
     this.props.onSetFlexboxOverlayColor(color);
   }
 
+  onFlexboxCheckboxClick(e) {
+    // If the click was on the svg icon to select the node in the inspector, bail out.
+    const originalTarget = e.nativeEvent && e.nativeEvent.explicitOriginalTarget;
+    if (originalTarget && originalTarget.namespaceURI === "http://www.w3.org/2000/svg") {
+      // We should be able to cancel the click event propagation after the following reps
+      // issue is implemented : https://github.com/devtools-html/reps/issues/95 .
+      e.preventDefault();
+      return;
+    }
+
+    const {
+      flexbox,
+      onToggleFlexboxHighlighter,
+    } = this.props;
+
+    onToggleFlexboxHighlighter(flexbox.nodeFront);
+  }
+
   onFlexboxInspectIconClick(nodeFront) {
     const { setSelectedNode } = this.props;
     setSelectedNode(nodeFront, { reason: "layout-panel" });
     nodeFront.scrollIntoView().catch(e => console.error(e));
   }
 
+  renderFlexItemSelector() {
+    const {
+      flexbox,
+      onToggleFlexItemShown,
+    } = this.props;
+    const {
+      flexItems,
+      flexItemShown,
+    } = flexbox;
+
+    if (!flexItemShown) {
+      return null;
+    }
+
+    return FlexItemSelector({
+      flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown),
+      flexItems,
+      onToggleFlexItemShown,
+    });
+  }
+
   render() {
     const {
       flexbox,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
     const {
       color,
+      highlighted,
       nodeFront,
     } = flexbox;
 
-    return createElement(Fragment, null,
-      Rep({
-        defaultRep: ElementNode,
-        mode: MODE.TINY,
-        object: translateNodeFrontToGrip(nodeFront),
-        onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-        onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-        onInspectIconClick: () => this.onFlexboxInspectIconClick(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
+    return (
+      dom.div({ className: "flex-container devtools-monospace" },
+        dom.div({},
+          dom.label({},
+            dom.input(
+              {
+                className: "devtools-checkbox-toggle",
+                checked: highlighted,
+                onChange: this.onFlexboxCheckboxClick,
+                type: "checkbox",
+              }
+            ),
+            Rep(
+              {
+                defaultRep: ElementNode,
+                mode: MODE.TINY,
+                object: translateNodeFrontToGrip(nodeFront),
+                onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+                onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+                onInspectIconClick: () => this.onFlexboxInspectIconClick(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
+          )
+        ),
+        this.renderFlexItemSelector()
       )
     );
   }
 }
 
 module.exports = FlexContainer;
--- a/devtools/client/inspector/flexbox/components/FlexItem.js
+++ b/devtools/client/inspector/flexbox/components/FlexItem.js
@@ -4,16 +4,17 @@
 
 "use strict";
 
 const { 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 { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
+// Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 class FlexItem extends PureComponent {
   static get propTypes() {
@@ -32,20 +33,22 @@ class FlexItem extends PureComponent {
 
     return (
       dom.li({},
         dom.button(
           {
             className: "devtools-button devtools-monospace",
             onClick: () => onToggleFlexItemShown(nodeFront),
           },
-          Rep({
-            defaultRep: ElementNode,
-            mode: MODE.TINY,
-            object: translateNodeFrontToGrip(nodeFront),
-          })
+          Rep(
+            {
+              defaultRep: ElementNode,
+              mode: MODE.TINY,
+              object: translateNodeFrontToGrip(nodeFront)
+            }
+          )
         )
       )
     );
   }
 }
 
 module.exports = FlexItem;
--- a/devtools/client/inspector/flexbox/components/FlexItemSelector.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSelector.js
@@ -7,16 +7,17 @@
 const { 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 {
   getSelectorFromGrip,
   translateNodeFrontToGrip,
 } = require("devtools/client/inspector/shared/utils");
 
+// Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 
@@ -56,25 +57,29 @@ class FlexItemSelector extends PureCompo
       button: event.target,
     });
   }
 
   render() {
     const { flexItem } = this.props;
 
     return (
-      dom.button(
-        {
-          id: "flex-item-selector",
-          className: "devtools-button devtools-dropdown-button",
-          onClick: this.onShowFlexItemMenu,
-        },
-        Rep({
-          defaultRep: ElementNode,
-          mode: MODE.TINY,
-          object: translateNodeFrontToGrip(flexItem.nodeFront),
-        })
+      dom.div({ className: "flex-item-selector-wrapper" },
+        dom.button(
+          {
+            id: "flex-item-selector",
+            className: "devtools-button devtools-dropdown-button",
+            onClick: this.onShowFlexItemMenu,
+          },
+          Rep(
+            {
+              defaultRep: ElementNode,
+              mode: MODE.TINY,
+              object: translateNodeFrontToGrip(flexItem.nodeFront)
+            }
+          )
+        )
       )
     );
   }
 }
 
 module.exports = FlexItemSelector;
--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -4,28 +4,28 @@
 
 "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");
 
+loader.lazyGetter(this, "FlexContainer", function() {
+  return createFactory(require("./FlexContainer"));
+});
 loader.lazyGetter(this, "FlexContainerProperties", function() {
   return createFactory(require("./FlexContainerProperties"));
 });
 loader.lazyGetter(this, "FlexItemList", function() {
   return createFactory(require("./FlexItemList"));
 });
 loader.lazyGetter(this, "FlexItemSizingProperties", function() {
   return createFactory(require("./FlexItemSizingProperties"));
 });
-loader.lazyGetter(this, "Header", function() {
-  return createFactory(require("./Header"));
-});
 
 const Types = require("../types");
 
 class Flexbox extends PureComponent {
   static get propTypes() {
     return {
       flexbox: PropTypes.shape(Types.flexbox).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
@@ -43,17 +43,17 @@ class Flexbox extends PureComponent {
       flexbox,
       onToggleFlexItemShown,
     } = this.props;
     const {
       flexItems,
       flexItemShown,
     } = flexbox;
 
-    if (flexItemShown || !flexItems.length) {
+    if (flexItemShown) {
       return null;
     }
 
     return FlexItemList({
       flexItems,
       onToggleFlexItemShown,
     });
   }
@@ -92,17 +92,17 @@ class Flexbox extends PureComponent {
         dom.div({ className: "devtools-sidepanel-no-result" },
           getStr("flexbox.noFlexboxeOnThisPage")
         )
       );
     }
 
     return (
       dom.div({ id: "layout-flexbox-container" },
-        Header({
+        FlexContainer({
           flexbox,
           getSwatchColorPickerTooltip,
           onHideBoxModelHighlighter,
           onSetFlexboxOverlayColor,
           onShowBoxModelHighlighterForNode,
           onToggleFlexboxHighlighter,
           onToggleFlexItemShown,
           setSelectedNode,
deleted file mode 100644
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ /dev/null
@@ -1,128 +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/. */
-
-"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 FlexContainer = createFactory(require("./FlexContainer"));
-const FlexItemSelector = createFactory(require("./FlexItemSelector"));
-
-const Types = require("../types");
-
-class Header extends PureComponent {
-  static get propTypes() {
-    return {
-      flexbox: PropTypes.shape(Types.flexbox).isRequired,
-      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
-      onHideBoxModelHighlighter: PropTypes.func.isRequired,
-      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
-      onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
-      onToggleFlexboxHighlighter: PropTypes.func.isRequired,
-      onToggleFlexItemShown: PropTypes.func.isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this);
-  }
-
-  onFlexboxCheckboxClick() {
-    const {
-      flexbox,
-      onToggleFlexboxHighlighter,
-    } = this.props;
-
-    onToggleFlexboxHighlighter(flexbox.nodeFront);
-  }
-
-  renderFlexContainer() {
-    if (this.props.flexbox.flexItemShown) {
-      return null;
-    }
-
-    const {
-      flexbox,
-      getSwatchColorPickerTooltip,
-      onHideBoxModelHighlighter,
-      onSetFlexboxOverlayColor,
-      onShowBoxModelHighlighterForNode,
-      setSelectedNode,
-    } = this.props;
-
-    return FlexContainer({
-      flexbox,
-      getSwatchColorPickerTooltip,
-      onHideBoxModelHighlighter,
-      onSetFlexboxOverlayColor,
-      onShowBoxModelHighlighterForNode,
-      setSelectedNode,
-    });
-  }
-
-  renderFlexItemSelector() {
-    if (!this.props.flexbox.flexItemShown) {
-      return null;
-    }
-
-    const {
-      flexbox,
-      onToggleFlexItemShown,
-    } = this.props;
-    const {
-      flexItems,
-      flexItemShown,
-    } = flexbox;
-
-    return FlexItemSelector({
-      flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown),
-      flexItems,
-      onToggleFlexItemShown,
-    });
-  }
-
-  render() {
-    const {
-      flexbox,
-      onToggleFlexItemShown,
-    } = this.props;
-    const {
-      flexItemShown,
-      highlighted,
-    } = flexbox;
-
-    return (
-      dom.div({ className: "flex-header devtools-monospace" },
-        flexItemShown ?
-          dom.button({
-            className: "flex-header-button-prev devtools-button",
-            onClick: () => onToggleFlexItemShown(),
-          })
-          :
-          null,
-        dom.div(
-          {
-            className: "flex-header-content" +
-                       (flexItemShown ? " flex-item-shown" : "")
-          },
-          this.renderFlexContainer(),
-          this.renderFlexItemSelector()
-        ),
-        dom.div({ className: "devtools-separator" }),
-        dom.input({
-          className: "devtools-checkbox-toggle",
-          checked: highlighted,
-          onChange: this.onFlexboxCheckboxClick,
-          type: "checkbox",
-        })
-      )
-    );
-  }
-}
-
-module.exports = Header;
--- a/devtools/client/inspector/flexbox/components/moz.build
+++ b/devtools/client/inspector/flexbox/components/moz.build
@@ -7,10 +7,9 @@
 DevToolsModules(
     'Flexbox.js',
     'FlexContainer.js',
     'FlexContainerProperties.js',
     'FlexItem.js',
     'FlexItemList.js',
     'FlexItemSelector.js',
     'FlexItemSizingProperties.js',
-    'Header.js',
 )
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -19,17 +19,16 @@ loader.lazyRequireGetter(this, "parseURL
 loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
 
 const FLEXBOX_COLOR = "#9400FF";
 
 class FlexboxInspector {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
-    this.selection = inspector.selection;
     this.store = inspector.store;
     this.walker = inspector.walker;
 
     this.onHighlighterShown = this.onHighlighterShown.bind(this);
     this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
     this.onReflow = throttle(this.onReflow, 500, this);
     this.onSetFlexboxOverlayColor = this.onSetFlexboxOverlayColor.bind(this);
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
@@ -81,28 +80,27 @@ class FlexboxInspector {
   }
 
   destroy() {
     if (this._highlighters) {
       this.highlighters.off("flexbox-highlighter-hidden", this.onHighlighterHidden);
       this.highlighters.off("flexbox-highlighter-shown", this.onHighlighterShown);
     }
 
-    this.selection.off("new-node-front", this.onUpdatePanel);
+    this.inspector.selection.off("new-node-front", this.onUpdatePanel);
     this.inspector.sidebar.off("select", this.onSidebarSelect);
     this.inspector.off("new-root", this.onUpdatePanel);
 
     this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
 
     this._highlighters = null;
     this.document = null;
     this.hasGetCurrentFlexbox = null;
     this.inspector = null;
     this.layoutInspector = null;
-    this.selection = null;
     this.store = null;
     this.walker = null;
   }
 
   getComponentProps() {
     return {
       onSetFlexboxOverlayColor: this.onSetFlexboxOverlayColor,
       onToggleFlexboxHighlighter: this.onToggleFlexboxHighlighter,
@@ -177,24 +175,24 @@ class FlexboxInspector {
   /**
    * Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
    * updates the flexbox panel because the shape of the flexbox on the page may have
    * changed.
    */
   async onReflow() {
     if (!this.isPanelVisible() ||
         !this.store ||
-        !this.selection.nodeFront ||
+        !this.inspector.selection.nodeFront ||
         !this.hasGetCurrentFlexbox) {
       return;
     }
 
     try {
       const flexboxFront = await this.layoutInspector.getCurrentFlexbox(
-        this.selection.nodeFront);
+        this.inspector.selection.nodeFront);
 
       // Clear the flexbox panel if there is no flex container for the current node
       // selection.
       if (!flexboxFront) {
         this.store.dispatch(clearFlexbox());
         return;
       }
 
@@ -240,24 +238,24 @@ class FlexboxInspector {
 
   /**
    * Handler for the inspector sidebar "select" event. Updates the flexbox panel if it
    * is visible.
    */
   onSidebarSelect() {
     if (!this.isPanelVisible()) {
       this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
+      this.inspector.selection.off("new-node-front", this.onUpdatePanel);
       this.inspector.off("new-root", this.onUpdatePanel);
-      this.selection.off("new-node-front", this.onUpdatePanel);
       return;
     }
 
     this.inspector.reflowTracker.trackReflows(this, this.onReflow);
+    this.inspector.selection.on("new-node-front", this.onUpdatePanel);
     this.inspector.on("new-root", this.onUpdatePanel);
-    this.selection.on("new-node-front", this.onUpdatePanel);
 
     this.update();
   }
 
   /**
    * Handler for a change in the input checkboxes in the FlexboxItem component.
    * Toggles on/off the flexbox highlighter for the provided flex container element.
    *
@@ -267,31 +265,26 @@ class FlexboxInspector {
    */
   onToggleFlexboxHighlighter(node) {
     this.highlighters.toggleFlexboxHighlighter(node);
     this.store.dispatch(updateFlexboxHighlighted(node !==
       this.highlighters.flexboxHighlighterShow));
   }
 
   /**
-   * Handler for a change in the input checkbox in the FlexItem and Header component.
-   * Toggles on/off the flex item highlighter for the provided flex item element and
-   * changes the selection to the given node.
+   * Handler for a change in the input checkbox in the FlexItem component.
+   * Toggles on/off the flex item highlighter for the provided flex item element.
    *
-   * @param  {NodeFront|null} node
+   * @param  {NodeFront} node
    *         The NodeFront of the flex item element for which the flex item is toggled
    *         on/off for.
    */
   onToggleFlexItemShown(node) {
     this.highlighters.toggleFlexItemHighlighter(node);
     this.store.dispatch(toggleFlexItemShown(node));
-
-    if (node) {
-      this.selection.setNodeFront(node);
-    }
   }
 
   /**
    * Handler for "new-root" event fired by the inspector and "new-node-front" event fired
    * by the inspector selection. Updates the flexbox panel if it is visible.
    */
   onUpdatePanel() {
     if (!this.isPanelVisible()) {
@@ -309,26 +302,26 @@ class FlexboxInspector {
    * @param  {FlexboxFront|null} flexboxFront
    *         The FlexboxFront of the flex container for the current node selection.
    */
   async update(flexboxFront) {
     // Stop refreshing if the inspector or store is already destroyed or no node is
     // selected.
     if (!this.inspector ||
         !this.store ||
-        !this.selection.nodeFront ||
+        !this.inspector.selection.nodeFront ||
         !this.hasGetCurrentFlexbox) {
       return;
     }
 
     try {
       // Fetch the current flexbox if no flexbox front was passed into this update.
       if (!flexboxFront) {
         flexboxFront = await this.layoutInspector.getCurrentFlexbox(
-          this.selection.nodeFront);
+          this.inspector.selection.nodeFront);
       }
 
       // Clear the flexbox panel if there is no flex container for the current node
       // selection.
       if (!flexboxFront) {
         this.store.dispatch(clearFlexbox());
         return;
       }
@@ -337,35 +330,27 @@ class FlexboxInspector {
       // then get it from the walker. This happens when the walker hasn't seen this
       // particular DOM Node in the tree yet or when we are connected to an older server.
       let containerNodeFront = flexboxFront.containerNodeFront;
       if (!containerNodeFront) {
         containerNodeFront = await this.walker.getNodeFromActor(flexboxFront.actorID,
           ["containerEl"]);
       }
 
-      // Fetch the flex items for the given flex container.
+      // Fetch the flex items for the given flex container and the flex item NodeFronts.
+      const flexItems = [];
       const flexItemFronts = await flexboxFront.getFlexItems();
-      const flexItems = [];
-      let flexItemShown = null;
 
       for (const flexItemFront of flexItemFronts) {
-        // Fetch the NodeFront of the flex items.
         let itemNodeFront = flexItemFront.nodeFront;
         if (!itemNodeFront) {
           itemNodeFront = await this.walker.getNodeFromActor(flexItemFront.actorID,
             ["element"]);
         }
 
-        // If the current selected node is a flex item, display its flex item sizing
-        // properties.
-        if (!flexItemShown && itemNodeFront === this.selection.nodeFront) {
-          flexItemShown = itemNodeFront.actorID;
-        }
-
         flexItems.push({
           actorID: flexItemFront.actorID,
           flexItemSizing: flexItemFront.flexItemSizing,
           nodeFront: itemNodeFront,
           properties: flexItemFront.properties,
         });
       }
 
@@ -373,16 +358,26 @@ class FlexboxInspector {
         containerNodeFront == this.highlighters.flexboxHighlighterShown;
       const currentUrl = this.inspector.target.url;
       // Get the hostname, if there is no hostname, fall back on protocol
       // ex: `data:` uri, and `about:` pages
       const hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
       const customColors = await this.getCustomFlexboxColors();
       const color = customColors[hostname] ? customColors[hostname] : FLEXBOX_COLOR;
 
+      const { flexbox } = this.store.getState();
+      let { flexItemShown } = flexbox;
+
+      // Check if the flex item shown still exists in the list of flex items, otherwise
+      // set the flex item shown to null.
+      if (flexItemShown &&
+          !flexItemFronts.find(item => item.nodeFront.actorID === flexItemShown)) {
+        flexItemShown = null;
+      }
+
       this.store.dispatch(updateFlexbox({
         actorID: flexboxFront.actorID,
         color,
         flexItems,
         flexItemShown,
         highlighted,
         nodeFront: containerNodeFront,
         properties: flexboxFront.properties,
--- a/devtools/client/inspector/flexbox/reducers/flexbox.js
+++ b/devtools/client/inspector/flexbox/reducers/flexbox.js
@@ -31,26 +31,21 @@ const INITIAL_FLEXBOX = {
 
 const reducers = {
 
   [CLEAR_FLEXBOX](flexbox, _) {
     return INITIAL_FLEXBOX;
   },
 
   [TOGGLE_FLEX_ITEM_SHOWN](flexbox, { nodeFront }) {
-    let flexItemShown = null;
-
-    // Get the NodeFront actor ID of the flex item.
-    if (nodeFront) {
-      const flexItem = flexbox.flexItems.find(item => item.nodeFront === nodeFront);
-      flexItemShown = flexItem.nodeFront.actorID;
-    }
+    const { flexItems } = flexbox;
+    const flexItemShown = flexItems.find(item => item.nodeFront === nodeFront);
 
     return Object.assign({}, flexbox, {
-      flexItemShown,
+      flexItemShown: flexItemShown ? flexItemShown.nodeFront.actorID : null,
     });
   },
 
   [UPDATE_FLEXBOX](_, { flexbox }) {
     return flexbox;
   },
 
   [UPDATE_FLEXBOX_COLOR](flexbox, { color }) {
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -4,16 +4,17 @@
 
 "use strict";
 
 const { createRef, 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 { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
 
+// Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 class GridItem extends PureComponent {
   static get propTypes() {
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -102,17 +102,16 @@ devtools.jar:
     skin/devtools-browser.css (themes/devtools-browser.css)
     skin/dark-theme.css (themes/dark-theme.css)
     skin/light-theme.css (themes/light-theme.css)
     skin/toolbars.css (themes/toolbars.css)
     skin/toolbox.css (themes/toolbox.css)
     skin/tooltips.css (themes/tooltips.css)
     skin/images/accessibility.svg (themes/images/accessibility.svg)
     skin/images/add.svg (themes/images/add.svg)
-    skin/images/arrowhead-left.svg (themes/images/arrowhead-left.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)
     skin/images/filters.svg (themes/images/filters.svg)
     skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
     skin/images/aboutdebugging-collapse-icon.svg (themes/images/aboutdebugging-collapse-icon.svg)
     skin/images/aboutdebugging-connect-icon.svg (themes/images/aboutdebugging-connect-icon.svg)
     skin/images/aboutdebugging-firefox-logo.svg (themes/images/aboutdebugging-firefox-logo.svg)
deleted file mode 100644
--- a/devtools/client/themes/images/arrowhead-left.svg
+++ /dev/null
@@ -1,6 +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/. -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 1 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0z"></path>
-</svg>
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -92,44 +92,20 @@
  * Flex Container
  */
 
 #layout-flexbox-container {
   display: flex;
   flex-direction: column;
 }
 
-/**
- * Header
- */
-
-.flex-header {
-  display: flex;
-  align-items: center;
-  height: 32px;
+.flex-container {
   border-bottom: 1px solid var(--theme-splitter-color);
-  padding: 0 3px;
-}
-
-.flex-header-button-prev::before {
-  background-image: url("chrome://devtools/skin/images/arrowhead-left.svg");
-  background-size: 16px;
-}
-
-.flex-header-content {
-  flex: 1;
-  padding-top: 2px;
+  padding: 5px 0;
   padding-inline-start: 20px;
-  -moz-user-select: none;
-}
-
-.flex-header-content.flex-item-shown {
-  display: flex;
-  justify-content: center;
-  padding: 0;
 }
 
 /**
  * Flex Item List
  */
 
 .flex-item-list {
   border-bottom: 1px solid var(--theme-splitter-color);
@@ -143,16 +119,34 @@
 .flex-item-list .devtools-button {
   background-color: transparent;
 }
 
 /**
  * Flex Item Selector
  */
 
+.flex-item-selector-wrapper {
+  margin-inline-start: 25px;
+  position: relative;
+}
+
+.flex-item-selector-wrapper::before {
+  position: absolute;
+  left: -12px;
+  top: 3px;
+  content: '';
+  display: block;
+  border-left: 0.5px solid var(--flex-item-selector-wrapper-border-color);
+  height: 0.8em;
+  border-bottom: 0.5px solid var(--flex-item-selector-wrapper-border-color);
+  width: 10px;
+}
+
+
 #flex-item-selector {
   background-position: right 4px center;
   padding-left: 0;
   vertical-align: middle;
   width: 140px;
 }
 
 #flex-item-selector .objectBox-node {