devtools/client/shared/test/browser_inplace-editor_focus_closest_editor.js

   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 }