Bug 1317215 - Add tests for the LayoutActor and GridActor. r=pbro

devtools/server/tests/browser/browser.ini

@@ -9,6 +9,7 @@ support-files =
   doc_force_gc.html
   doc_innerHTML.html
   doc_perf.html
+  grid.html
   inspectedwindow-reload-target.sjs
   navigate-first.html
   navigate-second.html
@@ -53,6 +54,8 @@ skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still di
 skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still disabled in E10S
 [browser_canvasframe_helper_06.js]
 skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still disabled in E10S
+[browser_layout_getAllGrids.js]
+[browser_layout_simple.js]
 [browser_markers-cycle-collection.js]
 [browser_markers-docloading-01.js]
 [browser_markers-docloading-02.js]
@@ -91,4 +94,4 @@ skip-if = e10s # Bug 1183605 - devtools/server/tests/browser/ tests are still di
 [browser_timeline_actors.js]
 [browser_timeline_iframes.js]
 [browser_register_actor.js]
-[browser_webextension_inspected_window.js]
+[browser_webextension_inspected_window.js]

devtools/server/tests/browser/browser_layout_getAllGrids.js

@@ -0,0 +1,133 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check the output of getAllGrids for the LayoutActor
+
+const GRID_FRAGMENT_DATA = {
+  areas: [
+    {
+      columnEnd: 3,
+      columnStart: 2,
+      name: "header",
+      rowEnd: 2,
+      rowStart: 1,
+      type: "explicit"
+    },
+    {
+      columnEnd: 2,
+      columnStart: 1,
+      name: "sidebar",
+      rowEnd: 3,
+      rowStart: 2,
+      type: "explicit"
+    },
+    {
+      columnEnd: 3,
+      columnStart: 2,
+      name: "content",
+      rowEnd: 3,
+      rowStart: 2,
+      type: "explicit"
+    }
+  ],
+  cols: {
+    lines: [
+      {
+        breadth: 0,
+        names: ["col-1", "col-start-1", "sidebar-start"],
+        number: 1,
+        start: 0
+      },
+      {
+        breadth: 0,
+        names: ["col-2", "header-start", "sidebar-end", "content-start"],
+        number: 2,
+        start: 100
+      },
+      {
+        breadth: 0,
+        names: ["header-end", "content-end"],
+        number: 3,
+        start: 200
+      }
+    ],
+    tracks: [
+      {
+        breadth: 100,
+        start: 0,
+        state: "static",
+        type: "explicit"
+      },
+      {
+        breadth: 100,
+        start: 100,
+        state: "static",
+        type: "explicit"
+      }
+    ]
+  },
+  rows: {
+    lines: [
+      {
+        breadth: 0,
+        names: ["header-start"],
+        number: 1,
+        start: 0
+      },
+      {
+        breadth: 0,
+        names: ["header-end", "sidebar-start", "content-start"],
+        number: 2,
+        start: 100
+      },
+      {
+        breadth: 0,
+        names: ["sidebar-end", "content-end"],
+        number: 3,
+        start: 200
+      }
+    ],
+    tracks: [
+      {
+        breadth: 100,
+        start: 0,
+        state: "static",
+        type: "explicit"
+      },
+      {
+        breadth: 100,
+        start: 100,
+        state: "static",
+        type: "explicit"
+      }
+    ]
+  }
+};
+
+add_task(function* () {
+  let { client, walker, layout } = yield initLayoutFrontForUrl(MAIN_DOMAIN + "grid.html");
+  let grids = yield layout.getAllGrids(walker.rootNode, true);
+  let grid = grids[0];
+  let { gridFragments } = grid;
+
+  is(grids.length, 1, "One grid was returned.");
+  is(gridFragments.length, 1, "One grid fragment was returned.");
+  ok(Array.isArray(gridFragments), "An array of grid fragments was returned.");
+  Assert.deepEqual(gridFragments[0], GRID_FRAGMENT_DATA,
+    "Got the correct grid fragment data.");
+
+  info("Get the grid container node front.");
+
+  try {
+    let nodeFront = yield walker.getNodeFromActor(grids[0].actorID, ["containerEl"]);
+    ok(nodeFront, "Got the grid container node front.");
+  } catch (e) {
+    ok(false, "Did not get grid container node front.");
+  }
+
+  yield client.close();
+  gBrowser.removeCurrentTab();
+});

devtools/server/tests/browser/browser_layout_simple.js

@@ -0,0 +1,39 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Simple checks for the LayoutActor and GridActor
+
+add_task(function* () {
+  let {client, walker, layout} = yield initLayoutFrontForUrl(
+    "data:text/html;charset=utf-8,<title>test</title><div></div>");
+
+  ok(layout, "The LayoutFront was created");
+  ok(layout.getAllGrids, "The getAllGrids method exists");
+
+  let didThrow = false;
+  try {
+    yield layout.getGrids(null);
+  } catch (e) {
+    didThrow = true;
+  }
+  ok(didThrow, "An exception was thrown for a missing NodeActor in getGrids");
+
+  didThrow = false;
+  try {
+    yield layout.getAllGrids(null);
+  } catch (e) {
+    didThrow = true;
+  }
+  ok(didThrow, "An exception was thrown for a missing NodeActor in getAllGrids");
+
+  let invalidNode = yield walker.querySelector(walker.rootNode, "title");
+  let grids = yield layout.getAllGrids(invalidNode, true);
+  ok(Array.isArray(grids), "An array of grids was returned");
+  is(grids.length, 0, "0 grids have been returned for the invalid node");
+
+  yield client.close();
+  gBrowser.removeCurrentTab();
+});

devtools/server/tests/browser/grid.html

@@ -0,0 +1,42 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Grid test page</title>
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      grid-template-columns: [col-1 col-start-1] 100px [col-2] 100px;
+      grid-template-rows: 100px 100px;
+      grid-template-areas: ". header"
+                           "sidebar content";
+    }
+    #cell1 {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    #cell2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
+    #cell3 {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    #cell4 {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  </style>
+</head>
+<body>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+</body>
+</html>

devtools/server/tests/browser/head.js

@@ -65,6 +65,21 @@ function* initAnimationsFrontForUrl(url) {
   return {inspector, walker, animations, client};
 }
 
+function* initLayoutFrontForUrl(url) {
+  const {InspectorFront} = require("devtools/shared/fronts/inspector");
+
+  yield addTab(url);
+
+  initDebuggerServer();
+  let client = new DebuggerClient(DebuggerServer.connectPipe());
+  let form = yield connectDebuggerClient(client);
+  let inspector = InspectorFront(client, form);
+  let walker = yield inspector.getWalker();
+  let layout = yield walker.getLayoutInspector();
+
+  return {inspector, walker, layout, client};
+}
+
 function initDebuggerServer() {
   try {
     // Sometimes debugger server does not get destroyed correctly by previous