Bug 1485115 - Format the React and Redux components in the Box Model and Grid Inspector. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 22 Aug 2018 13:18:46 -0400
changeset 488003 3b7a5715e699075b00ec90ad524b40a52202e059
parent 488002 af1af69c1d9cbdc06cb838edd9819bae13aa7d88
child 488004 48213c5c25e9aa9389375e4e71c1a58567d37ca2
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
bugs1485115
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 1485115 - Format the React and Redux components in the Box Model and Grid Inspector. r=rcaliman
devtools/client/inspector/boxmodel/actions/box-model.js
devtools/client/inspector/boxmodel/actions/index.js
devtools/client/inspector/boxmodel/components/BoxModel.js
devtools/client/inspector/boxmodel/components/BoxModelEditable.js
devtools/client/inspector/boxmodel/components/BoxModelInfo.js
devtools/client/inspector/boxmodel/components/BoxModelMain.js
devtools/client/inspector/boxmodel/components/BoxModelProperties.js
devtools/client/inspector/grids/actions/grids.js
devtools/client/inspector/grids/actions/highlighter-settings.js
devtools/client/inspector/grids/actions/index.js
devtools/client/inspector/grids/components/Grid.js
devtools/client/inspector/grids/components/GridDisplaySettings.js
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/components/GridList.js
devtools/client/inspector/grids/components/GridOutline.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/layout/components/LayoutApp.js
devtools/client/inspector/layout/layout.js
--- a/devtools/client/inspector/boxmodel/actions/box-model.js
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -8,40 +8,40 @@ const {
   UPDATE_GEOMETRY_EDITOR_ENABLED,
   UPDATE_LAYOUT,
   UPDATE_OFFSET_PARENT,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the geometry editor's enabled state.
+   * Updates the geometry editor's enabled state.
    *
    * @param  {Boolean} enabled
    *         Whether or not the geometry editor is enabled or not.
    */
   updateGeometryEditorEnabled(enabled) {
     return {
       type: UPDATE_GEOMETRY_EDITOR_ENABLED,
       enabled,
     };
   },
 
   /**
-   * Update the layout state with the new layout properties.
+   * Updates the layout state with the new layout properties.
    */
   updateLayout(layout) {
     return {
       type: UPDATE_LAYOUT,
       layout,
     };
   },
 
   /**
-   * Update the offset parent state with the new DOM node.
+   * Updates the offset parent state with the new DOM node.
    */
   updateOffsetParent(offsetParent) {
     return {
       type: UPDATE_OFFSET_PARENT,
       offsetParent,
     };
   }
 
--- a/devtools/client/inspector/boxmodel/actions/index.js
+++ b/devtools/client/inspector/boxmodel/actions/index.js
@@ -3,18 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
-  // Update the geometry editor's enabled state.
+  // Updates the geometry editor's enabled state.
   "UPDATE_GEOMETRY_EDITOR_ENABLED",
 
-  // Update the layout state with the latest layout properties.
+  // Updates the layout state with the latest layout properties.
   "UPDATE_LAYOUT",
 
-  // Update the offset parent state with the new DOM node.
+  // Updates the offset parent state with the new DOM node.
   "UPDATE_OFFSET_PARENT",
 
 ], module.exports);
--- a/devtools/client/inspector/boxmodel/components/BoxModel.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -13,23 +13,23 @@ const BoxModelMain = createFactory(requi
 const BoxModelProperties = createFactory(require("./BoxModelProperties"));
 
 const Types = require("../types");
 
 class BoxModel extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(Types.boxModel).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelProperties: PropTypes.bool.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelEditor: PropTypes.func.isRequired,
       onShowBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGeometryEditor: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
@@ -39,54 +39,56 @@ class BoxModel extends PureComponent {
     if (target == this.boxModelContainer) {
       this.boxModelMain.onKeyDown(event);
     }
   }
 
   render() {
     const {
       boxModel,
-      setSelectedNode,
-      showBoxModelProperties,
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onToggleGeometryEditor,
+      setSelectedNode,
+      showBoxModelProperties,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "boxmodel-container",
-        tabIndex: 0,
-        ref: div => {
-          this.boxModelContainer = div;
-        },
-        onKeyDown: this.onKeyDown,
-      },
-      BoxModelMain({
-        boxModel,
-        boxModelContainer: this.boxModelContainer,
-        ref: boxModelMain => {
-          this.boxModelMain = boxModelMain;
+    return (
+      dom.div(
+        {
+          className: "boxmodel-container",
+          tabIndex: 0,
+          ref: div => {
+            this.boxModelContainer = div;
+          },
+          onKeyDown: this.onKeyDown,
         },
-        onHideBoxModelHighlighter,
-        onShowBoxModelEditor,
-        onShowBoxModelHighlighter,
-      }),
-      BoxModelInfo({
-        boxModel,
-        onToggleGeometryEditor,
-      }),
-      showBoxModelProperties ?
-        BoxModelProperties({
+        BoxModelMain({
+          boxModel,
+          boxModelContainer: this.boxModelContainer,
+          ref: boxModelMain => {
+            this.boxModelMain = boxModelMain;
+          },
+          onHideBoxModelHighlighter,
+          onShowBoxModelEditor,
+          onShowBoxModelHighlighter,
+        }),
+        BoxModelInfo({
           boxModel,
-          setSelectedNode,
-          onHideBoxModelHighlighter,
-          onShowBoxModelHighlighterForNode,
-        })
-        :
-        null
+          onToggleGeometryEditor,
+        }),
+        showBoxModelProperties ?
+          BoxModelProperties({
+            boxModel,
+            setSelectedNode,
+            onHideBoxModelHighlighter,
+            onShowBoxModelHighlighterForNode,
+          })
+          :
+          null
+      )
     );
   }
 }
 
 module.exports = BoxModel;
--- a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -13,19 +13,19 @@ const LONG_TEXT_ROTATE_LIMIT = 3;
 
 class BoxModelEditable extends PureComponent {
   static get propTypes() {
     return {
       box: PropTypes.string.isRequired,
       direction: PropTypes.string,
       focusable: PropTypes.bool.isRequired,
       level: PropTypes.string,
+      onShowBoxModelEditor: PropTypes.func.isRequired,
       property: PropTypes.string.isRequired,
       textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      onShowBoxModelEditor: PropTypes.func.isRequired,
     };
   }
 
   componentDidMount() {
     const { property, onShowBoxModelEditor } = this.props;
 
     editableItem({
       element: this.boxModelEditable,
@@ -44,31 +44,33 @@ class BoxModelEditable extends PureCompo
       textContent,
     } = this.props;
 
     const rotate = direction &&
                  (direction == "left" || direction == "right") &&
                  box !== "position" &&
                  textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
 
-    return dom.p(
-      {
-        className: `boxmodel-${box}
-                    ${direction ? " boxmodel-" + direction : "boxmodel-" + property}
-                    ${rotate ? " boxmodel-rotate" : ""}`,
-      },
-      dom.span(
+    return (
+      dom.p(
         {
-          className: "boxmodel-editable",
-          "data-box": box,
-          tabIndex: box === level && focusable ? 0 : -1,
-          title: property,
-          ref: span => {
-            this.boxModelEditable = span;
+          className: `boxmodel-${box}
+                      ${direction ? " boxmodel-" + direction : "boxmodel-" + property}
+                      ${rotate ? " boxmodel-rotate" : ""}`,
+        },
+        dom.span(
+          {
+            className: "boxmodel-editable",
+            "data-box": box,
+            tabIndex: box === level && focusable ? 0 : -1,
+            title: property,
+            ref: span => {
+              this.boxModelEditable = span;
+            },
           },
-        },
-        textContent
+          textContent
+        )
       )
     );
   }
 }
 
 module.exports = BoxModelEditable;
--- a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
@@ -44,42 +44,30 @@ class BoxModelInfo extends PureComponent
       width = "-",
     } = layout;
 
     let buttonClass = "layout-geometry-editor devtools-button";
     if (geometryEditorEnabled) {
       buttonClass += " checked";
     }
 
-    return dom.div(
-      {
-        className: "boxmodel-info",
-      },
-      dom.span(
-        {
-          className: "boxmodel-element-size",
-        },
-        SHARED_L10N.getFormatStr("dimensions", width, height)
-      ),
-      dom.section(
-        {
-          className: "boxmodel-position-group",
-        },
-        isPositionEditable ?
-          dom.button({
-            className: buttonClass,
-            title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
-            onClick: this.onToggleGeometryEditor,
-          })
-          :
-          null,
-        dom.span(
-          {
-            className: "boxmodel-element-position",
-          },
-          position
+    return (
+      dom.div({ className: "boxmodel-info" },
+        dom.span({ className: "boxmodel-element-size" },
+          SHARED_L10N.getFormatStr("dimensions", width, height)
+        ),
+        dom.section({ className: "boxmodel-position-group" },
+          isPositionEditable ?
+            dom.button({
+              className: buttonClass,
+              title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
+              onClick: this.onToggleGeometryEditor,
+            })
+            :
+            null,
+          dom.span({ className: "boxmodel-element-position" }, position)
         )
       )
     );
   }
 }
 
 module.exports = BoxModelInfo;
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -41,20 +41,20 @@ class BoxModelMain extends PureComponent
     this.getBorderOrPaddingValue = this.getBorderOrPaddingValue.bind(this);
     this.getContextBox = this.getContextBox.bind(this);
     this.getDisplayPosition = this.getDisplayPosition.bind(this);
     this.getHeightValue = this.getHeightValue.bind(this);
     this.getMarginValue = this.getMarginValue.bind(this);
     this.getPositionValue = this.getPositionValue.bind(this);
     this.getWidthValue = this.getWidthValue.bind(this);
     this.moveFocus = this.moveFocus.bind(this);
-    this.setAriaActive = this.setAriaActive.bind(this);
     this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onLevelClick = this.onLevelClick.bind(this);
+    this.setAriaActive = this.setAriaActive.bind(this);
   }
 
   componentDidUpdate() {
     const displayPosition = this.getDisplayPosition();
     const isContentBox = this.getContextBox();
 
     this.layouts = {
       "position": new Map([
@@ -409,313 +409,300 @@ class BoxModelMain extends PureComponent
     const marginRight = this.getMarginValue("margin-right", "right");
     const marginBottom = this.getMarginValue("margin-bottom", "bottom");
     const marginLeft = this.getMarginValue("margin-left", "left");
 
     height = this.getHeightValue(height);
     width = this.getWidthValue(width);
 
     const contentBox = layout["box-sizing"] == "content-box" ?
-      dom.div(
-        {
-          className: "boxmodel-size",
-        },
+      dom.div({ className: "boxmodel-size" },
         BoxModelEditable({
           box: "content",
           focusable,
           level,
           property: "width",
           ref: editable => {
             this.contentEditable = editable;
           },
           textContent: width,
           onShowBoxModelEditor
         }),
-        dom.span(
-          {},
-          "\u00D7"
-        ),
+        dom.span({}, "\u00D7"),
         BoxModelEditable({
           box: "content",
           focusable,
           level,
           property: "height",
           textContent: height,
           onShowBoxModelEditor
         })
       )
       :
-      dom.p(
-        {
-          className: "boxmodel-size",
-        },
-        dom.span(
-          {
-            title: "content",
-          },
+      dom.p({ className: "boxmodel-size" },
+        dom.span({ title: "content" },
           SHARED_L10N.getFormatStr("dimensions", width, height)
         )
       );
 
-    return dom.div(
-      {
-        className: "boxmodel-main devtools-monospace",
-        "data-box": "position",
-        ref: div => {
-          this.positionLayout = div;
-        },
-        onClick: this.onLevelClick,
-        onKeyDown: this.onKeyDown,
-        onMouseOver: this.onHighlightMouseOver,
-        onMouseOut: this.props.onHideBoxModelHighlighter,
-      },
-      displayPosition ?
-        dom.span(
-          {
-            className: "boxmodel-legend",
-            "data-box": "position",
-            title: "position",
-          },
-          "position"
-        )
-        :
-        null,
+    return (
       dom.div(
         {
-          className: "boxmodel-box"
-        },
-        dom.span(
-          {
-            className: "boxmodel-legend",
-            "data-box": "margin",
-            title: "margin",
+          className: "boxmodel-main devtools-monospace",
+          "data-box": "position",
+          ref: div => {
+            this.positionLayout = div;
           },
-          "margin"
-        ),
-        dom.div(
-          {
-            className: "boxmodel-margins",
-            "data-box": "margin",
-            title: "margin",
-            ref: div => {
-              this.marginLayout = div;
-            },
-          },
+          onClick: this.onLevelClick,
+          onKeyDown: this.onKeyDown,
+          onMouseOver: this.onHighlightMouseOver,
+          onMouseOut: this.props.onHideBoxModelHighlighter,
+        },
+        displayPosition ?
           dom.span(
             {
               className: "boxmodel-legend",
-              "data-box": "border",
-              title: "border",
+              "data-box": "position",
+              title: "position",
             },
-            "border"
+            "position"
+          )
+          :
+          null,
+        dom.div({ className: "boxmodel-box" },
+          dom.span(
+            {
+              className: "boxmodel-legend",
+              "data-box": "margin",
+              title: "margin",
+            },
+            "margin"
           ),
           dom.div(
             {
-              className: "boxmodel-borders",
-              "data-box": "border",
-              title: "border",
+              className: "boxmodel-margins",
+              "data-box": "margin",
+              title: "margin",
               ref: div => {
-                this.borderLayout = div;
+                this.marginLayout = div;
               },
             },
             dom.span(
               {
                 className: "boxmodel-legend",
-                "data-box": "padding",
-                title: "padding",
+                "data-box": "border",
+                title: "border",
               },
-              "padding"
+              "border"
             ),
             dom.div(
               {
-                className: "boxmodel-paddings",
-                "data-box": "padding",
-                title: "padding",
+                className: "boxmodel-borders",
+                "data-box": "border",
+                title: "border",
                 ref: div => {
-                  this.paddingLayout = div;
+                  this.borderLayout = div;
                 },
               },
-              dom.div({
-                className: "boxmodel-contents",
-                "data-box": "content",
-                title: "content",
-                ref: div => {
-                  this.contentLayout = div;
+              dom.span(
+                {
+                  className: "boxmodel-legend",
+                  "data-box": "padding",
+                  title: "padding",
                 },
-              })
+                "padding"
+              ),
+              dom.div(
+                {
+                  className: "boxmodel-paddings",
+                  "data-box": "padding",
+                  title: "padding",
+                  ref: div => {
+                    this.paddingLayout = div;
+                  },
+                },
+                dom.div({
+                  className: "boxmodel-contents",
+                  "data-box": "content",
+                  title: "content",
+                  ref: div => {
+                    this.contentLayout = div;
+                  },
+                })
+              )
             )
           )
-        )
-      ),
-      displayPosition ?
+        ),
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "top",
+            focusable,
+            level,
+            property: "position-top",
+            ref: editable => {
+              this.positionEditable = editable;
+            },
+            textContent: positionTop,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "right",
+            focusable,
+            level,
+            property: "position-right",
+            textContent: positionRight,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "bottom",
+            focusable,
+            level,
+            property: "position-bottom",
+            textContent: positionBottom,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
+        displayPosition ?
+          BoxModelEditable({
+            box: "position",
+            direction: "left",
+            focusable,
+            level,
+            property: "position-left",
+            textContent: positionLeft,
+            onShowBoxModelEditor,
+          })
+          :
+          null,
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "top",
           focusable,
           level,
-          property: "position-top",
+          property: "margin-top",
           ref: editable => {
-            this.positionEditable = editable;
+            this.marginEditable = editable;
           },
-          textContent: positionTop,
+          textContent: marginTop,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "right",
           focusable,
           level,
-          property: "position-right",
-          textContent: positionRight,
+          property: "margin-right",
+          textContent: marginRight,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "bottom",
           focusable,
           level,
-          property: "position-bottom",
-          textContent: positionBottom,
+          property: "margin-bottom",
+          textContent: marginBottom,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      displayPosition ?
+        }),
         BoxModelEditable({
-          box: "position",
+          box: "margin",
           direction: "left",
           focusable,
           level,
-          property: "position-left",
-          textContent: positionLeft,
+          property: "margin-left",
+          textContent: marginLeft,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "top",
+          focusable,
+          level,
+          property: "border-top-width",
+          ref: editable => {
+            this.borderEditable = editable;
+          },
+          textContent: borderTop,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "right",
+          focusable,
+          level,
+          property: "border-right-width",
+          textContent: borderRight,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "bottom",
+          focusable,
+          level,
+          property: "border-bottom-width",
+          textContent: borderBottom,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "border",
+          direction: "left",
+          focusable,
+          level,
+          property: "border-left-width",
+          textContent: borderLeft,
           onShowBoxModelEditor,
-        })
-        :
-        null,
-      BoxModelEditable({
-        box: "margin",
-        direction: "top",
-        focusable,
-        level,
-        property: "margin-top",
-        ref: editable => {
-          this.marginEditable = editable;
-        },
-        textContent: marginTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "right",
-        focusable,
-        level,
-        property: "margin-right",
-        textContent: marginRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "margin-bottom",
-        textContent: marginBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "margin",
-        direction: "left",
-        focusable,
-        level,
-        property: "margin-left",
-        textContent: marginLeft,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "top",
-        focusable,
-        level,
-        property: "border-top-width",
-        ref: editable => {
-          this.borderEditable = editable;
-        },
-        textContent: borderTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "right",
-        focusable,
-        level,
-        property: "border-right-width",
-        textContent: borderRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "border-bottom-width",
-        textContent: borderBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "border",
-        direction: "left",
-        focusable,
-        level,
-        property: "border-left-width",
-        textContent: borderLeft,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "top",
-        focusable,
-        level,
-        property: "padding-top",
-        ref: editable => {
-          this.paddingEditable = editable;
-        },
-        textContent: paddingTop,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "right",
-        focusable,
-        level,
-        property: "padding-right",
-        textContent: paddingRight,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "bottom",
-        focusable,
-        level,
-        property: "padding-bottom",
-        textContent: paddingBottom,
-        onShowBoxModelEditor,
-      }),
-      BoxModelEditable({
-        box: "padding",
-        direction: "left",
-        focusable,
-        level,
-        property: "padding-left",
-        textContent: paddingLeft,
-        onShowBoxModelEditor,
-      }),
-      contentBox
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "top",
+          focusable,
+          level,
+          property: "padding-top",
+          ref: editable => {
+            this.paddingEditable = editable;
+          },
+          textContent: paddingTop,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "right",
+          focusable,
+          level,
+          property: "padding-right",
+          textContent: paddingRight,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "bottom",
+          focusable,
+          level,
+          property: "padding-bottom",
+          textContent: paddingBottom,
+          onShowBoxModelEditor,
+        }),
+        BoxModelEditable({
+          box: "padding",
+          direction: "left",
+          focusable,
+          level,
+          property: "padding-left",
+          textContent: paddingLeft,
+          onShowBoxModelEditor,
+        }),
+        contentBox
+      )
     );
   }
 }
 
 module.exports = BoxModelMain;
--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -15,19 +15,19 @@ const Types = require("../types");
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 class BoxModelProperties extends PureComponent {
   static get propTypes() {
     return {
       boxModel: PropTypes.shape(Types.boxModel).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       isOpen: true,
@@ -68,44 +68,41 @@ class BoxModelProperties extends PureCom
       isOpen: !this.state.isOpen,
     });
     event.stopPropagation();
   }
 
   render() {
     const {
       boxModel,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
+      setSelectedNode,
     } = this.props;
     const { layout } = boxModel;
 
     const layoutInfo = ["box-sizing", "display", "float",
                         "line-height", "position", "z-index"];
 
     const properties = layoutInfo.map(info => {
       const { referenceElement, referenceElementType } = this.getReferenceElement(info);
 
       return ComputedProperty({
         name: info,
         key: info,
-        value: layout[info],
+        onHideBoxModelHighlighter,
+        onShowBoxModelHighlighterForNode,
         referenceElement,
         referenceElementType,
         setSelectedNode,
-        onHideBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
+        value: layout[info],
       });
     });
 
-    return dom.div(
-      {
-        className: "boxmodel-properties",
-      },
+    return dom.div({ className: "boxmodel-properties" },
       dom.div(
         {
           className: "boxmodel-properties-header",
           onDoubleClick: this.onToggleExpander,
         },
         dom.span(
           {
             className: "boxmodel-properties-expander theme-twisty",
--- a/devtools/client/inspector/grids/actions/grids.js
+++ b/devtools/client/inspector/grids/actions/grids.js
@@ -8,49 +8,49 @@ const {
   UPDATE_GRID_COLOR,
   UPDATE_GRID_HIGHLIGHTED,
   UPDATE_GRIDS,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the color used for the grid's highlighter.
+   * Updates the color used for the grid's highlighter.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the DOM node to toggle the grid highlighter.
    * @param  {String} color
    *         The color to use for this nodeFront's grid highlighter.
    */
   updateGridColor(nodeFront, color) {
     return {
       type: UPDATE_GRID_COLOR,
       color,
       nodeFront,
     };
   },
 
   /**
-   * Update the grid highlighted state.
+   * Updates the grid highlighted state.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the DOM node to toggle the grid highlighter.
    * @param  {Boolean} highlighted
    *         Whether or not the grid highlighter is highlighting the grid.
    */
   updateGridHighlighted(nodeFront, highlighted) {
     return {
       type: UPDATE_GRID_HIGHLIGHTED,
       highlighted,
       nodeFront,
     };
   },
 
   /**
-   * Update the grid state with the new list of grids.
+   * Updates the grid state with the new list of grids.
    */
   updateGrids(grids) {
     return {
       type: UPDATE_GRIDS,
       grids,
     };
   },
 
--- a/devtools/client/inspector/grids/actions/highlighter-settings.js
+++ b/devtools/client/inspector/grids/actions/highlighter-settings.js
@@ -8,43 +8,43 @@ const {
   UPDATE_SHOW_GRID_AREAS,
   UPDATE_SHOW_GRID_LINE_NUMBERS,
   UPDATE_SHOW_INFINITE_LINES,
 } = require("./index");
 
 module.exports = {
 
   /**
-   * Update the grid highlighter's show grid areas preference.
+   * Updates the grid highlighter's show grid areas preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should show the grid areas.
    */
   updateShowGridAreas(enabled) {
     return {
       type: UPDATE_SHOW_GRID_AREAS,
       enabled,
     };
   },
 
   /**
-   * Update the grid highlighter's show grid line numbers preference.
+   * Updates the grid highlighter's show grid line numbers preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should show the grid line numbers.
    */
   updateShowGridLineNumbers(enabled) {
     return {
       type: UPDATE_SHOW_GRID_LINE_NUMBERS,
       enabled,
     };
   },
 
   /**
-   * Update the grid highlighter's show infinite lines preference.
+   * Updates the grid highlighter's show infinite lines preference.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should extend grid lines infinitely.
    */
   updateShowInfiniteLines(enabled) {
     return {
       type: UPDATE_SHOW_INFINITE_LINES,
       enabled,
--- a/devtools/client/inspector/grids/actions/index.js
+++ b/devtools/client/inspector/grids/actions/index.js
@@ -3,27 +3,27 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
 
-  // Update the color used for the overlay of a grid.
+  // Updates the color used for the overlay of a grid.
   "UPDATE_GRID_COLOR",
 
-  // Update the grid highlighted state.
+  // Updates the grid highlighted state.
   "UPDATE_GRID_HIGHLIGHTED",
 
-  // Update the entire grids state with the new list of grids.
+  // Updates the entire grids state with the new list of grids.
   "UPDATE_GRIDS",
 
-  // Update the grid highlighter's show grid areas state.
+  // Updates the grid highlighter's show grid areas state.
   "UPDATE_SHOW_GRID_AREAS",
 
-  // Update the grid highlighter's show grid line numbers state.
+  // Updates the grid highlighter's show grid line numbers state.
   "UPDATE_SHOW_GRID_LINE_NUMBERS",
 
-  // Update the grid highlighter's show infinite lines state.
+  // Updates the grid highlighter's show infinite lines state.
   "UPDATE_SHOW_INFINITE_LINES",
 
 ], module.exports);
--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -16,77 +16,73 @@ const GridOutline = createFactory(requir
 const Types = require("../types");
 
 class Grid extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
       highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onShowGridOutlineHighlight: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleShowGridAreas,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      setSelectedNode,
     } = this.props;
 
-    return grids.length ?
-      dom.div(
-        {
-          id: "layout-grid-container",
-        },
-        dom.div(
-          {
-            className: "grid-content",
-          },
+    if (!grids.length) {
+      return (
+        dom.div({ className: "devtools-sidepanel-no-result" },
+          getStr("layout.noGridsOnThisPage")
+        )
+      );
+    }
+
+    return (
+      dom.div({ id: "layout-grid-container" },
+        dom.div({ className: "grid-content" },
           GridList({
             getSwatchColorPickerTooltip,
             grids,
-            setSelectedNode,
             onHideBoxModelHighlighter,
             onSetGridOverlayColor,
             onShowBoxModelHighlighterForNode,
             onToggleGridHighlighter,
+            setSelectedNode,
           }),
           GridDisplaySettings({
             highlighterSettings,
             onToggleShowGridAreas,
             onToggleShowGridLineNumbers,
             onToggleShowInfiniteLines,
           })
         ),
         GridOutline({
           grids,
           onShowGridOutlineHighlight,
         })
       )
-      :
-      dom.div(
-        {
-          className: "devtools-sidepanel-no-result",
-        },
-        getStr("layout.noGridsOnThisPage")
-      );
+    );
   }
 }
 
 module.exports = Grid;
--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -18,16 +18,17 @@ class GridDisplaySettings extends PureCo
       onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
+
     this.onShowGridAreasCheckboxClick = this.onShowGridAreasCheckboxClick.bind(this);
     this.onShowGridLineNumbersCheckboxClick =
       this.onShowGridLineNumbersCheckboxClick.bind(this);
     this.onShowInfiniteLinesCheckboxClick =
       this.onShowInfiniteLinesCheckboxClick.bind(this);
   }
 
   onShowGridAreasCheckboxClick() {
@@ -57,75 +58,58 @@ class GridDisplaySettings extends PureCo
     onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
   }
 
   render() {
     const {
       highlighterSettings,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "grid-container",
-      },
-      dom.span(
-        {},
-        getStr("layout.gridDisplaySettings")
-      ),
-      dom.ul(
-        {},
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-            {},
-            dom.input(
-              {
-                id: "grid-setting-show-grid-line-numbers",
-                type: "checkbox",
-                checked: highlighterSettings.showGridLineNumbers,
-                onChange: this.onShowGridLineNumbersCheckboxClick,
-              }
-            ),
-            getStr("layout.displayLineNumbers")
-          )
-        ),
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-           {},
-           dom.input(
-             {
-               id: "grid-setting-show-grid-areas",
-               type: "checkbox",
-               checked: highlighterSettings.showGridAreasOverlay,
-               onChange: this.onShowGridAreasCheckboxClick,
-             }
-           ),
-           getStr("layout.displayAreaNames")
-          )
-        ),
-        dom.li(
-          {
-            className: "grid-settings-item",
-          },
-          dom.label(
-            {},
-            dom.input(
-              {
-                id: "grid-setting-extend-grid-lines",
-                type: "checkbox",
-                checked: highlighterSettings.showInfiniteLines,
-                onChange: this.onShowInfiniteLinesCheckboxClick,
-              }
-            ),
-            getStr("layout.extendLinesInfinitely")
+    return (
+      dom.div({ className: "grid-container" },
+        dom.span({}, getStr("layout.gridDisplaySettings")),
+        dom.ul({},
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-show-grid-line-numbers",
+                  type: "checkbox",
+                  checked: highlighterSettings.showGridLineNumbers,
+                  onChange: this.onShowGridLineNumbersCheckboxClick,
+                }
+              ),
+              getStr("layout.displayLineNumbers")
+            )
+          ),
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-show-grid-areas",
+                  type: "checkbox",
+                  checked: highlighterSettings.showGridAreasOverlay,
+                  onChange: this.onShowGridAreasCheckboxClick,
+                }
+              ),
+              getStr("layout.displayAreaNames")
+            )
+          ),
+          dom.li({ className: "grid-settings-item" },
+            dom.label({},
+              dom.input(
+                {
+                  id: "grid-setting-extend-grid-lines",
+                  type: "checkbox",
+                  checked: highlighterSettings.showInfiniteLines,
+                  onChange: this.onShowInfiniteLinesCheckboxClick,
+                }
+              ),
+              getStr("layout.extendLinesInfinitely")
+            )
           )
         )
       )
     );
   }
 }
 
 module.exports = GridDisplaySettings;
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -17,29 +17,30 @@ const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
 
 class GridItem extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grid: PropTypes.shape(Types.grid).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
-    this.setGridColor = this.setGridColor.bind(this);
+
     this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this);
     this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this);
+    this.setGridColor = this.setGridColor.bind(this);
   }
 
   componentDidMount() {
     const swatchEl = findDOMNode(this).querySelector(".grid-color-swatch");
     const tooltip = this.props.getSwatchColorPickerTooltip();
 
     let previousColor;
     tooltip.addSwatch(swatchEl, {
@@ -92,55 +93,50 @@ class GridItem extends PureComponent {
   render() {
     const {
       grid,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
     } = this.props;
     const { nodeFront } = grid;
 
-    return dom.li(
-      {},
-      dom.label(
-        {},
-        dom.input(
+    return (
+      dom.li({},
+        dom.label({},
+          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),
+            }
+          )
+        ),
+        dom.div(
           {
-            checked: grid.highlighted,
-            type: "checkbox",
-            value: grid.id,
-            onChange: this.onGridCheckboxClick,
+            className: "grid-color-swatch",
+            style: {
+              backgroundColor: grid.color,
+            },
+            title: grid.color,
           }
         ),
-        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,
-        }
-      ),
-      // 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: "grid-color-value"
-        },
-        grid.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: "grid-color-value" }, grid.color)
       )
     );
   }
 }
 
 module.exports = GridItem;
--- a/devtools/client/inspector/grids/components/GridList.js
+++ b/devtools/client/inspector/grids/components/GridList.js
@@ -13,56 +13,52 @@ const GridItem = createFactory(require("
 
 const Types = require("../types");
 
 class GridList extends PureComponent {
   static get propTypes() {
     return {
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
       onHideBoxModelHighlighter: PropTypes.func.isRequired,
       onSetGridOverlayColor: PropTypes.func.isRequired,
       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
     };
   }
 
   render() {
     const {
       getSwatchColorPickerTooltip,
       grids,
-      setSelectedNode,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
       onToggleGridHighlighter,
+      setSelectedNode,
     } = this.props;
 
-    return dom.div(
-      {
-        className: "grid-container",
-      },
-      dom.span(
-        {},
-        getStr("layout.overlayGrid")
-      ),
-      dom.ul(
-        {
-          id: "grid-list",
-          className: "devtools-monospace",
-        },
-        grids.map(grid => GridItem({
-          key: grid.id,
-          getSwatchColorPickerTooltip,
-          grid,
-          setSelectedNode,
-          onHideBoxModelHighlighter,
-          onSetGridOverlayColor,
-          onShowBoxModelHighlighterForNode,
-          onToggleGridHighlighter,
-        }))
+    return (
+      dom.div({ className: "grid-container" },
+        dom.span({}, getStr("layout.overlayGrid")),
+        dom.ul(
+          {
+            id: "grid-list",
+            className: "devtools-monospace",
+          },
+          grids.map(grid => GridItem({
+            key: grid.id,
+            getSwatchColorPickerTooltip,
+            grid,
+            onHideBoxModelHighlighter,
+            onSetGridOverlayColor,
+            onShowBoxModelHighlighterForNode,
+            onToggleGridHighlighter,
+            setSelectedNode,
+          }))
+        )
       )
     );
   }
 }
 
 module.exports = GridList;
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -53,23 +53,23 @@ class GridOutline extends PureComponent 
       showOutline: true,
       width: 0,
     };
 
     this.doHighlightCell = this.doHighlightCell.bind(this);
     this.getGridAreaName = this.getGridAreaName.bind(this);
     this.getHeight = this.getHeight.bind(this);
     this.getTotalWidthAndHeight = this.getTotalWidthAndHeight.bind(this);
+    this.onHighlightCell = this.onHighlightCell.bind(this);
     this.renderCannotShowOutlineText = this.renderCannotShowOutlineText.bind(this);
     this.renderGrid = this.renderGrid.bind(this);
     this.renderGridCell = this.renderGridCell.bind(this);
     this.renderGridOutline = this.renderGridOutline.bind(this);
     this.renderGridOutlineBorder = this.renderGridOutlineBorder.bind(this);
     this.renderOutline = this.renderOutline.bind(this);
-    this.onHighlightCell = this.onHighlightCell.bind(this);
   }
 
   componentWillReceiveProps({ grids }) {
     const selectedGrid = grids.find(grid => grid.highlighted);
 
     // Store the height of the grid container in the component state to prevent overflow
     // issues. We want to store the width of the grid container as well so that the
     // viewbox is only the calculated width of the grid outline.
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -51,29 +51,28 @@ const GRID_COLORS = [
 class GridInspector {
   constructor(inspector, window) {
     this.document = window.document;
     this.inspector = inspector;
     this.store = inspector.store;
     this.telemetry = inspector.telemetry;
     this.walker = this.inspector.walker;
 
-    this.updateGridPanel = this.updateGridPanel.bind(this);
-
     this.onHighlighterShown = this.onHighlighterShown.bind(this);
     this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
     this.onNavigate = this.onNavigate.bind(this);
     this.onReflow = throttle(this.onReflow, 500, this);
     this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
     this.onShowGridOutlineHighlight = this.onShowGridOutlineHighlight.bind(this);
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
     this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
     this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
     this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
     this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
+    this.updateGridPanel = this.updateGridPanel.bind(this);
 
     this.init();
   }
 
   get highlighters() {
     if (!this._highlighters) {
       this._highlighters = this.inspector.highlighters;
     }
--- a/devtools/client/inspector/layout/components/LayoutApp.js
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -22,39 +22,38 @@ const Accordion = createFactory(require(
 
 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";
 const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
 
 const FLEXBOX_ENABLED_PREF = "devtools.flexboxinspector.enabled";
-
 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,
       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
       grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
       highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
-      setSelectedNode: PropTypes.func.isRequired,
-      showBoxModelProperties: PropTypes.bool.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,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
+      setSelectedNode: PropTypes.func.isRequired,
+      showBoxModelProperties: PropTypes.bool.isRequired,
     };
   }
 
   render() {
     let items = [
       {
         component: Grid,
         componentProps: this.props,
@@ -88,16 +87,17 @@ class LayoutApp extends PureComponent {
             const opened =  Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
             Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
           }
         },
         ...items
       ];
     }
 
-    return dom.div(
-      { id: "layout-container" },
-      Accordion({ items })
+    return (
+      dom.div({ id: "layout-container" },
+        Accordion({ items })
+      )
     );
   }
 }
 
 module.exports = connect(state => state)(LayoutApp);
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -29,18 +29,18 @@ class LayoutView {
   }
 
   init() {
     if (!this.inspector) {
       return;
     }
 
     const {
+      onShowBoxModelHighlighterForNode,
       setSelectedNode,
-      onShowBoxModelHighlighterForNode,
     } = this.inspector.getCommonComponentProps();
 
     const {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
     } = this.inspector.getPanel("boxmodel").getComponentProps();
@@ -58,35 +58,35 @@ class LayoutView {
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
     const layoutApp = LayoutApp({
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
-      setSelectedNode,
-      /**
-       * Shows the box model properties under the box model if true, otherwise, hidden by
-       * default.
-       */
-      showBoxModelProperties: true,
       onHideBoxModelHighlighter,
       onSetFlexboxOverlayColor,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onShowGridOutlineHighlight,
       onToggleFlexboxHighlighter,
       onToggleGeometryEditor,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
+      setSelectedNode,
+      /**
+       * Shows the box model properties under the box model if true, otherwise, hidden by
+       * default.
+       */
+      showBoxModelProperties: true,
     });
 
     const provider = createElement(Provider, {
       id: "layoutview",
       key: "layoutview",
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
     }, layoutApp);