Bug 1558783 - Fixes the subgrid and parent grid highlighter states when both are highlighted. r=mtigley
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 24 Jun 2019 17:46:04 -0400
changeset 540675 de2d79704486a95548e02614830ab3798554c5ee
parent 540623 29066d3463d49a9887a533eacbc1d8382e23338c
child 540676 fd2778a2ce8ba1284cba867f4358f9fcaf795568
push id11529
push userarchaeopteryx@coole-files.de
push dateThu, 04 Jul 2019 15:22:33 +0000
treeherdermozilla-beta@ebb510a784b8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1558783
milestone69.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 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
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -528,17 +528,17 @@ class HighlightersOverlay {
     } else if (this.parentGridHighlighters.has(node)) {
       // A translucent parent grid container is being highlighted, hide the translucent
       // highlight of the parent grid container.
       await this.hideGridHighlighter(node);
     }
 
     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);
     }
 
     const highlighter = await this._getGridHighlighter(node);
     if (!highlighter) {
       return;
@@ -583,16 +583,21 @@ class HighlightersOverlay {
 
   /**
    * Show the grid highlighter for the given parent grid container element.
    *
    * @param  {NodeFront} node
    *         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;
     }
 
     await highlighter.show(node, {
       ...this.getGridHighlighterSettings(node),
       globalAlpha: SUBGRID_PARENT_ALPHA,
@@ -619,22 +624,35 @@ class HighlightersOverlay {
     }
 
     // Hide the highlighter and put it in the pool of extra grid highlighters
     // so that it can be reused.
     await highlighter.hide();
     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) {
       this.telemetry.toolClosed("grid_highlighter", this.inspector.toolbox.sessionId,
         this);
       this.isGridHighlighterTimerActive = false;
     }