From 3b907fb0aceaf1ba2710d08653c008977ea74fb9 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 30 Apr 2019 00:50:47 -0400
Subject: [PATCH] Bug 1468402 - Part 1: Add isSubgrid and subgridParentNode to
 the grid actor form. r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D29317
---
 devtools/server/actors/layout.js | 32 +++++++++++++++++++++++++++++++-
 devtools/shared/fronts/layout.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/devtools/server/actors/layout.js b/devtools/server/actors/layout.js
index 777e86cb8d19..c32a01a47674 100644
--- a/devtools/server/actors/layout.js
+++ b/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,
@@ -22,6 +23,9 @@ loader.lazyRequireGetter(this, "isCssPropertyKnown", "devtools/server/actors/css
 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.
  *
@@ -258,13 +262,28 @@ const GridActor = ActorClassWithSpec(gridSpec, {
 
     this.containerEl = containerEl;
     this.walker = layoutActor.walker;
+    this.computedStyle = CssLogic.getComputedStyle(this.containerEl);
+
+    if (SUBGRID_ENABLED) {
+      const { gridTemplateColumns, gridTemplateRows } = this.computedStyle;
+      this.isSubgrid = gridTemplateRows === "subgrid" ||
+                       gridTemplateColumns === "subgrid";
+
+      if (this.isSubgrid) {
+        // The parent grid container for the subgrid.
+        this.parentEl = findGridParentContainerForNode(this.containerEl, this.walker);
+      }
+    }
   },
 
   destroy() {
     Actor.prototype.destroy.call(this);
 
+    this.computedStyle = null;
     this.containerEl = null;
     this.gridFragments = null;
+    this.isSubgrid = null;
+    this.parentEl = null;
     this.walker = null;
   },
 
@@ -275,7 +294,7 @@ 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, writingMode } = this.computedStyle;
 
     const form = {
       actor: this.actorID,
@@ -284,6 +303,17 @@ const GridActor = ActorClassWithSpec(gridSpec, {
       writingMode,
     };
 
+    if (SUBGRID_ENABLED && this.isSubgrid) {
+      form.isSubgrid = this.isSubgrid;
+
+      // If the WalkerActor already knows the parent grid element, then also return its
+      // ActorID so we avoid the client from doing another round trip to get it in many
+      // cases.
+      if (this.walker.hasNode(this.parentEl)) {
+        form.parentGridNodeActorID = this.walker.getNode(this.parentEl).actorID;
+      }
+    }
+
     // If the WalkerActor already knows the container element, then also return its
     // ActorID so we avoid the client from doing another round trip to get it in many
     // cases.
diff --git a/devtools/shared/fronts/layout.js b/devtools/shared/fronts/layout.js
index 6b80f6bce417..6cecc84855de 100644
--- a/devtools/shared/fronts/layout.js
+++ b/devtools/shared/fronts/layout.js
@@ -113,6 +113,13 @@ class GridFront extends FrontClassWithSpec(gridSpec) {
   }
 
   /**
+   * 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.
    */
@@ -123,6 +130,30 @@ class GridFront extends FrontClassWithSpec(gridSpec) {
 
     return this._form.writingMode;
   }
+
+  /**
+   * For a subgrid, returns the NodeFront of the parent grid container.
+   *
+   * @param  {WalkerFront} walker
+   *         Client side of the DOM walker.
+   * @return {NodeFront} of the parent grid container.
+   */
+  async getParentGridNode(walker) {
+    if (this._form.parentGridNodeActorID) {
+      return this.conn.getActor(this._form.parentGridNodeActorID);
+    }
+
+    // If the parentGridNodeActorID wasn't set, that means the nodeFront for this
+    // subgrid's parent grid container hasn't been seen by the walker yet.
+    // So, get the nodeFront from the server.
+    try {
+      return await walker.getNodeFromActor(this.actorID, ["parentEl"]);
+    } catch (e) {
+      // This call might fail if called asynchrously after the toolbox is finished
+      // closing.
+      return null;
+    }
+  }
 }
 
 class LayoutFront extends FrontClassWithSpec(layoutSpec) {
-- 
2.11.4.GIT