tor-browser

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

browser_rules_editable-field-focus_01.js (3514B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests that the correct editable fields are focused when tabbing and entering
      7 // through the rule view.
      8 
      9 const TEST_URI = `
     10  <style type='text/css'>
     11  #testid {
     12    background-color: blue;
     13    color: red;
     14    margin: 0;
     15    padding: 0;
     16  }
     17  div {
     18    border-color: red
     19  }
     20  </style>
     21  <div id='testid'>Styled Node</div>
     22 `;
     23 
     24 add_task(async function () {
     25  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
     26  const { inspector, view } = await openRuleView();
     27  await selectNode("#testid", inspector);
     28 
     29  info("Click on the selector of the inline style ('element')");
     30  let ruleEditor = getRuleViewRuleEditor(view, 0);
     31  const onFocus = once(ruleEditor.element, "focus", true);
     32 
     33  // We intentionally turn off this a11y check, because the following click
     34  // is purposefully targeting the non-interactive selector to make sure it
     35  // also adds a rule declaration, but the a11y check can be disabled as it's
     36  // only an additional way to add a declaration.
     37  AccessibilityUtils.setEnv({ mustHaveAccessibleRule: false });
     38  ruleEditor.selectorText.click();
     39  AccessibilityUtils.resetEnv();
     40 
     41  await onFocus;
     42  assertEditor(
     43    view,
     44    ruleEditor.newPropSpan,
     45    "Focus should be in the element property span"
     46  );
     47 
     48  info("Focus the next field with Tab");
     49  ruleEditor = getRuleViewRuleEditor(view, 1);
     50  await focusNextEditableField(view, ruleEditor);
     51  assertEditor(
     52    view,
     53    ruleEditor.selectorText,
     54    "Focus should have moved to the next rule selector"
     55  );
     56 
     57  for (let i = 0; i < ruleEditor.rule.textProps.length; i++) {
     58    const textProp = ruleEditor.rule.textProps[i];
     59    const propEditor = textProp.editor;
     60 
     61    info("Focus the next field with Tab");
     62    // Expect a ruleview-changed event if we are moving from a property value
     63    // to the next property name (which occurs after the first iteration, as for
     64    // i=0, the previous field is the selector).
     65    const onRuleViewChanged = i > 0 ? view.once("ruleview-changed") : null;
     66    await focusNextEditableField(view, ruleEditor);
     67    await onRuleViewChanged;
     68    assertEditor(
     69      view,
     70      propEditor.nameSpan,
     71      "Focus should have moved to the property name"
     72    );
     73 
     74    info("Focus the next field with Tab");
     75    await focusNextEditableField(view, ruleEditor);
     76    assertEditor(
     77      view,
     78      propEditor.valueSpan,
     79      "Focus should have moved to the property value"
     80    );
     81  }
     82 
     83  // Expect a ruleview-changed event again as we're bluring a property value.
     84  const onRuleViewChanged = view.once("ruleview-changed");
     85  await focusNextEditableField(view, ruleEditor);
     86  await onRuleViewChanged;
     87  assertEditor(
     88    view,
     89    ruleEditor.newPropSpan,
     90    "Focus should have moved to the new property span"
     91  );
     92 
     93  ruleEditor = getRuleViewRuleEditor(view, 2);
     94 
     95  await focusNextEditableField(view, ruleEditor);
     96  assertEditor(
     97    view,
     98    ruleEditor.selectorText,
     99    "Focus should have moved to the next rule selector"
    100  );
    101 
    102  info("Blur the selector field");
    103  EventUtils.synthesizeKey("KEY_Escape");
    104 });
    105 
    106 async function focusNextEditableField(view, ruleEditor) {
    107  const onFocus = once(ruleEditor.element, "focus", true);
    108  EventUtils.synthesizeKey("KEY_Tab", {}, view.styleWindow);
    109  await onFocus;
    110 }
    111 
    112 function assertEditor(view, element, message) {
    113  const editor = inplaceEditor(view.styleDocument.activeElement);
    114  is(inplaceEditor(element), editor, message);
    115 }