Bug 1509459 - Get the flexbox highlighter state if the highlighter is ready in the flexbox panel. r=pbro
☠☠ backed out by 94ef0a404e40 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 28 Nov 2018 11:39:40 -0500
changeset 508252 0f07947248713c9c5f43904fbcb7d73d2d3fb278
parent 508251 66eb1f485c1a3ea81372758bc92292c9428b17cd
child 508253 8d5c855aedff1ddac8ce80e81cfcfe5f8babdb15
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1509459
milestone65.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 1509459 - Get the flexbox highlighter state if the highlighter is ready in the flexbox panel. r=pbro
devtools/client/inspector/flexbox/flexbox.js
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_state_on_sidebar_select.js
devtools/client/inspector/flexbox/test/head.js
devtools/client/inspector/inspector.js
devtools/client/inspector/shared/test/head.js
--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -475,17 +475,17 @@ class FlexboxInspector {
         return;
       }
 
       if (!flexItemContainer && flexContainer.nodeFront === this.selection.nodeFront) {
         flexItemContainer = await this.getFlexContainerProps(this.selection.nodeFront,
           true);
       }
 
-      const highlighted = this._highlighters &&
+      const highlighted = this.inspector.isHighlighterReady &&
         flexContainer.nodeFront === this.highlighters.flexboxHighlighterShown;
       const color = await this.getOverlayColor();
 
       this.store.dispatch(updateFlexbox({
         color,
         flexContainer,
         flexItemContainer,
         highlighted,
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -22,16 +22,17 @@ support-files =
 [browser_flexbox_container_and_item.js]
 [browser_flexbox_container_and_item_updates_on_change.js]
 [browser_flexbox_container_element_rep.js]
 [browser_flexbox_container_properties.js]
 [browser_flexbox_empty_state.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
 [browser_flexbox_highlighter_opened_telemetry.js]
+[browser_flexbox_highlighter_state_on_sidebar_select.js]
 [browser_flexbox_item_list_01.js]
 [browser_flexbox_item_list_02.js]
 [browser_flexbox_item_list_updates_on_change.js]
 [browser_flexbox_item_outline_exists.js]
 [browser_flexbox_item_outline_has_correct_layout.js]
 [browser_flexbox_item_outline_hidden_when_useless.js]
 [browser_flexbox_item_outline_renders_basisfinal_points_correctly.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_state_on_sidebar_select.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the flexbox inspector highlighter state when the layout panel is selected after
+// toggling on the flexbox highlighter from the rules view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  const { styleDocument: doc } = view;
+  const { highlighters } = inspector;
+
+  await selectNode("#container", inspector);
+
+  const container = getRuleViewProperty(view, ".container", "display").valueSpan;
+  const flexboxToggle = container.querySelector(".ruleview-flex");
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info("Selecting the layout panel");
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  inspector.sidebar.select("layoutview");
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+});
--- a/devtools/client/inspector/flexbox/test/head.js
+++ b/devtools/client/inspector/flexbox/test/head.js
@@ -1,19 +1,18 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 /* eslint no-unused-vars: [2, {"vars": "local"}] */
 /* import-globals-from ../../../shared/test/telemetry-test-helpers.js */
-/* import-globals-from ../../test/head.js */
+/* import-globals-from ../../shared/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",
+  "chrome://mochitests/content/browser/devtools/client/inspector/shared/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.
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -193,16 +193,20 @@ Inspector.prototype = {
   get highlighters() {
     if (!this._highlighters) {
       this._highlighters = new HighlightersOverlay(this);
     }
 
     return this._highlighters;
   },
 
+  get isHighlighterReady() {
+    return !!this._highlighters;
+  },
+
   get is3PaneModeEnabled() {
     if (this.target.chrome) {
       if (!this._is3PaneModeChromeEnabled) {
         this._is3PaneModeChromeEnabled = Services.prefs.getBoolPref(
           THREE_PANE_CHROME_ENABLED_PREF);
       }
 
       return this._is3PaneModeChromeEnabled;
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -128,62 +128,16 @@ var getFontFamilyDataURL = async functio
   const fillStyle = getThemeColor("body-color");
 
   const {data} = await nodeFront.getFontFamilyDataURL(font, fillStyle);
   const dataURL = await data.string();
   return dataURL;
 };
 
 /* *********************************************
- * RULE-VIEW
- * *********************************************
- * Rule-view related test utility functions
- * This object contains functions to get rules, get properties, ...
- */
-
-/**
- * Simulate a color change in a given color picker tooltip, and optionally wait
- * for a given element in the page to have its style changed as a result
- *
- * @param {RuleView} ruleView
- *        The related rule view instance
- * @param {SwatchColorPickerTooltip} colorPicker
- * @param {Array} newRgba
- *        The new color to be set [r, g, b, a]
- * @param {Object} expectedChange
- *        Optional object that needs the following props:
- *          - {DOMNode} element The element in the page that will have its
- *            style changed.
- *          - {String} name The style name that will be changed
- *          - {String} value The expected style value
- * The style will be checked like so: getComputedStyle(element)[name] === value
- */
-var simulateColorPickerChange = async function(ruleView, colorPicker,
-    newRgba, expectedChange) {
-  const onRuleViewChanged = ruleView.once("ruleview-changed");
-  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();
-  info("Waiting for rule-view to update");
-  await onRuleViewChanged;
-
-  if (expectedChange) {
-    info("Waiting for the style to be applied on the page");
-    await waitForSuccess(() => {
-      const {element, name, value} = expectedChange;
-      return content.getComputedStyle(element)[name] === value;
-    }, "Color picker change applied on the page");
-  }
-};
-
-/* *********************************************
  * COMPUTED-VIEW
  * *********************************************
  * Computed-view related utility functions.
  * Allows to get properties, links, expand properties, ...
  */
 
 /**
  * Get references to the name and value span nodes corresponding to a given