1 files changed, 105 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js
new file mode 100644
index 0000000000..079dde1d7d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-stylesheet-change.js
@@ -0,0 +1,105 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view refreshes when a stylesheet is added or modified
+
+const TEST_URI = "<h1>Hello DevTools</h1>";
+
+add_task(async function () {
+  // Disable transition so changes made in styleeditor are instantly applied
+  await pushPref("devtools.styleeditor.transitions", false);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  info("Add a stylesheet with matching rule for the h1 node");
+  let onUpdated = inspector.once("rule-view-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const addedStylesheet = content.document.createElement("style");
+    addedStylesheet.textContent = "h1 { background: tomato }";
+    content.document.head.append(addedStylesheet);
+  });
+  await onUpdated;
+  ok(true, "Rules view was refreshed when adding a stylesheet");
+  checkRulesViewSelectors(view, ["element", "h1"]);
+  is(
+    getRuleViewPropertyValue(view, "h1", "background"),
+    "tomato",
+    "Expected value is displayed for the background property"
+  );
+
+  info("Modify the stylesheet added previously");
+  onUpdated = inspector.once("rule-view-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const addedStylesheet = content.document.querySelector("style");
+    addedStylesheet.textContent = "body h1 { background: gold; color: navy; }";
+  });
+  await onUpdated;
+  ok(true, "Rules view was refreshed when updating the stylesheet");
+  checkRulesViewSelectors(view, ["element", "body h1"]);
+  is(
+    getRuleViewPropertyValue(view, "body h1", "background"),
+    "gold",
+    "Expected value is displayed for the background property"
+  );
+  is(
+    getRuleViewPropertyValue(view, "body h1", "color"),
+    "navy",
+    "Expected value is displayed for the color property"
+  );
+
+  info("Add Stylesheet from StyleEditor");
+  const styleEditor = await inspector.toolbox.selectTool("styleeditor");
+  const onEditorAdded = styleEditor.UI.once("editor-added");
+  // create a new style sheet
+  styleEditor.panelWindow.document
+    .querySelector(".style-editor-newButton")
+    .click();
+
+  const editor = await onEditorAdded;
+  await editor.getSourceEditor();
+
+  if (!editor.sourceEditor.hasFocus()) {
+    info("Waiting for stylesheet editor to gain focus");
+    await editor.sourceEditor.once("focus");
+  }
+  ok(editor.sourceEditor.hasFocus(), "new editor has focus");
+
+  const stylesheetText = `:is(h1) { font-size: 36px; }`;
+  await new Promise(resolve => {
+    waitForFocus(function () {
+      for (const c of stylesheetText) {
+        EventUtils.synthesizeKey(c, {}, styleEditor.panelWindow);
+      }
+      resolve();
+    }, styleEditor.panelWindow);
+  });
+
+  info("Select inspector again");
+  await inspector.toolbox.selectTool("inspector");
+  await waitFor(() => getRuleSelectors(view).includes(":is(h1)"));
+  ok(true, "Rules view was refreshed when selecting the inspector");
+  checkRulesViewSelectors(view, ["element", "body h1", ":is(h1)"]);
+  is(
+    getRuleViewPropertyValue(view, ":is(h1)", "font-size"),
+    "36px",
+    "Expected value is displayed for the font-size property"
+  );
+});
+
+function checkRulesViewSelectors(view, expectedSelectors) {
+  Assert.deepEqual(
+    getRuleSelectors(view),
+    expectedSelectors,
+    "Expected selectors are displayed"
+  );
+}
+
+function getRuleSelectors(view) {
+  return Array.from(
+    view.styleDocument.querySelectorAll(".ruleview-selectors-container")
+  ).map(el => el.textContent);
+}