Bug 1253935 - Remove all CPOW usages in styleeditor tests and use ContentTask instead of custom frame-script; r=ochameau draft
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 30 Mar 2016 17:54:05 +0200
changeset 345930 db7ca002209b9258cb8ae1bc4e6d2e4d61354001
parent 345849 a8cb004e06e7c61c6ca3676e2c0d33773882e702
child 517285 bb33c25712d03ec8bc95cb3dda88ed3979369c0c
push id14194
push userpbrosset@mozilla.com
push dateWed, 30 Mar 2016 15:56:34 +0000
reviewersochameau
bugs1253935
milestone48.0a1
Bug 1253935 - Remove all CPOW usages in styleeditor tests and use ContentTask instead of custom frame-script; r=ochameau MozReview-Commit-ID: 2EeHvPZRf3H
devtools/client/styleeditor/test/browser.ini
devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js
devtools/client/styleeditor/test/browser_styleeditor_navigate.js
devtools/client/styleeditor/test/browser_styleeditor_new.js
devtools/client/styleeditor/test/browser_styleeditor_reload.js
devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
devtools/client/styleeditor/test/browser_styleeditor_sync.js
devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
devtools/client/styleeditor/test/doc_frame_script.js
devtools/client/styleeditor/test/head.js
--- a/devtools/client/styleeditor/test/browser.ini
+++ b/devtools/client/styleeditor/test/browser.ini
@@ -39,32 +39,30 @@ support-files =
   sourcemap-sass/sourcemaps.scss
   sourcemap-sass/media-rules.scss
   sourcemap-styl/test-stylus.styl
   sourcemaps.html
   sourcemaps-large.html
   sourcemaps-watching.html
   test_private.css
   test_private.html
-  doc_frame_script.js
   doc_long.css
   doc_uncached.css
   doc_uncached.html
   doc_xulpage.xul
   sync.html
 
 [browser_styleeditor_autocomplete.js]
 [browser_styleeditor_autocomplete-disabled.js]
 [browser_styleeditor_bug_740541_iframes.js]
 [browser_styleeditor_bug_851132_middle_click.js]
 [browser_styleeditor_bug_870339.js]
 [browser_styleeditor_cmd_edit.js]
 [browser_styleeditor_enabled.js]
 [browser_styleeditor_fetch-from-cache.js]
-skip-if = e10s && debug # Bug 1253935
 [browser_styleeditor_filesave.js]
 [browser_styleeditor_highlight-selector.js]
 [browser_styleeditor_import.js]
 [browser_styleeditor_import_rule.js]
 [browser_styleeditor_init.js]
 [browser_styleeditor_inline_friendly_names.js]
 [browser_styleeditor_loading.js]
 [browser_styleeditor_media_sidebar.js]
--- a/devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js
@@ -5,27 +5,26 @@
 
 // Test that inline style sheets get correct names if they are saved to disk and
 // that those names survice a reload but not navigation to another page.
 
 const FIRST_TEST_PAGE = TEST_BASE_HTTP + "inline-1.html";
 const SECOND_TEST_PAGE = TEST_BASE_HTTP + "inline-2.html";
 const SAVE_PATH = "test.css";
 
-add_task(function* () {
+add_task(function*() {
   let { ui } = yield openStyleEditorForURL(FIRST_TEST_PAGE);
 
-  loadCommonFrameScript();
   testIndentifierGeneration(ui);
 
   yield saveFirstInlineStyleSheet(ui);
   yield testFriendlyNamesAfterSave(ui);
-  yield reloadPage(ui);
+  yield reloadPageAndWaitForStyleSheets(ui);
   yield testFriendlyNamesAfterSave(ui);
-  yield navigateToAnotherPage(ui);
+  yield navigateToAndWaitForStyleSheets(SECOND_TEST_PAGE, ui);
   yield testFriendlyNamesAfterNavigation(ui);
 });
 
 function testIndentifierGeneration(ui) {
   let fakeStyleSheetFile = {
     "href": "http://example.com/test.css",
     "nodeHref": "http://example.com/",
     "styleSheetIndex": 1
@@ -69,31 +68,16 @@ function testFriendlyNamesAfterSave(ui) 
   is(firstEditor.friendlyName, SAVE_PATH,
     "Friendly name is correct for the saved inline style sheet.");
   isnot(secondEditor.friendlyName, SAVE_PATH,
     "Friendly name for the second inline sheet isn't the same as the first.");
 
   return promise.resolve(null);
 }
 
-function reloadPage(ui) {
-  info("Reloading page.");
-  executeInContent("devtools:test:reload", {}, {},
-    /* no response */
-    false);
-  return ui.once("stylesheets-reset");
-}
-
-function navigateToAnotherPage(ui) {
-  info("Navigating to another page.");
-  executeInContent("devtools:test:navigate", { location: SECOND_TEST_PAGE },
-    {}, false);
-  return ui.once("stylesheets-reset");
-}
-
 function testFriendlyNamesAfterNavigation(ui) {
   let firstEditor = ui.editors[0];
   let secondEditor = ui.editors[1];
 
   // Inline style sheets shouldn't have the name of previously saved file as the
   // page is different.
   isnot(firstEditor.friendlyName, SAVE_PATH,
     "The first editor doesn't have the save path as a friendly name.");
--- a/devtools/client/styleeditor/test/browser_styleeditor_navigate.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_navigate.js
@@ -8,28 +8,23 @@
 const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
 const NEW_URI = TEST_BASE_HTTPS + "media.html";
 
 const LINE_NO = 5;
 const COL_NO = 3;
 
 add_task(function* () {
   let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
-  loadCommonFrameScript();
 
   is(ui.editors.length, 2, "Two sheets present after load.");
 
   info("Selecting the second editor");
   yield ui.selectStyleSheet(ui.editors[1].styleSheet, LINE_NO, COL_NO);
 
-  info("Navigating to another page.");
-  executeInContent("devtools:test:navigate", { location: NEW_URI }, {}, false);
-
-  info("Waiting for sheets to be loaded after navigation.");
-  yield ui.once("stylesheets-reset");
+  yield navigateToAndWaitForStyleSheets(NEW_URI, ui);
 
   info("Waiting for source editor to be ready.");
   yield ui.editors[0].getSourceEditor();
 
   is(ui.selectedEditor, ui.editors[0], "first editor is selected");
 
   let {line, ch} = ui.selectedEditor.sourceEditor.getCursor();
   is(line, 0, "first line is selected");
--- a/devtools/client/styleeditor/test/browser_styleeditor_new.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_new.js
@@ -69,17 +69,20 @@ function* testInitialState(editor) {
   ok(editor.isNew, "new editor has isNew flag");
 
   ok(editor.sourceEditor.hasFocus(), "new editor has focus");
 
   summary = editor.summary;
   let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
   is(parseInt(ruleCount, 10), 0, "new editor initially shows 0 rules");
 
-  let color = yield getComputedStyleProperty("body", null, "background-color");
+  let color = yield getComputedStyleProperty({
+    selector: "body",
+    name: "background-color"
+  });
   is(color, "rgb(255, 255, 255)",
      "content's background color is initially white");
 }
 
 function typeInEditor(editor, panelWindow) {
   let deferred = promise.defer();
 
   waitForFocus(function() {
--- a/devtools/client/styleeditor/test/browser_styleeditor_reload.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_reload.js
@@ -7,28 +7,23 @@
 
 const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
 
 const LINE_NO = 5;
 const COL_NO = 3;
 
 add_task(function* () {
   let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
-  loadCommonFrameScript();
 
   is(ui.editors.length, 2, "Two sheets present after load.");
 
   info("Selecting the second editor");
   yield ui.selectStyleSheet(ui.editors[1].styleSheet, LINE_NO, COL_NO);
 
-  info("Reloading page.");
-  executeInContent("devtools:test:reload", {}, {}, false);
-
-  info("Waiting for sheets to be loaded after reload.");
-  yield ui.once("stylesheets-reset");
+  yield reloadPageAndWaitForStyleSheets(ui);
 
   is(ui.editors.length, 2, "Two sheets present after reload.");
 
   info("Waiting for source editor to be ready.");
   yield ui.editors[1].getSourceEditor();
 
   is(ui.selectedEditor, ui.editors[1],
     "second editor is selected after reload");
--- a/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
@@ -48,17 +48,17 @@ add_task(function*() {
 
   is(getStylesheetNameFor(editor), TESTCASE_SCSS_NAME, "found scss editor");
 
   let link = getLinkFor(editor);
   link.click();
 
   yield editor.getSourceEditor();
 
-  let color = yield getComputedStyleProperty("div", null, "color");
+  let color = yield getComputedStyleProperty({selector: "div", name: "color"});
   is(color, "rgb(255, 0, 102)", "div is red before saving file");
 
   // let styleApplied = promise.defer();
   let styleApplied = editor.once("style-applied");
 
   yield pauseForTimeChange();
 
   // Edit and save Sass in the editor. This will start off a file-watching
@@ -68,17 +68,17 @@ add_task(function*() {
   // We can't run Sass or another compiler, so we fake it by just
   // directly changing the CSS file.
   yield editCSSFile(CSSFile);
 
   info("wrote to CSS file, waiting for style-applied event");
 
   yield styleApplied;
 
-  color = yield getComputedStyleProperty("div", null, "color");
+  color = yield getComputedStyleProperty({selector: "div", name: "color"});
   is(color, "rgb(0, 0, 255)", "div is blue after saving file");
 });
 
 function editSCSS(editor) {
   let deferred = promise.defer();
 
   editor.sourceEditor.setText(CSS_TEXT);
 
--- a/devtools/client/styleeditor/test/browser_styleeditor_sync.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sync.js
@@ -61,11 +61,15 @@ add_task(function*() {
   // available.
   ui = yield closeAndReopenToolbox();
   editor = yield ui.editors[0].getSourceEditor();
   text = editor.sourceEditor.getText();
   is(text, expectedText, "changes remain after close and reopen");
 
   // For the time being, the actor does not update the style's owning
   // node's textContent.  See bug 1205380.
-  let textContent = yield executeInContent("Test:GetStyleContent", null, null);
+  let textContent = yield ContentTask.spawn(gBrowser.selectedBrowser, null,
+    function*() {
+      return content.document.querySelector("style").textContent;
+    });
+
   isnot(textContent, expectedText, "changes not written back to style node");
 });
--- a/devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
@@ -19,18 +19,20 @@ add_task(function*() {
   // Set text twice in a row
   let styleChanges = listenForStyleChange(editor.styleSheet);
 
   editor.sourceEditor.setText(NEW_RULE);
   editor.sourceEditor.setText(NEW_RULE + " ");
 
   yield styleChanges;
 
-  let rules = yield executeInContent("Test:cssRules", {
-    num: 0
+  let rules = yield ContentTask.spawn(gBrowser.selectedBrowser, 0,
+  function*(index) {
+    let sheet = content.document.styleSheets[index];
+    return [...sheet.cssRules].map(rule => rule.cssText);
   });
 
   // Test that we removed the transition rule, but kept the rule we added
   is(rules.length, 1, "only one rule in stylesheet");
   is(rules[0], NEW_RULE, "stylesheet only contains rule we added");
 });
 
 /* Helpers */
deleted file mode 100644
--- a/devtools/client/styleeditor/test/doc_frame_script.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-/* globals addMessageListener, sendAsyncMessage */
-
-addMessageListener("Test:cssRules", function(msg) {
-  let {num} = msg.data;
-  let sheet = content.document.styleSheets[num];
-  let result = [];
-  for (let i = 0; i < sheet.cssRules.length; ++i) {
-    result.push(sheet.cssRules[i].cssText);
-  }
-  sendAsyncMessage("Test:cssRules", result);
-});
-
-/**
- * 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) {
-  let {selector, pseudo, name} = msg.data;
-  let element = content.document.querySelector(selector);
-  let style = content.document.defaultView.getComputedStyle(element, pseudo);
-  let value = style.getPropertyValue(name);
-  sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
-});
-
-addMessageListener("Test:GetStyleContent", function() {
-  sendAsyncMessage("Test:GetStyleContent",
-                   content.document.querySelector("style").textContent);
-});
--- a/devtools/client/styleeditor/test/head.js
+++ b/devtools/client/styleeditor/test/head.js
@@ -1,42 +1,35 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /* All top-level definitions here are exports.  */
 /* eslint no-unused-vars: [2, {"vars": "local"}] */
 
 "use strict";
 
-const FRAME_SCRIPT_UTILS_URL =
-      "chrome://devtools/content/shared/frame-script-utils.js";
-const TEST_BASE =
-      "chrome://mochitests/content/browser/devtools/client/styleeditor/test/";
-const TEST_BASE_HTTP =
-      "http://example.com/browser/devtools/client/styleeditor/test/";
-const TEST_BASE_HTTPS =
-      "https://example.com/browser/devtools/client/styleeditor/test/";
+const TEST_BASE = "chrome://mochitests/content/browser/devtools/client/styleeditor/test/";
+const TEST_BASE_HTTP = "http://example.com/browser/devtools/client/styleeditor/test/";
+const TEST_BASE_HTTPS = "https://example.com/browser/devtools/client/styleeditor/test/";
 const TEST_HOST = "mochi.test:8888";
 
-const EDITOR_FRAME_SCRIPT = getRootDirectory(gTestPath) + "doc_frame_script.js";
-
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 var {TargetFactory} = require("devtools/client/framework/target");
 var promise = require("promise");
 var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 
 DevToolsUtils.testing = true;
 SimpleTest.registerCleanupFunction(() => {
   DevToolsUtils.testing = false;
 });
 
 /**
  * Add a new test tab in the browser and load the given url.
  * @param {String} url The url to be loaded in the new tab
- * @param {Window} win The window to add the tab to (default: current window).
+ * @param {Window} win The window to add the tab to (default: current window).
  * @return a promise that resolves to the tab object when the url is loaded
  */
 function addTab(url, win) {
   info("Adding a new tab with URL: '" + url + "'");
   let def = promise.defer();
 
   let targetWindow = win || window;
   let targetBrowser = targetWindow.gBrowser;
@@ -51,34 +44,54 @@ function addTab(url, win) {
   return def.promise;
 }
 
 /**
  * Navigate the currently selected tab to a new URL and wait for it to load.
  * @param {String} url The url to be loaded in the current tab.
  * @return a promise that resolves when the page has fully loaded.
  */
-function navigateTo(url) {
+var navigateTo = Task.async(function*(url) {
+  info(`Navigating to ${url}`);
+  let browser = gBrowser.selectedBrowser;
+
   let navigating = promise.defer();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
+  browser.addEventListener("load", function onload() {
+    browser.removeEventListener("load", onload, true);
     navigating.resolve();
   }, true);
-  content.location = url;
-  return navigating.promise;
-}
+
+  browser.loadURI(url);
+
+  yield navigating.promise;
+});
 
-function* cleanup() {
+var navigateToAndWaitForStyleSheets = Task.async(function*(url, ui) {
+  let onReset = ui.once("stylesheets-reset");
+  yield navigateTo(url);
+  yield onReset;
+});
+
+var reloadPageAndWaitForStyleSheets = Task.async(function*(ui) {
+  info("Reloading the page.");
+
+  let onReset = ui.once("stylesheets-reset");
+  let browser = gBrowser.selectedBrowser;
+  yield ContentTask.spawn(browser, null, "() => content.location.reload()");
+  yield onReset;
+});
+
+registerCleanupFunction(function*() {
   while (gBrowser.tabs.length > 1) {
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     yield gDevTools.closeToolbox(target);
 
     gBrowser.removeCurrentTab();
   }
-}
+});
 
 /**
  * Open the style editor for the current tab.
  */
 var openStyleEditor = Task.async(function*(tab) {
   if (!tab) {
     tab = gBrowser.selectedTab;
   }
@@ -89,98 +102,35 @@ var openStyleEditor = Task.async(functio
 
   return { toolbox, panel, ui };
 });
 
 /**
  * Creates a new tab in specified window navigates it to the given URL and
  * opens style editor in it.
  */
-var openStyleEditorForURL = Task.async(function* (url, win) {
+var openStyleEditorForURL = Task.async(function*(url, win) {
   let tab = yield addTab(url, win);
-
-  gBrowser.selectedBrowser.messageManager.loadFrameScript(EDITOR_FRAME_SCRIPT,
-                                                          false);
-
   let result = yield openStyleEditor(tab);
   result.tab = tab;
   return result;
 });
 
 /**
- * Loads shared/frame-script-utils.js in the specified tab.
- *
- * @param tab
- *        Optional tab to load the frame script in. Defaults to the current tab.
- */
-function loadCommonFrameScript(tab) {
-  let browser = tab ? tab.linkedBrowser : gBrowser.selectedBrowser;
-
-  browser.messageManager.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
-}
-
-/**
- * Send an async message to the frame script (chrome -> content) and wait for a
- * response message with the same name (content -> chrome).
- *
- * @param String name
- *        The message name. Should be one of the messages defined
- *        shared/frame-script-utils.js
- * @param Object data
- *        Optional data to send along
- * @param Object objects
- *        Optional CPOW objects to send along
- * @param Boolean expectResponse
- *        If set to false, don't wait for a response with the same name from the
- *        content script. Defaults to true.
- *
- * @return Promise
- *         Resolves to the response data if a response is expected, immediately
- *         resolves otherwise
- */
-function executeInContent(name, data = {}, objects = {},
-                          expectResponse = true) {
-  let mm = gBrowser.selectedBrowser.messageManager;
-
-  mm.sendAsyncMessage(name, data, objects);
-  if (expectResponse) {
-    return waitForContentMessage(name);
-  }
-  return promise.resolve();
-}
-
-/**
- * Wait for a content -> chrome message on the message manager (the window
- * messagemanager is used).
- * @param {String} name The message name
- * @return {Promise} A promise that resolves to the response data when the
- * message has been received
- */
-function waitForContentMessage(name) {
-  let mm = gBrowser.selectedBrowser.messageManager;
-
-  let def = promise.defer();
-  mm.addMessageListener(name, function onMessage(msg) {
-    mm.removeMessageListener(name, onMessage);
-    def.resolve(msg.data);
-  });
-  return def.promise;
-}
-
-registerCleanupFunction(cleanup);
-
-/**
  * Send an async message to the frame script and get back the requested
  * computed style property.
  *
  * @param {String} selector
  *        The selector used to obtain the element.
  * @param {String} pseudo
  *        pseudo id to query, or null.
  * @param {String} name
  *        name of the property.
  */
-function* getComputedStyleProperty(selector, pseudo, propName) {
-  return yield executeInContent("Test:GetComputedStylePropertyValue",
-                                {selector,
-                                pseudo,
-                                name: propName});
+function* getComputedStyleProperty(args) {
+  return yield ContentTask.spawn(gBrowser.selectedBrowser, args,
+    function({selector, pseudo, name}) {
+      let element = content.document.querySelector(selector);
+      let style = content.getComputedStyle(element, pseudo);
+      return style.getPropertyValue(name);
+    }
+  );
 }