tor-browser

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

browser_rules_edit-property_01.js (4552B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Testing adding new properties via the inplace-editors in the rule
      7 // view.
      8 // FIXME: some of the inplace-editor focus/blur/commit/revert stuff
      9 // should be factored out in head.js
     10 
     11 const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
     12 
     13 const TEST_URI = `
     14  <style type="text/css">
     15  #testid {
     16    color: red;
     17    background-color: blue;
     18  }
     19  .testclass, .unmatched {
     20    background-color: green;
     21  }
     22  </style>
     23  <div id="testid" class="testclass">Styled Node</div>
     24  <div id="testid2">Styled Node</div>
     25 `;
     26 
     27 var BACKGROUND_IMAGE_URL = 'url("' + URL_ROOT + 'doc_test_image.png")';
     28 
     29 var TEST_DATA = [
     30  { name: "border-color", value: "red", isValid: true },
     31  { name: "background-image", value: BACKGROUND_IMAGE_URL, isValid: true },
     32  { name: "border", value: "solid 1px foo", isValid: false },
     33 ];
     34 
     35 const DATA = [
     36  {
     37    timestamp: null,
     38    category: "devtools.main",
     39    method: "edit_rule",
     40    object: "ruleview",
     41  },
     42  {
     43    timestamp: null,
     44    category: "devtools.main",
     45    method: "edit_rule",
     46    object: "ruleview",
     47  },
     48  {
     49    timestamp: null,
     50    category: "devtools.main",
     51    method: "edit_rule",
     52    object: "ruleview",
     53  },
     54  {
     55    timestamp: null,
     56    category: "devtools.main",
     57    method: "edit_rule",
     58    object: "ruleview",
     59  },
     60  {
     61    timestamp: null,
     62    category: "devtools.main",
     63    method: "edit_rule",
     64    object: "ruleview",
     65  },
     66 ];
     67 
     68 add_task(async function () {
     69  // Let's reset the counts.
     70  Services.telemetry.clearEvents();
     71 
     72  // Ensure no events have been logged
     73  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
     74  ok(!snapshot.parent, "No events have been logged for the main process");
     75 
     76  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     77  const { inspector, view } = await openRuleView();
     78  await selectNode("#testid", inspector);
     79 
     80  const rule = getRuleViewRuleEditor(view, 1).rule;
     81  for (const { name, value, isValid } of TEST_DATA) {
     82    await testEditProperty(view, rule, name, value, isValid);
     83  }
     84 
     85  checkResults();
     86 });
     87 
     88 async function testEditProperty(view, rule, name, value, isValid) {
     89  info("Test editing existing property name/value fields");
     90 
     91  const doc = rule.editor.doc;
     92  const prop = rule.textProps[0];
     93 
     94  info("Focusing an existing property name in the rule-view");
     95  let editor = await focusEditableField(view, prop.editor.nameSpan, 32, 1);
     96 
     97  is(
     98    inplaceEditor(prop.editor.nameSpan),
     99    editor,
    100    "The property name editor got focused"
    101  );
    102  let input = editor.input;
    103  is(
    104    input.getAttribute("aria-label"),
    105    "Property name",
    106    "Property name input has expected aria-label"
    107  );
    108 
    109  info(
    110    "Entering a new property name, including : to commit and " +
    111      "focus the value"
    112  );
    113  const onValueFocus = once(rule.editor.element, "focus", true);
    114  const onNameDone = view.once("ruleview-changed");
    115  EventUtils.sendString(name + ":", doc.defaultView);
    116  await onValueFocus;
    117  await onNameDone;
    118 
    119  // Getting the value editor after focus
    120  editor = inplaceEditor(doc.activeElement);
    121  input = editor.input;
    122  is(inplaceEditor(prop.editor.valueSpan), editor, "Focus moved to the value.");
    123 
    124  info("Entering a new value, including ; to commit and blur the value");
    125  const onValueDone = view.once("ruleview-changed");
    126  const onBlur = once(input, "blur");
    127  EventUtils.sendString(value + ";", doc.defaultView);
    128  await onBlur;
    129  await onValueDone;
    130 
    131  is(
    132    prop.editor.isValid(),
    133    isValid,
    134    value + " is " + isValid ? "valid" : "invalid"
    135  );
    136 
    137  info("Checking that the style property was changed on the content page");
    138  const propValue = await getRulePropertyValue(0, 0, name);
    139  if (isValid) {
    140    is(propValue, value, name + " should have been set.");
    141  } else {
    142    isnot(propValue, value, name + " shouldn't have been set.");
    143  }
    144 }
    145 
    146 function checkResults() {
    147  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
    148  const events = snapshot.parent.filter(
    149    event =>
    150      event[1] === "devtools.main" &&
    151      event[2] === "edit_rule" &&
    152      event[3] === "ruleview"
    153  );
    154 
    155  for (const i in DATA) {
    156    const [timestamp, category, method, object] = events[i];
    157    const expected = DATA[i];
    158 
    159    // ignore timestamp
    160    Assert.greater(timestamp, 0, "timestamp is greater than 0");
    161    is(category, expected.category, "category is correct");
    162    is(method, expected.method, "method is correct");
    163    is(object, expected.object, "object is correct");
    164  }
    165 }