Bug 1497312 - The flexbox highlighter color should change on input from the color swatch. r=pbro
☠☠ backed out by 20cc444ecb12 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 15 Oct 2018 13:18:15 -0400
changeset 499800 ffb2909f660d4ea2f9961e5d1d4964a2c98e51a3
parent 499799 ffb770ed38711114be60f6c2f8f95971b3c6589f
child 499801 97771a04ec8c973080e748dc7661d7654a7f64ce
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1497312
milestone64.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 1497312 - The flexbox highlighter color should change on input from the color swatch. r=pbro
devtools/client/inspector/flexbox/components/Header.js
devtools/client/inspector/flexbox/flexbox.js
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js
devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js
devtools/client/inspector/flexbox/test/doc_flexbox_simple.html
devtools/client/inspector/flexbox/test/head.js
devtools/client/inspector/grids/test/head.js
devtools/client/inspector/test/head.js
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -47,16 +47,17 @@ class Header extends PureComponent {
     // selected element.
     if (this.props.flexContainer.isFlexItemContainer) {
       return null;
     }
 
     return createElement(Fragment, null,
       dom.div({ className: "devtools-separator" }),
       dom.input({
+        id: "flexbox-checkbox-toggle",
         className: "devtools-checkbox-toggle",
         checked: this.props.highlighted,
         onChange: this.onFlexboxCheckboxClick,
         type: "checkbox",
       })
     );
   }
 
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -333,17 +333,17 @@ class FlexboxInspector {
    *         A hex string representing the color to use.
    */
   async onSetFlexboxOverlayColor(color) {
     this.store.dispatch(updateFlexboxColor(color));
 
     const { flexbox } = this.store.getState();
 
     if (flexbox.highlighted) {
-      this.highlighters.showFlexboxHighlighter(flexbox.nodeFront);
+      this.highlighters.showFlexboxHighlighter(flexbox.flexContainer.nodeFront);
     }
 
     const currentUrl = this.inspector.target.url;
     // Get the hostname, if there is no hostname, fall back on protocol
     // ex: `data:` uri, and `about:` pages
     const hostName = parseURL(currentUrl).hostName || parseURL(currentUrl).protocol;
     const customColors = await this.getCustomHostColors();
     customColors[hostName] = color;
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -3,13 +3,15 @@ tags = devtools
 subsuite = devtools
 support-files =
   doc_flexbox_simple.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
 
+[browser_flexbox_highlighter_color_picker_on_ESC.js]
+[browser_flexbox_highlighter_color_picker_on_RETURN.js]
 [browser_flexbox_item_outline_exists.js]
 [browser_flexbox_item_outline_has_correct_layout.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
 [browser_flexbox_sizing_info_exists.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox highlighter color change in the color picker is reverted when
+// ESCAPE is pressed.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, layoutView } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+
+  const onColorSwatchRendered = waitForDOM(doc,
+    "#layout-flexbox-container .layout-color-swatch");
+  await selectNode("#container", inspector);
+  const [swatch] = await onColorSwatchRendered;
+
+  info("Checking the initial state of the Flexbox Inspector color picker.");
+  is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
+    "The color swatch's background is correct.");
+  is(store.getState().flexbox.color, "#9400FF", "The flexbox color state is correct.");
+
+  info("Opening the color picker by clicking on the color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await 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 ESCAPE to close the tooltip.");
+  const onColorUpdate = waitUntilState(store, state => state.flexbox.color === "#9400FF");
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
+  await onColorPickerHidden;
+  await onColorUpdate;
+
+  is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
+    "The color swatch's background was reverted after ESCAPE.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox highlighter color change in the color picker is committed when
+// RETURN is pressed.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, layoutView } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+  const cPicker = layoutView.swatchColorPickerTooltip;
+  const spectrum = cPicker.spectrum;
+
+  const onColorSwatchRendered = waitForDOM(doc,
+    "#layout-flexbox-container .layout-color-swatch");
+  await selectNode("#container", inspector);
+  const [swatch] = await onColorSwatchRendered;
+
+  const checkbox = doc.getElementById("flexbox-checkbox-toggle");
+
+  info("Checking the initial state of the Flexbox Inspector color picker.");
+  ok(!checkbox.checked, "Flexbox highlighter toggle is unchecked.");
+  is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
+    "The color swatch's background is correct.");
+  is(store.getState().flexbox.color, "#9400FF", "The flexbox color state is correct.");
+
+  info("Toggling ON the flexbox highlighter.");
+  let onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onCheckboxChange = waitUntilState(store, state => state.flexbox.highlighted);
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Opening the color picker by clicking on the color swatch.");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  onHighlighterShown = highlighters.once("flexbox-highlighter-shown", (_, options) => {
+    info("Checking the flexbox highlighter display settings.");
+    is(options.color, "#00FF0080", "Flexbox highlighter color is correct.");
+  });
+  await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
+  await onHighlighterShown;
+
+  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.");
+  const onColorUpdate = waitUntilState(store, state =>
+    state.flexbox.color === "#00FF0080");
+  const onColorPickerHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onColorPickerHidden;
+  await onColorUpdate;
+
+  is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN.");
+
+  info("Toggling OFF the flexbox highlighter.");
+  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  checkbox.click();
+  await onHighlighterHidden;
+});
--- a/devtools/client/inspector/flexbox/test/doc_flexbox_simple.html
+++ b/devtools/client/inspector/flexbox/test/doc_flexbox_simple.html
@@ -25,17 +25,17 @@
 .growing .item {
   flex-basis: 200px;
   flex-grow: 1;
 }
 .growing.is-clamped .item {
   max-width: 250px;
 }
 </style>
-<div class="container">
+<div id="container" class="container">
   <div class="item">flex item in a row flex container</div>
 </div>
 <div class="container column">
   <div class="item">flex item in a column flex container</div>
 </div>
 <div class="container shrinking">
   <div class="item">Shrinking flex item</div>
 </div>
--- a/devtools/client/inspector/flexbox/test/head.js
+++ b/devtools/client/inspector/flexbox/test/head.js
@@ -5,16 +5,21 @@
 /* import-globals-from ../../test/head.js */
 "use strict";
 
 // Import the inspector's head.js first (which itself imports shared-head.js).
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
+// Load the shared Redux helpers into this compartment.
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/shared-redux-head.js",
+  this);
+
 // Make sure the flexbox inspector is enabled before running the tests.
 Services.prefs.setBoolPref("devtools.flexboxinspector.enabled", true);
 
 // Make sure only the flexbox layout accordion is opened, and the others are closed.
 Services.prefs.setBoolPref("devtools.layout.flexbox.opened", true);
 Services.prefs.setBoolPref("devtools.layout.boxmodel.opened", false);
 Services.prefs.setBoolPref("devtools.layout.grid.opened", false);
 
--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -12,36 +12,15 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 // Load the shared Redux helpers into this compartment.
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/shared/test/shared-redux-head.js",
   this);
 
-Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
-registerCleanupFunction(() => {
-  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
-});
-
 const asyncStorage = require("devtools/shared/async-storage");
 
-/**
- * Simulate a color change in a given color picker tooltip.
- *
- * @param  {Spectrum} colorPicker
- *         The color picker widget.
- * @param  {Array} newRgba
- *         Array of the new rgba values to be set in the color widget.
- */
-var simulateColorPickerChange = async function(colorPicker, newRgba) {
-  info("Getting the spectrum colorpicker object");
-  const spectrum = await colorPicker.spectrum;
-  info("Setting the new color");
-  spectrum.rgb = newRgba;
-  info("Applying the change");
-  spectrum.updateUI();
-  spectrum.onChange();
-};
-
+Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
 registerCleanupFunction(async function() {
+  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
   await asyncStorage.removeItem("gridInspectorHostColors");
 });
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -881,8 +881,26 @@ async function expandContainer(inspector
 async function expandContainerByClick(inspector, container) {
   const onChildren = waitForChildrenUpdated(inspector);
   const onUpdated = inspector.once("inspector-updated");
   EventUtils.synthesizeMouseAtCenter(container.expander, {},
     inspector.markup.doc.defaultView);
   await onChildren;
   await onUpdated;
 }
+
+/**
+ * Simulate a color change in a given color picker tooltip.
+ *
+ * @param  {Spectrum} colorPicker
+ *         The color picker widget.
+ * @param  {Array} newRgba
+ *         Array of the new rgba values to be set in the color widget.
+ */
+async function simulateColorPickerChange(colorPicker, newRgba) {
+  info("Getting the spectrum colorpicker object");
+  const spectrum = await colorPicker.spectrum;
+  info("Setting the new color");
+  spectrum.rgb = newRgba;
+  info("Applying the change");
+  spectrum.updateUI();
+  spectrum.onChange();
+}