tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_styleinspector_context-menu-copy-urls.js (4359B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 /* Tests both Copy URL and Copy Data URL context menu items */
      7 
      8 const TEST_DATA_URI =
      9  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
     10 
     11 // Invalid URL still needs to be reachable otherwise getImageDataUrl will
     12 // timeout.  DevTools chrome:// URLs aren't content accessible, so use some
     13 // random resource:// URL here.
     14 const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
     15 const ERROR_MESSAGE = STYLE_INSPECTOR_L10N.getStr(
     16  "styleinspector.copyImageDataUrlError"
     17 );
     18 
     19 add_task(async function () {
     20  const TEST_URI = `<style type="text/css">
     21      .valid-background {
     22        background-image: url(${TEST_DATA_URI});
     23      }
     24      .invalid-background {
     25        background-image: url(${INVALID_IMAGE_URI});
     26      }
     27    </style>
     28    <div class="valid-background">Valid background image</div>
     29    <div class="invalid-background">Invalid background image</div>`;
     30 
     31  await addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
     32 
     33  await startTest();
     34 });
     35 
     36 async function startTest() {
     37  info("Opening rule view");
     38  let { inspector, view } = await openRuleView();
     39 
     40  info("Test valid background image URL in rule view");
     41  await testCopyUrlToClipboard(
     42    { view, inspector },
     43    "data-uri",
     44    ".valid-background",
     45    TEST_DATA_URI
     46  );
     47  await testCopyUrlToClipboard(
     48    { view, inspector },
     49    "url",
     50    ".valid-background",
     51    TEST_DATA_URI
     52  );
     53 
     54  info("Test invalid background image URL in rue view");
     55  await testCopyUrlToClipboard(
     56    { view, inspector },
     57    "data-uri",
     58    ".invalid-background",
     59    ERROR_MESSAGE
     60  );
     61  await testCopyUrlToClipboard(
     62    { view, inspector },
     63    "url",
     64    ".invalid-background",
     65    INVALID_IMAGE_URI
     66  );
     67 
     68  info("Opening computed view");
     69  view = selectComputedView(inspector);
     70 
     71  info("Test valid background image URL in computed view");
     72  await testCopyUrlToClipboard(
     73    { view, inspector },
     74    "data-uri",
     75    ".valid-background",
     76    TEST_DATA_URI
     77  );
     78  await testCopyUrlToClipboard(
     79    { view, inspector },
     80    "url",
     81    ".valid-background",
     82    TEST_DATA_URI
     83  );
     84 
     85  info("Test invalid background image URL in computed view");
     86  await testCopyUrlToClipboard(
     87    { view, inspector },
     88    "data-uri",
     89    ".invalid-background",
     90    ERROR_MESSAGE
     91  );
     92  await testCopyUrlToClipboard(
     93    { view, inspector },
     94    "url",
     95    ".invalid-background",
     96    INVALID_IMAGE_URI
     97  );
     98 }
     99 
    100 async function testCopyUrlToClipboard(
    101  { view, inspector },
    102  type,
    103  selector,
    104  expected
    105 ) {
    106  info("Select node in inspector panel");
    107  await selectNode(selector, inspector);
    108 
    109  info(
    110    "Retrieve background-image link for selected node in current " +
    111      "styleinspector view"
    112  );
    113  const property = await getBackgroundImageProperty(view, selector);
    114  const imageLink = property.valueSpan.querySelector(".theme-link");
    115  ok(imageLink, "Background-image link element found");
    116 
    117  info("Simulate right click on the background-image URL");
    118  const allMenuItems = openStyleContextMenuAndGetAllItems(view, imageLink);
    119  const menuitemCopyUrl = allMenuItems.find(
    120    item =>
    121      item.label ===
    122      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyUrl")
    123  );
    124  const menuitemCopyImageDataUrl = allMenuItems.find(
    125    item =>
    126      item.label ===
    127      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyImageDataUrl")
    128  );
    129 
    130  info("Context menu is displayed");
    131  ok(menuitemCopyUrl.visible, '"Copy URL" menu entry is displayed');
    132  ok(
    133    menuitemCopyImageDataUrl.visible,
    134    '"Copy Image Data-URL" menu entry is displayed'
    135  );
    136 
    137  if (type == "data-uri") {
    138    info("Click Copy Data URI and wait for clipboard");
    139    await waitForClipboardPromise(() => {
    140      return menuitemCopyImageDataUrl.click();
    141    }, expected);
    142  } else {
    143    info("Click Copy URL and wait for clipboard");
    144    await waitForClipboardPromise(() => {
    145      return menuitemCopyUrl.click();
    146    }, expected);
    147  }
    148 
    149  info("Hide context menu");
    150 }
    151 
    152 async function getBackgroundImageProperty(view, selector) {
    153  const isRuleView = view instanceof CssRuleView;
    154  if (isRuleView) {
    155    return getRuleViewProperty(view, selector, "background-image", {
    156      wait: true,
    157    });
    158  }
    159  return getComputedViewProperty(view, "background-image");
    160 }