tor-browser

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

browser_rules_edit-property_02.js (4274B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test several types of rule-view property edition
      7 
      8 const TEST_URI = `
      9  <style type="text/css">
     10  #testid {
     11    background-color: blue;
     12  }
     13  .testclass, .unmatched {
     14    background-color: green;
     15  }
     16  </style>
     17  <div id="testid" class="testclass">Styled Node</div>
     18  <div id="testid2">Styled Node</div>
     19 `;
     20 
     21 add_task(async function () {
     22  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     23  const { inspector, view } = await openRuleView();
     24  await selectNode("#testid", inspector);
     25 
     26  await testEditProperty(inspector, view);
     27  await testDisableProperty(inspector, view);
     28  await testPropertyStillMarkedDirty(inspector, view);
     29 });
     30 
     31 async function testEditProperty(inspector, ruleView) {
     32  const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
     33  const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
     34 
     35  let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
     36  let input = editor.input;
     37  is(
     38    inplaceEditor(prop.editor.nameSpan),
     39    editor,
     40    "Next focused editor should be the name editor."
     41  );
     42 
     43  ok(
     44    input.selectionStart === 0 && input.selectionEnd === input.value.length,
     45    "Editor contents are selected."
     46  );
     47 
     48  // Try clicking on the editor's input again, shouldn't cause trouble
     49  // (see bug 761665).
     50  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
     51  input.select();
     52 
     53  info(
     54    'Entering property name "border-color" followed by a colon to ' +
     55      "focus the value"
     56  );
     57  const onNameDone = ruleView.once("ruleview-changed");
     58  const onFocus = once(idRule.editor.element, "focus", true);
     59  EventUtils.sendString("border-color:", ruleView.styleWindow);
     60  await onFocus;
     61  await onNameDone;
     62 
     63  info("Verifying that the focused field is the valueSpan");
     64  editor = inplaceEditor(ruleView.styleDocument.activeElement);
     65  input = editor.input;
     66  is(
     67    inplaceEditor(prop.editor.valueSpan),
     68    editor,
     69    "Focus should have moved to the value."
     70  );
     71  ok(
     72    input.selectionStart === 0 && input.selectionEnd === input.value.length,
     73    "Editor contents are selected."
     74  );
     75 
     76  info("Entering a value following by a semi-colon to commit it");
     77  const onBlur = once(editor.input, "blur");
     78  // Use sendChar() to pass each character as a string so that we can test
     79  // prop.editor.warning.hidden after each character.
     80  for (const ch of "red;") {
     81    const onPreviewDone = ruleView.once("ruleview-changed");
     82    EventUtils.sendChar(ch, ruleView.styleWindow);
     83    ruleView.debounce.flush();
     84    await onPreviewDone;
     85    ok(!prop.editor.warning, "warning triangle is hidden as expected");
     86  }
     87  await onBlur;
     88 
     89  const newValue = await getRulePropertyValue(0, 0, "border-color");
     90  is(newValue, "red", "border-color should have been set.");
     91 
     92  ruleView.styleDocument.activeElement.blur();
     93  await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
     94 
     95  const props = ruleView.element.querySelectorAll(".ruleview-property");
     96  for (let i = 0; i < props.length; i++) {
     97    is(
     98      props[i].hasAttribute("dirty"),
     99      i <= 1,
    100      "props[" + i + "] marked dirty as appropriate"
    101    );
    102  }
    103 }
    104 
    105 async function testDisableProperty(inspector, ruleView) {
    106  const prop = getTextProperty(ruleView, 1, {
    107    "border-color": "red",
    108    color: "red",
    109  });
    110 
    111  info("Disabling a property");
    112  await togglePropStatus(ruleView, prop);
    113 
    114  let newValue = await getRulePropertyValue(0, 0, "border-color");
    115  is(newValue, "", "Border-color should have been unset.");
    116 
    117  info("Enabling the property again");
    118  await togglePropStatus(ruleView, prop);
    119 
    120  newValue = await getRulePropertyValue(0, 0, "border-color");
    121  is(newValue, "red", "Border-color should have been reset.");
    122 }
    123 
    124 async function testPropertyStillMarkedDirty(inspector, ruleView) {
    125  // Select an unstyled node.
    126  await selectNode("#testid2", inspector);
    127 
    128  // Select the original node again.
    129  await selectNode("#testid", inspector);
    130 
    131  const props = ruleView.element.querySelectorAll(".ruleview-property");
    132  for (let i = 0; i < props.length; i++) {
    133    is(
    134      props[i].hasAttribute("dirty"),
    135      i <= 1,
    136      "props[" + i + "] marked dirty as appropriate"
    137    );
    138  }
    139 }