--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -64,46 +64,16 @@ function openBoxModelView() {
       inspector: data.inspector,
       view: data.inspector.getPanel("computedview"),
       testActor: data.testActor
     };
   });
 }
 
 /**
- * Open the toolbox, with the inspector tool visible, and the layout view
- * sidebar tab selected to display the box model view with properties.
- *
- * @return {Promise} a promise that resolves when the inspector is ready and the box model
- *         view is visible and ready.
- */
-function openLayoutView() {
-  return openInspectorSidebarTab("layoutview").then(data => {
-    // The actual highligher show/hide methods are mocked in box model tests.
-    // The highlighter is tested in devtools/inspector/test.
-    function mockHighlighter({highlighter}) {
-      highlighter.showBoxModel = function () {
-        return promise.resolve();
-      };
-      highlighter.hideBoxModel = function () {
-        return promise.resolve();
-      };
-    }
-    mockHighlighter(data.toolbox);
-
-    return {
-      toolbox: data.toolbox,
-      inspector: data.inspector,
-      boxmodel: data.inspector.getPanel("boxmodel"),
-      testActor: data.testActor
-    };
-  });
-}
-
-/**
  * Wait for the boxmodel-view-updated event.
  *
  * @param  {InspectorPanel} inspector
  *         The instance of InspectorPanel currently loaded in the toolbox.
  * @param  {Boolean} waitForSelectionUpdate
  *         Should the boxmodel-view-updated event come from a new selection.
  * @return {Promise} a promise
  */

--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -7,19 +7,21 @@ support-files =
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
   !/devtools/client/framework/test/shared-redux-head.js
 
 [browser_grids_accordion-state.js]
+[browser_grids_color-in-rules-grid-toggle.js]
 [browser_grids_display-setting-extend-grid-lines.js]
 [browser_grids_display-setting-show-grid-line-numbers.js]
 [browser_grids_display-setting-show-grid-areas.js]
 [browser_grids_grid-list-color-picker-on-ESC.js]
 [browser_grids_grid-list-color-picker-on-RETURN.js]
 [browser_grids_grid-list-element-rep.js]
 [browser_grids_grid-list-no-grids.js]
 [browser_grids_grid-list-on-mutation-element-added.js]
 [browser_grids_grid-list-on-mutation-element-removed.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]
 [browser_grids_grid-list-toggle-single-grid.js]
+[browser_grids_highlighter-setting-rules-grid-toggle.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with changes to the grid color
+// from the layout view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { store } = inspector;
+  let cPicker = gridInspector.getSwatchColorPickerTooltip();
+  let spectrum = cPicker.spectrum;
+  let swatch = doc.querySelector(".grid-color-swatch");
+
+  info("Scrolling into view of the #grid color swatch.");
+  swatch.scrollIntoView();
+
+  info("Opening the color picker by clicking on the #grid color swatch.");
+  let onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  yield onColorPickerReady;
+
+  yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
+
+  is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated.");
+
+  info("Pressing RETURN to commit the color change.");
+  let onGridColorUpdate = waitUntilState(store, state =>
+    state.grids[0].color === "#00FF0080");
+  let onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  yield onColorPickerHidden;
+  yield onGridColorUpdate;
+
+  is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN.");
+
+  info("Selecting the rule view.");
+  let ruleView = selectRuleView(inspector);
+  let highlighters = ruleView.highlighters;
+
+  yield selectNode("#grid", inspector);
+
+  let container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
+  let gridToggle = container.querySelector(".ruleview-grid");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown",
+    (event, nodeFront, options) => {
+      info("Checking the grid highlighter display settings.");
+      let {
+        color,
+        showGridAreasOverlay,
+        showGridLineNumbers,
+        showInfiniteLines,
+      } = options;
+
+      is(color, "#00FF0080", "CSS grid highlighter color is correct.");
+      ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
+      ok(!showGridLineNumbers, "Show grid line numbers option is off.");
+      ok(!showInfiniteLines, "Show infinite lines option is off.");
+    }
+  );
+  gridToggle.click();
+  yield onHighlighterShown;
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with changes in the grid
+// display setting from the layout view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { store } = inspector;
+
+  let checkbox = doc.getElementById("grid-setting-extend-grid-lines");
+
+  ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
+    "'Extend grid lines infinitely' is pref off by default.");
+
+  info("Toggling ON the 'Extend grid lines infinitely' setting.");
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.highlighterSettings.showInfiniteLines);
+  checkbox.click();
+  yield onCheckboxChange;
+
+  info("Selecting the rule view.");
+  let ruleView = selectRuleView(inspector);
+  let highlighters = ruleView.highlighters;
+
+  yield selectNode("#grid", inspector);
+
+  let container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
+  let gridToggle = container.querySelector(".ruleview-grid");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown",
+    (event, nodeFront, options) => {
+      info("Checking the grid highlighter display settings.");
+      let {
+        color,
+        showGridAreasOverlay,
+        showGridLineNumbers,
+        showInfiniteLines,
+      } = options;
+
+      is(color, "#4B0082", "CSS grid highlighter color is correct.");
+      ok(!showGridAreasOverlay, "Show grid areas overlay option is off.");
+      ok(!showGridLineNumbers, "Show grid line numbers option is off.");
+      ok(showInfiniteLines, "Show infinite lines option is on.");
+    }
+  );
+  gridToggle.click();
+  yield onHighlighterShown;
+
+  Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
+});

--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -21,46 +21,16 @@ Services.prefs.setIntPref("devtools.tool
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.layoutview.enabled");
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 
 const HIGHLIGHTER_TYPE = "CssGridHighlighter";
 
 /**
- * Open the toolbox, with the inspector tool visible, and the layout view
- * sidebar tab selected to display the box model view with properties.
- *
- * @return {Promise} a promise that resolves when the inspector is ready and the box model
- *         view is visible and ready.
- */
-function openLayoutView() {
-  return openInspectorSidebarTab("layoutview").then(data => {
-    // The actual highligher show/hide methods are mocked in box model tests.
-    // The highlighter is tested in devtools/inspector/test.
-    function mockHighlighter({highlighter}) {
-      highlighter.showBoxModel = function () {
-        return promise.resolve();
-      };
-      highlighter.hideBoxModel = function () {
-        return promise.resolve();
-      };
-    }
-    mockHighlighter(data.toolbox);
-
-    return {
-      toolbox: data.toolbox,
-      inspector: data.inspector,
-      gridInspector: data.inspector.gridInspector,
-      testActor: data.testActor
-    };
-  });
-}
-
-/**
  * Simulate a color change in a given color picker tooltip.
  *
  * @param  {Spectrum|ColorWidget} colorPicker
  *         The color picker widget.
  * @param  {Array} newRgba
  *         Array of the new rgba values to be set in the color widget.
  */
 var simulateColorPickerChange = Task.async(function* (colorPicker, newRgba) {

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -379,19 +379,24 @@ HighlightersOverlay.prototype = {
 
   onClick: function (event) {
     // Bail out if the target is not a grid property value.
     if (!this._isRuleViewDisplayGrid(event.target)) {
       return;
     }
 
     event.stopPropagation();
-    this.toggleGridHighlighter(this.inspector.selection.nodeFront, {
-      color: DEFAULT_GRID_COLOR
-    });
+
+    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);
   },
 
   onMouseMove: function (event) {
     // Bail out if the target is the same as for the last mousemove.
     if (event.target === this._lastHovered) {
       return;
     }
 

--- a/devtools/client/inspector/test/shared-head.js
+++ b/devtools/client/inspector/test/shared-head.js
@@ -105,16 +105,47 @@ function openComputedView() {
       inspector: data.inspector,
       testActor: data.testActor,
       view: data.inspector.getPanel("computedview").computedView
     };
   });
 }
 
 /**
+ * Open the toolbox, with the inspector tool visible, and the layout view
+ * sidebar tab selected to display the box model view with properties.
+ *
+ * @return {Promise} a promise that resolves when the inspector is ready and the layout
+ *         view is visible and ready.
+ */
+function openLayoutView() {
+  return openInspectorSidebarTab("layoutview").then(data => {
+    // The actual highligher show/hide methods are mocked in box model tests.
+    // The highlighter is tested in devtools/inspector/test.
+    function mockHighlighter({highlighter}) {
+      highlighter.showBoxModel = function () {
+        return promise.resolve();
+      };
+      highlighter.hideBoxModel = function () {
+        return promise.resolve();
+      };
+    }
+    mockHighlighter(data.toolbox);
+
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      boxmodel: data.inspector.getPanel("boxmodel"),
+      gridInspector: data.inspector.gridInspector,
+      testActor: data.testActor
+    };
+  });
+}
+
+/**
  * Select the rule view sidebar tab on an already opened inspector panel.
  *
  * @param {InspectorPanel} inspector
  *        The opened inspector panel
  * @return {CssRuleView} the rule view
  */
 function selectRuleView(inspector) {
   inspector.sidebar.select("ruleview");