tor-browser

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

browser_rules_edit-selector_02.js (2841B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Testing selector inplace-editor behaviors in the rule-view with pseudo
      7 // classes.
      8 
      9 const TEST_URI = `
     10  <style type="text/css">
     11    .testclass {
     12      text-align: center;
     13    }
     14    #testid3::first-letter {
     15      text-decoration: "italic"
     16    }
     17  </style>
     18  <div id="testid">Styled Node</div>
     19  <span class="testclass">This is a span</span>
     20  <div class="testclass2">A</div>
     21  <div id="testid3">B</div>
     22 `;
     23 
     24 const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
     25 
     26 add_task(async function () {
     27  // Expand the pseudo-elements section by default.
     28  Services.prefs.setBoolPref(PSEUDO_PREF, true);
     29 
     30  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     31  const { inspector, view } = await openRuleView();
     32 
     33  info("Selecting the test element");
     34  await selectNode(".testclass", inspector);
     35  await testEditSelector(view, "div:nth-child(1)");
     36 
     37  info("Selecting the modified element");
     38  await selectNode("#testid", inspector);
     39  await checkModifiedElement(view, "div:nth-child(1)");
     40 
     41  info("Selecting the test element");
     42  await selectNode("#testid3", inspector);
     43  await testEditSelector(view, ".testclass2::first-letter");
     44 
     45  info("Selecting the modified element");
     46  await selectNode(".testclass2", inspector);
     47  await checkModifiedElement(view, ".testclass2::first-letter");
     48 
     49  // Reset the pseudo-elements section pref to its default value.
     50  Services.prefs.clearUserPref(PSEUDO_PREF);
     51 });
     52 
     53 async function testEditSelector(view, name) {
     54  info("Test editing existing selector fields");
     55 
     56  const idRuleEditor =
     57    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
     58 
     59  info("Focusing an existing selector name in the rule-view");
     60  const editor = await focusEditableField(view, idRuleEditor.selectorText);
     61 
     62  is(
     63    inplaceEditor(idRuleEditor.selectorText),
     64    editor,
     65    "The selector editor got focused"
     66  );
     67 
     68  info("Entering a new selector name: " + name);
     69  editor.input.value = name;
     70 
     71  info("Waiting for rule view to update");
     72  const onRuleViewChanged = once(view, "ruleview-changed");
     73 
     74  info("Entering the commit key");
     75  EventUtils.synthesizeKey("KEY_Enter");
     76  await onRuleViewChanged;
     77 
     78  is(view._elementStyle.rules.length, 2, "Should have 2 rule.");
     79  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
     80 
     81  const newRuleEditor =
     82    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
     83  ok(
     84    newRuleEditor.element.getAttribute("unmatched"),
     85    "Rule with " + name + " does not match the current element."
     86  );
     87 }
     88 
     89 function checkModifiedElement(view, name) {
     90  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
     91  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
     92 }