Bug 1468402 - Part 1: Add isSubgrid to the grid actor form and getParentGridNode to the walker. r=pbro

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

devtools/server/actors/inspector/utils.js

@@ -317,8 +317,38 @@ function getClosestBackgroundImage(node) {
   return "none";
 }
 
+/**
+ * If the provided node is a grid item, then return its parent grid.
+ *
+ * @param  {DOMNode} node
+ *         The node that is supposedly a grid item.
+ * @return {DOMNode|null}
+ *         The parent grid if found, null otherwise.
+ */
+function findGridParentContainerForNode(node) {
+  try {
+    while ((node = node.parentNode)) {
+      const display = node.ownerGlobal.getComputedStyle(node).display;
+
+      if (display.includes("grid")) {
+        return node;
+      } else if (display === "contents") {
+        // Continue walking up the tree since the parent node is a content element.
+        continue;
+      }
+
+      break;
+    }
+  } catch (e) {
+    // Getting the parentNode can fail when the supplied node is in shadow DOM.
+  }
+
+  return null;
+}
+
 module.exports = {
   allAnonymousContentTreeWalkerFilter,
+  findGridParentContainerForNode,
   getClosestBackgroundColor,
   getClosestBackgroundImage,
   getNodeDisplayName,

devtools/server/actors/inspector/walker.js

@@ -28,6 +28,7 @@ loader.lazyRequireGetter(this, "loadSheet", "devtools/shared/layout/utils", true
 loader.lazyRequireGetter(this, "throttle", "devtools/shared/throttle", true);
 
 loader.lazyRequireGetter(this, "allAnonymousContentTreeWalkerFilter", "devtools/server/actors/inspector/utils", true);
+loader.lazyRequireGetter(this, "findGridParentContainerForNode", "devtools/server/actors/inspector/utils", true);
 loader.lazyRequireGetter(this, "isNodeDead", "devtools/server/actors/inspector/utils", true);
 loader.lazyRequireGetter(this, "nodeDocument", "devtools/server/actors/inspector/utils", true);
 loader.lazyRequireGetter(this, "standardTreeWalkerFilter", "devtools/server/actors/inspector/utils", true);
@@ -2210,6 +2211,19 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
     return this.layoutActor;
   },
 
+  /**
+   * Returns the parent grid DOMNode of the given node if it exists, otherwise, it
+   * returns null.
+   */
+  getParentGridNode: function(node) {
+    if (isNodeDead(node)) {
+      return null;
+    }
+
+    const parentGridNode = findGridParentContainerForNode(node.rawNode);
+    return parentGridNode ? this._ref(parentGridNode) : null;
+  },
+
   /**
    * Returns the offset parent DOMNode of the given node if it exists, otherwise, it
    * returns null.

devtools/server/actors/layout.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const { Cu } = require("chrome");
+const Services = require("Services");
 const { Actor, ActorClassWithSpec } = require("devtools/shared/protocol");
 const {
   flexboxSpec,
@@ -16,11 +17,15 @@ const { getStringifiableFragments } =
   require("devtools/server/actors/utils/css-grid-utils");
 
 loader.lazyRequireGetter(this, "CssLogic", "devtools/server/actors/inspector/css-logic", true);
+loader.lazyRequireGetter(this, "findGridParentContainerForNode", "devtools/server/actors/inspector/utils", true);
 loader.lazyRequireGetter(this, "getCSSStyleRules", "devtools/shared/inspector/css-logic", true);
 loader.lazyRequireGetter(this, "isCssPropertyKnown", "devtools/server/actors/css-properties", true);
 loader.lazyRequireGetter(this, "parseDeclarations", "devtools/shared/css/parsing-utils", true);
 loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
 
+const SUBGRID_ENABLED =
+  Services.prefs.getBoolPref("layout.css.grid-template-subgrid-value.enabled");
+
 /**
  * Set of actors the expose the CSS layout information to the devtools protocol clients.
  *
@@ -274,7 +279,12 @@ const GridActor = ActorClassWithSpec(gridSpec, {
     this.gridFragments = getStringifiableFragments(gridFragments);
 
     // Record writing mode and text direction for use by the grid outline.
-    const { direction, writingMode } = CssLogic.getComputedStyle(this.containerEl);
+    const {
+      direction,
+      gridTemplateColumns,
+      gridTemplateRows,
+      writingMode,
+    } = CssLogic.getComputedStyle(this.containerEl);
 
     const form = {
       actor: this.actorID,
@@ -290,6 +300,11 @@ const GridActor = ActorClassWithSpec(gridSpec, {
       form.containerNodeActorID = this.walker.getNode(this.containerEl).actorID;
     }
 
+    if (SUBGRID_ENABLED) {
+      form.isSubgrid = gridTemplateRows === "subgrid" ||
+                       gridTemplateColumns === "subgrid";
+    }
+
     return form;
   },
 });
@@ -455,36 +470,6 @@ function isNodeDead(node) {
   return !node || (node.rawNode && Cu.isDeadWrapper(node.rawNode));
 }
 
-/**
- * If the provided node is a grid item, then return its parent grid.
- *
- * @param  {DOMNode} node
- *         The node that is supposedly a grid item.
- * @return {DOMNode|null}
- *         The parent grid if found, null otherwise.
- */
-function findGridParentContainerForNode(node) {
-  try {
-    while ((node = node.parentNode)) {
-      const display = node.ownerGlobal.getComputedStyle(node).display;
-
-      if (display.includes("grid")) {
-        return node;
-      } else if (display === "contents") {
-        // Continue walking up the tree since the parent node is a content element.
-        continue;
-      }
-
-      break;
-    }
-  } catch (e) {
-    // Getting the parentNode can fail when the supplied node is in shadow DOM.
-  }
-
-  return null;
-}
-
-exports.findGridParentContainerForNode = findGridParentContainerForNode;
 exports.FlexboxActor = FlexboxActor;
 exports.FlexItemActor = FlexItemActor;
 exports.GridActor = GridActor;

devtools/shared/fronts/layout.js

@@ -112,6 +112,13 @@ class GridFront extends FrontClassWithSpec(gridSpec) {
     return this._form.gridFragments;
   }
 
+  /**
+   * Get whether or not the grid is a subgrid.
+   */
+  get isSubgrid() {
+    return !!this._form.isSubgrid;
+  }
+
   /**
    * Get the writing mode of the grid container.
    * Added in Firefox 60.

devtools/shared/specs/inspector.js

@@ -326,6 +326,14 @@ const walkerSpec = generateActorSpec({
         actor: RetVal("layout"),
       },
     },
+    getParentGridNode: {
+      request: {
+        node: Arg(0, "nullable:domnode"),
+      },
+      response: {
+        node: RetVal("nullable:domnode"),
+      },
+    },
     getOffsetParent: {
       request: {
         node: Arg(0, "nullable:domnode"),