tor-browser

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

browser_rules_refresh-on-stylesheet-change.js (3644B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the rule view refreshes when a stylesheet is added or modified
      7 
      8 const TEST_URI = "<h1>Hello DevTools</h1>";
      9 
     10 add_task(async function () {
     11  // Disable transition so changes made in styleeditor are instantly applied
     12  await pushPref("devtools.styleeditor.transitions", false);
     13  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     14  const { inspector, view } = await openRuleView();
     15 
     16  await selectNode("h1", inspector);
     17 
     18  info("Add a stylesheet with matching rule for the h1 node");
     19  let onUpdated = inspector.once("rule-view-refreshed");
     20  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
     21    const addedStylesheet = content.document.createElement("style");
     22    addedStylesheet.textContent = "h1 { background: tomato }";
     23    content.document.head.append(addedStylesheet);
     24  });
     25  await onUpdated;
     26  ok(true, "Rules view was refreshed when adding a stylesheet");
     27  checkRulesViewSelectors(view, ["element", "h1"]);
     28  is(
     29    getRuleViewPropertyValue(view, "h1", "background"),
     30    "tomato",
     31    "Expected value is displayed for the background property"
     32  );
     33 
     34  info("Modify the stylesheet added previously");
     35  onUpdated = inspector.once("rule-view-refreshed");
     36  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
     37    const addedStylesheet = content.document.querySelector("style");
     38    addedStylesheet.textContent = "body h1 { background: gold; color: navy; }";
     39  });
     40  await onUpdated;
     41  ok(true, "Rules view was refreshed when updating the stylesheet");
     42  checkRulesViewSelectors(view, ["element", "body h1"]);
     43  is(
     44    getRuleViewPropertyValue(view, "body h1", "background"),
     45    "gold",
     46    "Expected value is displayed for the background property"
     47  );
     48  is(
     49    getRuleViewPropertyValue(view, "body h1", "color"),
     50    "navy",
     51    "Expected value is displayed for the color property"
     52  );
     53 
     54  info("Add Stylesheet from StyleEditor");
     55  const styleEditor = await inspector.toolbox.selectTool("styleeditor");
     56  const onEditorAdded = styleEditor.UI.once("editor-added");
     57  // create a new style sheet
     58  styleEditor.panelWindow.document
     59    .querySelector(".style-editor-newButton")
     60    .click();
     61 
     62  const editor = await onEditorAdded;
     63  await editor.getSourceEditor();
     64 
     65  if (!editor.sourceEditor.hasFocus()) {
     66    info("Waiting for stylesheet editor to gain focus");
     67    await editor.sourceEditor.once("focus");
     68  }
     69  ok(editor.sourceEditor.hasFocus(), "new editor has focus");
     70 
     71  const stylesheetText = `:is(h1) { font-size: 36px; }`;
     72  await new Promise(resolve => {
     73    waitForFocus(function () {
     74      for (const c of stylesheetText) {
     75        EventUtils.synthesizeKey(c, {}, styleEditor.panelWindow);
     76      }
     77      resolve();
     78    }, styleEditor.panelWindow);
     79  });
     80 
     81  info("Select inspector again");
     82  await inspector.toolbox.selectTool("inspector");
     83  await waitFor(() => getRuleSelectors(view).includes(":is(h1)"));
     84  ok(true, "Rules view was refreshed when selecting the inspector");
     85  checkRulesViewSelectors(view, ["element", "body h1", ":is(h1)"]);
     86  is(
     87    getRuleViewPropertyValue(view, ":is(h1)", "font-size"),
     88    "36px",
     89    "Expected value is displayed for the font-size property"
     90  );
     91 });
     92 
     93 function checkRulesViewSelectors(view, expectedSelectors) {
     94  Assert.deepEqual(
     95    getRuleSelectors(view),
     96    expectedSelectors,
     97    "Expected selectors are displayed"
     98  );
     99 }
    100 
    101 function getRuleSelectors(view) {
    102  return Array.from(
    103    view.styleDocument.querySelectorAll(".ruleview-selectors-container")
    104  ).map(el => el.textContent);
    105 }