1 files changed, 173 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/head.js b/devtools/client/styleeditor/test/head.js
new file mode 100644
index 0000000000..ec1abacc31
--- /dev/null
+++ b/devtools/client/styleeditor/test/head.js
@@ -0,0 +1,173 @@
+/* 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";
+
+/* import-globals-from ../../inspector/shared/test/head.js */
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js",
+  this
+);
+
+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";
+
+/**
+ * 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).
+ * @return a promise that resolves to the tab object when the url is loaded
+ */
+var addTab = function(url, win) {
+  info("Adding a new tab with URL: '" + url + "'");
+
+  return new Promise(resolve => {
+    const targetWindow = win || window;
+    const targetBrowser = targetWindow.gBrowser;
+
+    const tab = (targetBrowser.selectedTab = BrowserTestUtils.addTab(
+      targetBrowser,
+      url
+    ));
+    BrowserTestUtils.browserLoaded(targetBrowser.selectedBrowser).then(
+      function() {
+        info("URL '" + url + "' loading complete");
+        resolve(tab);
+      }
+    );
+  });
+};
+
+var navigateToAndWaitForStyleSheets = async function(url, ui, editorCount) {
+  const onClear = ui.once("stylesheets-clear");
+  await navigateTo(url);
+  await onClear;
+  await waitUntil(() => ui.editors.length === editorCount);
+};
+
+var reloadPageAndWaitForStyleSheets = async function(ui, editorCount) {
+  info("Reloading the page.");
+
+  const onClear = ui.once("stylesheets-clear");
+  const browser = gBrowser.selectedBrowser;
+  await SpecialPowers.spawn(browser, [], () => content.location.reload());
+  await onClear;
+
+  await waitUntil(() => ui.editors.length === editorCount);
+};
+
+/**
+ * Open the style editor for the current tab.
+ */
+var openStyleEditor = async function(tab) {
+  if (!tab) {
+    tab = gBrowser.selectedTab;
+  }
+  const target = await TargetFactory.forTab(tab);
+  const toolbox = await gDevTools.showToolbox(target, "styleeditor");
+  const panel = toolbox.getPanel("styleeditor");
+  const ui = panel.UI;
+
+  // The stylesheet list appears with an animation. Let this animation finish.
+  const animations = ui._root.getAnimations({ subtree: true });
+  await Promise.all(animations.map(a => a.finished));
+
+  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 = async function(url, win) {
+  const tab = await addTab(url, win);
+  const result = await openStyleEditor(tab);
+  result.tab = tab;
+  return result;
+};
+
+/**
+ * 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.
+ */
+var getComputedStyleProperty = async function(args) {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [args], function({
+    selector,
+    pseudo,
+    name,
+  }) {
+    const element = content.document.querySelector(selector);
+    const style = content.getComputedStyle(element, pseudo);
+    return style.getPropertyValue(name);
+  });
+};
+
+/**
+ * Wait for "media-list-changed" events to settle on StyleEditorUI.
+ * Returns a promise that resolves the number of events caught while waiting.
+ *
+ * @param {StyleEditorUI} ui
+ *        Current StyleEditorUI on which media-list-changed events should be fired.
+ * @param {Number} delay
+ */
+function waitForManyEvents(ui, delay) {
+  return new Promise(resolve => {
+    let timer;
+    let count = 0;
+    const onEvent = () => {
+      count++;
+      clearTimeout(timer);
+
+      // Wait for some time to catch subsequent events.
+      timer = setTimeout(() => {
+        // Remove the listener and resolve.
+        ui.off("media-list-changed", onEvent);
+        resolve(count);
+      }, delay);
+    };
+    ui.on("media-list-changed", onEvent);
+  });
+}
+
+/**
+ * Creates a new style sheet in the Style Editor
+
+ * @param {StyleEditorUI} ui
+ *        Current StyleEditorUI on which to simulate pressing the + button.
+ * @param {Window} panelWindow
+ *        The panelWindow property of the current Style Editor panel.
+ */
+function createNewStyleSheet(ui, panelWindow) {
+  info("Creating a new stylesheet now");
+
+  return new Promise(resolve => {
+    ui.once("editor-added", editor => {
+      editor.getSourceEditor().then(resolve);
+    });
+
+    waitForFocus(function() {
+      // create a new style sheet
+      const newButton = panelWindow.document.querySelector(
+        ".style-editor-newButton"
+      );
+      ok(newButton, "'new' button exists");
+
+      EventUtils.synthesizeMouseAtCenter(newButton, {}, panelWindow);
+    }, panelWindow);
+  });
+}