Bug 1558783 - Fixes the subgrid and parent grid highlighter states when both are highlighted. r=mtigley

This fixes 2 issues that we had when the subgrid and parent grid highlighter are shown:

1) When the subgrid and its parent grid container are both highlighted and the parent grid container
is unhighlighted, we need to still show a translucent parent grid container highlight.

2) Avoid showing a translucent parent grid container highlight for a subgrid, when the
parent grid container is already highlighted.

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

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

@@ -533,7 +533,7 @@ class HighlightersOverlay {
 
     if (node.displayType === "subgrid" && await this.canGetParentGridNode()) {
       // Show a translucent highlight of the parent grid container if the given node is
-      // a subgrid.
+      // a subgrid and the parent grid container is not highlighted.
       const parentGridNode = await this.walker.getParentGridNode(node);
       this.subgridToParentMap.set(node, parentGridNode);
       await this.showParentGridHighlighter(parentGridNode);
@@ -588,6 +588,11 @@ class HighlightersOverlay {
    *         The NodeFront of the parent grid container element to highlight.
    */
   async showParentGridHighlighter(node) {
+    if (this.gridHighlighters.has(node)) {
+      // Parent grid container already highlighted.
+      return;
+    }
+
     const highlighter = await this._getGridHighlighter(node, true);
     if (!highlighter) {
       return;
@@ -624,12 +629,25 @@ class HighlightersOverlay {
     this.extraGridHighlighterPool.push(highlighter);
     this.state.grids.delete(node);
 
+    // Given node was a subgrid, remove its entry from the subgridToParentMap and
+    // hide its parent grid container highlight.
     if (this.subgridToParentMap.has(node)) {
       const parentGridNode = this.subgridToParentMap.get(node);
       this.subgridToParentMap.delete(node);
       await this.hideParentGridHighlighter(parentGridNode);
     }
 
+    // Check if the given node matches any of the subgrid's parent grid container.
+    // Since the subgrid and its parent grid container were previously both highlighted
+    // and the parent grid container (the given node) has just been hidden, show a
+    // translucent highlight of the parent grid container.
+    for (const parentGridNode of this.subgridToParentMap.values()) {
+      if (parentGridNode === node) {
+        await this.showParentGridHighlighter(parentGridNode);
+        break;
+      }
+    }
+
     this._toggleRuleViewIcon(node, false, ".ruleview-grid");
 
     if (this.isGridHighlighterTimerActive && !this.gridHighlighters.size) {