Bug 1650690, remove frame scripts from inspector tests, and use SpecialPowers.spawn instead, r=jdescottes

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

devtools/.eslintrc.js

@@ -107,8 +107,6 @@ module.exports = {
         "client/debugger/test/mochitest/code_frame-script.js",
         "client/inspector/animation-old/test/doc_frame_script.js",
         "client/inspector/animation/test/doc_frame_script.js",
-        "client/inspector/rules/test/doc_frame_script.js",
-        "client/inspector/shared/test/doc_frame_script.js",
         "client/jsonview/test/doc_frame_script.js",
         "client/responsive.html/browser/content.js",
         "client/shared/browser-loader.js",

devtools/client/inspector/rules/test/browser_part1.ini

@@ -8,7 +8,6 @@ support-files =
   doc_cssom.html
   doc_custom.html
   doc_edit_imported_selector.html
-  doc_frame_script.js
   doc_test_image.png
   head.js
   !/devtools/client/inspector/test/head.js

devtools/client/inspector/rules/test/browser_part2.ini

@@ -9,7 +9,6 @@ support-files =
   doc_content_stylesheet_linked.css
   doc_content_stylesheet_script.css
   doc_filter.html
-  doc_frame_script.js
   doc_grid_names.html
   doc_grid_area_gridline_names.html
   doc_inline_sourcemap.html

devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js

@@ -29,11 +29,7 @@ add_task(async function() {
   info("Deleting the name of that property to remove the property");
   await removeProperty(view, prop, false);
 
-  let newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should have been unset.");
 
   info("Getting the new first property in the rule");
@@ -50,11 +46,7 @@ add_task(async function() {
   view.styleDocument.activeElement.blur();
   await removeProperty(view, prop, false);
 
-  newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "color",
-  });
+  newValue = await getRulePropertyValue(0, 0, "color");
   is(newValue, "", "color should have been unset.");
 
   editor = inplaceEditor(view.styleDocument.activeElement);

devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js

@@ -29,11 +29,7 @@ add_task(async function() {
   info("Clearing the property value");
   await setProperty(view, prop, null, false);
 
-  let newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should have been unset.");
 
   info("Getting the new first property in the rule");
@@ -50,11 +46,7 @@ add_task(async function() {
   info("Clearing the property value");
   await setProperty(view, prop, null, false);
 
-  newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "color",
-  });
+  newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "color should have been unset.");
 
   editor = inplaceEditor(view.styleDocument.activeElement);

devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js

@@ -33,11 +33,7 @@ add_task(async function() {
   EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
   await onValueDone;
 
-  let newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "color",
-  });
+  let newValue = await getRulePropertyValue(0, 0, "color");
   is(newValue, "", "color should have been unset.");
   is(
     prop.editor.valueSpan.textContent,
@@ -71,11 +67,7 @@ add_task(async function() {
   EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
   await onNameDeleted;
 
-  newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should have been unset.");
 
   editor = inplaceEditor(view.styleDocument.activeElement);

devtools/client/inspector/rules/test/browser_rules_edit-property_01.js

@@ -130,12 +130,7 @@ async function testEditProperty(view, rule, name, value, isValid) {
   );
 
   info("Checking that the style property was changed on the content page");
-  const propValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name,
-  });
-
+  const propValue = await getRulePropertyValue(0, 0, name);
   if (isValid) {
     is(propValue, value, name + " should have been set.");
   } else {

devtools/client/inspector/rules/test/browser_rules_edit-property_02.js

@@ -90,11 +90,7 @@ async function testEditProperty(inspector, ruleView) {
   }
   await onBlur;
 
-  const newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "border-color",
-  });
+  const newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "red", "border-color should have been set.");
 
   ruleView.styleDocument.activeElement.blur();
@@ -119,21 +115,13 @@ async function testDisableProperty(inspector, ruleView) {
   info("Disabling a property");
   await togglePropStatus(ruleView, prop);
 
-  let newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "border-color",
-  });
+  let newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "", "Border-color should have been unset.");
 
   info("Enabling the property again");
   await togglePropStatus(ruleView, prop);
 
-  newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "border-color",
-  });
+  newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "red", "Border-color should have been reset.");
 }
 

devtools/client/inspector/rules/test/browser_rules_edit-property_04.js

@@ -25,11 +25,7 @@ add_task(async function() {
   info("Disabling a property");
   await togglePropStatus(view, prop);
 
-  const newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  const newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should have been unset.");
 
   await testEditDisableProperty(view, prop, "name", "VK_ESCAPE");
@@ -54,11 +50,7 @@ async function testEditDisableProperty(view, prop, fieldType, commitKey) {
     "property enable checkbox is hidden."
   );
 
-  let newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should remain unset.");
 
   let onChangeDone;
@@ -86,10 +78,6 @@ async function testEditDisableProperty(view, prop, fieldType, commitKey) {
     "property enable checkbox is not checked."
   );
 
-  newValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: "background-color",
-  });
+  newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should remain unset.");
 }

devtools/client/inspector/rules/test/browser_rules_edit-property_05.js

@@ -25,7 +25,7 @@ add_task(async function() {
   info("Disabling background-color property");
   await togglePropStatus(view, prop);
 
-  let newValue = await getRulePropertyValue("background-color");
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
   is(newValue, "", "background-color should have been unset.");
 
   info(
@@ -43,7 +43,7 @@ add_task(async function() {
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
   await onValueDone;
 
-  newValue = await getRulePropertyValue("border-color");
+  newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "blue", "border-color should have been set.");
 
   ok(prop.enabled, "border-color property is enabled.");
@@ -55,13 +55,13 @@ add_task(async function() {
   info("Disabling border-color property");
   await togglePropStatus(view, prop);
 
-  newValue = await getRulePropertyValue("border-color");
+  newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "", "border-color should have been unset.");
 
   info("Enter a new property value for the border-color property");
   await setProperty(view, prop, "red");
 
-  newValue = await getRulePropertyValue("border-color");
+  newValue = await getRulePropertyValue(0, 0, "border-color");
   is(newValue, "red", "new border-color should have been set.");
 
   ok(prop.enabled, "border-color property is enabled.");
@@ -70,12 +70,3 @@ add_task(async function() {
     "border-color is not overridden"
   );
 });
-
-async function getRulePropertyValue(name) {
-  const propValue = await executeInContent("Test:GetRulePropertyValue", {
-    styleSheetIndex: 0,
-    ruleIndex: 0,
-    name: name,
-  });
-  return propValue;
-}

devtools/client/inspector/rules/test/doc_frame_script.js

@@ -1,113 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-/* globals addMessageListener, sendAsyncMessage */
-
-"use strict";
-
-// A helper frame-script for browser/devtools/styleinspector tests.
-//
-// Most listeners in the script expect "Test:"-namespaced messages from chrome,
-// then execute code upon receiving, and immediately send back a message.
-// This is so that chrome test code can execute code in content and wait for a
-// response this way:
-// let response = yield executeInContent(browser, "Test:msgName", data, true);
-// The response message should have the same name "Test:msgName"
-//
-// Some listeners do not send a response message back.
-
-/**
- * Get a value for a given property name in a css rule in a stylesheet, given
- * their indexes
- * @param {Object} data Expects a data object with the following properties
- * - {Number} styleSheetIndex
- * - {Number} ruleIndex
- * - {String} name
- * @return {String} The value, if found, null otherwise
- */
-addMessageListener("Test:GetRulePropertyValue", function(msg) {
-  const { name, styleSheetIndex, ruleIndex } = msg.data;
-  let value = null;
-
-  dumpn(
-    "Getting the value for property name " +
-      name +
-      " in sheet " +
-      styleSheetIndex +
-      " and rule " +
-      ruleIndex
-  );
-
-  const sheet = content.document.styleSheets[styleSheetIndex];
-  if (sheet) {
-    const rule = sheet.cssRules[ruleIndex];
-    if (rule) {
-      value = rule.style.getPropertyValue(name);
-    }
-  }
-
-  sendAsyncMessage("Test:GetRulePropertyValue", value);
-});
-
-/**
- * Get the property value from the computed style for an element.
- * @param {Object} data Expects a data object with the following properties
- * - {String} selector: The selector used to obtain the element.
- * - {String} pseudo: pseudo id to query, or null.
- * - {String} name: name of the property
- * @return {String} The value, if found, null otherwise
- */
-addMessageListener("Test:GetComputedStylePropertyValue", function(msg) {
-  const { selector, pseudo, name } = msg.data;
-  const element = content.document.querySelector(selector);
-  const value = content.document.defaultView
-    .getComputedStyle(element, pseudo)
-    .getPropertyValue(name);
-  sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
-});
-
-/**
- * Wait the property value from the computed style for an element and
- * compare it with the expected value
- * @param {Object} data Expects a data object with the following properties
- * - {String} selector: The selector used to obtain the element.
- * - {String} pseudo: pseudo id to query, or null.
- * - {String} name: name of the property
- * - {String} expected: the expected value for property
- */
-addMessageListener("Test:WaitForComputedStylePropertyValue", function(msg) {
-  const { selector, pseudo, name, expected } = msg.data;
-  const element = content.document.querySelector(selector);
-  waitForSuccess(() => {
-    const value = content.document.defaultView
-      .getComputedStyle(element, pseudo)
-      .getPropertyValue(name);
-
-    return value === expected;
-  }).then(() => {
-    sendAsyncMessage("Test:WaitForComputedStylePropertyValue");
-  });
-});
-
-var dumpn = msg => dump(msg + "\n");
-
-/**
- * Polls a given function waiting for it to return true.
- *
- * @param {Function} validatorFn A validator function that returns a boolean.
- * This is called every few milliseconds to check if the result is true. When
- * it is true, the promise resolves.
- * @return a promise that resolves when the function returned true or rejects
- * if the timeout is reached
- */
-function waitForSuccess(validatorFn) {
-  return new Promise(resolve => {
-    function wait(fn) {
-      if (fn()) {
-        resolve();
-      } else {
-        content.setTimeout(() => wait(fn), 200);
-      }
-    }
-    wait(validatorFn);
-  });
-}

devtools/client/inspector/rules/test/head.js

@@ -20,7 +20,6 @@ var {
 } = require("devtools/client/shared/inplace-editor");
 
 const ROOT_TEST_DIR = getRootDirectory(gTestPath);
-const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
 
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(
   "devtools/shared/locales/styleinspector.properties"
@@ -30,23 +29,6 @@ registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.defaultColorUnit");
 });
 
-/**
- * The rule-view tests rely on a frame-script to be injected in the content test
- * page. So override the shared-head's addTab to load the frame script after the
- * tab was added.
- * FIXME: Refactor the rule-view tests to use the testActor instead of a frame
- * script, so they can run on remote targets too.
- */
-var _addTab = addTab;
-addTab = function(url) {
-  return _addTab(url).then(tab => {
-    info("Loading the helper frame script " + FRAME_SCRIPT_URL);
-    const browser = tab.linkedBrowser;
-    browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
-    return tab;
-  });
-};
-
 /**
  * Get an element's inline style property value.
  * @param {TestActor} testActor

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

@@ -11,7 +11,6 @@ support-files =
   doc_content_stylesheet_linked.css
   doc_content_stylesheet_script.css
   doc_content_stylesheet_xul.css
-  doc_frame_script.js
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js

devtools/client/inspector/shared/test/doc_frame_script.js

@@ -1,117 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ */
-/* globals addMessageListener, sendAsyncMessage */
-
-"use strict";
-
-// A helper frame-script for browser/devtools/styleinspector tests.
-//
-// Most listeners in the script expect "Test:"-namespaced messages from chrome,
-// then execute code upon receiving, and immediately send back a message.
-// This is so that chrome test code can execute code in content and wait for a
-// response this way:
-// let response = yield executeInContent(browser, "Test:MsgName", data, true);
-// The response message should have the same name "Test:MsgName"
-//
-// Some listeners do not send a response message back.
-
-/**
- * Get a value for a given property name in a css rule in a stylesheet, given
- * their indexes
- * @param {Object} data Expects a data object with the following properties
- * - {Number} styleSheetIndex
- * - {Number} ruleIndex
- * - {String} name
- * @return {String} The value, if found, null otherwise
- */
-addMessageListener("Test:GetRulePropertyValue", function(msg) {
-  const { name, styleSheetIndex, ruleIndex } = msg.data;
-  let value = null;
-
-  dumpn(
-    "Getting the value for property name " +
-      name +
-      " in sheet " +
-      styleSheetIndex +
-      " and rule " +
-      ruleIndex
-  );
-
-  const sheet = content.document.styleSheets[styleSheetIndex];
-  if (sheet) {
-    const rule = sheet.cssRules[ruleIndex];
-    if (rule) {
-      value = rule.style.getPropertyValue(name);
-    }
-  }
-
-  sendAsyncMessage("Test:GetRulePropertyValue", value);
-});
-
-/**
- * Get the property value from the computed style for an element.
- * @param {Object} data Expects a data object with the following properties
- * - {String} selector: The selector used to obtain the element.
- * - {String} pseudo: pseudo id to query, or null.
- * - {String} name: name of the property
- * @return {String} The value, if found, null otherwise
- */
-addMessageListener("Test:GetComputedStylePropertyValue", function(msg) {
-  const { selector, pseudo, name } = msg.data;
-  const doc = content.document;
-
-  const element = doc.querySelector(selector);
-  const value = content
-    .getComputedStyle(element, pseudo)
-    .getPropertyValue(name);
-  sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
-});
-
-/**
- * Wait the property value from the computed style for an element and
- * compare it with the expected value
- * @param {Object} data Expects a data object with the following properties
- * - {String} selector: The selector used to obtain the element.
- * - {String} pseudo: pseudo id to query, or null.
- * - {String} name: name of the property
- * - {String} expected: the expected value for property
- */
-addMessageListener("Test:WaitForComputedStylePropertyValue", function(msg) {
-  const { selector, pseudo, name, expected } = msg.data;
-  const element = content.document.querySelector(selector);
-  waitForSuccess(() => {
-    const value = content.document.defaultView
-      .getComputedStyle(element, pseudo)
-      .getPropertyValue(name);
-
-    return value === expected;
-  }).then(() => {
-    sendAsyncMessage("Test:WaitForComputedStylePropertyValue");
-  });
-});
-
-var dumpn = msg => dump(msg + "\n");
-
-/**
- * Polls a given function waiting for it to return true.
- *
- * @param {Function} validatorFn A validator function that returns a boolean.
- * This is called every few milliseconds to check if the result is true. When
- * it is true, the promise resolves.
- * @param {String} name Optional name of the test. This is used to generate
- * the success and failure messages.
- * @return a promise that resolves when the function returned true or rejects
- * if the timeout is reached
- */
-function waitForSuccess(validatorFn, name = "untitled") {
-  return new Promise(resolve => {
-    function wait(fn) {
-      if (fn()) {
-        resolve();
-      } else {
-        setTimeout(() => wait(fn), 200);
-      }
-    }
-    wait(validatorFn);
-  });
-}

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

@@ -21,7 +21,6 @@ const TEST_URL_ROOT =
 const TEST_URL_ROOT_SSL =
   "https://example.com/browser/devtools/client/inspector/shared/test/";
 const ROOT_TEST_DIR = getRootDirectory(gTestPath);
-const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(
   "devtools/shared/locales/styleinspector.properties"
 );
@@ -73,23 +72,6 @@ registerCleanupFunction(() => {
  * nodes, get node references, ...
  */
 
-/**
- * The rule-view tests rely on a frame-script to be injected in the content test
- * page. So override the shared-head's addTab to load the frame script after the
- * tab was added.
- * FIXME: Refactor the rule-view tests to use the testActor instead of a frame
- * script, so they can run on remote targets too.
- */
-var _addTab = addTab;
-addTab = function(url) {
-  return _addTab(url).then(tab => {
-    info("Loading the helper frame script " + FRAME_SCRIPT_URL);
-    const browser = tab.linkedBrowser;
-    browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
-    return tab;
-  });
-};
-
 /**
  * Polls a given function waiting for it to return true.
  *

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

@@ -333,46 +333,98 @@ function executeInContent(name, data = {}, expectResponse = true) {
 }
 
 /**
- * Send an async message to the frame script and get back the requested
- * computed style property.
+ * Get the requested rule style property from the current browser.
  *
- * @param {String} selector
- *        The selector used to obtain the element.
- * @param {String} pseudo
- *        pseudo id to query, or null.
+ * @param {Number} styleSheetIndex
+ * @param {Number} ruleIndex
  * @param {String} name
- *        name of the property.
+ * @return {String} The value, if found, null otherwise
  */
-async function getComputedStyleProperty(selector, pseudo, propName) {
-  return executeInContent("Test:GetComputedStylePropertyValue", {
-    selector,
-    pseudo,
-    name: propName,
-  });
+
+async function getRulePropertyValue(styleSheetIndex, ruleIndex, name) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [styleSheetIndex, ruleIndex, name],
+    (styleSheetIndexChild, ruleIndexChild, nameChild) => {
+      let value = null;
+
+      info(
+        "Getting the value for property name " +
+          nameChild +
+          " in sheet " +
+          styleSheetIndexChild +
+          " and rule " +
+          ruleIndexChild
+      );
+
+      const sheet = content.document.styleSheets[styleSheetIndexChild];
+      if (sheet) {
+        const rule = sheet.cssRules[ruleIndexChild];
+        if (rule) {
+          value = rule.style.getPropertyValue(nameChild);
+        }
+      }
+
+      return value;
+    }
+  );
 }
 
 /**
- * Send an async message to the frame script and wait until the requested
- * computed style property has the expected value.
+ * Get the requested computed style property from the current browser.
  *
  * @param {String} selector
  *        The selector used to obtain the element.
  * @param {String} pseudo
  *        pseudo id to query, or null.
- * @param {String} prop
+ * @param {String} propName
+ *        name of the property.
+ */
+async function getComputedStyleProperty(selector, pseudo, propName) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, pseudo, propName],
+    (selectorChild, pseudoChild, propNameChild) => {
+      const element = content.document.querySelector(selectorChild);
+      return content.document.defaultView
+        .getComputedStyle(element, pseudoChild)
+        .getPropertyValue(propNameChild);
+    }
+  );
+}
+
+/**
+ * Wait until the requested computed style property has the
+ * expected value in the the current browser.
+ *
+ * @param {String} selector
+ *        The selector used to obtain the element.
+ * @param {String} pseudo
+ *        pseudo id to query, or null.
+ * @param {String} propName
  *        name of the property.
  * @param {String} expected
  *        expected value of property
- * @param {String} name
- *        the name used in test message
  */
-async function waitForComputedStyleProperty(selector, pseudo, name, expected) {
-  return executeInContent("Test:WaitForComputedStylePropertyValue", {
-    selector,
-    pseudo,
-    expected,
-    name,
-  });
+async function waitForComputedStyleProperty(
+  selector,
+  pseudo,
+  propName,
+  expected
+) {
+  return SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [selector, pseudo, propName, expected],
+    (selectorChild, pseudoChild, propNameChild, expectedChild) => {
+      const element = content.document.querySelector(selectorChild);
+      return ContentTaskUtils.waitForCondition(() => {
+        const value = content.document.defaultView
+          .getComputedStyle(element, pseudoChild)
+          .getPropertyValue(propNameChild);
+        return value === expectedChild;
+      });
+    }
+  );
 }
 
 /**