tor-browser

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

browser_inplace-editor_focus_closest_editor.js (4895B)

      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 behavior with focusEditableFieldAfterApply
     10 // and focusEditableFieldContainerSelector options
     11 
     12 add_task(async function () {
     13  await addTab(
     14    "data:text/html;charset=utf-8,inline editor focusEditableFieldAfterApply"
     15  );
     16  const { host, doc } = await createHost();
     17 
     18  testFocusNavigationWithMultipleEditor(doc);
     19  testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(doc);
     20  testMissingFocusEditableFieldContainerSelector(doc);
     21 
     22  host.destroy();
     23  gBrowser.removeCurrentTab();
     24 });
     25 
     26 function testFocusNavigationWithMultipleEditor(doc) {
     27  // For some reason <button> or <input> are not rendered, so let's use divs with
     28  // tabindex attribute to make them focusable.
     29  doc.body.innerHTML = `
     30      <main>
     31        <header>
     32          <div role=button tabindex=0 id="header-button">HEADER</div>
     33        </header>
     34        <section>
     35          <span id="span-1" tabindex=0>SPAN 1</span>
     36          <div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
     37          <p>
     38            <span id="span-2" tabindex=0>SPAN 2</span>
     39            <div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
     40          </p>
     41          <span id="span-3" tabindex=0>SPAN 3</span>
     42          <div role=button tabindex=0 id="section-button-3">BUTTON 3</div>
     43        </section>
     44        <sidebar>
     45          <div role=button tabindex=0 id="sidebar-button">SIDEBAR</div>
     46        </sidebar>
     47      <main>`;
     48 
     49  const span1 = doc.getElementById("span-1");
     50  const span2 = doc.getElementById("span-2");
     51  const span3 = doc.getElementById("span-3");
     52 
     53  info("Create 3 editable fields for the 3 spans inside the main element");
     54  const options = {
     55    focusEditableFieldAfterApply: true,
     56    focusEditableFieldContainerSelector: "main",
     57  };
     58  editableField({
     59    element: span1,
     60    ...options,
     61  });
     62  editableField({
     63    element: span2,
     64    ...options,
     65  });
     66  editableField({
     67    element: span3,
     68    ...options,
     69  });
     70 
     71  span1.click();
     72 
     73  is(
     74    doc.activeElement.inplaceEditor.elt.id,
     75    "span-1",
     76    "Visible editable field is the one associated with span-1"
     77  );
     78  assertFocusedElementInplaceEditorInput(doc);
     79 
     80  EventUtils.sendKey("Tab");
     81 
     82  is(
     83    doc.activeElement.inplaceEditor.elt.id,
     84    "span-2",
     85    "Using Tab moved focus to span-2 editable field"
     86  );
     87  assertFocusedElementInplaceEditorInput(doc);
     88 
     89  EventUtils.sendKey("Tab");
     90 
     91  is(
     92    doc.activeElement.inplaceEditor.elt.id,
     93    "span-3",
     94    "Using Tab moved focus to span-3 editable field"
     95  );
     96  assertFocusedElementInplaceEditorInput(doc);
     97 
     98  EventUtils.sendKey("Tab");
     99 
    100  is(
    101    doc.activeElement.id,
    102    "sidebar-button",
    103    "Using Tab moved focus outside of <main>"
    104  );
    105 }
    106 
    107 function testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(
    108  doc
    109 ) {
    110  // For some reason <button> or <input> are not rendered, so let's use divs with
    111  // tabindex attribute to make them focusable.
    112  doc.body.innerHTML = `
    113      <main>
    114        <span id="span-1" tabindex=0>SPAN 1</span>
    115        <div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
    116        <span id="span-2" tabindex=0>SPAN 2</span>
    117        <div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
    118      <main>`;
    119 
    120  const span1 = doc.getElementById("span-1");
    121  const span2 = doc.getElementById("span-2");
    122 
    123  info(
    124    "Create editable fields for the 2 spans, but pass a focusEditableFieldContainerSelector that does not match any element"
    125  );
    126  const options = {
    127    focusEditableFieldAfterApply: true,
    128    focusEditableFieldContainerSelector: ".does-not-exist",
    129  };
    130  editableField({
    131    element: span1,
    132    ...options,
    133  });
    134  editableField({
    135    element: span2,
    136    ...options,
    137  });
    138 
    139  span1.click();
    140 
    141  is(
    142    doc.activeElement.inplaceEditor.elt.id,
    143    "span-1",
    144    "Visible editable field is the one associated with span-1"
    145  );
    146  assertFocusedElementInplaceEditorInput(doc);
    147 
    148  EventUtils.sendKey("Tab");
    149 
    150  is(
    151    doc.activeElement.id,
    152    "section-button-1",
    153    "Using Tab moved focus to section-button-1, non-editable field"
    154  );
    155  ok(!doc.querySelector("input"), "There's no editable input displayed");
    156 }
    157 
    158 function testMissingFocusEditableFieldContainerSelector(doc) {
    159  doc.body.innerHTML = "";
    160  const element = createSpan(doc);
    161  editableField({
    162    element,
    163    focusEditableFieldAfterApply: true,
    164  });
    165 
    166  element.click();
    167  is(
    168    element.style.display,
    169    "inline-block",
    170    "The original <span> was not hidden"
    171  );
    172  ok(!doc.querySelector("input"), "No input was created");
    173 }
    174 
    175 function assertFocusedElementInplaceEditorInput(doc) {
    176  ok(
    177    doc.activeElement.matches("input.styleinspector-propertyeditor"),
    178    "inplace editor input is focused"
    179  );
    180 }