devtools/client/shared/test/browser_inplace-editor_stop_on_key.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 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 }