tor-browser

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

browser_inspector_highlighter-eyedropper-label.js (4348B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 // Test the position of the eyedropper label.
      7 // It should move around when the eyedropper is close to the edges of the viewport so as
      8 // to always stay visible.
      9 
     10 const { TYPES } = ChromeUtils.importESModule(
     11  "resource://devtools/shared/highlighters.mjs"
     12 );
     13 const HIGHLIGHTER_TYPE = TYPES.EYEDROPPER;
     14 const ID = "eye-dropper-";
     15 
     16 const HTML = `
     17 <style>
     18 html, body {height: 100%; margin: 0;}
     19 body {background: linear-gradient(red, gold); display: flex; justify-content: center;
     20      align-items: center;}
     21 </style>
     22 Eyedropper label position test
     23 `;
     24 const TEST_PAGE = "data:text/html;charset=utf-8," + encodeURI(HTML);
     25 
     26 const TEST_DATA = [
     27  {
     28    desc: "Move the mouse to the center of the screen",
     29    getCoordinates: (width, height) => {
     30      return { x: width / 2, y: height / 2 };
     31    },
     32    expectedPositions: { top: false, right: false, left: false },
     33  },
     34  {
     35    desc: "Move the mouse to the center left",
     36    getCoordinates: (width, height) => {
     37      return { x: 0, y: height / 2 };
     38    },
     39    expectedPositions: { top: false, right: true, left: false },
     40  },
     41  {
     42    desc: "Move the mouse to the center right",
     43    getCoordinates: (width, height) => {
     44      return { x: width, y: height / 2 };
     45    },
     46    expectedPositions: { top: false, right: false, left: true },
     47  },
     48  {
     49    desc: "Move the mouse to the bottom center",
     50    getCoordinates: (width, height) => {
     51      return { x: width / 2, y: height };
     52    },
     53    expectedPositions: { top: true, right: false, left: false },
     54  },
     55  {
     56    desc: "Move the mouse to the bottom left",
     57    getCoordinates: (width, height) => {
     58      return { x: 0, y: height };
     59    },
     60    expectedPositions: { top: true, right: true, left: false },
     61  },
     62  {
     63    desc: "Move the mouse to the bottom right",
     64    getCoordinates: (width, height) => {
     65      return { x: width, y: height };
     66    },
     67    expectedPositions: { top: true, right: false, left: true },
     68  },
     69  {
     70    desc: "Move the mouse to the top left",
     71    getCoordinates: () => {
     72      return { x: 0, y: 0 };
     73    },
     74    expectedPositions: { top: false, right: true, left: false },
     75  },
     76  {
     77    desc: "Move the mouse to the top right",
     78    getCoordinates: width => {
     79      return { x: width, y: 0 };
     80    },
     81    expectedPositions: { top: false, right: false, left: true },
     82  },
     83 ];
     84 
     85 add_task(async function () {
     86  const { inspector, highlighterTestFront } =
     87    await openInspectorForURL(TEST_PAGE);
     88  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({
     89    inspector,
     90    highlighterTestFront,
     91  });
     92  helper.prefix = ID;
     93 
     94  const { mouse, show, hide, finalize } = helper;
     95  let { width, height } = await SpecialPowers.spawn(
     96    gBrowser.selectedBrowser,
     97    [],
     98    () => {
     99      const rect = content.document
    100        .querySelector("html")
    101        .getBoundingClientRect();
    102      return { width: rect.width, height: rect.height };
    103    }
    104  );
    105 
    106  // This test fails in non-e10s windows if we use width and height. For some reasons, the
    107  // mouse events can't be dispatched/handled properly when we try to move the eyedropper
    108  // to the far right and/or bottom of the screen. So just removing 10px from each side
    109  // fixes it.
    110  width -= 10;
    111  height -= 10;
    112 
    113  info("Show the eyedropper on the page");
    114  await show("html");
    115 
    116  info(
    117    "Move the eyedropper around and check that the label appears at the right place"
    118  );
    119  for (const { desc, getCoordinates, expectedPositions } of TEST_DATA) {
    120    info(desc);
    121    const { x, y } = getCoordinates(width, height);
    122    info(`Moving the mouse to ${x} ${y}`);
    123    await mouse.move(x, y);
    124    await checkLabelPositionAttributes(helper, expectedPositions);
    125  }
    126 
    127  info("Hide the eyedropper");
    128  await hide();
    129  finalize();
    130 });
    131 
    132 async function checkLabelPositionAttributes(helper, positions) {
    133  for (const position in positions) {
    134    is(
    135      await hasAttribute(helper, position),
    136      positions[position],
    137      `The label was ${
    138        positions[position] ? "" : "not "
    139      }moved to the ${position}`
    140    );
    141  }
    142 }
    143 
    144 async function hasAttribute({ getElementAttribute }, name) {
    145  const value = await getElementAttribute("root", name);
    146  return value !== null;
    147 }