Bug 1571650: Change z-index by the nest. r=pbro

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/grids/grid-inspector.js

@@ -428,6 +428,12 @@ class GridInspector {
       grids.push(gridData);
     }
 
+    // We need to make sure that nested subgrids are displayed above their parent grid
+    // containers, so update the z-index of each grid before rendering them.
+    for (const root of grids.filter(g => !g.parentNodeActorID)) {
+      this._updateZOrder(grids, root);
+    }
+
     this.store.dispatch(updateGrids(grids));
     this.inspector.emit("grid-panel-updated");
   }
@@ -733,6 +739,26 @@ class GridInspector {
       }
     }
   }
+
+  /**
+   * Set z-index of each grids so that nested subgrids are always above their parent grid
+   * container.
+   *
+   * @param {Array} grids
+   *        A list of grid data.
+   * @param {Object} parent
+   *        A grid data of parent.
+   * @param {Number} zIndex
+   *        z-index for the parent.
+   */
+  _updateZOrder(grids, parent, zIndex = 0) {
+    parent.zIndex = zIndex;
+
+    for (const childIndex of parent.subgrids) {
+      // Recurse into children grids.
+      this._updateZOrder(grids, grids[childIndex], zIndex + 1);
+    }
+  }
 }
 
 module.exports = GridInspector;

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

@@ -504,7 +504,8 @@ class HighlightersOverlay {
     const { grids, highlighterSettings } = this.store.getState();
     const grid = grids.find(g => g.nodeFront === nodeFront);
     const color = grid ? grid.color : DEFAULT_HIGHLIGHTER_COLOR;
-    return Object.assign({}, highlighterSettings, { color });
+    const zIndex = grid ? grid.zIndex : 0;
+    return Object.assign({}, highlighterSettings, { color, zIndex });
   }
 
   /**

devtools/server/actors/highlighters/css-grid.js

@@ -187,6 +187,8 @@ const gCachedGridPattern = new Map();
  * @param {Boolean} options.showInfiniteLines
  *        Displays an infinite line to represent the grid lines if isShown is
  *        true.
+ * @param {Number} options.zIndex
+ *        The z-index to decide the displaying order.
  *
  * Structure:
  * <div class="highlighter-container">
@@ -222,6 +224,7 @@ const gCachedGridPattern = new Map();
  *   </div>
  * </div>
  */
+
 class CssGridHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {
     super(highlighterEnv);
@@ -1793,6 +1796,9 @@ class CssGridHighlighter extends AutoRefreshHighlighter {
   _update() {
     setIgnoreLayoutChanges(true);
 
+    // Set z-index.
+    this.markup.content.setStyle("z-index", this.options.zIndex);
+
     const root = this.getElement("root");
     const cells = this.getElement("cells");
     const areas = this.getElement("areas");