1 files changed, 82 insertions, 0 deletions
diff --git a/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_ruleview_stylesheet.js b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_ruleview_stylesheet.js
new file mode 100644
index 0000000000..60f30b44b4
--- /dev/null
+++ b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_ruleview_stylesheet.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// There are shutdown issues for which multiple rejections are left uncaught.
+// See bug 1018184 for resolving these issues.
+const { PromiseTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PromiseTestUtils.sys.mjs"
+);
+PromiseTestUtils.allowMatchingRejectionsGlobally(/File closed/);
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
+  this
+);
+
+// On debug test machine, it takes about 50s to run the test.
+requestLongerTimeout(4);
+
+// Check that CSS rules are displayed with the proper source label in the
+// browser toolbox.
+add_task(async function () {
+  // Forces the Browser Toolbox to open on the inspector by default
+  await pushPref("devtools.browsertoolbox.panel", "inspector");
+  // Enable Multiprocess Browser Toolbox
+  await pushPref("devtools.browsertoolbox.scope", "everything");
+
+  const ToolboxTask = await initBrowserToolboxTask();
+  await ToolboxTask.importFunctions({
+    getNodeFront,
+    getNodeFrontInFrames,
+    getRuleViewLinkByIndex,
+    selectNode,
+    // selectNodeInFrames depends on selectNode, getNodeFront, getNodeFrontInFrames.
+    selectNodeInFrames,
+    waitUntil,
+  });
+
+  // This is a simple test page, which contains a <div> with a CSS rule `color: red`
+  // coming from a dedicated stylesheet.
+  const tab = await addTab(
+    `https://example.com/browser/devtools/client/framework/browser-toolbox/test/doc_browser_toolbox_ruleview_stylesheet.html`
+  );
+
+  // Set a custom attribute on the tab's browser, in order to easily select it in the markup view
+  tab.linkedBrowser.setAttribute("test-tab", "true");
+
+  info(
+    "Get the source label for a rule displayed in the Browser Toolbox ruleview"
+  );
+  const sourceLabel = await ToolboxTask.spawn(null, async () => {
+    /* global gToolbox */
+    const inspector = gToolbox.getPanel("inspector");
+
+    info("Select the rule view");
+    const onSidebarSelect = inspector.sidebar.once("select");
+    inspector.sidebar.select("ruleview");
+    await onSidebarSelect;
+
+    info("Select a DIV element in the test page");
+    await selectNodeInFrames(
+      ['browser[remote="true"][test-tab]', "div"],
+      inspector
+    );
+
+    info("Retrieve the sourceLabel for the rule at index 1");
+    const ruleView = inspector.getPanel("ruleview").view;
+    await waitUntil(() => getRuleViewLinkByIndex(ruleView, 1));
+    const sourceLabelEl = getRuleViewLinkByIndex(ruleView, 1).querySelector(
+      ".ruleview-rule-source-label"
+    );
+
+    return sourceLabelEl.textContent;
+  });
+
+  is(
+    sourceLabel,
+    "style_browser_toolbox_ruleview_stylesheet.css:1",
+    "source label has the expected value in the ruleview"
+  );
+
+  await ToolboxTask.destroy();
+});