tor-browser

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

browser_rules_eyedropper.js (4392B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Test opening the eyedropper from the color picker. Pressing escape to close it, and
      6 // clicking the page to select a color.
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10    body {
     11      background-color: white;
     12      padding: 0px
     13    }
     14 
     15    #div1 {
     16      background-color: #ff5;
     17      width: 20px;
     18      height: 20px;
     19    }
     20 
     21    #div2 {
     22      margin-left: 20px;
     23      width: 20px;
     24      height: 20px;
     25      background-color: #f09;
     26    }
     27  </style>
     28  <body><div id="div1"></div><div id="div2"></div></body>
     29 `;
     30 
     31 // #f09
     32 const ORIGINAL_COLOR = "rgb(255, 0, 153)";
     33 // #ff5
     34 const EXPECTED_COLOR = "rgb(255, 255, 85)";
     35 
     36 add_task(async function () {
     37  info("Add the test tab, open the rule-view and select the test node");
     38 
     39  const url = "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI);
     40  await addTab(url);
     41 
     42  const { inspector, view, toolbox } = await openRuleView();
     43 
     44  await runTest(inspector, view, false);
     45 
     46  info("Reload the page to restore the initial state");
     47  await navigateTo(url);
     48 
     49  info("Change toolbox host to WINDOW");
     50  await toolbox.switchHost("window");
     51 
     52  // Switching hosts is not correctly waiting when DevTools run in content frame
     53  // See Bug 1571421.
     54  await wait(1000);
     55 
     56  await runTest(inspector, view, true);
     57 });
     58 
     59 async function runTest(inspector, view, isWindowHost) {
     60  await selectNode("#div2", inspector);
     61 
     62  info("Get the background-color property from the rule-view");
     63  const property = getRuleViewProperty(view, "#div2", "background-color");
     64  const swatch = property.valueSpan.querySelector(".inspector-colorswatch");
     65  ok(swatch, "Color swatch is displayed for the bg-color property");
     66 
     67  info("Open the eyedropper from the colorpicker tooltip");
     68  await openEyedropper(view, swatch);
     69 
     70  const tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
     71  ok(
     72    !tooltip.isVisible(),
     73    "color picker tooltip is closed after opening eyedropper"
     74  );
     75 
     76  info("Test that pressing escape dismisses the eyedropper");
     77  await testESC(swatch, inspector);
     78 
     79  if (isWindowHost) {
     80    // The following code is only needed on linux otherwise the test seems to
     81    // timeout when clicking again on the swatch. Both the focus and the wait
     82    // seem needed to make it pass.
     83    // To be fixed in Bug 1571421.
     84    info("Ensure the swatch window is focused");
     85    const onWindowFocus = BrowserTestUtils.waitForEvent(
     86      swatch.ownerGlobal,
     87      "focus"
     88    );
     89    swatch.ownerGlobal.focus();
     90    await onWindowFocus;
     91  }
     92 
     93  info("Open the eyedropper again");
     94  await openEyedropper(view, swatch);
     95 
     96  info("Test that a color can be selected with the eyedropper");
     97  await testSelect(view, swatch, inspector);
     98 
     99  const onHidden = tooltip.once("hidden");
    100  tooltip.hide();
    101  await onHidden;
    102  ok(!tooltip.isVisible(), "color picker tooltip is closed");
    103 
    104  await waitForTick();
    105 }
    106 
    107 async function testESC(swatch, inspector) {
    108  info("Press escape");
    109  const onCanceled = new Promise(resolve => {
    110    inspector.inspectorFront.once("color-pick-canceled", resolve);
    111  });
    112  BrowserTestUtils.synthesizeKey(
    113    "VK_ESCAPE",
    114    {},
    115    gBrowser.selectedTab.linkedBrowser
    116  );
    117  await onCanceled;
    118 
    119  const color = swatch.style.backgroundColor;
    120  is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC");
    121 }
    122 
    123 async function testSelect(view, swatch, inspector) {
    124  info("Click at x:10px y:10px");
    125  const onPicked = new Promise(resolve => {
    126    inspector.inspectorFront.once("color-picked", resolve);
    127  });
    128  // The change to the content is done async after rule view change
    129  const onRuleViewChanged = view.once("ruleview-changed");
    130 
    131  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
    132    type: "mousemove",
    133  });
    134  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
    135    type: "mousedown",
    136  });
    137  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
    138    type: "mouseup",
    139  });
    140 
    141  await onPicked;
    142  await onRuleViewChanged;
    143 
    144  const color = swatch.style.backgroundColor;
    145  is(color, EXPECTED_COLOR, "swatch changed colors");
    146 
    147  ok(!swatch.eyedropperOpen, "swatch eye dropper is closed");
    148  ok(!swatch.activeSwatch, "no active swatch");
    149 
    150  is(
    151    await getComputedStyleProperty("div", null, "background-color"),
    152    EXPECTED_COLOR,
    153    "div's color set to body color after dropper"
    154  );
    155 }