tor-browser

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

browser_rules_add-rule-with-menu.js (3476B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests the a new CSS rule can be added using the context menu.
      7 const nodeConstants = require("resource://devtools/shared/dom-node-constants.js");
      8 
      9 const TEST_URI = `
     10  <style>
     11    :where(#testid)::before {
     12      content: "before ";
     13    }
     14  </style>
     15  <div id="testid">${
     16    // put a text node big enough so the text node is not inlined
     17    "Test Node  ".repeat(50)
     18  }</div>`;
     19 
     20 add_task(async function () {
     21  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     22  const { inspector, view } = await openRuleView();
     23 
     24  // Retrieve the different node fronts we're going to use
     25  const testidNodeFront = await getNodeFront("#testid", inspector);
     26  const children = await inspector.walker.children(testidNodeFront);
     27  const [beforeNodeFront, textNodeFront] = children.nodes;
     28 
     29  info("Add new rule on regular node");
     30  {
     31    await selectNode(testidNodeFront, inspector);
     32 
     33    info("Waiting for context menu to be shown");
     34    const menuitemAddRule = getAddNewRuleContextMenuItem(view);
     35    ok(menuitemAddRule.visible, "Add rule is visible");
     36    ok(!menuitemAddRule.disabled, "Add rule is not disabled");
     37 
     38    info("Adding the new rule and expecting a new-rule-added event");
     39    const onNewRuleAdded = view.once("new-rule-added");
     40    menuitemAddRule.click();
     41    await onNewRuleAdded;
     42 
     43    const ruleEditor = getRuleViewRuleEditor(view, 4);
     44    const editor = ruleEditor.selectorText.ownerDocument.activeElement;
     45    is(editor.value, "#testid", "Selector editor value is as expected");
     46 
     47    // Escaping from the selector field
     48    EventUtils.synthesizeKey("KEY_Escape");
     49  }
     50 
     51  info("Add new rule on pseudo element node");
     52  {
     53    await selectNode(beforeNodeFront, inspector);
     54    // sanity check
     55    is(
     56      inspector.selection.nodeFront.displayName,
     57      "::before",
     58      "We selected the ::before pseudo element"
     59    );
     60 
     61    info("Waiting for context menu to be shown");
     62    const menuitemAddRule = getAddNewRuleContextMenuItem(view);
     63    ok(menuitemAddRule.visible, "Add rule is visible");
     64    ok(!menuitemAddRule.disabled, "Add rule is not disabled");
     65 
     66    info("Adding the new rule and expecting a new-rule-added event");
     67    const onNewRuleAdded = view.once("new-rule-added");
     68    menuitemAddRule.click();
     69    await onNewRuleAdded;
     70 
     71    const ruleEditor = getRuleViewRuleEditor(view, 0);
     72    const editor = ruleEditor.selectorText.ownerDocument.activeElement;
     73    is(editor.value, "#testid::before", "Selector editor value is as expected");
     74 
     75    // Escaping from the selector field
     76    EventUtils.synthesizeKey("KEY_Escape");
     77  }
     78 
     79  info("Check that context menu is disabled when text node is selected");
     80  await selectNode(textNodeFront, inspector);
     81  // sanity check
     82  is(
     83    inspector.selection.nodeFront.nodeType,
     84    nodeConstants.TEXT_NODE,
     85    "We selected the text node"
     86  );
     87  info("Waiting for context menu to be shown");
     88  const menuitemAddRule = getAddNewRuleContextMenuItem(view);
     89  ok(menuitemAddRule.visible, "Add rule is visible");
     90  ok(
     91    menuitemAddRule.disabled,
     92    "Add rule is disabled when a text node is selected"
     93  );
     94 });
     95 
     96 function getAddNewRuleContextMenuItem(view) {
     97  const allMenuItems = openStyleContextMenuAndGetAllItems(view, view.element);
     98  return allMenuItems.find(
     99    item =>
    100      item.label ===
    101      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.addNewRule")
    102  );
    103 }