1 files changed, 169 insertions, 0 deletions
diff --git a/browser/components/customizableui/test/browser_PanelMultiView_focus.js b/browser/components/customizableui/test/browser_PanelMultiView_focus.js
new file mode 100644
index 0000000000..869b5cc808
--- /dev/null
+++ b/browser/components/customizableui/test/browser_PanelMultiView_focus.js
@@ -0,0 +1,169 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test the focus behavior when opening PanelViews.
+ */
+
+let gAnchor;
+let gPanel;
+let gPanelMultiView;
+let gMainView;
+let gMainButton;
+let gMainSubButton;
+let gSubView;
+let gSubButton;
+
+function createWith(doc, tag, props) {
+  let el = doc.createXULElement(tag);
+  for (let prop in props) {
+    el.setAttribute(prop, props[prop]);
+  }
+  return el;
+}
+
+add_setup(async function () {
+  let navBar = document.getElementById("nav-bar");
+  gAnchor = document.createXULElement("toolbarbutton");
+  // Must be focusable in order for key presses to work.
+  gAnchor.style["-moz-user-focus"] = "normal";
+  navBar.appendChild(gAnchor);
+  let onPress = event =>
+    PanelMultiView.openPopup(gPanel, gAnchor, {
+      triggerEvent: event,
+    });
+  gAnchor.addEventListener("keypress", onPress);
+  gAnchor.addEventListener("click", onPress);
+  gPanel = document.createXULElement("panel");
+  navBar.appendChild(gPanel);
+  gPanelMultiView = document.createXULElement("panelmultiview");
+  gPanelMultiView.setAttribute("mainViewId", "testMainView");
+  gPanel.appendChild(gPanelMultiView);
+
+  gMainView = document.createXULElement("panelview");
+  gMainView.id = "testMainView";
+  gPanelMultiView.appendChild(gMainView);
+  gMainButton = createWith(document, "button", { label: "gMainButton" });
+  gMainView.appendChild(gMainButton);
+  gMainSubButton = createWith(document, "button", { label: "gMainSubButton" });
+  gMainView.appendChild(gMainSubButton);
+  gMainSubButton.addEventListener("command", () =>
+    gPanelMultiView.showSubView("testSubView", gMainSubButton)
+  );
+
+  gSubView = document.createXULElement("panelview");
+  gSubView.id = "testSubView";
+  gPanelMultiView.appendChild(gSubView);
+  gSubButton = createWith(document, "button", { label: "gSubButton" });
+  gSubView.appendChild(gSubButton);
+
+  registerCleanupFunction(() => {
+    gAnchor.remove();
+    gPanel.remove();
+  });
+});
+
+// Activate the main view by pressing a key. Focus should be moved inside.
+add_task(async function testMainViewByKeypress() {
+  gAnchor.focus();
+  await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () =>
+    EventUtils.synthesizeKey(" ")
+  );
+  Assert.equal(
+    document.activeElement,
+    gMainButton,
+    "Focus on button in main view"
+  );
+  await gCUITestUtils.hidePanelMultiView(gPanel, () =>
+    PanelMultiView.hidePopup(gPanel)
+  );
+});
+
+// Activate the main view by clicking the mouse. Focus should not be moved
+// inside.
+add_task(async function testMainViewByClick() {
+  await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () =>
+    gAnchor.click()
+  );
+  Assert.notEqual(
+    document.activeElement,
+    gMainButton,
+    "Focus not on button in main view"
+  );
+  await gCUITestUtils.hidePanelMultiView(gPanel, () =>
+    PanelMultiView.hidePopup(gPanel)
+  );
+});
+
+// Activate the subview by pressing a key. Focus should be moved to the first
+// button after the Back button.
+add_task(async function testSubViewByKeypress() {
+  await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () =>
+    gAnchor.click()
+  );
+  while (document.activeElement != gMainSubButton) {
+    EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  }
+  let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown");
+  EventUtils.synthesizeKey(" ");
+  await shown;
+  Assert.equal(
+    document.activeElement,
+    gSubButton,
+    "Focus on first button after Back button in subview"
+  );
+  await gCUITestUtils.hidePanelMultiView(gPanel, () =>
+    PanelMultiView.hidePopup(gPanel)
+  );
+});
+
+// Activate the subview by clicking the mouse. Focus should not be moved
+// inside.
+add_task(async function testSubViewByClick() {
+  await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () =>
+    gAnchor.click()
+  );
+  let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown");
+  gMainSubButton.click();
+  await shown;
+  let backButton = gSubView.querySelector(".subviewbutton-back");
+  Assert.notEqual(
+    document.activeElement,
+    backButton,
+    "Focus not on Back button in subview"
+  );
+  Assert.notEqual(
+    document.activeElement,
+    gSubButton,
+    "Focus not on button after Back button in subview"
+  );
+  await gCUITestUtils.hidePanelMultiView(gPanel, () =>
+    PanelMultiView.hidePopup(gPanel)
+  );
+});
+
+// Test that focus is restored when going back to a previous view.
+add_task(async function testBackRestoresFocus() {
+  await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () =>
+    gAnchor.click()
+  );
+  while (document.activeElement != gMainSubButton) {
+    EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  }
+  let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown");
+  EventUtils.synthesizeKey(" ");
+  await shown;
+  shown = BrowserTestUtils.waitForEvent(gMainView, "ViewShown");
+  EventUtils.synthesizeKey("KEY_ArrowLeft");
+  await shown;
+  Assert.equal(
+    document.activeElement,
+    gMainSubButton,
+    "Focus on sub button in main view"
+  );
+  await gCUITestUtils.hidePanelMultiView(gPanel, () =>
+    PanelMultiView.hidePopup(gPanel)
+  );
+});