1 files changed, 160 insertions, 0 deletions
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
new file mode 100644
index 0000000000..69042cc747
--- /dev/null
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* Tests both Copy URL and Copy Data URL context menu items */
+
+const TEST_DATA_URI =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
+
+// Invalid URL still needs to be reachable otherwise getImageDataUrl will
+// timeout.  DevTools chrome:// URLs aren't content accessible, so use some
+// random resource:// URL here.
+const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
+const ERROR_MESSAGE = STYLE_INSPECTOR_L10N.getStr(
+  "styleinspector.copyImageDataUrlError"
+);
+
+add_task(async function () {
+  const TEST_URI = `<style type="text/css">
+      .valid-background {
+        background-image: url(${TEST_DATA_URI});
+      }
+      .invalid-background {
+        background-image: url(${INVALID_IMAGE_URI});
+      }
+    </style>
+    <div class="valid-background">Valid background image</div>
+    <div class="invalid-background">Invalid background image</div>`;
+
+  await addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
+
+  await startTest();
+});
+
+async function startTest() {
+  info("Opening rule view");
+  let { inspector, view } = await openRuleView();
+
+  info("Test valid background image URL in rule view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+
+  info("Test invalid background image URL in rue view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".invalid-background",
+    ERROR_MESSAGE
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".invalid-background",
+    INVALID_IMAGE_URI
+  );
+
+  info("Opening computed view");
+  view = selectComputedView(inspector);
+
+  info("Test valid background image URL in computed view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".valid-background",
+    TEST_DATA_URI
+  );
+
+  info("Test invalid background image URL in computed view");
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "data-uri",
+    ".invalid-background",
+    ERROR_MESSAGE
+  );
+  await testCopyUrlToClipboard(
+    { view, inspector },
+    "url",
+    ".invalid-background",
+    INVALID_IMAGE_URI
+  );
+}
+
+async function testCopyUrlToClipboard(
+  { view, inspector },
+  type,
+  selector,
+  expected
+) {
+  info("Select node in inspector panel");
+  await selectNode(selector, inspector);
+
+  info(
+    "Retrieve background-image link for selected node in current " +
+      "styleinspector view"
+  );
+  const property = await getBackgroundImageProperty(view, selector);
+  const imageLink = property.valueSpan.querySelector(".theme-link");
+  ok(imageLink, "Background-image link element found");
+
+  info("Simulate right click on the background-image URL");
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, imageLink);
+  const menuitemCopyUrl = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyUrl")
+  );
+  const menuitemCopyImageDataUrl = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyImageDataUrl")
+  );
+
+  info("Context menu is displayed");
+  ok(menuitemCopyUrl.visible, '"Copy URL" menu entry is displayed');
+  ok(
+    menuitemCopyImageDataUrl.visible,
+    '"Copy Image Data-URL" menu entry is displayed'
+  );
+
+  if (type == "data-uri") {
+    info("Click Copy Data URI and wait for clipboard");
+    await waitForClipboardPromise(() => {
+      return menuitemCopyImageDataUrl.click();
+    }, expected);
+  } else {
+    info("Click Copy URL and wait for clipboard");
+    await waitForClipboardPromise(() => {
+      return menuitemCopyUrl.click();
+    }, expected);
+  }
+
+  info("Hide context menu");
+}
+
+async function getBackgroundImageProperty(view, selector) {
+  const isRuleView = view instanceof CssRuleView;
+  if (isRuleView) {
+    return getRuleViewProperty(view, selector, "background-image", {
+      wait: true,
+    });
+  }
+  return getComputedViewProperty(view, "background-image");
+}