Bug 1687948 - [devtools] Move helper_screenshot_node.js content to shared-head. r=jdescottes.

We're going to use some of the function provided by this
helper in console tests, so it feels better to move the
content of the file in shared-head so all panels can benefit
from it.

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

devtools/client/inspector/markup/test/browser.ini

@@ -60,7 +60,6 @@ support-files =
   helper_events_test_runner.js
   helper_markup_accessibility_navigation.js
   helper_outerhtml_test_runner.js
-  helper_screenshot_node.js
   helper_style_attr_test_runner.js
   lib_babel_6.21.0_min.js
   lib_jquery_1.0.js

devtools/client/inspector/markup/test/browser_markup_screenshot_node.js

@@ -1,11 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
-/* import-globals-from helper_screenshot_node.js */
 
 "use strict";
 
-loadHelperScript("helper_screenshot_node.js");
-
 const TEST_URL = `data:text/html;charset=utf8,
   <div id="blue-node" style="width:30px;height:30px;background:rgb(0, 0, 255)"></div>`;
 

devtools/client/inspector/markup/test/browser_markup_screenshot_node_iframe.js

@@ -1,11 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
-/* import-globals-from helper_screenshot_node.js */
 
 "use strict";
 
-loadHelperScript("helper_screenshot_node.js");
-
 const exampleNetDocument = `http://example.net/document-builder.sjs`;
 const exampleComDocument = `http://example.com/document-builder.sjs`;
 

devtools/client/inspector/markup/test/browser_markup_screenshot_node_shadowdom.js

@@ -1,11 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
-/* import-globals-from helper_screenshot_node.js */
 
 "use strict";
 
-loadHelperScript("helper_screenshot_node.js");
-
 const TEST_URL = `data:text/html;charset=utf8,
   <test-component></test-component>
   <script>

devtools/client/inspector/markup/test/helper_screenshot_node.js

@@ -1,124 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-function colorAt(image, x, y) {
-  // Create a test canvas element.
-  const HTML_NS = "http://www.w3.org/1999/xhtml";
-  const canvas = document.createElementNS(HTML_NS, "canvas");
-  canvas.width = image.width;
-  canvas.height = image.height;
-
-  // Draw the image in the canvas
-  const context = canvas.getContext("2d");
-  context.drawImage(image, 0, 0, image.width, image.height);
-
-  // Return the color found at the provided x,y coordinates as a "r, g, b" string.
-  const [r, g, b] = context.getImageData(x, y, 1, 1).data;
-  return { r, g, b };
-}
-
-let allDownloads = [];
-async function waitUntilScreenshot() {
-  const { Downloads } = require("resource://gre/modules/Downloads.jsm");
-  const list = await Downloads.getList(Downloads.ALL);
-
-  return new Promise(function(resolve) {
-    const view = {
-      onDownloadAdded: async download => {
-        await download.whenSucceeded();
-        if (allDownloads.includes(download)) {
-          return;
-        }
-
-        allDownloads.push(download);
-        resolve(download.target.path);
-        list.removeView(view);
-      },
-    };
-
-    list.addView(view);
-  });
-}
-
-async function resetDownloads() {
-  info("Reset downloads");
-  const { Downloads } = require("resource://gre/modules/Downloads.jsm");
-  const publicList = await Downloads.getList(Downloads.PUBLIC);
-  const downloads = await publicList.getAll();
-  for (const download of downloads) {
-    publicList.remove(download);
-    await download.finalize(true);
-  }
-  allDownloads = [];
-}
-
-async function takeNodeScreenshot(inspector) {
-  // Cleanup all downloads at the end of the test.
-  registerCleanupFunction(resetDownloads);
-
-  info(
-    "Call screenshotNode() and wait until the screenshot is found in the Downloads"
-  );
-  const whenScreenshotSucceeded = waitUntilScreenshot();
-  inspector.screenshotNode();
-  const filePath = await whenScreenshotSucceeded;
-
-  info("Create an image using the downloaded fileas source");
-  const image = new Image();
-  image.src = OS.Path.toFileURI(filePath);
-  await once(image, "load");
-
-  info("Remove the downloaded screenshot file");
-  await OS.File.remove(filePath);
-
-  // See intermittent Bug 1508435. Even after removing the file, tests still manage to
-  // reuse files from the previous test if they have the same name. Since our file name
-  // is based on a timestamp that has "second" precision, wait for one second to make sure
-  // screenshots will have different names.
-  info(
-    "Wait for one second to make sure future screenshots will use a different name"
-  );
-  await new Promise(r => setTimeout(r, 1000));
-
-  return image;
-}
-/* exported takeNodeScreenshot */
-
-/**
- * Check that the provided image has the expected width, height, and color.
- * NOTE: This test assumes that the image is only made of a single color and will only
- * check one pixel.
- */
-async function assertSingleColorScreenshotImage(
-  image,
-  width,
-  height,
-  { r, g, b }
-) {
-  info(`Assert ${image.src} content`);
-  const ratio = await SpecialPowers.spawn(
-    gBrowser.selectedBrowser,
-    [],
-    () => content.wrappedJSObject.devicePixelRatio
-  );
-
-  is(
-    image.width,
-    ratio * width,
-    `node screenshot has the expected width (dpr = ${ratio})`
-  );
-  is(
-    image.height,
-    height * ratio,
-    `node screenshot has the expected height (dpr = ${ratio})`
-  );
-
-  const color = colorAt(image, 0, 0);
-  is(color.r, r, "node screenshot has the expected red component");
-  is(color.g, g, "node screenshot has the expected green component");
-  is(color.b, b, "node screenshot has the expected blue component");
-}
-/* exported assertSingleColorScreenshotImage */

devtools/client/shared/test/shared-head.js

@@ -1203,3 +1203,150 @@ async function unregisterAllServiceWorkers(client) {
   }
   await Promise.all(promises);
 }
+
+/**********************
+ * Screenshot helpers *
+ **********************/
+
+/**
+ * Returns an object containing the r,g and b colors of the provided image at
+ * the passed position
+ *
+ * @param {Image} image
+ * @param {Int} x
+ * @param {Int} y
+ * @returns Object with the following properties:
+ *           - {Int} r: The red component of the pixel
+ *           - {Int} g: The green component of the pixel
+ *           - {Int} b: The blue component of the pixel
+ */
+
+function colorAt(image, x, y) {
+  // Create a test canvas element.
+  const HTML_NS = "http://www.w3.org/1999/xhtml";
+  const canvas = document.createElementNS(HTML_NS, "canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+
+  // Draw the image in the canvas
+  const context = canvas.getContext("2d");
+  context.drawImage(image, 0, 0, image.width, image.height);
+
+  // Return the color found at the provided x,y coordinates as a "r, g, b" string.
+  const [r, g, b] = context.getImageData(x, y, 1, 1).data;
+  return { r, g, b };
+}
+
+let allDownloads = [];
+/**
+ * Returns a Promise that resolves when a new screenshot is available in the download folder.
+ */
+async function waitUntilScreenshot() {
+  const { Downloads } = require("resource://gre/modules/Downloads.jsm");
+  const list = await Downloads.getList(Downloads.ALL);
+
+  return new Promise(function(resolve) {
+    const view = {
+      onDownloadAdded: async download => {
+        await download.whenSucceeded();
+        if (allDownloads.includes(download)) {
+          return;
+        }
+
+        allDownloads.push(download);
+        resolve(download.target.path);
+        list.removeView(view);
+      },
+    };
+
+    list.addView(view);
+  });
+}
+
+/**
+ * Clear all the download references.
+ */
+async function resetDownloads() {
+  info("Reset downloads");
+  const { Downloads } = require("resource://gre/modules/Downloads.jsm");
+  const publicList = await Downloads.getList(Downloads.PUBLIC);
+  const downloads = await publicList.getAll();
+  for (const download of downloads) {
+    publicList.remove(download);
+    await download.finalize(true);
+  }
+  allDownloads = [];
+}
+
+/**
+ * Return a screenshot of the currently selected node in the inspector (using the internal
+ * Inspector#screenshotNode method).
+ *
+ * @param {Inspector} inspector
+ * @returns {Image}
+ */
+async function takeNodeScreenshot(inspector) {
+  // Cleanup all downloads at the end of the test.
+  registerCleanupFunction(resetDownloads);
+
+  info(
+    "Call screenshotNode() and wait until the screenshot is found in the Downloads"
+  );
+  const whenScreenshotSucceeded = waitUntilScreenshot();
+  inspector.screenshotNode();
+  const filePath = await whenScreenshotSucceeded;
+
+  info("Create an image using the downloaded fileas source");
+  const image = new Image();
+  image.src = OS.Path.toFileURI(filePath);
+  await once(image, "load");
+
+  info("Remove the downloaded screenshot file");
+  await OS.File.remove(filePath);
+
+  // See intermittent Bug 1508435. Even after removing the file, tests still manage to
+  // reuse files from the previous test if they have the same name. Since our file name
+  // is based on a timestamp that has "second" precision, wait for one second to make sure
+  // screenshots will have different names.
+  info(
+    "Wait for one second to make sure future screenshots will use a different name"
+  );
+  await new Promise(r => setTimeout(r, 1000));
+
+  return image;
+}
+
+/**
+ * Check that the provided image has the expected width, height, and color.
+ * NOTE: This test assumes that the image is only made of a single color and will only
+ * check one pixel.
+ */
+async function assertSingleColorScreenshotImage(
+  image,
+  width,
+  height,
+  { r, g, b }
+) {
+  info(`Assert ${image.src} content`);
+  const ratio = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => content.wrappedJSObject.devicePixelRatio
+  );
+
+  is(
+    image.width,
+    ratio * width,
+    `node screenshot has the expected width (dpr = ${ratio})`
+  );
+  is(
+    image.height,
+    height * ratio,
+    `node screenshot has the expected height (dpr = ${ratio})`
+  );
+
+  const color = colorAt(image, 0, 0);
+  is(color.r, r, "node screenshot has the expected red component");
+  is(color.g, g, "node screenshot has the expected green component");
+  is(color.b, b, "node screenshot has the expected blue component");
+}