tor-browser

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

browser_inspector_highlighter-cssshape_05.js (5043B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test hovering over shape points in the rule-view and shapes highlighter.
      7 
      8 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
      9 const { TYPES } = ChromeUtils.importESModule(
     10  "resource://devtools/shared/highlighters.mjs"
     11 );
     12 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     13 
     14 add_task(async function () {
     15  const env = await openInspectorForURL(TEST_URL);
     16  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
     17  const { highlighterTestFront, inspector } = env;
     18  const view = selectRuleView(inspector);
     19  const highlighters = view.highlighters;
     20  const config = {
     21    inspector,
     22    view,
     23    highlighters,
     24    highlighterTestFront,
     25    helper,
     26  };
     27 
     28  await highlightFromRuleView(config);
     29  await highlightFromHighlighter(config);
     30 });
     31 
     32 async function setup(config) {
     33  const { view, selector, property, inspector } = config;
     34  info(`Turn on shapes highlighter for ${selector}`);
     35  await selectNode(selector, inspector);
     36  await toggleShapesHighlighter(view, selector, property, true);
     37 }
     38 
     39 async function teardown(config) {
     40  const { view, selector, property } = config;
     41  info(`Turn off shapes highlighter for ${selector}`);
     42  await toggleShapesHighlighter(view, selector, property, false);
     43 }
     44 /*
     45 * Test that points hovered in the rule view will highlight corresponding points
     46 * in the shapes highlighter on the page.
     47 */
     48 async function highlightFromRuleView(config) {
     49  const { view, highlighters, highlighterTestFront, inspector } = config;
     50  const selector = "#polygon";
     51  const property = "clip-path";
     52 
     53  await setup({ selector, property, ...config });
     54 
     55  const container = getRuleViewProperty(view, selector, property).valueSpan;
     56  const shapesToggle = container.querySelector(".inspector-shapeswatch");
     57 
     58  const highlighterFront =
     59    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
     60 
     61  let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
     62    "shapes-marker-hover",
     63    "hidden",
     64    highlighterFront
     65  );
     66  ok(markerHidden, "Hover marker on highlighter is not visible");
     67 
     68  info("Hover over point 0 in rule view");
     69  const pointSpan = container.querySelector(
     70    ".inspector-shape-point[data-point='0']"
     71  );
     72  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     73  EventUtils.synthesizeMouseAtCenter(
     74    pointSpan,
     75    { type: "mousemove" },
     76    view.styleWindow
     77  );
     78  await onHighlighterShown;
     79 
     80  info(
     81    "Point in shapes highlighter is marked when same point in rule view is hovered"
     82  );
     83  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
     84    "shapes-marker-hover",
     85    "hidden",
     86    highlighterFront
     87  );
     88  ok(!markerHidden, "Marker on highlighter is visible");
     89 
     90  info("Move mouse off point");
     91  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
     92  EventUtils.synthesizeMouseAtCenter(
     93    shapesToggle,
     94    { type: "mousemove" },
     95    view.styleWindow
     96  );
     97  await onHighlighterShown;
     98 
     99  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
    100    "shapes-marker-hover",
    101    "hidden",
    102    highlighterFront
    103  );
    104  ok(markerHidden, "Marker on highlighter is not visible");
    105 
    106  await teardown({ selector, property, ...config });
    107 }
    108 
    109 /*
    110 * Test that points hovered in the shapes highlighter on the page will highlight
    111 * corresponding points in the rule view.
    112 */
    113 async function highlightFromHighlighter(config) {
    114  const { view, highlighters, highlighterTestFront, helper, inspector } =
    115    config;
    116  const selector = "#polygon";
    117  const property = "clip-path";
    118 
    119  await setup({ selector, property, ...config });
    120 
    121  const highlighterFront =
    122    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
    123  const { mouse } = helper;
    124  const container = getRuleViewProperty(view, selector, property).valueSpan;
    125 
    126  info("Hover over first point in highlighter");
    127  let onEventHandled = highlighters.once("highlighter-event-handled");
    128  await mouse.move(0, 0);
    129  await onEventHandled;
    130  let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
    131    "shapes-marker-hover",
    132    "hidden",
    133    highlighterFront
    134  );
    135  ok(!markerHidden, "Marker on highlighter is visible");
    136 
    137  info(
    138    "Point in rule view is marked when same point in shapes highlighter is hovered"
    139  );
    140  const pointSpan = container.querySelector(
    141    ".inspector-shape-point[data-point='0']"
    142  );
    143  ok(pointSpan.classList.contains("active"), "Span for point 0 is active");
    144 
    145  info("Move mouse off point");
    146  onEventHandled = highlighters.once("highlighter-event-handled");
    147  await mouse.move(100, 100);
    148  await onEventHandled;
    149  markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
    150    "shapes-marker-hover",
    151    "hidden",
    152    highlighterFront
    153  );
    154  ok(markerHidden, "Marker on highlighter is no longer visible");
    155  ok(
    156    !pointSpan.classList.contains("active"),
    157    "Span for point 0 is no longer active"
    158  );
    159 
    160  await teardown({ selector, property, ...config });
    161 }