tor-browser

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

browser_inplace-editor_stop_on_key.js (5474B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 /* import-globals-from helper_inplace_editor.js */
      4 
      5 "use strict";
      6 
      7 loadHelperScript("helper_inplace_editor.js");
      8 
      9 // Test the inplace-editor stopOnX options behavior
     10 
     11 add_task(async function () {
     12  await addTab("data:text/html;charset=utf-8,inline editor stopOnX");
     13  const { host, doc } = await createHost();
     14 
     15  testStopOnReturn(doc);
     16  testStopOnTab(doc);
     17  testStopOnShiftTab(doc);
     18 
     19  host.destroy();
     20  gBrowser.removeCurrentTab();
     21 });
     22 
     23 function testStopOnReturn(doc) {
     24  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
     25 
     26  info(`Create an editable field with "stopOnReturn" set to true`);
     27  editableField({
     28    element: span1El,
     29    focusEditableFieldAfterApply: true,
     30    focusEditableFieldContainerSelector: "main",
     31    stopOnReturn: true,
     32  });
     33  editableField({
     34    element: span2El,
     35  });
     36 
     37  info("Activate inplace editor on first span");
     38  span1El.click();
     39 
     40  is(
     41    doc.activeElement.inplaceEditor.elt.id,
     42    "span-1",
     43    "Visible editable field is the one associated with first span"
     44  );
     45  assertFocusedElementInplaceEditorInput(doc);
     46 
     47  info("Press Return");
     48  EventUtils.synthesizeKey("VK_RETURN");
     49 
     50  is(
     51    doc.activeElement.id,
     52    "span-1",
     53    "Using Enter did not advance the editor to the next focusable element"
     54  );
     55 
     56  info("Activate inplace editor on first span again");
     57  span1El.click();
     58 
     59  is(
     60    doc.activeElement.inplaceEditor.elt.id,
     61    "span-1",
     62    "Visible editable field is the one associated with first span"
     63  );
     64  assertFocusedElementInplaceEditorInput(doc);
     65 
     66  const isMacOS = Services.appinfo.OS === "Darwin";
     67  info(`Press ${isMacOS ? "Cmd" : "Ctrl"} + Enter`);
     68  EventUtils.synthesizeKey("VK_RETURN", {
     69    [isMacOS ? "metaKey" : "ctrlKey"]: true,
     70  });
     71 
     72  is(
     73    doc.activeElement.inplaceEditor.elt.id,
     74    "span-2",
     75    `Using ${
     76      isMacOS ? "Cmd" : "Ctrl"
     77    } + Enter did advance the editor to the next focusable element`
     78  );
     79 }
     80 
     81 function testStopOnTab(doc) {
     82  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
     83 
     84  info(`Create editable fields with "stopOnTab" set to true`);
     85  const options = {
     86    focusEditableFieldAfterApply: true,
     87    focusEditableFieldContainerSelector: "main",
     88    stopOnTab: true,
     89  };
     90  editableField({
     91    element: span1El,
     92    ...options,
     93  });
     94  editableField({
     95    element: span2El,
     96    ...options,
     97  });
     98 
     99  info("Activate inplace editor on first span");
    100  span1El.click();
    101 
    102  is(
    103    doc.activeElement.inplaceEditor.elt.id,
    104    "span-1",
    105    "Visible editable field is the one associated with first span"
    106  );
    107  assertFocusedElementInplaceEditorInput(doc);
    108 
    109  info("Press Tab");
    110  EventUtils.synthesizeKey("VK_TAB");
    111 
    112  is(
    113    doc.activeElement.id,
    114    "span-1",
    115    "Using Tab did not advance the editor to the next focusable element"
    116  );
    117 
    118  info(
    119    "Activate inplace editor on second span to check that Shift+Tab does work"
    120  );
    121  span2El.click();
    122 
    123  is(
    124    doc.activeElement.inplaceEditor.elt.id,
    125    "span-2",
    126    "Visible editable field is the one associated with second span"
    127  );
    128  assertFocusedElementInplaceEditorInput(doc);
    129 
    130  info("Press Shift+Tab");
    131  EventUtils.synthesizeKey("VK_TAB", {
    132    shiftKey: true,
    133  });
    134 
    135  is(
    136    doc.activeElement.inplaceEditor.elt.id,
    137    "span-1",
    138    `Using Shift + Tab did move the editor to the previous focusable element`
    139  );
    140 }
    141 
    142 function testStopOnShiftTab(doc) {
    143  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
    144  info(`Create editable fields with "stopOnShiftTab" set to true`);
    145  const options = {
    146    focusEditableFieldAfterApply: true,
    147    focusEditableFieldContainerSelector: "main",
    148    stopOnShiftTab: true,
    149  };
    150  editableField({
    151    element: span1El,
    152    ...options,
    153  });
    154  editableField({
    155    element: span2El,
    156    ...options,
    157  });
    158 
    159  info("Activate inplace editor on second span");
    160  span2El.click();
    161 
    162  is(
    163    doc.activeElement.inplaceEditor.elt.id,
    164    "span-2",
    165    "Visible editable field is the one associated with second span"
    166  );
    167  assertFocusedElementInplaceEditorInput(doc);
    168 
    169  info("Press Shift+Tab");
    170  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
    171 
    172  is(
    173    doc.activeElement.id,
    174    "span-2",
    175    "Using Shift+Tab did not move the editor to the previous focusable element"
    176  );
    177 
    178  info(
    179    "Activate inplace editor on first span to check that Tab is not impacted"
    180  );
    181  span1El.click();
    182 
    183  is(
    184    doc.activeElement.inplaceEditor.elt.id,
    185    "span-1",
    186    "Visible editable field is the one associated with first span"
    187  );
    188  assertFocusedElementInplaceEditorInput(doc);
    189 
    190  info("Press Tab");
    191  EventUtils.synthesizeKey("VK_TAB");
    192 
    193  is(
    194    doc.activeElement.inplaceEditor.elt.id,
    195    "span-2",
    196    `Using Tab did move the editor to the next focusable element`
    197  );
    198 }
    199 
    200 function setupMarkupAndCreateInplaceEditors(doc) {
    201  // For some reason <button> or <input> are not rendered, so let's use divs with
    202  // tabindex attribute to make them focusable.
    203  doc.body.innerHTML = `
    204      <main>
    205          <span id="span-1" tabindex=0>SPAN 1</span>
    206          <span id="span-2" tabindex=0>SPAN 2</span>
    207      <main>`;
    208 
    209  const span1El = doc.getElementById("span-1");
    210  const span2El = doc.getElementById("span-2");
    211  return { span1El, span2El };
    212 }
    213 
    214 function assertFocusedElementInplaceEditorInput(doc) {
    215  ok(
    216    doc.activeElement.matches("input.styleinspector-propertyeditor"),
    217    "inplace editor input is focused"
    218  );
    219 }