tor-browser

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

browser_rules_editable-field-focus_02.js (2884B)

      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 shift tabbing
      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  await testEditableFieldFocus(inspector, view, "VK_TAB", { shiftKey: true });
     29 });
     30 
     31 async function testEditableFieldFocus(
     32  inspector,
     33  view,
     34  commitKey,
     35  options = {}
     36 ) {
     37  let ruleEditor = getRuleViewRuleEditor(view, 2);
     38  const editor = await focusEditableField(view, ruleEditor.selectorText);
     39  is(
     40    inplaceEditor(ruleEditor.selectorText),
     41    editor,
     42    "Focus should be in the 'div' rule selector"
     43  );
     44 
     45  ruleEditor = getRuleViewRuleEditor(view, 1);
     46 
     47  await focusNextField(view, ruleEditor, commitKey, options);
     48  assertEditor(
     49    view,
     50    ruleEditor.newPropSpan,
     51    "Focus should have moved to the new property span"
     52  );
     53 
     54  for (const textProp of ruleEditor.rule.textProps.toReversed()) {
     55    const propEditor = textProp.editor;
     56 
     57    await focusNextField(view, ruleEditor, commitKey, options);
     58    await assertEditor(
     59      view,
     60      propEditor.valueSpan,
     61      "Focus should have moved to the property value"
     62    );
     63 
     64    await focusNextFieldAndExpectChange(view, ruleEditor, commitKey, options);
     65    await assertEditor(
     66      view,
     67      propEditor.nameSpan,
     68      "Focus should have moved to the property name"
     69    );
     70  }
     71 
     72  ruleEditor = getRuleViewRuleEditor(view, 1);
     73 
     74  await focusNextField(view, ruleEditor, commitKey, options);
     75  await assertEditor(
     76    view,
     77    ruleEditor.selectorText,
     78    "Focus should have moved to the '#testid' rule selector"
     79  );
     80 
     81  ruleEditor = getRuleViewRuleEditor(view, 0);
     82 
     83  await focusNextField(view, ruleEditor, commitKey, options);
     84  assertEditor(
     85    view,
     86    ruleEditor.newPropSpan,
     87    "Focus should have moved to the new property span"
     88  );
     89 }
     90 
     91 async function focusNextFieldAndExpectChange(
     92  view,
     93  ruleEditor,
     94  commitKey,
     95  options
     96 ) {
     97  const onRuleViewChanged = view.once("ruleview-changed");
     98  await focusNextField(view, ruleEditor, commitKey, options);
     99  await onRuleViewChanged;
    100 }
    101 
    102 async function focusNextField(view, ruleEditor, commitKey, options) {
    103  const onFocus = once(ruleEditor.element, "focus", true);
    104  EventUtils.synthesizeKey(commitKey, options, view.styleWindow);
    105  await onFocus;
    106 }
    107 
    108 function assertEditor(view, element, message) {
    109  const editor = inplaceEditor(view.styleDocument.activeElement);
    110  is(inplaceEditor(element), editor, message);
    111 }