1 files changed, 219 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_inplace-editor_stop_on_key.js b/devtools/client/shared/test/browser_inplace-editor_stop_on_key.js
new file mode 100644
index 0000000000..50ab5631ae
--- /dev/null
+++ b/devtools/client/shared/test/browser_inplace-editor_stop_on_key.js
@@ -0,0 +1,219 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_inplace_editor.js */
+
+"use strict";
+
+loadHelperScript("helper_inplace_editor.js");
+
+// Test the inplace-editor stopOnX options behavior
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,inline editor stopOnX");
+  const { host, doc } = await createHost();
+
+  testStopOnReturn(doc);
+  testStopOnTab(doc);
+  testStopOnShiftTab(doc);
+
+  host.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function testStopOnReturn(doc) {
+  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
+
+  info(`Create an editable field with "stopOnReturn" set to true`);
+  editableField({
+    element: span1El,
+    focusEditableFieldAfterApply: true,
+    focusEditableFieldContainerSelector: "main",
+    stopOnReturn: true,
+  });
+  editableField({
+    element: span2El,
+  });
+
+  info("Activate inplace editor on first span");
+  span1El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-1",
+    "Visible editable field is the one associated with first span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  info("Press Return");
+  EventUtils.synthesizeKey("VK_RETURN");
+
+  is(
+    doc.activeElement.id,
+    "span-1",
+    "Using Enter did not advance the editor to the next focusable element"
+  );
+
+  info("Activate inplace editor on first span again");
+  span1El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-1",
+    "Visible editable field is the one associated with first span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  const isMacOS = Services.appinfo.OS === "Darwin";
+  info(`Press ${isMacOS ? "Cmd" : "Ctrl"} + Enter`);
+  EventUtils.synthesizeKey("VK_RETURN", {
+    [isMacOS ? "metaKey" : "ctrlKey"]: true,
+  });
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-2",
+    `Using ${
+      isMacOS ? "Cmd" : "Ctrl"
+    } + Enter did advance the editor to the next focusable element`
+  );
+}
+
+function testStopOnTab(doc) {
+  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
+
+  info(`Create editable fields with "stopOnTab" set to true`);
+  const options = {
+    focusEditableFieldAfterApply: true,
+    focusEditableFieldContainerSelector: "main",
+    stopOnTab: true,
+  };
+  editableField({
+    element: span1El,
+    ...options,
+  });
+  editableField({
+    element: span2El,
+    ...options,
+  });
+
+  info("Activate inplace editor on first span");
+  span1El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-1",
+    "Visible editable field is the one associated with first span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  info("Press Tab");
+  EventUtils.synthesizeKey("VK_TAB");
+
+  is(
+    doc.activeElement.id,
+    "span-1",
+    "Using Tab did not advance the editor to the next focusable element"
+  );
+
+  info(
+    "Activate inplace editor on second span to check that Shift+Tab does work"
+  );
+  span2El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-2",
+    "Visible editable field is the one associated with second span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  info("Press Shift+Tab");
+  EventUtils.synthesizeKey("VK_TAB", {
+    shiftKey: true,
+  });
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-1",
+    `Using Shift + Tab did move the editor to the previous focusable element`
+  );
+}
+
+function testStopOnShiftTab(doc) {
+  const { span1El, span2El } = setupMarkupAndCreateInplaceEditors(doc);
+  info(`Create editable fields with "stopOnShiftTab" set to true`);
+  const options = {
+    focusEditableFieldAfterApply: true,
+    focusEditableFieldContainerSelector: "main",
+    stopOnShiftTab: true,
+  };
+  editableField({
+    element: span1El,
+    ...options,
+  });
+  editableField({
+    element: span2El,
+    ...options,
+  });
+
+  info("Activate inplace editor on second span");
+  span2El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-2",
+    "Visible editable field is the one associated with second span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  info("Press Shift+Tab");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
+
+  is(
+    doc.activeElement.id,
+    "span-2",
+    "Using Shift+Tab did not move the editor to the previous focusable element"
+  );
+
+  info(
+    "Activate inplace editor on first span to check that Tab is not impacted"
+  );
+  span1El.click();
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-1",
+    "Visible editable field is the one associated with first span"
+  );
+  assertFocusedElementInplaceEditorInput(doc);
+
+  info("Press Tab");
+  EventUtils.synthesizeKey("VK_TAB");
+
+  is(
+    doc.activeElement.inplaceEditor.elt.id,
+    "span-2",
+    `Using Tab did move the editor to the next focusable element`
+  );
+}
+
+function setupMarkupAndCreateInplaceEditors(doc) {
+  // For some reason <button> or <input> are not rendered, so let's use divs with
+  // tabindex attribute to make them focusable.
+  doc.body.innerHTML = `
+      <main>
+          <span id="span-1" tabindex=0>SPAN 1</span>
+          <span id="span-2" tabindex=0>SPAN 2</span>
+      <main>`;
+
+  const span1El = doc.getElementById("span-1");
+  const span2El = doc.getElementById("span-2");
+  return { span1El, span2El };
+}
+
+function assertFocusedElementInplaceEditorInput(doc) {
+  ok(
+    doc.activeElement.matches("input.styleinspector-propertyeditor"),
+    "inplace editor input is focused"
+  );
+}