Bug 1509459 - Get the flexbox highlighter state if the highlighter is ready in the flexbox panel. r=pbro
☠☠ backed out by 037b1d961ac5 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 28 Nov 2018 11:39:40 -0500
changeset 505042 cfb51d413370736adc5200b42598564d7ac2d59b
parent 505041 31b4c8ac21fdd335a8b936a1824cac28d88abd35
child 505043 3241939e39a97dbda57305bf96a4ea1d72fcd5df
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [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
--- 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
@@ -21,16 +21,17 @@ support-files =
 [browser_flexbox_accordion_state.js]
 [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_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,18 +1,17 @@
 /* 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 ../../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;