tor-browser

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

browser_inspector_pseudoclass-menu.js (3173B)

      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 inspector has the correct pseudo-class locking menu items and
      6 // that these items actually work
      7 
      8 const {
      9  PSEUDO_CLASSES,
     10 } = require("resource://devtools/shared/css/constants.js");
     11 const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
     12 
     13 const TEST_URI = `data:text/html;charset=UTF-8,
     14  <style>
     15    div::after {
     16      content: "-";
     17    }
     18  </style>
     19  <h1>pseudo-class lock node menu tests</h1>
     20  <div>test div</div>`;
     21 // Strip the colon prefix from pseudo-classes (:before => before)
     22 const PSEUDOS = PSEUDO_CLASSES.map(pseudo => pseudo.substr(1));
     23 
     24 add_task(async function () {
     25  const { inspector } = await openInspectorForURL(TEST_URI);
     26  const divNodeFront = await getNodeFront("div", inspector);
     27  const divChildren = await inspector.walker.children(divNodeFront);
     28 
     29  info("Check pseudo element context menu on regular node");
     30  await selectNode(divNodeFront, inspector);
     31  let allMenuItems = openContextMenuAndGetAllItems(inspector);
     32  await testMenuItems(allMenuItems, inspector, true);
     33 
     34  const [textNodeFront, afterNodeFront] = divChildren.nodes;
     35 
     36  info("Check pseudo element context menu on text node");
     37  await selectNode(textNodeFront, inspector);
     38  // sanity check
     39  is(
     40    inspector.selection.nodeFront.nodeType,
     41    nodeConstants.TEXT_NODE,
     42    "We selected the text node"
     43  );
     44  allMenuItems = openContextMenuAndGetAllItems(inspector);
     45  await testMenuItems(allMenuItems, inspector, false);
     46 
     47  info("Check pseudo element context menu on pseudo element node");
     48  await selectNode(afterNodeFront, inspector);
     49  is(
     50    inspector.selection.nodeFront.displayName,
     51    "::after",
     52    "We selected the ::after pseudo element"
     53  );
     54  allMenuItems = openContextMenuAndGetAllItems(inspector);
     55  await testMenuItems(allMenuItems, inspector, false);
     56 });
     57 
     58 async function testMenuItems(allMenuItems, inspector, enabled) {
     59  for (const pseudo of PSEUDOS) {
     60    const menuItem = allMenuItems.find(
     61      item => item.id === "node-menu-pseudo-" + pseudo
     62    );
     63    ok(menuItem, ":" + pseudo + " menuitem exists");
     64    is(
     65      menuItem.disabled,
     66      !enabled,
     67      `:${pseudo} menuitem is ${enabled ? "enabled" : "disabled"} for "${inspector.selection.nodeFront.displayName}"`
     68    );
     69 
     70    if (!enabled) {
     71      continue;
     72    }
     73 
     74    // Give the inspector panels a chance to update when the pseudoclass changes
     75    const onPseudo = inspector.selection.once("pseudoclass");
     76    const onRefresh = inspector.once("rule-view-refreshed");
     77 
     78    // Walker uses SDK-events so calling walker.once does not return a promise.
     79    const onMutations = once(inspector.walker, "mutations");
     80 
     81    menuItem.click();
     82 
     83    await onPseudo;
     84    await onRefresh;
     85    await onMutations;
     86 
     87    const hasLock = await SpecialPowers.spawn(
     88      gBrowser.selectedBrowser,
     89      [`:${pseudo}`],
     90      pseudoClass => {
     91        const element = content.document.querySelector("div");
     92        return InspectorUtils.hasPseudoClassLock(element, pseudoClass);
     93      }
     94    );
     95    ok(hasLock, "pseudo-class lock has been applied");
     96  }
     97 }