Bug 1497312 - The flexbox highlighter color should change on input from the color swatch. r=pbro

devtools/client/inspector/flexbox/components/Header.js

@@ -52,6 +52,7 @@ class Header extends PureComponent {
     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,

devtools/client/inspector/flexbox/flexbox.js

@@ -338,7 +338,7 @@ class FlexboxInspector {
     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;

devtools/client/inspector/flexbox/test/browser.ini

@@ -8,6 +8,8 @@ support-files =
   !/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]

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.");
+});

devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js

@@ -0,0 +1,64 @@
+/* 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.");
+  const 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;
+
+  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 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;
+});

devtools/client/inspector/flexbox/test/doc_flexbox_simple.html

@@ -30,7 +30,7 @@
   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">

devtools/client/inspector/flexbox/test/head.js

@@ -10,6 +10,11 @@ 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);
 

devtools/client/inspector/grids/test/head.js

@@ -17,31 +17,10 @@ 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");
 });

devtools/client/inspector/test/head.js

@@ -886,3 +886,21 @@ async function expandContainerByClick(inspector, container) {
   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();
+}