tor-browser

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

browser_inspector_highlighter-cssshape_01.js (2766B)

      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 
      5 "use strict";
      6 
      7 // Test the creation of the CSS shapes highlighter.
      8 
      9 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
     10 const { TYPES } = ChromeUtils.importESModule(
     11  "resource://devtools/shared/highlighters.mjs"
     12 );
     13 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     14 const SHAPE_IDS = ["polygon", "ellipse", "rect"];
     15 const SHAPE_TYPES = [
     16  {
     17    shapeName: "polygon",
     18    highlighter: "polygon",
     19  },
     20  {
     21    shapeName: "circle",
     22    highlighter: "ellipse",
     23  },
     24  {
     25    shapeName: "ellipse",
     26    highlighter: "ellipse",
     27  },
     28  {
     29    shapeName: "inset",
     30    highlighter: "rect",
     31  },
     32 ];
     33 
     34 add_task(async function () {
     35  const { inspector, highlighterTestFront } =
     36    await openInspectorForURL(TEST_URL);
     37  const front = inspector.inspectorFront;
     38  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
     39 
     40  await isHiddenByDefault(highlighterTestFront, highlighter);
     41  await isVisibleWhenShown(highlighterTestFront, inspector, highlighter);
     42 
     43  await highlighter.finalize();
     44 });
     45 
     46 async function getShapeHidden(highlighterTestFront, highlighterFront) {
     47  const hidden = {};
     48  for (const shape of SHAPE_IDS) {
     49    hidden[shape] = await highlighterTestFront.getHighlighterNodeAttribute(
     50      "shapes-" + shape,
     51      "hidden",
     52      highlighterFront
     53    );
     54  }
     55  return hidden;
     56 }
     57 
     58 async function isHiddenByDefault(highlighterTestFront, highlighterFront) {
     59  info("Checking that highlighter is hidden by default");
     60 
     61  const polygonHidden = await highlighterTestFront.getHighlighterNodeAttribute(
     62    "shapes-polygon",
     63    "hidden",
     64    highlighterFront
     65  );
     66  const ellipseHidden = await highlighterTestFront.getHighlighterNodeAttribute(
     67    "shapes-ellipse",
     68    "hidden",
     69    highlighterFront
     70  );
     71  ok(polygonHidden && ellipseHidden, "The highlighter is hidden by default");
     72 }
     73 
     74 async function isVisibleWhenShown(
     75  highlighterTestFront,
     76  inspector,
     77  highlighterFront
     78 ) {
     79  for (const { shapeName, highlighter } of SHAPE_TYPES) {
     80    info(`Asking to show the highlighter on the ${shapeName} node`);
     81 
     82    const node = await getNodeFront(`#${shapeName}`, inspector);
     83    await highlighterFront.show(node, { mode: "cssClipPath" });
     84 
     85    const hidden = await getShapeHidden(highlighterTestFront, highlighterFront);
     86    ok(!hidden[highlighter], `The ${shapeName} highlighter is visible`);
     87  }
     88 
     89  info("Hiding the highlighter");
     90  await highlighterFront.hide();
     91 
     92  const hidden = await getShapeHidden(highlighterTestFront, highlighterFront);
     93  ok(
     94    hidden.polygon && hidden.ellipse && hidden.rect,
     95    "The highlighter is hidden"
     96  );
     97 }