Bug 1308263 - Part 3: Add a grid display setting for extending the grid lines infinitely. r=jryans

devtools/client/inspector/layout/components/App.js

@@ -20,7 +20,9 @@ const App = createClass({
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
+    onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],

devtools/client/inspector/layout/components/Grid.js

@@ -7,6 +7,7 @@
 const { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
+const GridDisplaySettings = createFactory(require("./GridDisplaySettings"));
 const GridList = createFactory(require("./GridList"));
 
 const Types = require("../types");
@@ -18,7 +19,9 @@ module.exports = createClass({
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
+    highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
+    onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
@@ -26,7 +29,9 @@ module.exports = createClass({
   render() {
     let {
       grids,
+      highlighterSettings,
       onToggleGridHighlighter,
+      onToggleShowInfiniteLines,
     } = this.props;
 
     return grids.length ?
@@ -37,6 +42,10 @@ module.exports = createClass({
         GridList({
           grids,
           onToggleGridHighlighter,
+        }),
+        GridDisplaySettings({
+          highlighterSettings,
+          onToggleShowInfiniteLines,
         })
       )
       :

devtools/client/inspector/layout/components/GridDisplaySettings.js

@@ -0,0 +1,66 @@
+/* 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 { addons, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const Types = require("../types");
+const { getStr } = require("../utils/l10n");
+
+module.exports = createClass({
+
+  displayName: "GridDisplaySettings",
+
+  propTypes: {
+    highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+    onToggleShowInfiniteLines: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  onShowInfiniteLinesCheckboxClick() {
+    let {
+      highlighterSettings,
+      onToggleShowInfiniteLines,
+    } = this.props;
+
+    onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
+  },
+
+  render() {
+    let {
+      highlighterSettings,
+    } = this.props;
+
+    return dom.div(
+      {
+        className: "grid-container",
+      },
+      dom.span(
+        {},
+        getStr("layout.gridDisplaySettings")
+      ),
+      dom.ul(
+        {},
+        dom.li(
+          {},
+          dom.label(
+            {},
+            dom.input(
+              {
+                type: "checkbox",
+                checked: highlighterSettings.showInfiniteLines,
+                onChange: this.onShowInfiniteLinesCheckboxClick,
+              }
+            ),
+            getStr("layout.extendGridLinesInfinitely")
+          )
+        )
+      )
+    );
+  },
+
+});

devtools/client/inspector/layout/components/GridList.js

@@ -37,16 +37,14 @@ module.exports = createClass({
 
     return dom.div(
       {
-        className: "layout-grid-list-container",
+        className: "grid-container",
       },
       dom.span(
         {},
         getStr("layout.overlayMultipleGrids")
       ),
       dom.ul(
-        {
+        {},
-          id: "layout-grid-list",
-        },
         grids.map(grid => {
           let { nodeFront } = grid;
           let { displayName, attributes } = nodeFront;

devtools/client/inspector/layout/components/moz.build

@@ -9,5 +9,6 @@ DevToolsModules(
     'Accordion.js',
     'App.js',
     'Grid.js',
+    'GridDisplaySettings.js',
     'GridList.js',
 )

devtools/client/inspector/layout/layout.js

@@ -13,6 +13,10 @@ const {
   updateGridHighlighted,
   updateGrids,
 } = require("./actions/grids");
+const {
+  updateShowInfiniteLines,
+} = require("./actions/highlighter-settings");
+
 const App = createFactory(require("./components/App"));
 const Store = require("./store");
 
@@ -20,6 +24,8 @@ const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
 function LayoutView(inspector, window) {
   this.document = window.document;
   this.highlighters = inspector.highlighters;
@@ -52,6 +58,8 @@ LayoutView.prototype = {
     this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
     let store = this.store = Store();
 
+    this.loadHighlighterSettings();
+
     let app = App({
 
       /**
@@ -63,7 +71,30 @@ LayoutView.prototype = {
        *         highlighter is toggled on/off for.
        */
       onToggleGridHighlighter: node => {
-        this.highlighters.toggleGridHighlighter(node);
+        let { highlighterSettings } = this.store.getState();
+        this.highlighters.toggleGridHighlighter(node, highlighterSettings);
+      },
+
+      /**
+       * Handler for a change in the extend grid lines infinitely checkbox in the
+       * GridDisplaySettings component. Toggles on/off the option to extend the grid
+       * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter
+       * for grids currently highlighted.
+       *
+       * @param  {Boolean} enabled
+       *         Whether or not the grid highlighter should extend grid lines infinitely.
+       */
+      onToggleShowInfiniteLines: enabled => {
+        this.store.dispatch(updateShowInfiniteLines(enabled));
+        Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled);
+
+        let { grids, highlighterSettings } = this.store.getState();
+
+        for (let grid of grids) {
+          if (grid.highlighted) {
+            this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
+          }
+        }
       },
 
     });
@@ -111,6 +142,16 @@ LayoutView.prototype = {
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
   },
 
+  /**
+   * Load the grid highligher display settings into the store from the stored preferences.
+   */
+  loadHighlighterSettings() {
+    let { dispatch } = this.store;
+
+    let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
+    dispatch(updateShowInfiniteLines(showInfinteLines));
+  },
+
   /**
    * Refreshes the layout view by dispatching the new grid data. This is called when the
    * layout view becomes visible or the view needs to be updated with new grid data.

devtools/client/locales/en-US/layout.properties

@@ -10,6 +10,14 @@
 # LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
 layout.header=Grid
 
+# LOCALIZATION NOTE (layout.gridDisplaySettings): The header for the grid display
+# settings container in the CSS Grid pane.
+layout.gridDisplaySettings=Grid Display Settings
+
+# LOCALIZATION NOTE (layout.extendGridLinesInfinitely): Label of the extend grid lines
+# infinitely setting option in the CSS Grid pane.
+layout.extendGridLinesInfinitely=Extend grid lines infinitely
+
 # LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid
 # containers to display.
 layout.noGrids=No grids

devtools/client/themes/layout.css

@@ -9,38 +9,40 @@
 }
 
 /**
- * Grid Container
+ * Common styles for shared components
  */
 
-#layout-grid-container {
+.grid-container {
-  margin: 5px;
-}
-
-/**
- * Grid List
- */
-
-.layout-grid-list-container {
   display: flex;
   flex-direction: column;
+  flex: 1;
   align-items: center;
 }
 
-.layout-grid-list-container > span {
+.grid-container > span {
   font-weight: bold;
   margin-bottom: 3px;
 }
 
-#layout-grid-list {
+.grid-container > ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-#layout-grid-list li {
+.grid-container li {
   padding: 4px 0;
 }
 
+/**
+ * Grid Container
+ */
+
+#layout-grid-container {
+  display: flex;
+  margin: 5px;
+}
+
 /**
  * Container when no grids are present
  */