Bug 1572654 - [devtools] Delegate toggling flexbox highlighter from CSS property swatches up to Rules view & update tests r=jdescottes

Depends on D96080

This patch leverages work done in D90247 for the `SelectorHighlighter`. Here, we delegate event handling of clicks on flexbox swatches next to "flex" and "inline-flex" CSS properties up to the Rules view. This will toggle the Flexbox highlighter from a single place in the Rules view.

When the Flexbox highlighter is shown/hidden, the swatches are marked "active" accordingly. We don't differentiate which swatch to mark if there are multiple "flex" properties. Only properties matching the selected node are shown. `display` is not an inheritable property so there will be only one winning `display: flex` declaration for the selected node. Even if there are duplicates, they will be marked overwritten. Swatches are hidden for overwritten properties. This eases the work when toggling some of the duplicates, the winning one will already show an "active" swatch.

This patch looks more scary than it is. The changes in tests are mass-renames to a new CSS class name and to use the same helpers.

It's easier if you start reviewing `highlighters-overlay.js`, then `text-property-editor.js`, then `rules.js`.

Differential Revision: https://phabricator.services.mozilla.com/D96225

devtools/client/inspector/rules/rules.js

@@ -412,6 +412,17 @@ CssRuleView.prototype = {
       // from triggering the prompt to add a new CSS declaration
       event.stopPropagation();
     }
+
+    // Handle click on swatches next to flex and inline-flex CSS properties
+    if (target.classList.contains("js-toggle-flexbox-highlighter")) {
+      this.inspector.highlighters.toggleFlexboxHighlighter(
+        this.inspector.selection.nodeFront,
+        "rule"
+      );
+      // Prevent the click on the element wrapping the CSS rule
+      // from triggering the prompt to add a new CSS declaration
+      event.stopPropagation();
+    }
   },
 
   /**
@@ -426,23 +437,33 @@ CssRuleView.prototype = {
    *        Object with data associated with the highlighter event.
    */
   handleHighlighterEvent(eventName, data) {
-    switch (data.type) {
-      // Toggle the "highlighted" CSS class name on selector icons in the Rules view when
-      // the SelectorHighlighter is shown/hidden for a certain CSS selector.
-      case this.inspector.highlighters.TYPES.SELECTOR:
-        if (data?.options?.selector) {
-          const selector = data?.options?.selector;
-          const query = `.js-toggle-selector-highlighter[data-selector='${selector}']`;
-          for (const node of this.styleDocument.querySelectorAll(query)) {
-            if (eventName == "highlighter-hidden") {
-              node.classList.remove("highlighted");
-            }
-            if (eventName == "highlighter-shown") {
-              node.classList.add("highlighted");
-            }
-          }
-        }
-        break;
+    const handlers = {};
+
+    // Toggle the "highlighted" class on selector icons in the Rules view when
+    // the SelectorHighlighter is shown/hidden for a certain CSS selector.
+    handlers[this.inspector.highlighters.TYPES.SELECTOR] = () => {
+      const selector = data?.options?.selector;
+      if (!selector) {
+        return;
+      }
+
+      const query = `.js-toggle-selector-highlighter[data-selector='${selector}']`;
+      for (const node of this.styleDocument.querySelectorAll(query)) {
+        node.classList.toggle("highlighted", eventName == "highlighter-shown");
+      }
+    };
+
+    // Toggle the "active" class on swatches next to flex and inline-flex CSS properties
+    // when the FlexboxHighlighter is shown/hidden for the currently selected node.
+    handlers[this.inspector.highlighters.TYPES.FLEXBOX] = () => {
+      const query = ".js-toggle-flexbox-highlighter";
+      for (const node of this.styleDocument.querySelectorAll(query)) {
+        node.classList.toggle("active", eventName == "highlighter-shown");
+      }
+    };
+
+    if (typeof handlers[data.type] === "function") {
+      handlers[data.type].call(this);
     }
   },
 

devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js

@@ -18,23 +18,36 @@ const TEST_URI = `
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view, testActor } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   const onRuleViewUpdated = view.once("ruleview-refreshed");
   await selectNode("#flex", inspector);
   await onRuleViewUpdated;
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Remove the #flex container in the content page.");
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   testActor.eval(`document.querySelector("#flex").remove();`);
   await onHighlighterHidden;
-  ok(!highlighters.flexboxHighlighterShown, "Flexbox highlighter is hidden.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js

@@ -19,18 +19,30 @@ const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   await navigateTo(TEST_URI_2);
-  ok(!highlighters.flexboxHighlighterShown, "Flexbox highlighter is hidden.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js

@@ -34,16 +34,25 @@ add_task(async function() {
 
 async function checkFlexboxHighlighter() {
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 }

devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js

@@ -28,21 +28,30 @@ add_task(async function() {
 
   info("Check that the flexbox highlighter can be displayed.");
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Reload the page, expect the highlighter to be displayed once again");
-  let onStateRestored = highlighters.once("flexbox-state-restored");
+  let onStateRestored = inspector.highlighters.once("flexbox-state-restored");
 
   const onReloaded = inspector.once("reloaded");
   await refreshTab();
@@ -55,14 +64,20 @@ add_task(async function() {
   info(
     "Check that the flexbox highlighter can be displayed after reloading the page"
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Navigate to another URL, and check that the highlighter is hidden");
   const otherUri =
     "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
-  onStateRestored = highlighters.once("flexbox-state-restored");
+  onStateRestored = inspector.highlighters.once("flexbox-state-restored");
   await navigateTo(otherUri);
   ({ restored } = await onStateRestored);
   ok(!restored, "The highlighter state was not restored");
-  ok(!highlighters.flexboxHighlighterShown, "Flexbox highlighter is hidden.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js

@@ -19,19 +19,25 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   startTelemetry();
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
   info("Toggling OFF the flexbox highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterHidden;
 

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js

@@ -15,16 +15,22 @@ const TEST_URI = `
   <div id="flex"></div>
 `;
 
-const HIGHLIGHTER_TYPE = "FlexboxHighlighter";
-
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Checking the initial state of the flexbox toggle in the rule-view.");
   ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
@@ -33,13 +39,16 @@ add_task(async function() {
     "Flexbox highlighter toggle button is not active."
   );
   ok(
-    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     "No flexbox highlighter exists in the rule-view."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
@@ -52,13 +61,16 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter created in the rule-view."
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Toggling OFF the flexbox highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterHidden;
 
@@ -70,5 +82,8 @@ add_task(async function() {
     !flexboxToggle.classList.contains("active"),
     "Flexbox highlighter toggle button is not active."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js

@@ -15,16 +15,22 @@ const TEST_URI = `
   <div id="flex"></div>
 `;
 
-const HIGHLIGHTER_TYPE = "FlexboxHighlighter";
-
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Checking the initial state of the flexbox toggle in the rule-view.");
   ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
@@ -33,13 +39,16 @@ add_task(async function() {
     "Flexbox highlighter toggle button is not active."
   );
   ok(
-    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     "No flexbox highlighter exists in the rule-view."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
@@ -52,13 +61,16 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter created in the rule-view."
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Toggling OFF the flexbox highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterHidden;
 
@@ -70,5 +82,8 @@ add_task(async function() {
     !flexboxToggle.classList.contains("active"),
     "Flexbox highlighter toggle button is not active."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js

@@ -21,20 +21,26 @@ const TEST_URI = `
   </ul>
 `;
 
-const HIGHLIGHTER_TYPE = "FlexboxHighlighter";
-
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
   const overriddenContainer = getRuleViewProperty(view, "div, ul", "display")
     .valueSpan;
   const overriddenFlexboxToggle = overriddenContainer.querySelector(
-    ".ruleview-flex"
+    ".js-toggle-flexbox-highlighter"
   );
 
   info("Checking the initial state of the flexbox toggle in the rule-view.");
@@ -48,15 +54,18 @@ add_task(async function() {
     "Flexbox highlighter toggle buttons are not active."
   );
   ok(
-    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     "No flexbox highlighter exists in the rule-view."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 
   info(
     "Toggling ON the flexbox highlighter from the overridden rule in the rule-view."
   );
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   overriddenFlexboxToggle.click();
   await onHighlighterShown;
 
@@ -70,16 +79,19 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter created in the rule-view."
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info(
     "Toggling off the flexbox highlighter from the normal flexbox declaration in  " +
       "the rule-view."
   );
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterHidden;
 
@@ -92,5 +104,8 @@ add_task(async function() {
       !overriddenFlexboxToggle.classList.contains("active"),
     "Flexbox highlighter toggle buttons are not active."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 });

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js

@@ -16,17 +16,20 @@ const TEST_URI = `
   <div id="flex2" class="flex"></div>
 `;
 
-const HIGHLIGHTER_TYPE = "FlexboxHighlighter";
-
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
 
   info("Selecting the first flexbox container.");
   await selectNode("#flex1", inspector);
   let container = getRuleViewProperty(view, ".flex", "display").valueSpan;
-  let flexboxToggle = container.querySelector(".ruleview-flex");
+  let flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
 
   info(
     "Checking the state of the flexbox toggle for the first flexbox container in " +
@@ -38,16 +41,19 @@ add_task(async function() {
     "Flexbox highlighter toggle button is not active."
   );
   ok(
-    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     "No flexbox highlighter exists in the rule-view."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 
   info(
     "Toggling ON the flexbox highlighter for the first flexbox container from the " +
       "rule-view."
   );
-  let onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
@@ -60,16 +66,21 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter created in the rule-view."
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Selecting the second flexbox container.");
   await selectNode("#flex2", inspector);
-  const firstFlexboxHighterShown = highlighters.flexboxHighlighterShown;
+  const firstFlexboxHighterShown = getNodeForActiveHighlighter(
+    HIGHLIGHTER_TYPE
+  );
   container = getRuleViewProperty(view, ".flex", "display").valueSpan;
-  flexboxToggle = container.querySelector(".ruleview-flex");
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
 
   info(
     "Checking the state of the CSS flexbox toggle for the second flexbox container " +
@@ -81,7 +92,7 @@ add_task(async function() {
     "Flexbox highlighter toggle button is not active."
   );
   ok(
-    highlighters.flexboxHighlighterShown,
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter is still shown."
   );
 
@@ -89,7 +100,7 @@ add_task(async function() {
     "Toggling ON the flexbox highlighter for the second flexbox container from the " +
       "rule-view."
   );
-  onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
@@ -102,14 +113,14 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.flexboxHighlighterShown != firstFlexboxHighterShown,
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE) != firstFlexboxHighterShown,
     "Flexbox highlighter for the second flexbox container is shown."
   );
 
   info("Selecting the first flexbox container.");
   await selectNode("#flex1", inspector);
   container = getRuleViewProperty(view, ".flex", "display").valueSpan;
-  flexboxToggle = container.querySelector(".ruleview-flex");
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
 
   info(
     "Checking the state of the flexbox toggle for the first flexbox container in " +

devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js

@@ -15,16 +15,22 @@ const TEST_URI = `
   <div id="flex"></div>
 `;
 
-const HIGHLIGHTER_TYPE = "FlexboxHighlighter";
-
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#flex", inspector);
   const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
-  const flexboxToggle = container.querySelector(".ruleview-flex");
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
 
   info("Checking the initial state of the flexbox toggle in the rule-view.");
   ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
@@ -33,13 +39,16 @@ add_task(async function() {
     "Flexbox highlighter toggle button is not active."
   );
   ok(
-    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
     "No flexbox highlighter exists in the rule-view."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 
   info("Toggling ON the flexbox highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterShown;
 
@@ -52,13 +61,16 @@ add_task(async function() {
     "Flexbox highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
     "Flexbox highlighter created in the rule-view."
   );
-  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
 
   info("Toggling OFF the flexbox highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   flexboxToggle.click();
   await onHighlighterHidden;
 
@@ -70,5 +82,8 @@ add_task(async function() {
     !flexboxToggle.classList.contains("active"),
     "Flexbox highlighter toggle button is not active."
   );
-  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
 });

devtools/client/inspector/rules/views/text-property-editor.js

@@ -493,7 +493,7 @@ TextPropertyEditor.prototype = {
       colorSwatchClass: SHARED_SWATCH_CLASS + " " + COLOR_SWATCH_CLASS,
       filterClass: "ruleview-filter",
       filterSwatchClass: SHARED_SWATCH_CLASS + " " + FILTER_SWATCH_CLASS,
-      flexClass: "ruleview-flex",
+      flexClass: "ruleview-flex js-toggle-flexbox-highlighter",
       gridClass: "ruleview-grid",
       shapeClass: "ruleview-shape",
       shapeSwatchClass: SHAPE_SWATCH_CLASS,
@@ -654,7 +654,9 @@ TextPropertyEditor.prototype = {
       flexToggle.setAttribute("title", l10n("rule.flexToggle.tooltip"));
       flexToggle.classList.toggle(
         "active",
-        this.ruleView.highlighters.flexboxHighlighterShown === nodeFront
+        this.ruleView.inspector.highlighters.getNodeForActiveHighlighter(
+          this.ruleView.inspector.highlighters.TYPES.FLEXBOX
+        ) === nodeFront
       );
     }
 

devtools/client/inspector/shared/highlighters-overlay.js

@@ -722,8 +722,6 @@ class HighlightersOverlay {
       color,
     });
 
-    this._toggleRuleViewIcon(node, true, ".ruleview-flex");
-
     const scalars = {
       layout: "devtools.layout.flexboxhighlighter.opened",
       markup: "devtools.markup.flexboxhighlighter.opened",
@@ -758,7 +756,6 @@ class HighlightersOverlay {
     );
 
     await this.hideHighlighterType(TYPES.FLEXBOX);
-    this._toggleRuleViewIcon(node, false, ".ruleview-flex");
 
     // Erase flexbox highlighter state.
     this.state.flexbox = null;
@@ -1384,17 +1381,6 @@ class HighlightersOverlay {
     );
   }
 
-  /**
-   * Is the current clicked node a flex display property value in the
-   * rule-view.
-   *
-   * @param  {DOMNode} node
-   * @return {Boolean}
-   */
-  _isRuleViewDisplayFlex(node) {
-    return this.isRuleView(node) && node.classList.contains("ruleview-flex");
-  }
-
   /**
    * Is the current clicked node a grid display property value in the
    * rule-view.
@@ -1471,11 +1457,6 @@ class HighlightersOverlay {
       this.toggleGridHighlighter(this.inspector.selection.nodeFront, "rule");
     }
 
-    if (this._isRuleViewDisplayFlex(event.target)) {
-      event.stopPropagation();
-      this.toggleFlexboxHighlighter(this.inspector.selection.nodeFront, "rule");
-    }
-
     if (this._isRuleViewShapeSwatch(event.target)) {
       event.stopPropagation();
 

devtools/client/inspector/test/head.js

@@ -814,6 +814,12 @@ function getHighlighterTestHelpers(inspector) {
   }
 
   return {
+    getActiveHighlighter(type) {
+      return inspector.highlighters.getActiveHighlighter(type);
+    },
+    getNodeForActiveHighlighter(type) {
+      return inspector.highlighters.getNodeForActiveHighlighter(type);
+    },
     waitForHighlighterTypeShown(type) {
       return _waitForHighlighterTypeEvent(type, "highlighter-shown");
     },