diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
index 479dd13e3e0e..e25979bb896b 100644
--- a/devtools/client/inspector/rules/rules.js
+++ b/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;
     }
   },
 
diff --git a/devtools/client/inspector/shared/highlighters-overlay.js b/devtools/client/inspector/shared/highlighters-overlay.js
index ebb040b36f59..161bfd4da063 100644
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/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.