Bug 1456680 - Part 6: Refactor getting the grid highlighter settings logic into HighlightersOverlay. r=pbro
☠☠ backed out by 7134ec985602 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 30 Apr 2018 14:38:02 -0400
changeset 472512 232bed10f4d8f36466070a58ae5a37156e24d894
parent 472511 cfa4b6d2be06b3a6efd558fc0d00c86c71f6ac25
child 472513 4eccde5dfbef9f3c2eb8e274f5a3c55514664d03
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1456680
milestone61.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 1456680 - Part 6: Refactor getting the grid highlighter settings logic into HighlightersOverlay. r=pbro - Refactor the logic for getting the grid highlighter settings into HighlightersOverlay.js - Refactor the grid area and cell highlight into a single function in grid-inspector.js - Change the order of the parameters for onHighlighterChange in grid-inspector.js - Get the last highlighted state from the Redux store instead of storing them in a variable
devtools/client/inspector/grids/components/Grid.js
devtools/client/inspector/grids/components/GridOutline.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/layout/layout.js
devtools/client/inspector/shared/highlighters-overlay.js
--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -20,36 +20,34 @@ class Grid extends PureComponent {
     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,
-      onShowGridAreaHighlight: PropTypes.func.isRequired,
-      onShowGridCellHighlight: PropTypes.func.isRequired,
+      onShowGridOutlineHighlight: PropTypes.func.isRequired,
       onToggleGridHighlighter: PropTypes.func.isRequired,
       onToggleShowGridAreas: PropTypes.func.isRequired,
       onToggleShowGridLineNumbers: PropTypes.func.isRequired,
       onToggleShowInfiniteLines: PropTypes.func.isRequired,
     };
   }
 
   render() {
     let {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
       setSelectedNode,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
-      onShowGridAreaHighlight,
-      onShowGridCellHighlight,
+      onShowGridOutlineHighlight,
       onToggleShowGridAreas,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.props;
 
     return grids.length ?
       dom.div(
@@ -73,18 +71,17 @@ class Grid extends PureComponent {
             highlighterSettings,
             onToggleShowGridAreas,
             onToggleShowGridLineNumbers,
             onToggleShowInfiniteLines,
           })
         ),
         GridOutline({
           grids,
-          onShowGridAreaHighlight,
-          onShowGridCellHighlight,
+          onShowGridOutlineHighlight,
         })
       )
       :
       dom.div(
         {
           className: "devtools-sidepanel-no-result",
         },
         getStr("layout.noGridsOnThisPage")
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -35,18 +35,17 @@ const GRID_CELL_SCALE_FACTOR = 50;
 
 const VIEWPORT_MIN_HEIGHT = 100;
 const VIEWPORT_MAX_HEIGHT = 150;
 
 class GridOutline extends PureComponent {
   static get propTypes() {
     return {
       grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
-      onShowGridAreaHighlight: PropTypes.func.isRequired,
-      onShowGridCellHighlight: PropTypes.func.isRequired,
+      onShowGridOutlineHighlight: PropTypes.func.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       height: 0,
@@ -89,41 +88,38 @@ class GridOutline extends PureComponent 
     }
 
     this.setState({ height, width, selectedGrid, showOutline });
   }
 
   doHighlightCell(target, hide) {
     const {
       grids,
-      onShowGridAreaHighlight,
-      onShowGridCellHighlight,
+      onShowGridOutlineHighlight,
     } = this.props;
     const name = target.dataset.gridAreaName;
     const id = target.dataset.gridId;
-    const fragmentIndex = target.dataset.gridFragmentIndex;
-    const color = target.closest(".grid-outline-group").dataset.gridLineColor;
+    const gridFragmentIndex = target.dataset.gridFragmentIndex;
     const rowNumber = target.dataset.gridRow;
     const columnNumber = target.dataset.gridColumn;
 
-    onShowGridAreaHighlight(grids[id].nodeFront, null, color);
-    onShowGridCellHighlight(grids[id].nodeFront, color);
+    onShowGridOutlineHighlight(grids[id].nodeFront);
 
     if (hide) {
       return;
     }
 
-    if (name) {
-      onShowGridAreaHighlight(grids[id].nodeFront, name, color);
-    }
-
-    if (fragmentIndex && rowNumber && columnNumber) {
-      onShowGridCellHighlight(grids[id].nodeFront, color, fragmentIndex,
-        rowNumber, columnNumber);
-    }
+    onShowGridOutlineHighlight(grids[id].nodeFront, {
+      showGridArea: name,
+      showGridCell: {
+        gridFragmentIndex,
+        rowNumber,
+        columnNumber,
+      }
+    });
   }
 
   /**
    * Returns the grid area name if the given grid cell is part of a grid area, otherwise
    * null.
    *
    * @param  {Number} columnNumber
    *         The column number of the grid cell.
@@ -322,17 +318,16 @@ class GridOutline extends PureComponent 
 
   renderGridOutline(grid) {
     let { color } = grid;
 
     return dom.g(
       {
         id: "grid-outline-group",
         className: "grid-outline-group",
-        "data-grid-line-color": color,
         style: { color }
       },
       this.renderGrid(grid)
     );
   }
 
   renderGridOutlineBorder(borderWidth, borderHeight, color) {
     return dom.rect(
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -57,18 +57,17 @@ class GridInspector {
     this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
     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.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
-    this.onShowGridCellHighlight = this.onShowGridCellHighlight.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.init();
   }
@@ -133,18 +132,17 @@ class GridInspector {
     this.swatchColorPickerTooltip = null;
     this.walker = null;
   }
 
   getComponentProps() {
     return {
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
       onSetGridOverlayColor: this.onSetGridOverlayColor,
-      onShowGridAreaHighlight: this.onShowGridAreaHighlight,
-      onShowGridCellHighlight: this.onShowGridCellHighlight,
+      onShowGridOutlineHighlight: this.onShowGridOutlineHighlight,
       onToggleGridHighlighter: this.onToggleGridHighlighter,
       onToggleShowGridAreas: this.onToggleShowGridAreas,
       onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
     };
   }
 
   /**
@@ -193,34 +191,16 @@ class GridInspector {
         return grid.color;
       }
     }
 
     return null;
   }
 
   /**
-   * Create a highlighter settings object for the provided nodeFront.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The NodeFront for which we need highlighter settings.
-   */
-  getGridHighlighterSettings(nodeFront) {
-    let { highlighterSettings } = this.store.getState();
-
-    // Get the grid color for the provided nodeFront.
-    let color = this.getGridColorForNodeFront(nodeFront);
-
-    // Merge the grid color to the generic highlighter settings.
-    return Object.assign({}, highlighterSettings, {
-      color
-    });
-  }
-
-  /**
    * Retrieve the shared SwatchColorPicker instance.
    */
   getSwatchColorPickerTooltip() {
     return this.swatchColorPickerTooltip;
   }
 
   /**
    * Given a list of new grid fronts, and if we have a currently highlighted grid, check
@@ -252,32 +232,16 @@ class GridInspector {
    * Returns true if the layout panel is visible, and false otherwise.
    */
   isPanelVisible() {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
   }
 
-  showGridHighlighter(node, settings) {
-    this.lastHighlighterColor = settings.color;
-    this.lastHighlighterNode = node;
-    this.lastHighlighterState = true;
-
-    this.highlighters.showGridHighlighter(node, settings);
-  }
-
-  toggleGridHighlighter(node, settings) {
-    this.lastHighlighterColor = settings.color;
-    this.lastHighlighterNode = node;
-    this.lastHighlighterState = node !== this.highlighters.gridHighlighterShown;
-
-    this.highlighters.toggleGridHighlighter(node, settings, "grid");
-  }
-
   /**
    * Updates the grid panel 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.
    */
   async updateGridPanel() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
@@ -350,64 +314,59 @@ class GridInspector {
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid
    *         highlighter is shown for.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
   onHighlighterShown(nodeFront, options) {
-    return this.onHighlighterChange(true, nodeFront, options);
+    this.onHighlighterChange(nodeFront, true, options);
   }
 
   /**
    * Handler for "grid-highlighter-hidden" events emitted from the
    * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
    * Required since on and off events need the same reference object.
    *
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid highlighter
    *         is hidden for.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
   onHighlighterHidden(nodeFront, options) {
-    return this.onHighlighterChange(false, nodeFront, options);
+    this.onHighlighterChange(nodeFront, false, options);
   }
 
   /**
    * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
    * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
    *
-   * @param  {Boolean} highlighted
-   *         If the grid should be updated to highlight or hide.
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid highlighter
    *         is shown for.
+   * @param  {Boolean} highlighted
+   *         If the grid should be updated to highlight or hide.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
-  onHighlighterChange(highlighted, nodeFront, options = {}) {
-    let { color } = options;
-
-    // Only tell the store that the highlighter changed if it did change.
-    // If we're still highlighting the same node, with the same color, no need to force
-    // a refresh.
-    if (this.lastHighlighterState !== highlighted ||
-        this.lastHighlighterNode !== nodeFront) {
-      this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
+  onHighlighterChange(nodeFront, highlighted, options = {}) {
+    if (!this.isPanelVisible()) {
+      return;
     }
 
-    if (this.lastHighlighterColor !== color || this.lastHighlighterNode !== nodeFront) {
-      this.store.dispatch(updateGridColor(nodeFront, color));
+    const { grids } = this.store.getState();
+    const grid = grids.find(g => g.nodeFront === nodeFront);
+
+    if (!grid || grid.highlighted === highlighted) {
+      return;
     }
 
-    this.lastHighlighterColor = null;
-    this.lastHighlighterNode = null;
-    this.lastHighlighterState = null;
+    this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
   }
 
   /**
    * Handler for "new-root" event fired by the inspector, which indicates a page
    * navigation. Updates grid panel contents.
    */
   onNavigate() {
     if (this.isPanelVisible()) {
@@ -481,16 +440,17 @@ class GridInspector {
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element for which the grid color is
    *         being updated.
    * @param  {String} color
    *         A hex string representing the color to use.
    */
   async onSetGridOverlayColor(node, color) {
     this.store.dispatch(updateGridColor(node, color));
+
     let { grids } = this.store.getState();
     let currentUrl = this.inspector.target.url;
     // Get the hostname, if there is no hostname, fall back on protocol
     // ex: `data:` uri, and `about:` pages
     let hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
     let customGridColors = await asyncStorage.getItem("gridInspectorHostColors") || {};
 
     for (let grid of grids) {
@@ -500,75 +460,44 @@ class GridInspector {
         }
         // Update the custom color for the grid in this position.
         customGridColors[hostname][grid.id] = color;
         await asyncStorage.setItem("gridInspectorHostColors", customGridColors);
 
         // If the grid for which the color was updated currently has a highlighter, update
         // the color.
         if (grid.highlighted) {
-          let highlighterSettings = this.getGridHighlighterSettings(node);
-          this.showGridHighlighter(node, highlighterSettings);
+          this.highlighters.showGridHighlighter(node);
         }
       }
     }
   }
 
   /**
-   * Highlights the grid area in the CSS Grid Highlighter for the given grid.
+   * Highlights the grid area and cell in the CSS Grid Highlighter for the given grid
+   * container element and selected grid area and cell options.
    *
    * @param  {NodeFront} node
-   *         The NodeFront of the grid container element for which the grid
-   *         highlighter is highlighted for.
-   * @param  {String} gridAreaName
-   *         The name of the grid area for which the grid highlighter
+   *         The NodeFront of the grid container element for which the grid highlighter
    *         is highlighted for.
-   * @param  {String} color
-   *         The color of the grid area for which the grid highlighter
-   *         is highlighted for.
+   * @param  {Object} options
+   *         The options object has the following properties which corresponds to the
+   *         required parameters for showing the grid cell or area highlights.
+   *         See css-grid.js.
+   *         {
+   *           showGridCell: {
+   *             gridFragmentIndex: Number,
+   *             rowNumber: Number,
+   *             columnNumber: Number,
+   *           },
+   *           showGridArea: String,
+   *         }
    */
-  onShowGridAreaHighlight(node, gridAreaName, color) {
-    let { highlighterSettings } = this.store.getState();
-
-    highlighterSettings.showGridArea = gridAreaName;
-    highlighterSettings.color = color;
-
-    this.showGridHighlighter(node, highlighterSettings);
-
-    this.store.dispatch(updateGridHighlighted(node, true));
-  }
-
-  /**
-   * Highlights the grid cell in the CSS Grid Highlighter for the given grid.
-   *
-   * @param  {NodeFront} node
-   *         The NodeFront of the grid container element for which the grid
-   *         highlighter is highlighted for.
-   * @param  {String} color
-   *         The color of the grid cell for which the grid highlighter
-   *         is highlighted for.
-   * @param  {Number|null} gridFragmentIndex
-   *         The index of the grid fragment for which the grid highlighter
-   *         is highlighted for.
-   * @param  {Number|null} rowNumber
-   *         The row number of the grid cell for which the grid highlighter
-   *         is highlighted for.
-   * @param  {Number|null} columnNumber
-   *         The column number of the grid cell for which the grid highlighter
-   *         is highlighted for.
-   */
-  onShowGridCellHighlight(node, color, gridFragmentIndex, rowNumber, columnNumber) {
-    let { highlighterSettings } = this.store.getState();
-
-    highlighterSettings.showGridCell = { gridFragmentIndex, rowNumber, columnNumber };
-    highlighterSettings.color = color;
-
-    this.showGridHighlighter(node, highlighterSettings);
-
-    this.store.dispatch(updateGridHighlighted(node, true));
+  onShowGridOutlineHighlight(node, options) {
+    this.highlighters.showGridHighlighter(node, options);
   }
 
   /**
    * Handler for the inspector sidebar "select" event. Starts tracking reflows
    * if the layout panel is visible. Otherwise, stop tracking reflows.
    * Finally, refresh the layout view if it is visible.
    */
   onSidebarSelect() {
@@ -585,21 +514,17 @@ class GridInspector {
    * Handler for a change in the input checkboxes in the GridList component.
    * Toggles on/off the grid highlighter for the provided grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element for which the grid
    *         highlighter is toggled on/off for.
    */
   onToggleGridHighlighter(node) {
-    let highlighterSettings = this.getGridHighlighterSettings(node);
-    this.toggleGridHighlighter(node, highlighterSettings);
-
-    this.store.dispatch(updateGridHighlighted(node,
-      node !== this.highlighters.gridHighlighterShown));
+    this.highlighters.toggleGridHighlighter(node, "grid");
   }
 
   /**
     * Handler for a change in the show grid areas checkbox in the GridDisplaySettings
     * component. Toggles on/off the option to show the grid areas in the grid highlighter.
     * Refreshes the shown grid highlighter for the grids currently highlighted.
     *
     * @param  {Boolean} enabled
@@ -612,18 +537,17 @@ class GridInspector {
     if (enabled) {
       this.telemetry.toolOpened("gridInspectorShowGridAreasOverlayChecked");
     }
 
     let { grids } = this.store.getState();
 
     for (let grid of grids) {
       if (grid.highlighted) {
-        let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
-        this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings);
+        this.highlighters.showGridHighlighter(grid.nodeFront);
       }
     }
   }
 
   /**
    * 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
@@ -639,18 +563,17 @@ class GridInspector {
     if (enabled) {
       this.telemetry.toolOpened("gridInspectorShowGridLineNumbersChecked");
     }
 
     let { grids } = this.store.getState();
 
     for (let grid of grids) {
       if (grid.highlighted) {
-        let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
-        this.showGridHighlighter(grid.nodeFront, highlighterSettings);
+        this.highlighters.showGridHighlighter(grid.nodeFront);
       }
     }
   }
 
   /**
    * 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
@@ -666,16 +589,15 @@ class GridInspector {
     if (enabled) {
       this.telemetry.toolOpened("gridInspectorShowInfiniteLinesChecked");
     }
 
     let { grids } = this.store.getState();
 
     for (let grid of grids) {
       if (grid.highlighted) {
-        let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront);
-        this.showGridHighlighter(grid.nodeFront, highlighterSettings);
+        this.highlighters.showGridHighlighter(grid.nodeFront);
       }
     }
   }
 }
 
 module.exports = GridInspector;
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -47,18 +47,17 @@ class LayoutView {
     let {
       onToggleFlexboxHighlighter,
     } = this.flexboxInspector.getComponentProps();
 
     this.gridInspector = new GridInspector(this.inspector, this.inspector.panelWin);
     let {
       getSwatchColorPickerTooltip,
       onSetGridOverlayColor,
-      onShowGridAreaHighlight,
-      onShowGridCellHighlight,
+      onShowGridOutlineHighlight,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
     let layoutApp = LayoutApp({
       getSwatchColorPickerTooltip,
@@ -68,18 +67,17 @@ class LayoutView {
        * default.
        */
       showBoxModelProperties: true,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
-      onShowGridAreaHighlight,
-      onShowGridCellHighlight,
+      onShowGridOutlineHighlight,
       onToggleFlexboxHighlighter,
       onToggleGeometryEditor,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     });
 
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -41,16 +41,17 @@ class HighlightersOverlay {
     /*
     * Collection of instantiated in-context editors, like ShapesInContextEditor, which
     * behave like highlighters but with added editing capabilities that need to map value
     * changes to properties in the Rule view.
     */
     this.editors = {};
     this.inspector = inspector;
     this.highlighterUtils = this.inspector.toolbox.highlighterUtils;
+    this.store = this.inspector.store;
 
     // Only initialize the overlay if at least one of the highlighter types is supported.
     this.supportsHighlighters = this.highlighterUtils.supportsCustomHighlighters();
 
     // NodeFront of the flexbox container that is highlighted.
     this.flexboxHighlighterShown = null;
     // NodeFront of element that is highlighted by the geometry editor.
     this.geometryEditorHighlighterShown = null;
@@ -324,16 +325,29 @@ class HighlightersOverlay {
     this.emit("flexbox-highlighter-hidden", this.flexboxHighlighterShown);
     this.flexboxHighlighterShown = null;
 
     // Erase flexbox highlighter state.
     this.state.flexbox = null;
   }
 
   /**
+   * Create a grid highlighter settings object for the provided nodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront for which we need highlighter settings.
+   */
+  getGridHighlighterSettings(nodeFront) {
+    const { grids, highlighterSettings } = this.store.getState();
+    const grid = grids.find(g => g.nodeFront === nodeFront);
+    const color = grid ? grid.color : DEFAULT_GRID_COLOR;
+    return Object.assign({}, highlighterSettings, { color });
+  }
+
+  /**
    * Toggle the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to highlight.
    * @param  {Object} options
    *         Object used for passing options to the grid highlighter.
    * @param. {String|null} trigger
    *         String name matching "grid" or "rule" to indicate where the
@@ -351,23 +365,29 @@ class HighlightersOverlay {
 
   /**
    * Show the grid highlighter for the given grid container element.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element to highlight.
    * @param  {Object} options
    *         Object used for passing options to the grid highlighter.
+   * @param. {String|null} trigger
+   *         String name matching "grid" or "rule" to indicate where the
+   *         grid highlighter was toggled on from. "grid" represents the grid view
+   *         "rule" represents the rule view.
    */
   async showGridHighlighter(node, options, trigger) {
     let highlighter = await this._getHighlighter("CssGridHighlighter");
     if (!highlighter) {
       return;
     }
 
+    options = Object.assign({}, options, this.getGridHighlighterSettings(node));
+
     let isShown = await highlighter.show(node, options);
     if (!isShown) {
       return;
     }
 
     this._toggleRuleViewIcon(node, true, ".ruleview-grid");
 
     if (trigger == "grid") {
@@ -402,19 +422,19 @@ class HighlightersOverlay {
     }
 
     this._toggleRuleViewIcon(node, false, ".ruleview-grid");
 
     await this.highlighters.CssGridHighlighter.hide();
 
     // Emit the NodeFront of the grid container element that the grid highlighter was
     // hidden for.
-    this.emit("grid-highlighter-hidden", this.gridHighlighterShown,
-      this.state.grid.options);
+    const nodeFront = this.gridHighlighterShown;
     this.gridHighlighterShown = null;
+    this.emit("grid-highlighter-hidden", nodeFront, this.state.grid.options);
 
     // Erase grid highlighter state.
     this.state.grid = {};
   }
 
   /**
    * Show the box model highlighter for the given node.
    *
@@ -809,30 +829,21 @@ class HighlightersOverlay {
                     !nodeInfo.value.pseudoElement;
     return isShape && isEnabled && nodeInfo.value.toggleActive &&
            !this.state.shapes.options.transformMode;
   }
 
   onClick(event) {
     if (this._isRuleViewDisplayGrid(event.target)) {
       event.stopPropagation();
-
-      let { store } = this.inspector;
-      let { grids, highlighterSettings } = store.getState();
-      let grid = grids.find(g => g.nodeFront == this.inspector.selection.nodeFront);
-
-      highlighterSettings.color = grid ? grid.color : DEFAULT_GRID_COLOR;
-
-      this.toggleGridHighlighter(this.inspector.selection.nodeFront, highlighterSettings,
-        "rule");
+      this.toggleGridHighlighter(this.inspector.selection.nodeFront, "rule");
     }
 
     if (this._isRuleViewDisplayFlex(event.target)) {
       event.stopPropagation();
-
       this.toggleFlexboxHighlighter(this.inspector.selection.nodeFront);
     }
 
     if (this._isRuleViewShapeSwatch(event.target)) {
       event.stopPropagation();
 
       const view = this.inspector.getPanel("ruleview").view;
       const nodeInfo = view.getNodeInfo(event.target);
@@ -982,16 +993,17 @@ class HighlightersOverlay {
     this.inspector.target.off("will-navigate", this.onWillNavigate);
 
     this._lastHovered = null;
 
     this.inspector = null;
     this.highlighterUtils = null;
     this.supportsHighlighters = null;
     this.state = null;
+    this.store = null;
 
     this.boxModelHighlighterShown = null;
     this.flexboxHighlighterShown = null;
     this.geometryEditorHighlighterShown = null;
     this.gridHighlighterShown = null;
     this.hoveredHighlighterShown = null;
     this.selectorHighlighterShown = null;
     this.shapesHighlighterShown = null;