1 files changed, 56 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js b/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
new file mode 100644
index 0000000000..c8a2134135
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that 'no styles' indicator is shown if a page doesn't contain any style
+// sheets.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "nostyle.html";
+
+add_task(async function () {
+  // Make enough room for the "append style sheet" link to not wrap,
+  // as it messes up with EvenEventUtils.synthesizeMouse
+  await pushPref("devtools.styleeditor.navSidebarWidth", 500);
+  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
+  const { panelWindow } = panel;
+
+  ok(
+    !getRootElement(panel).classList.contains("loading"),
+    "style editor root element does not have 'loading' class name anymore"
+  );
+
+  const newButton = panelWindow.document.querySelector(
+    "toolbarbutton.style-editor-newButton"
+  );
+  ok(!newButton.hasAttribute("disabled"), "new style sheet button is enabled");
+
+  const importButton = panelWindow.document.querySelector(
+    ".style-editor-importButton"
+  );
+  ok(!importButton.hasAttribute("disabled"), "import button is enabled");
+
+  const emptyPlaceHolderEl =
+    getRootElement(panel).querySelector(".empty.placeholder");
+  isnot(
+    emptyPlaceHolderEl.ownerGlobal.getComputedStyle(emptyPlaceHolderEl).display,
+    "none",
+    "showing 'no style' indicator"
+  );
+
+  info(
+    "Check that clicking on the append new stylesheet link do add a stylesheet"
+  );
+  const onEditorAdded = ui.once("editor-added");
+  const newLink = emptyPlaceHolderEl.querySelector("a.style-editor-newButton");
+
+  // Use synthesizeMouse to also check that the element is visible
+  EventUtils.synthesizeMouseAtCenter(newLink, {}, newLink.ownerGlobal);
+  await onEditorAdded;
+
+  ok(true, "A stylesheet was added");
+  is(
+    emptyPlaceHolderEl.ownerGlobal.getComputedStyle(emptyPlaceHolderEl).display,
+    "none",
+    "The empty placeholder element is now hidden"
+  );
+});