tor-browser

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

browser_compatibility_dynamic_markup-dom-change.js (4601B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 const {
      7  COMPATIBILITY_ISSUE_TYPE,
      8 } = require("resource://devtools/shared/constants.js");
      9 
     10 const {
     11  COMPATIBILITY_APPEND_NODE_COMPLETE,
     12  COMPATIBILITY_REMOVE_NODE_COMPLETE,
     13 } = require("resource://devtools/client/inspector/compatibility/actions/index.js");
     14 
     15 // Test the behavior rules are dynamically added
     16 
     17 const ISSUE_DEPRECATED = {
     18  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     19  property: "-moz-user-focus",
     20  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/-moz-user-focus",
     21  deprecated: true,
     22  experimental: false,
     23 };
     24 
     25 const ISSUE_NOT_DEPRECATED = {
     26  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     27  property: "overflow-anchor",
     28  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     29  deprecated: false,
     30  experimental: false,
     31 };
     32 
     33 const TEST_URI = `
     34  <style>
     35    div {
     36      -moz-user-focus: none;
     37    }
     38  </style>
     39  <body>
     40    <div></div>
     41    <div class="parent">
     42      <div style="overflow-anchor: auto"></div>
     43    </div>
     44  </body>
     45 `;
     46 
     47 add_task(async function () {
     48  info("Testing dynamic DOM mutation using JavaScript");
     49  const tab = await addTab(
     50    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     51  );
     52 
     53  const { allElementsPane, inspector } = await openCompatibilityView();
     54 
     55  info("Check initial issues");
     56  await assertIssueList(allElementsPane, [
     57    ISSUE_DEPRECATED,
     58    ISSUE_NOT_DEPRECATED,
     59  ]);
     60 
     61  info("Delete node whose child node has CSS compatibility issue");
     62  await testNodeRemoval(".parent", inspector, allElementsPane, [
     63    ISSUE_DEPRECATED,
     64  ]);
     65 
     66  info("Delete node that has CSS compatibility issue");
     67  await testNodeRemoval("div", inspector, allElementsPane, []);
     68 
     69  info("Add node that has CSS compatibility issue");
     70  await testNodeAddition("div", inspector, allElementsPane, [ISSUE_DEPRECATED]);
     71 
     72  await removeTab(tab);
     73 });
     74 
     75 /**
     76 * Simulate a click on the markup-container (a line in the markup-view)
     77 * that corresponds to the selector passed.
     78 * This overrides the definition in inspector/test/head.js which times
     79 * out when the container to be clicked is already the selected node.
     80 *
     81 * @param {string | NodeFront} selector
     82 * @param {InspectorPanel} inspector The instance of InspectorPanel currently
     83 * loaded in the toolbox
     84 * @return {Promise} Resolves when the node has been selected.
     85 */
     86 var clickContainer = async function (selector, inspector) {
     87  info("Clicking on the markup-container for node " + selector);
     88 
     89  const nodeFront = await getNodeFront(selector, inspector);
     90  const container = getContainerForNodeFront(nodeFront, inspector);
     91 
     92  const updated = container.selected
     93    ? Promise.resolve()
     94    : inspector.once("inspector-updated");
     95  EventUtils.synthesizeMouseAtCenter(
     96    container.tagLine,
     97    { type: "mousedown" },
     98    inspector.markup.doc.defaultView
     99  );
    100  EventUtils.synthesizeMouseAtCenter(
    101    container.tagLine,
    102    { type: "mouseup" },
    103    inspector.markup.doc.defaultView
    104  );
    105  return updated;
    106 };
    107 
    108 async function deleteNode(inspector, selector) {
    109  info("Select node " + selector + " and make sure it is focused");
    110  await selectNode(selector, inspector);
    111  await clickContainer(selector, inspector);
    112 
    113  info("Delete the node");
    114  const mutated = inspector.once("markupmutation");
    115  const updated = inspector.once("inspector-updated");
    116  EventUtils.sendKey("delete", inspector.panelWin);
    117  await mutated;
    118  await updated;
    119 }
    120 
    121 async function testNodeAddition(
    122  selector,
    123  inspector,
    124  allElementsPane,
    125  expectedAllElementsIssues
    126 ) {
    127  let onPanelUpdate = Promise.all([
    128    inspector.once("markupmutation"),
    129    waitForDispatch(inspector.store, COMPATIBILITY_APPEND_NODE_COMPLETE),
    130  ]);
    131  info("Add a new node");
    132  await inspector.addNode();
    133  await onPanelUpdate;
    134 
    135  onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
    136  await selectNode(selector, inspector);
    137  await onPanelUpdate;
    138 
    139  info("Check issues list for the webpage");
    140  await assertIssueList(allElementsPane, expectedAllElementsIssues);
    141 }
    142 
    143 async function testNodeRemoval(
    144  selector,
    145  inspector,
    146  allElementsPane,
    147  expectedAllElementsIssues
    148 ) {
    149  const onPanelUpdate = Promise.all([
    150    inspector.once("markupmutation"),
    151    waitForDispatch(inspector.store, COMPATIBILITY_REMOVE_NODE_COMPLETE),
    152  ]);
    153  info(`Delete the node with selector ${selector}`);
    154  await deleteNode(inspector, selector);
    155  await onPanelUpdate;
    156 
    157  info("Check issues list for the webpage");
    158  await assertIssueList(allElementsPane, expectedAllElementsIssues);
    159 }