Bug 1684595 - [devtools] Update the state of the swatch for grid highlighters from the Rules view r=jdescottes

Depends on D100563

Following the example introduced for FlexboxHighlighter in D96225, this patch updates the state of the swatch to toggle the CSSGridHighlighter from the Rules view in response to corresponding highlighter events.

NOTE: To reviewers: I won't be able to address code review comments. Please commandeer, update, and land this patch yourself.

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

devtools/client/inspector/rules/rules.js

@@ -444,33 +444,61 @@ CssRuleView.prototype = {
    *        Object with data associated with the highlighter event.
    */
   handleHighlighterEvent(eventName, data) {
-    const handlers = {};
+    switch (data.type) {
+      // Toggle the "highlighted" class on selector icons in the Rules view when
+      // the SelectorHighlighter is shown/hidden for a certain CSS selector.
+      case this.inspector.highlighters.TYPES.SELECTOR:
+        {
+          const selector = data?.options?.selector;
+          if (!selector) {
+            return;
+          }
 
-    // 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"
+            );
+          }
+        }
+        break;
 
-      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.
+      case 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");
+          }
+        }
+        break;
 
-    // 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");
-      }
-    };
+      // Toggle the "active" class on swatches next to grid CSS properties
+      // when the GridHighlighter is shown/hidden for the currently selected node.
+      case this.inspector.highlighters.TYPES.GRID:
+        {
+          const query = ".js-toggle-grid-highlighter";
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            // From the Layout panel, we can toggle grid highlighters for nodes which are
+            // not currently selected. The Rules view shows `display: grid` declarations
+            // only for the selected node. Avoid mistakenly marking them as "active".
+            if (data.nodeFront === this.inspector.selection.nodeFront) {
+              node.classList.toggle("active", eventName == "highlighter-shown");
+            }
 
-    if (typeof handlers[data.type] === "function") {
-      handlers[data.type].call(this);
+            // When the max limit of grid highlighters is reached (default 3),
+            // mark inactive grid swatches as disabled.
+            node.toggleAttribute(
+              "disabled",
+              !this.inspector.highlighters.canGridHighlighterToggle(
+                this.inspector.selection.nodeFront
+              )
+            );
+          }
+        }
+        break;
     }
   },
 

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

@@ -1047,7 +1047,6 @@ class HighlightersOverlay {
       ...options,
       trigger,
     });
-    this._toggleRuleViewIcon(node, true, ".ruleview-grid");
 
     try {
       // Save grid highlighter state.
@@ -1200,8 +1199,6 @@ class HighlightersOverlay {
     // as a subgrid's parent grid. If so, restore the parent grid highlighter.
     await this.restoreParentGridHighlighter(node);
 
-    this._toggleRuleViewIcon(node, false, ".ruleview-grid");
-
     // Emit the NodeFront of the grid container element that the grid highlighter was
     // hidden for.
     this.emit("grid-highlighter-hidden", node);
@@ -1465,41 +1462,6 @@ class HighlightersOverlay {
     }
   }
 
-  /**
-   * Toggle all the icons with the given selector in the rule view if the current
-   * inspector selection is the highlighted node.
-   *
-   * @param  {NodeFront} node
-   *         The NodeFront of the element with a shape to highlight.
-   * @param  {Boolean} active
-   *         Whether or not the shape icon should be active.
-   * @param  {String} selector
-   *         The selector of the rule view icon to toggle.
-   */
-  _toggleRuleViewIcon(node, active, selector) {
-    const ruleViewEl = this.inspector.getPanel("ruleview").view.element;
-
-    if (this.inspector.selection.nodeFront !== node) {
-      if (selector === ".ruleview-grid") {
-        for (const icon of ruleViewEl.querySelectorAll(selector)) {
-          if (
-            this.canGridHighlighterToggle(this.inspector.selection.nodeFront)
-          ) {
-            icon.removeAttribute("disabled");
-          } else {
-            icon.setAttribute("disabled", true);
-          }
-        }
-      }
-
-      return;
-    }
-
-    for (const icon of ruleViewEl.querySelectorAll(selector)) {
-      icon.classList.toggle("active", active);
-    }
-  }
-
   /**
    * Toggle the class "active" on the given shape point in the rule view if the current
    * inspector selection is highlighted by the shapes highlighter.