tor-browser

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

browser_eyedropper_update.js (2784B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Test that the eyedropper's underlying screenshot is updated
      6 // after switchig to RDM and resizing the viewport. See Bug 1295057.
      7 
      8 const TEST_URL =
      9  "data:text/html;charset=utf-8," +
     10  `
     11  <head>
     12    <meta name='viewport' content='width=device-width' />
     13    <style>
     14      div {
     15        width: 200px;
     16        height: 100px;
     17        position: absolute;
     18      }
     19    </style>
     20  </head>
     21  <body>
     22    <div style='right: 200px; background-color: green;'></div>
     23    <div style='right: 0px; background-color: blue;'></div>
     24  </body>
     25  `;
     26 
     27 add_task(async function () {
     28  info(
     29    "Test that the eyedropper works after switching to RDM and resizing the viewport."
     30  );
     31 
     32  const { inspector, highlighterTestFront } =
     33    await openInspectorForURL(TEST_URL);
     34 
     35  await openEyeDropper(inspector, highlighterTestFront);
     36  await moveMouse(50, 50);
     37  await waitForEyedropperColor(highlighterTestFront, "#ffffff");
     38 
     39  info("Switch to RDM");
     40  const { ui } = await openRDM(gBrowser.selectedTab);
     41  await waitForEyedropperColor(highlighterTestFront, "#008000");
     42 
     43  info("Resize the viewport");
     44  await changeViewportWidth(200, ui);
     45  await waitForEyedropperColor(highlighterTestFront, "#0000ff");
     46 
     47  info("Check that the picked color is copied to the clipboard");
     48  ui.getViewportBrowser().focus();
     49  await waitForClipboardPromise(
     50    () => EventUtils.synthesizeKey("KEY_Enter"),
     51    "#0000ff"
     52  );
     53 });
     54 
     55 async function openEyeDropper(inspector, highlighterTestFront) {
     56  info("Opening the eyedropper");
     57  const toggleButton = inspector.panelDoc.querySelector(
     58    "#inspector-eyedropper-toggle"
     59  );
     60  toggleButton.click();
     61  await TestUtils.waitForCondition(() =>
     62    highlighterTestFront.isEyeDropperVisible()
     63  );
     64 }
     65 
     66 async function moveMouse(x, y) {
     67  info(`Moving mouse to (${x}, ${y})`);
     68  await BrowserTestUtils.synthesizeMouse(
     69    "html",
     70    x,
     71    y,
     72    { type: "mousemove", isSynthesized: false },
     73    gBrowser.selectedBrowser
     74  );
     75 }
     76 
     77 async function waitForEyedropperColor(highlighterTestFront, expectedColor) {
     78  await waitFor(async () => {
     79    const color = await highlighterTestFront.getEyeDropperColorValue();
     80    return color === expectedColor;
     81  }, `Wait for the eyedropper color to be ${expectedColor}`);
     82 }
     83 
     84 async function changeViewportWidth(width, ui) {
     85  info(`Changing viewport width to ${width}`);
     86 
     87  const { Simulate } = ui.toolWindow.require(
     88    "resource://devtools/client/shared/vendor/react-dom-test-utils.js"
     89  );
     90 
     91  const widthInput = ui.toolWindow.document.querySelector(
     92    ".text-input.viewport-dimension-input"
     93  );
     94  widthInput.focus();
     95  widthInput.value = width;
     96  Simulate.change(widthInput);
     97  EventUtils.synthesizeKey("KEY_Enter");
     98 }