Bug 1589320 - Use inspectNode to open the toolbox in custom.inspector DAMP test r=ochameau,rcaliman

Depends on D49330

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

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

testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector/index.html

@@ -84,19 +84,22 @@
 
     var tpl = document.createElement('template');
     tpl.innerHTML =
-      `<!-- <div> elements with ${deep} nested childs, all with ${attributes} attributes -->
-       <!-- The deepest <div> has id="deep"> -->
-       ${tree}
-       <!-- ${n} <div> elements without any children -->
-       ${repeat}
-       <!-- Elements for custom.inspector.manyrules tests -->
-       <div class="no-css-rules"></div>
-       <div class="many-css-rules"></div>
-       <div class="expand-many-children">
-       ${expandManyChildren}
-       </div>
-       <div class="expand-balanced">
-       ${expandBalanced}
+      `
+       <div id="initial-node">
+         <!-- <div> elements with ${deep} nested childs, all with ${attributes} attributes -->
+         <!-- The deepest <div> has id="deep"> -->
+         ${tree}
+         <!-- ${n} <div> elements without any children -->
+         ${repeat}
+         <!-- Elements for custom.inspector.manyrules tests -->
+         <div class="no-css-rules"></div>
+         <div class="many-css-rules"></div>
+         <div class="expand-many-children">
+         ${expandManyChildren}
+         </div>
+         <div class="expand-balanced">
+         ${expandBalanced}
+         </div>
        </div>`;
     document.body.appendChild(tpl.content);
   </script>

testing/talos/talos/tests/devtools/addon/content/tests/head.js

@@ -78,6 +78,7 @@ async function waitForPendingPaints(toolbox) {
   let window = panel.panelWin || panel._frameWindow || panel.panelWindow;
   return damp.waitForPendingPaints(window);
 }
+exports.waitForPendingPaints = waitForPendingPaints;
 
 const openToolbox = async function(tool = "webconsole", onLoad) {
   let tab = getActiveTab();
@@ -103,15 +104,21 @@ exports.closeToolbox = async function() {
   await gDevTools.closeToolbox(target);
 };
 
+// Settle test isn't recorded, it only prints the pending duration
+async function recordPendingPaints(name, toolbox) {
+  dump(`Wait for pending paints on '${name}'\n`);
+  const test = runTest(`${name}.settle.DAMP`, false);
+  await waitForPendingPaints(toolbox);
+  test.done();
+}
+exports.recordPendingPaints = recordPendingPaints;
+
 exports.openToolboxAndLog = async function(name, tool, onLoad) {
-  let test = runTest(`${name}.open.DAMP`);
+  const test = runTest(`${name}.open.DAMP`);
   let toolbox = await openToolbox(tool, onLoad);
   test.done();
 
-  // Settle test isn't recorded, it only prints the pending duration
-  test = runTest(`${name}.open.settle.DAMP`, false);
-  await waitForPendingPaints(toolbox);
-  test.done();
+  await recordPendingPaints(`${name}.open`, toolbox);
 
   // Force freeing memory after toolbox open as it creates a lot of objects
   // and for complex documents, it introduces a GC that runs during 'reload' test.
@@ -136,9 +143,5 @@ exports.reloadPageAndLog = async function(name, toolbox, onReload) {
   await damp.reloadPage(onReload);
   test.done();
 
-  // Settle test isn't recorded, it only prints the pending duration
-  dump(`Wait for pending paints on '${name}'\n`);
-  test = runTest(`${name}.reload.settle.DAMP`, false);
-  await waitForPendingPaints(toolbox);
-  test.done();
+  await recordPendingPaints(`${name}.reload`, toolbox);
 };

testing/talos/talos/tests/devtools/addon/content/tests/inspector/custom.js

@@ -9,19 +9,23 @@ const {
   selectNodeFront,
 } = require("./inspector-helpers");
 const {
-  openToolboxAndLog,
   closeToolboxAndLog,
   garbageCollect,
+  recordPendingPaints,
   runTest,
   testSetup,
   testTeardown,
   PAGES_BASE_URL,
 } = require("../head");
 
-module.exports = async function() {
-  await testSetup(PAGES_BASE_URL + "custom/inspector/index.html");
+const { gDevTools } = require("devtools/client/framework/devtools");
+
+module.exports = async function() {
+  const tab = await testSetup(PAGES_BASE_URL + "custom/inspector/index.html");
+
+  const domReference = await getContentDOMReference("#initial-node", tab);
+  let toolbox = await openToolboxWithInspectNode(domReference, tab);
 
-  let toolbox = await openToolboxAndLog("custom.inspector", "inspector");
   await reloadInspectorAndLog("custom", toolbox);
 
   await selectNodeWithManyRulesAndLog(toolbox);
@@ -38,6 +42,57 @@ module.exports = async function() {
   await testTeardown();
 };
 
+// Retrieve the contentDOMReference for a provided selector that should be
+// available in the content page of the provided tab.
+async function getContentDOMReference(selector, tab) {
+  dump("Retrieve the ContentDOMReference for a given selector");
+  return new Promise(resolve => {
+    const messageManager = tab.linkedBrowser.messageManager;
+
+    messageManager.addMessageListener("get-dom-reference-done", e => {
+      const domReference = e.data;
+      resolve(domReference);
+    });
+
+    messageManager.loadFrameScript(
+      "data:,(" +
+        encodeURIComponent(
+          `function () {
+        const { ContentDOMReference } = ChromeUtils.import(
+          "resource://gre/modules/ContentDOMReference.jsm"
+        );
+        const element = content.document.querySelector("${selector}");
+        const domReference = ContentDOMReference.get(element);
+        sendAsyncMessage("get-dom-reference-done", domReference);
+      }`
+        ) +
+        ")()",
+      false
+    );
+  });
+}
+
+async function openToolboxWithInspectNode(domReference, tab) {
+  dump("Open the toolbox using InspectNode\n");
+
+  const test = runTest(`custom.inspector.open.DAMP`);
+
+  // Wait for "toolbox-created" to easily get access to the created toolbox.
+  const onToolboxCreated = gDevTools.once("toolbox-created");
+
+  await gDevTools.inspectNode(tab, domReference);
+  const toolbox = await onToolboxCreated;
+  test.done();
+
+  // Wait for all pending paints to settle.
+  await recordPendingPaints("custom.inspector.open", toolbox);
+
+  // Toolbox creates many objects. See comment in head.js openToolboxAndLog.
+  await garbageCollect();
+
+  return toolbox;
+}
+
 /**
  * Measure the time necessary to select a node and display the rule view when many rules
  * match the element.