Bug 1369951 - Use the stored grid highlighter settings for the grid highlighter toggled in the rule view. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 07 Jun 2017 10:03:00 -0400
changeset 413173 6fa514595f1b4d4f6b6827fbc1bc88975b5e5250
parent 413172 f6c60e5255fc56a55f33dd05eddb14357c5538ed
child 413174 1ccbaeaf822e5a5539a6ee5b2330b7b906e31dff
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1369951
milestone55.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 1369951 - Use the stored grid highlighter settings for the grid highlighter toggled in the rule view. r=pbro
devtools/client/inspector/boxmodel/test/head.js
devtools/client/inspector/grids/test/browser.ini
devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js
devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js
devtools/client/inspector/grids/test/head.js
devtools/client/inspector/shared/highlighters-overlay.js
devtools/client/inspector/test/shared-head.js
--- 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");