1 files changed, 210 insertions, 0 deletions
diff --git a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
new file mode 100644
index 0000000000..832c1658a5
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
@@ -0,0 +1,210 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the links from the computed view to the style editor.
+
+const STYLESHEET_URL =
+  "data:text/css," + encodeURIComponent(".highlight {color: blue}");
+
+const DOCUMENT_URL =
+  "data:text/html;charset=utf-8," +
+  encodeURIComponent(
+    `<html>
+   <head>
+   <title>Computed view style editor link test</title>
+   <style type="text/css">
+   html { color: #000000; }
+   span { font-variant: small-caps; color: #000000; }
+   .nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
+   font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+   </style>
+   <style>
+   div { color: #f06; }
+   </style>
+   <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
+   <script>
+     const sheet = new CSSStyleSheet();
+     sheet.replaceSync(".highlight { color: tomato; }");
+     document.adoptedStyleSheets.push(sheet);
+   </script>
+   </head>
+   <body>
+   <h1>Some header text</h1>
+   <p id="salutation" style="font-size: 12pt">hi.</p>
+   <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+   solely to provide some things to
+   <span style="color: yellow" class="highlight">
+   highlight</span> and <span style="font-weight: bold">count</span>
+   style list-items in the box at right. If you are reading this,
+   you should go do something else instead. Maybe read a book. Or better
+   yet, write some test-cases for another bit of code.
+   <span style="font-style: italic">some text</span></p>
+   <p id="closing">more text</p>
+   <p>even more text</p>
+   </div>
+   </body>
+   </html>`
+  );
+
+add_task(async function () {
+  await addTab(DOCUMENT_URL);
+  const { toolbox, inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  await testInlineStyle(view);
+  await testFirstInlineStyleSheet(view, toolbox);
+  await testSecondInlineStyleSheet(view, toolbox);
+  await testExternalStyleSheet(view, toolbox);
+  await testConstructedStyleSheet(view, toolbox);
+});
+
+async function testInlineStyle(view) {
+  info("Testing inline style");
+
+  await expandComputedViewPropertyByIndex(view, 0);
+
+  const onTab = waitForTab();
+  info("Clicking on the first rule-link in the computed-view");
+  checkComputedViewLink(view, {
+    index: 0,
+    expectedText: "element",
+    expectedTitle: "element",
+  });
+
+  const tab = await onTab;
+
+  const tabURI = tab.linkedBrowser.documentURI.spec;
+  ok(tabURI.startsWith("view-source:"), "View source tab is open");
+  info("Closing tab");
+  gBrowser.removeTab(tab);
+}
+
+async function testFirstInlineStyleSheet(view, toolbox) {
+  info("Testing inline stylesheet");
+
+  info("Listening for toolbox switch to the styleeditor");
+  const onSwitch = waitForStyleEditor(toolbox);
+
+  info("Clicking an inline stylesheet");
+  checkComputedViewLink(view, {
+    index: 3,
+    expectedText: "inline:3",
+    expectedTitle: "inline:3",
+  });
+  const editor = await onSwitch;
+
+  ok(true, "Switched to the style-editor panel in the toolbox");
+
+  await validateStyleEditorSheet(editor, 0);
+}
+
+async function testSecondInlineStyleSheet(view, toolbox) {
+  info("Testing second inline stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on second inline stylesheet link");
+  checkComputedViewLink(view, {
+    index: 5,
+    expectedText: "inline:2",
+    expectedTitle: "inline:2",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 1);
+}
+
+async function testExternalStyleSheet(view, toolbox) {
+  info("Testing external stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an external stylesheet link");
+  checkComputedViewLink(view, {
+    index: 2,
+    expectedText: `${STYLESHEET_URL.replace("data:text/css,", "")}:1`,
+    expectedTitle: `${STYLESHEET_URL}:1`,
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 2);
+}
+
+async function testConstructedStyleSheet(view, toolbox) {
+  info("Testing constructed stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an constructed stylesheet link");
+
+  checkComputedViewLink(view, {
+    index: 1,
+    expectedText: "constructed",
+    expectedTitle: "constructed",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  ok(editor.styleSheet.constructed, "The constructed stylesheet is selected");
+}
+
+async function validateStyleEditorSheet(editor, expectedSheetIndex) {
+  info("Validating style editor stylesheet");
+  const expectedHref = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [expectedSheetIndex],
+    _expectedSheetIndex =>
+      content.document.styleSheets[_expectedSheetIndex].href
+  );
+  is(
+    editor.styleSheet.href,
+    expectedHref,
+    "loaded stylesheet matches document stylesheet"
+  );
+}
+
+function checkComputedViewLink(view, { index, expectedText, expectedTitle }) {
+  const link = getComputedViewLinkByIndex(view, index);
+  is(link.innerText, expectedText, `Link #${index} has expected label`);
+  is(
+    link.getAttribute("title"),
+    expectedTitle,
+    `Link #${index} has expected title attribute`
+  );
+  link.scrollIntoView();
+  link.click();
+}