Bug 1308265 - Add a grid display setting for displaying the grid line numbers. r=jryans
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 29 Nov 2016 19:39:10 +0800
changeset 324695 77eaeeade47ebbe695df5abb56f47bf4b57a9eaa
parent 324694 49664db41b866ae46e185249ed61275fd1d94022
child 324696 3b322d58be091eb4aab2e6e8fb86cb45fd8948a3
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersjryans
bugs1308265
milestone53.0a1
Bug 1308265 - Add a grid display setting for displaying the grid line numbers. r=jryans
devtools/client/inspector/layout/actions/highlighter-settings.js
devtools/client/inspector/layout/actions/index.js
devtools/client/inspector/layout/components/App.js
devtools/client/inspector/layout/components/Grid.js
devtools/client/inspector/layout/components/GridDisplaySettings.js
devtools/client/inspector/layout/layout.js
devtools/client/inspector/layout/reducers/highlighter-settings.js
devtools/client/inspector/layout/types.js
devtools/client/locales/en-US/layout.properties
devtools/client/preferences/devtools.js
--- a/devtools/client/inspector/layout/actions/highlighter-settings.js
+++ b/devtools/client/inspector/layout/actions/highlighter-settings.js
@@ -1,21 +1,35 @@
 /* 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 {
+  UPDATE_SHOW_GRID_LINE_NUMBERS,
   UPDATE_SHOW_INFINITE_LINES,
 } = require("./index");
 
 module.exports = {
 
   /**
+   * Update 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.
    *
    * @param  {Boolean} enabled
    *         Whether or not the grid highlighter should extend grid lines infinitely.
    */
   updateShowInfiniteLines(enabled) {
     return {
       type: UPDATE_SHOW_INFINITE_LINES,
--- a/devtools/client/inspector/layout/actions/index.js
+++ b/devtools/client/inspector/layout/actions/index.js
@@ -9,12 +9,15 @@ const { createEnum } = require("devtools
 createEnum([
 
   // Update the grid highlighted state.
   "UPDATE_GRID_HIGHLIGHTED",
 
   // Update the entire grids state with the new list of grids.
   "UPDATE_GRIDS",
 
+  // Update the grid highlighter's show grid line numbers state.
+  "UPDATE_SHOW_GRID_LINE_NUMBERS",
+
   // Update the grid highlighter's show infinite lines state.
   "UPDATE_SHOW_INFINITE_LINES",
 
 ], module.exports);
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -17,16 +17,17 @@ const { getStr } = require("../utils/l10
 const App = createClass({
 
   displayName: "App",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
+    onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return dom.div(
       {
--- a/devtools/client/inspector/layout/components/Grid.js
+++ b/devtools/client/inspector/layout/components/Grid.js
@@ -16,40 +16,43 @@ const { getStr } = require("../utils/l10
 module.exports = createClass({
 
   displayName: "Grid",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
+    onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       grids,
       highlighterSettings,
       onToggleGridHighlighter,
+      onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.props;
 
     return grids.length ?
       dom.div(
         {
           id: "layout-grid-container",
         },
         GridList({
           grids,
           onToggleGridHighlighter,
         }),
         GridDisplaySettings({
           highlighterSettings,
+          onToggleShowGridLineNumbers,
           onToggleShowInfiniteLines,
         })
       )
       :
       dom.div(
         {
           className: "layout-no-grids",
         },
--- a/devtools/client/inspector/layout/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/layout/components/GridDisplaySettings.js
@@ -11,21 +11,31 @@ const Types = require("../types");
 const { getStr } = require("../utils/l10n");
 
 module.exports = createClass({
 
   displayName: "GridDisplaySettings",
 
   propTypes: {
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
+    onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
+  onShowGridLineNumbersCheckboxClick() {
+    let {
+      highlighterSettings,
+      onToggleShowGridLineNumbers,
+    } = this.props;
+
+    onToggleShowGridLineNumbers(!highlighterSettings.showGridLineNumbers);
+  },
+
   onShowInfiniteLinesCheckboxClick() {
     let {
       highlighterSettings,
       onToggleShowInfiniteLines,
     } = this.props;
 
     onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
   },
@@ -53,14 +63,28 @@ module.exports = createClass({
               {
                 type: "checkbox",
                 checked: highlighterSettings.showInfiniteLines,
                 onChange: this.onShowInfiniteLinesCheckboxClick,
               }
             ),
             getStr("layout.extendGridLinesInfinitely")
           )
+        ),
+        dom.li(
+          {},
+          dom.label(
+            {},
+            dom.input(
+              {
+                type: "checkbox",
+                checked: highlighterSettings.showGridLineNumbers,
+                onChange: this.onShowGridLineNumbersCheckboxClick,
+              }
+            ),
+            getStr("layout.displayNumbersOnLines")
+          )
         )
       )
     );
   },
 
 });
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -9,26 +9,28 @@ const { Task } = require("devtools/share
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const {
   updateGridHighlighted,
   updateGrids,
 } = require("./actions/grids");
 const {
+  updateShowGridLineNumbers,
   updateShowInfiniteLines,
 } = require("./actions/highlighter-settings");
 
 const App = createFactory(require("./components/App"));
 const Store = require("./store");
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
+const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
 
 function LayoutView(inspector, window) {
   this.document = window.document;
   this.highlighters = inspector.highlighters;
   this.inspector = inspector;
   this.store = null;
   this.walker = this.inspector.walker;
@@ -71,16 +73,38 @@ LayoutView.prototype = {
        *         highlighter is toggled on/off for.
        */
       onToggleGridHighlighter: node => {
         let { highlighterSettings } = this.store.getState();
         this.highlighters.toggleGridHighlighter(node, highlighterSettings);
       },
 
       /**
+       * Handler for a change in the show grid line numbers checkbox in the
+       * GridDisplaySettings component. TOggles on/off the option to show the grid line
+       * numbers in the grid highlighter. Refreshes the shown grid highlighter for the
+       * grids currently highlighted.
+       *
+       * @param  {Boolean} enabled
+       *         Whether or not the grid highlighter should show the grid line numbers.
+       */
+      onToggleShowGridLineNumbers: enabled => {
+        this.store.dispatch(updateShowGridLineNumbers(enabled));
+        Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled);
+
+        let { grids, highlighterSettings } = this.store.getState();
+
+        for (let grid of grids) {
+          if (grid.highlighted) {
+            this.highlighters.showGridHighlighter(grid.nodeFront, 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.
        */
@@ -143,17 +167,20 @@ LayoutView.prototype = {
   },
 
   /**
    * Load the grid highligher display settings into the store from the stored preferences.
    */
   loadHighlighterSettings() {
     let { dispatch } = this.store;
 
+    let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
     let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
+
+    dispatch(updateShowGridLineNumbers(showGridLineNumbers));
     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.
    *
    * @param {Array|null} gridFronts
--- a/devtools/client/inspector/layout/reducers/highlighter-settings.js
+++ b/devtools/client/inspector/layout/reducers/highlighter-settings.js
@@ -1,24 +1,32 @@
 /* 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 {
+  UPDATE_SHOW_GRID_LINE_NUMBERS,
   UPDATE_SHOW_INFINITE_LINES
 } = require("../actions/index");
 
 const INITIAL_HIGHLIGHTER_SETTINGS = {
+  showGridLineNumbers: false,
   showInfiniteLines: false,
 };
 
 let reducers = {
 
+  [UPDATE_SHOW_GRID_LINE_NUMBERS](highlighterSettings, { enabled }) {
+    return Object.assign({}, highlighterSettings, {
+      showGridLineNumbers: enabled,
+    });
+  },
+
   [UPDATE_SHOW_INFINITE_LINES](highlighterSettings, { enabled }) {
     return Object.assign({}, highlighterSettings, {
       showInfiniteLines: enabled,
     });
   },
 
 };
 
--- a/devtools/client/inspector/layout/types.js
+++ b/devtools/client/inspector/layout/types.js
@@ -25,12 +25,15 @@ exports.grid = {
 
 };
 
 /**
  * The grid highlighter settings on what to display in its grid overlay in the document.
  */
 exports.highlighterSettings = {
 
+  // Whether or not the grid highlighter should show the grid line numbers
+  showGridLineNumbers: PropTypes.bool,
+
   // Whether or not the grid highlighter extends the grid lines infinitely
   showInfiniteLines: PropTypes.bool,
 
  };
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -2,26 +2,30 @@
 # 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/.
 
 # LOCALIZATION NOTE This file contains the Layout Inspector strings.
 # The Layout Inspector is a panel accessible in the Inspector sidebar.
 # The Layout Inspector may need to be enabled in about:config by setting
 # devtools.layoutview.enabled to true.
 
+# LOCALIZATION NOTE (layout.displayNumbersOnLines): Label of the display numbers on lines
+# setting option in the CSS Grid pane.
+layout.displayNumbersOnLines=Display numbers on lines
+
+# 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.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
 
 # LOCALIZATION NOTE (layout.overlayMultipleGrids): The header for the list of grid
 # container elements that can be highlighted in the CSS Grid pane.
 layout.overlayMultipleGrids=Overlay Multiple Grids
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -66,16 +66,17 @@ pref("devtools.inspector.mdnDocsTooltip.
 
 // Enable the Font Inspector
 pref("devtools.fontinspector.enabled", true);
 
 // Enable the Layout View
 pref("devtools.layoutview.enabled", false);
 
 // Grid highlighter preferences
+pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 
 // By how many times eyedropper will magnify pixels
 pref("devtools.eyedropper.zoom", 6);
 
 // Enable to collapse attributes that are too long.
 pref("devtools.markup.collapseAttributes", true);