Bug 1484483 - Part 1: Refactor the flex container listing out of the Flexbox Component into FlexContainerList. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 22 Aug 2018 21:07:07 -0400
changeset 488068 8b2f2f59a9ec7fa001089d45183f799d58ad35ac
parent 488067 15d93c1b21401f159055169ea3949253e9d39fcd
child 488069 b3d9ddf714d50a41300439fe698fffaa8ea9fa8d
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1484483
milestone63.0a1
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
Bug 1484483 - Part 1: Refactor the flex container listing out of the Flexbox Component into FlexContainerList. r=rcaliman - Rename FlexboxItem component to FlexContainerItem to make it less ambiguous. - Refactor the flex container listing out of the Flexbox Component into FlexContainerList.
devtools/client/inspector/flexbox/actions/flexbox.js
devtools/client/inspector/flexbox/actions/index.js
devtools/client/inspector/flexbox/components/FlexContainerItem.js
devtools/client/inspector/flexbox/components/FlexContainerList.js
devtools/client/inspector/flexbox/components/Flexbox.js
devtools/client/inspector/flexbox/components/FlexboxItem.js
devtools/client/inspector/flexbox/components/moz.build
devtools/client/inspector/flexbox/flexbox.js
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/components/GridOutline.js
devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js
devtools/client/inspector/layout/components/LayoutApp.js
devtools/client/inspector/layout/layout.js
--- a/devtools/client/inspector/flexbox/actions/flexbox.js
+++ b/devtools/client/inspector/flexbox/actions/flexbox.js
@@ -28,17 +28,17 @@ module.exports = {
   updateFlexbox(flexbox) {
     return {
       type: UPDATE_FLEXBOX,
       flexbox,
     };
   },
 
   /**
-   * Update the color used for the flexbox's highlighter.
+   * Updates the color used for the flexbox's highlighter.
    *
    * @param  {String} color
    *         The color to use for this nodeFront's flexbox highlighter.
    */
   updateFlexboxColor(color) {
     return {
       type: UPDATE_FLEXBOX_COLOR,
       color,
--- a/devtools/client/inspector/flexbox/actions/index.js
+++ b/devtools/client/inspector/flexbox/actions/index.js
@@ -9,15 +9,15 @@ const { createEnum } = require("devtools
 createEnum([
 
   // Clears the flexbox state by resetting it back to the initial flexbox state.
   "CLEAR_FLEXBOX",
 
   // Updates the flexbox state with the newly selected flexbox.
   "UPDATE_FLEXBOX",
 
-  // Update the color used for the overlay of a flexbox.
+  // Updates the color used for the overlay of a flexbox.
   "UPDATE_FLEXBOX_COLOR",
 
   // Updates the flexbox highlighted state.
   "UPDATE_FLEXBOX_HIGHLIGHTED",
 
 ], module.exports);
rename from devtools/client/inspector/flexbox/components/FlexboxItem.js
rename to devtools/client/inspector/flexbox/components/FlexContainerItem.js
--- a/devtools/client/inspector/flexbox/components/FlexboxItem.js
+++ b/devtools/client/inspector/flexbox/components/FlexContainerItem.js
@@ -12,35 +12,35 @@ const { translateNodeFrontToGrip } = req
 
 // Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const { Rep } = REPS;
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
-class FlexboxItem extends PureComponent {
+class FlexContainerItem extends PureComponent {
   static get propTypes() {
     return {
       flexbox: PropTypes.shape(Types.flexbox).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
-    this.setFlexboxColor = this.setFlexboxColor.bind(this);
     this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this);
     this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this);
+    this.setFlexboxColor = this.setFlexboxColor.bind(this);
   }
 
   componentDidMount() {
     const {
       flexbox,
       getSwatchColorPickerTooltip,
       onSetFlexboxOverlayColor,
     } = this.props;
@@ -104,50 +104,50 @@ class FlexboxItem extends PureComponent 
     } = this.props;
     const {
       actorID,
       color,
       highlighted,
       nodeFront,
     } = flexbox;
 
-    return dom.li(
-      {},
-      dom.label(
-        {},
-        dom.input(
+    return (
+      dom.li({},
+        dom.label({},
+          dom.input(
+            {
+              type: "checkbox",
+              value: actorID,
+              checked: highlighted,
+              onChange: this.onFlexboxCheckboxClick,
+            }
+          ),
+          Rep(
+            {
+              defaultRep: ElementNode,
+              mode: MODE.TINY,
+              object: translateNodeFrontToGrip(nodeFront),
+              onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+              onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+              onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
+            }
+          )
+        ),
+        dom.div(
           {
-            type: "checkbox",
-            value: actorID,
-            checked: highlighted,
-            onChange: this.onFlexboxCheckboxClick,
+            className: "flexbox-color-swatch",
+            style: {
+              backgroundColor: color,
+            },
+            title: color,
           }
         ),
-        Rep(
-          {
-            defaultRep: ElementNode,
-            mode: MODE.TINY,
-            object: translateNodeFrontToGrip(nodeFront),
-            onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-            onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-            onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
-          }
-        )
-      ),
-      dom.div(
-        {
-          className: "flexbox-color-swatch",
-          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: "flexbox-color-value" }, 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: "flexbox-color-value" }, color)
+      )
     );
   }
 }
 
-module.exports = FlexboxItem;
+module.exports = FlexContainerItem;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexContainerList.js
@@ -0,0 +1,64 @@
+/* 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 FlexContainerItem = createFactory(require("./FlexContainerItem"));
+
+const Types = require("../types");
+
+class FlexContainerList 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,
+      setSelectedNode: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      flexbox,
+      getSwatchColorPickerTooltip,
+      onHideBoxModelHighlighter,
+      onSetFlexboxOverlayColor,
+      onShowBoxModelHighlighterForNode,
+      onToggleFlexboxHighlighter,
+      setSelectedNode,
+    } = this.props;
+
+    return (
+      dom.div({ className: "flexbox-container" },
+        dom.span({}, getStr("flexbox.overlayFlexbox")),
+        dom.ul(
+          {
+            id: "flexbox-list",
+            className: "devtools-monospace",
+          },
+          FlexContainerItem({
+            key: flexbox.id,
+            flexbox,
+            getSwatchColorPickerTooltip,
+            onHideBoxModelHighlighter,
+            onSetFlexboxOverlayColor,
+            onShowBoxModelHighlighterForNode,
+            onToggleFlexboxHighlighter,
+            setSelectedNode,
+          })
+        )
+      )
+    );
+  }
+}
+
+module.exports = FlexContainerList;
--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -4,68 +4,65 @@
 
 "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 FlexboxItem = createFactory(require("./FlexboxItem"));
+loader.lazyGetter(this, "FlexContainerList", function() {
+  return createFactory(require("./FlexContainerList"));
+});
 
 const Types = require("../types");
 
 class Flexbox extends PureComponent {
   static get propTypes() {
     return {
       flexbox: PropTypes.shape(Types.flexbox).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       flexbox,
       getSwatchColorPickerTooltip,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onShowBoxModelHighlighterForNode,
       onToggleFlexboxHighlighter,
+      setSelectedNode,
     } = this.props;
 
-    return flexbox.actorID ?
+    if (!flexbox.actorID) {
+      return (
+        dom.div({ className: "devtools-sidepanel-no-result" },
+          getStr("flexbox.noFlexboxeOnThisPage")
+        )
+      );
+    }
+
+    return (
       dom.div({ id: "layout-flexbox-container" },
         dom.div({ className: "flexbox-content" },
-          dom.div({ className: "flexbox-container" },
-            dom.span({}, getStr("flexbox.overlayFlexbox")),
-            dom.ul(
-              {
-                id: "flexbox-list",
-                className: "devtools-monospace",
-              },
-              FlexboxItem({
-                key: flexbox.id,
-                flexbox,
-                getSwatchColorPickerTooltip,
-                setSelectedNode,
-                onHideBoxModelHighlighter,
-                onSetFlexboxOverlayColor,
-                onShowBoxModelHighlighterForNode,
-                onToggleFlexboxHighlighter,
-              })
-            )
-          )
+          FlexContainerList({
+            flexbox,
+            getSwatchColorPickerTooltip,
+            onHideBoxModelHighlighter,
+            onSetFlexboxOverlayColor,
+            onShowBoxModelHighlighterForNode,
+            onToggleFlexboxHighlighter,
+            setSelectedNode,
+          })
         )
       )
-      :
-      dom.div({ className: "devtools-sidepanel-no-result" },
-        getStr("flexbox.noFlexboxeOnThisPage")
-      );
+    );
   }
 }
 
 module.exports = Flexbox;
--- a/devtools/client/inspector/flexbox/components/moz.build
+++ b/devtools/client/inspector/flexbox/components/moz.build
@@ -1,10 +1,11 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'Flexbox.js',
-    'FlexboxItem.js',
+    'FlexContainerItem.js',
+    'FlexContainerList.js',
 )
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -88,17 +88,16 @@ class FlexboxInspector {
     this.inspector = null;
     this.layoutInspector = null;
     this.store = null;
     this.walker = null;
   }
 
   getComponentProps() {
     return {
-      getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
       onSetFlexboxOverlayColor: this.onSetFlexboxOverlayColor,
       onToggleFlexboxHighlighter: this.onToggleFlexboxHighlighter,
     };
   }
 
   /**
    * Returns an object containing the custom flexbox colors for different hosts.
    *
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -104,26 +104,24 @@ class GridItem extends PureComponent {
           dom.input(
             {
               checked: grid.highlighted,
               type: "checkbox",
               value: grid.id,
               onChange: this.onGridCheckboxClick,
             }
           ),
-          Rep(
-            {
-              defaultRep: ElementNode,
-              mode: MODE.TINY,
-              object: translateNodeFrontToGrip(nodeFront),
-              onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-              onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-              onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
-            }
-          )
+          Rep({
+            defaultRep: ElementNode,
+            mode: MODE.TINY,
+            object: translateNodeFrontToGrip(nodeFront),
+            onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+            onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+            onInspectIconClick: () => this.onGridInspectIconClick(nodeFront),
+          })
         ),
         dom.div(
           {
             className: "grid-color-swatch",
             style: {
               backgroundColor: grid.color,
             },
             title: grid.color,
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -190,27 +190,26 @@ class GridOutline extends PureComponent 
 
     return { width, height };
   }
 
   /**
    * Displays a message text "Cannot show outline for this grid".
    */
   renderCannotShowOutlineText() {
-    return dom.div(
-      {
-        className: "grid-outline-text"
-      },
-      dom.span(
-        {
-          className: "grid-outline-text-icon",
-          title: getStr("layout.cannotShowGridOutline.title")
-        }
-      ),
-      getStr("layout.cannotShowGridOutline")
+    return (
+      dom.div({ className: "grid-outline-text" },
+        dom.span(
+          {
+            className: "grid-outline-text-icon",
+            title: getStr("layout.cannotShowGridOutline.title")
+          }
+        ),
+        getStr("layout.cannotShowGridOutline")
+      )
     );
   }
 
   /**
    * Renders the grid outline for the given grid container object.
    *
    * @param  {Object} grid
    *         A single grid container in the document.
@@ -291,59 +290,61 @@ class GridOutline extends PureComponent 
    *         The grid area name or null if the grid cell is not part of a grid area.
    * @param  {Number} width
    *         The width of grid cell.
    * @param  {Number} height
    *         The height of the grid cell.
    */
   renderGridCell(id, gridFragmentIndex, x, y, rowNumber, columnNumber, color,
     gridAreaName, width, height) {
-    return dom.rect(
-      {
+    return (
+      dom.rect({
         key: `${id}-${rowNumber}-${columnNumber}`,
         className: "grid-outline-cell",
         "data-grid-area-name": gridAreaName,
         "data-grid-fragment-index": gridFragmentIndex,
         "data-grid-id": id,
         "data-grid-row": rowNumber,
         "data-grid-column": columnNumber,
         x,
         y,
         width,
         height,
         fill: "none",
         onMouseEnter: this.onHighlightCell,
         onMouseLeave: this.onHighlightCell,
-      }
+      })
     );
   }
 
   renderGridOutline(grid) {
     const { color } = grid;
 
-    return dom.g(
-      {
-        id: "grid-outline-group",
-        className: "grid-outline-group",
-        style: { color }
-      },
-      this.renderGrid(grid)
+    return (
+      dom.g(
+        {
+          id: "grid-outline-group",
+          className: "grid-outline-group",
+          style: { color }
+        },
+        this.renderGrid(grid)
+      )
     );
   }
 
   renderGridOutlineBorder(borderWidth, borderHeight, color) {
-    return dom.rect(
-      {
+    return (
+      dom.rect({
         key: "border",
         className: "grid-outline-border",
         x: 0,
         y: 0,
         width: borderWidth,
         height: borderHeight
-      }
+      })
     );
   }
 
   renderOutline() {
     const {
       height,
       selectedGrid,
       showOutline,
--- a/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
+++ b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
@@ -18,17 +18,17 @@ const TEST_URI = `
   </div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, gridInspector, layoutView } = await openLayoutView();
   const { document: doc } = gridInspector;
   const { store } = inspector;
-  const cPicker = layoutView.getSwatchColorPickerTooltip();
+  const cPicker = layoutView.swatchColorPickerTooltip;
   const spectrum = cPicker.spectrum;
   const swatch = doc.querySelector(".grid-color-swatch");
 
   info("Scrolling into view of the #grid color swatch.");
   swatch.scrollIntoView();
 
   info("Opening the color picker by clicking on the #grid color swatch.");
   const onColorPickerReady = cPicker.once("ready");
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
@@ -18,17 +18,17 @@ const TEST_URI = `
   </div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, gridInspector, layoutView } = await openLayoutView();
   const { document: doc } = gridInspector;
   const { store } = inspector;
-  const cPicker = layoutView.getSwatchColorPickerTooltip();
+  const cPicker = layoutView.swatchColorPickerTooltip;
   const spectrum = cPicker.spectrum;
   const swatch = doc.querySelector(".grid-color-swatch");
 
   info("Checking the initial state of the Grid Inspector.");
   is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
     "The color swatch's background is correct.");
   is(store.getState().grids[0].color, "#9400FF", "The grid color state is correct.");
 
--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
@@ -18,17 +18,17 @@ const TEST_URI = `
   </div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, gridInspector, layoutView } = await openLayoutView();
   const { document: doc } = gridInspector;
   const { store } = inspector;
-  const cPicker = layoutView.getSwatchColorPickerTooltip();
+  const cPicker = layoutView.swatchColorPickerTooltip;
   const spectrum = cPicker.spectrum;
   const swatch = doc.querySelector(".grid-color-swatch");
 
   info("Checking the initial state of the Grid Inspector.");
   is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
     "The color swatch's background is correct.");
   is(store.getState().grids[0].color, "#9400FF", "The grid color state is correct.");
 
--- a/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js
+++ b/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js
@@ -18,17 +18,17 @@ const TEST_URI = `
   </div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, gridInspector, layoutView, toolbox } = await openLayoutView();
   const { document: doc } = gridInspector;
   const { store } = inspector;
-  const cPicker = layoutView.getSwatchColorPickerTooltip();
+  const cPicker = layoutView.swatchColorPickerTooltip;
   const swatch = doc.querySelector(".grid-color-swatch");
 
   info("Scrolling into view of the #grid color swatch.");
   swatch.scrollIntoView();
 
   info("Opening the color picker by clicking on the #grid color swatch.");
   const onColorPickerReady = cPicker.once("ready");
   swatch.click();
--- a/devtools/client/inspector/layout/components/LayoutApp.js
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -11,16 +11,17 @@ const PropTypes = require("devtools/clie
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
 const BoxModel = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModel"));
 const Flexbox = createFactory(require("devtools/client/inspector/flexbox/components/Flexbox"));
 const Grid = createFactory(require("devtools/client/inspector/grids/components/Grid"));
 
 const BoxModelTypes = require("devtools/client/inspector/boxmodel/types");
+const FlexboxTypes = require("devtools/client/inspector/flexbox/types");
 const GridTypes = require("devtools/client/inspector/grids/types");
 
 const Accordion = createFactory(require("./Accordion"));
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
@@ -30,26 +31,31 @@ const FLEXBOX_ENABLED_PREF = "devtools.f
 const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
 const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
 const GRID_OPENED_PREF = "devtools.layout.grid.opened";
 
 class LayoutApp extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
+      flexbox: PropTypes.shape(FlexboxTypes.flexbox).isRequired,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
       highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelEditor: PropTypes.func.isRequired,
       onShowBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      onShowGridOutlineHighlight: PropTypes.func.isRequired,
+      onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+      onToggleGeometryEditor: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
+      onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
       setSelectedNode: PropTypes.func.isRequired,
       showBoxModelProperties: PropTypes.bool.isRequired,
     };
   }
 
   render() {
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -18,18 +18,16 @@ loader.lazyRequireGetter(this, "GridInsp
 loader.lazyRequireGetter(this, "SwatchColorPickerTooltip", "devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
 
 class LayoutView {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
     this.store = inspector.store;
 
-    this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
-
     this.init();
   }
 
   init() {
     if (!this.inspector) {
       return;
     }
 
@@ -57,17 +55,17 @@ class LayoutView {
       onShowGridOutlineHighlight,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
     const layoutApp = LayoutApp({
-      getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
+      getSwatchColorPickerTooltip: () => this.swatchColorPickerTooltip,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleFlexboxHighlighter,
@@ -107,23 +105,16 @@ class LayoutView {
     this.flexboxInspector.destroy();
     this.gridInspector.destroy();
 
     this.document = null;
     this.inspector = null;
     this.store = null;
   }
 
-  /**
-   * Retrieve the shared SwatchColorPicker instance.
-   */
-  getSwatchColorPickerTooltip() {
-    return this.swatchColorPickerTooltip;
-  }
-
   get swatchColorPickerTooltip() {
     if (!this._swatchColorPickerTooltip) {
       this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
         this.inspector.toolbox.doc,
         this.inspector,
         { supportsCssColor4ColorFunction: () => false }
       );
     }