tor-browser

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

browser_compatibility_dynamic_ruleview-attribute-change.js (3205B)

      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_UPDATE_NODE_COMPLETE,
     12 } = require("resource://devtools/client/inspector/compatibility/actions/index.js");
     13 
     14 // Test the behavior rules are dynamically added
     15 
     16 const ISSUE_DEPRECATED = {
     17  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     18  property: "-moz-user-focus",
     19  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/-moz-user-focus",
     20  deprecated: true,
     21  experimental: false,
     22 };
     23 
     24 const ISSUE_NOT_DEPRECATED = {
     25  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
     26  property: "overflow-anchor",
     27  url: "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor",
     28  deprecated: false,
     29  experimental: false,
     30 };
     31 
     32 const TEST_URI = `
     33  <style>
     34    .issue {
     35      -moz-user-focus: none;
     36    }
     37  </style>
     38  <body>
     39    <div class="test issue"></div>
     40  </body>
     41 `;
     42 
     43 add_task(async function () {
     44  info("Testing dynamic style change via the devtools inspector's rule view");
     45  const tab = await addTab(
     46    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
     47  );
     48 
     49  const { allElementsPane, inspector, selectedElementPane } =
     50    await openCompatibilityView();
     51 
     52  info("Select the div to undergo mutation");
     53  const waitForCompatibilityListUpdate = waitForUpdateSelectedNodeAction(
     54    inspector.store
     55  );
     56  await selectNode(".test.issue", inspector);
     57  await waitForCompatibilityListUpdate;
     58 
     59  info("Check initial issues");
     60  await checkPanelIssues(selectedElementPane, allElementsPane, [
     61    ISSUE_DEPRECATED,
     62  ]);
     63 
     64  await addNewRule(
     65    "overflow-anchor",
     66    "auto",
     67    inspector,
     68    selectedElementPane,
     69    allElementsPane,
     70    [ISSUE_DEPRECATED, ISSUE_NOT_DEPRECATED]
     71  );
     72 
     73  info("Toggle the inline issue rendering it disable");
     74  await togglePropStatusOnRuleView(inspector, 0, 0);
     75  info("Check the issues listed in panel");
     76  await checkPanelIssues(selectedElementPane, allElementsPane, [
     77    ISSUE_DEPRECATED,
     78  ]);
     79 
     80  info("Toggle the class rule rendering it disabled");
     81  await togglePropStatusOnRuleView(inspector, 1, 0);
     82  info("Check the panel issues listed in panel");
     83  await checkPanelIssues(selectedElementPane, allElementsPane, []);
     84 
     85  await removeTab(tab);
     86 });
     87 
     88 async function addNewRule(
     89  newDeclaration,
     90  value,
     91  inspector,
     92  selectedElementPane,
     93  allElementsPane,
     94  issue
     95 ) {
     96  const { view } = await openRuleView();
     97  const waitForCompatibilityListUpdate = waitForDispatch(
     98    inspector.store,
     99    COMPATIBILITY_UPDATE_NODE_COMPLETE
    100  );
    101 
    102  info("Add a new inline property");
    103  await addProperty(view, 0, newDeclaration, value);
    104  info("Wait for changes");
    105  await waitForCompatibilityListUpdate;
    106 
    107  info("Check issues list for element and the webpage");
    108  await checkPanelIssues(selectedElementPane, allElementsPane, issue);
    109 }
    110 
    111 async function checkPanelIssues(selectedElementPane, allElementsPane, issues) {
    112  info("Check selected element issues");
    113  await assertIssueList(selectedElementPane, issues);
    114  info("Check all panel issues");
    115  await assertIssueList(allElementsPane, issues);
    116 }