1 files changed, 325 insertions, 0 deletions
diff --git a/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js b/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
new file mode 100644
index 0000000000..236d8f9fd7
--- /dev/null
+++ b/browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js
@@ -0,0 +1,325 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const kDevPanelID = "PanelUI-developer-tools";
+
+/**
+ * Test the behavior of key presses on various toolbar buttons.
+ */
+
+function waitForLocationChange() {
+  let promise = new Promise(resolve => {
+    let wpl = {
+      onLocationChange(aWebProgress, aRequest, aLocation) {
+        gBrowser.removeProgressListener(wpl);
+        resolve();
+      },
+    };
+    gBrowser.addProgressListener(wpl);
+  });
+  return promise;
+}
+
+add_task(async function setPref() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.toolbars.keyboard_navigation", true]],
+  });
+});
+
+// Test activation of the app menu button from the keyboard.
+// The app menu should appear and focus should move inside it.
+add_task(async function testAppMenuButtonPress() {
+  let button = document.getElementById("PanelUI-menu-button");
+  forceFocus(button);
+  let focused = BrowserTestUtils.waitForEvent(
+    window.PanelUI.mainView,
+    "focus",
+    true
+  );
+  EventUtils.synthesizeKey(" ");
+  await focused;
+  ok(true, "Focus inside app menu after toolbar button pressed");
+  let hidden = BrowserTestUtils.waitForEvent(
+    window.PanelUI.panel,
+    "popuphidden"
+  );
+  EventUtils.synthesizeKey("KEY_Escape");
+  await hidden;
+});
+
+// Test that the app menu doesn't open when a key other than space or enter is
+// pressed .
+add_task(async function testAppMenuButtonWrongKey() {
+  let button = document.getElementById("PanelUI-menu-button");
+  forceFocus(button);
+  EventUtils.synthesizeKey("KEY_Tab");
+  await TestUtils.waitForTick();
+  is(window.PanelUI.panel.state, "closed", "App menu is closed after tab");
+});
+
+// Test activation of the Library button from the keyboard.
+// The Library menu should appear and focus should move inside it.
+add_task(async function testLibraryButtonPress() {
+  CustomizableUI.addWidgetToArea("library-button", "nav-bar");
+  let button = document.getElementById("library-button");
+  forceFocus(button);
+  EventUtils.synthesizeKey(" ");
+  let view = document.getElementById("appMenu-libraryView");
+  let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
+  await focused;
+  ok(true, "Focus inside Library menu after toolbar button pressed");
+  let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);
+  view.closest("panel").hidePopup();
+  await hidden;
+  CustomizableUI.removeWidgetFromArea("library-button");
+});
+
+// Test activation of the Developer button from the keyboard.
+// This is a customizable widget of type "view".
+// The Developer menu should appear and focus should move inside it.
+add_task(async function testDeveloperButtonPress() {
+  CustomizableUI.addWidgetToArea(
+    "developer-button",
+    CustomizableUI.AREA_NAVBAR
+  );
+  let button = document.getElementById("developer-button");
+  forceFocus(button);
+  EventUtils.synthesizeKey(" ");
+  let view = document.getElementById(kDevPanelID);
+  let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
+  await focused;
+  ok(true, "Focus inside Developer menu after toolbar button pressed");
+  let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);
+  view.closest("panel").hidePopup();
+  await hidden;
+  CustomizableUI.reset();
+});
+
+// Test that the Developer menu doesn't open when a key other than space or
+// enter is pressed .
+add_task(async function testDeveloperButtonWrongKey() {
+  CustomizableUI.addWidgetToArea(
+    "developer-button",
+    CustomizableUI.AREA_NAVBAR
+  );
+  let button = document.getElementById("developer-button");
+  forceFocus(button);
+  EventUtils.synthesizeKey("KEY_Tab");
+  await TestUtils.waitForTick();
+  let panel = document.getElementById(kDevPanelID).closest("panel");
+  ok(!panel || panel.state == "closed", "Developer menu not open after tab");
+  CustomizableUI.reset();
+});
+
+// Test activation of the Page actions button from the keyboard.
+// The Page Actions menu should appear and focus should move inside it.
+add_task(async function testPageActionsButtonPress() {
+  // The page actions button is not normally visible, so we must
+  // unhide it.
+  BrowserPageActions.mainButtonNode.style.visibility = "visible";
+  registerCleanupFunction(() => {
+    BrowserPageActions.mainButtonNode.style.removeProperty("visibility");
+  });
+  await BrowserTestUtils.withNewTab("https://example.com", async function() {
+    let button = document.getElementById("pageActionButton");
+    forceFocus(button);
+    EventUtils.synthesizeKey(" ");
+    let view = document.getElementById("pageActionPanelMainView");
+    let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
+    await focused;
+    ok(true, "Focus inside Page Actions menu after toolbar button pressed");
+    let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);
+    view.closest("panel").hidePopup();
+    await hidden;
+  });
+});
+
+// Test activation of the Back and Forward buttons from the keyboard.
+add_task(async function testBackForwardButtonPress() {
+  await BrowserTestUtils.withNewTab("https://example.com/1", async function(
+    aBrowser
+  ) {
+    BrowserTestUtils.loadURI(aBrowser, "https://example.com/2");
+
+    await BrowserTestUtils.browserLoaded(aBrowser);
+    let backButton = document.getElementById("back-button");
+    forceFocus(backButton);
+    let onLocationChange = waitForLocationChange();
+    EventUtils.synthesizeKey(" ");
+    await onLocationChange;
+    ok(true, "Location changed after back button pressed");
+
+    let forwardButton = document.getElementById("forward-button");
+    forceFocus(forwardButton);
+    onLocationChange = waitForLocationChange();
+    EventUtils.synthesizeKey(" ");
+    await onLocationChange;
+    ok(true, "Location changed after forward button pressed");
+  });
+});
+
+// Test activation of the Reload button from the keyboard.
+// This is a toolbarbutton with a click handler and no command handler, but
+// the toolbar keyboard navigation code should handle keyboard activation.
+add_task(async function testReloadButtonPress() {
+  await BrowserTestUtils.withNewTab("https://example.com/1", async function(
+    aBrowser
+  ) {
+    let button = document.getElementById("reload-button");
+    info("Waiting for button to be enabled.");
+    await TestUtils.waitForCondition(() => !button.disabled);
+    let loaded = BrowserTestUtils.browserLoaded(aBrowser);
+    info("Focusing button");
+    forceFocus(button);
+    info("Pressing space on the button");
+    EventUtils.synthesizeKey(" ");
+    info("Waiting for load.");
+    await loaded;
+    ok(true, "Page loaded after Reload button pressed");
+  });
+});
+
+// Test activation of the Sidebars button from the keyboard.
+// This is a toolbarbutton with a command handler.
+add_task(async function testSidebarsButtonPress() {
+  CustomizableUI.addWidgetToArea("sidebar-button", "nav-bar");
+  let button = document.getElementById("sidebar-button");
+  ok(!button.checked, "Sidebars button not checked at start of test");
+  let sidebarBox = document.getElementById("sidebar-box");
+  ok(sidebarBox.hidden, "Sidebar hidden at start of test");
+  forceFocus(button);
+  EventUtils.synthesizeKey(" ");
+  await TestUtils.waitForCondition(() => button.checked);
+  ok(true, "Sidebars button checked after press");
+  ok(!sidebarBox.hidden, "Sidebar visible after press");
+  // Make sure the sidebar is fully loaded before we hide it.
+  // Otherwise, the unload event might call JS which isn't loaded yet.
+  // We can't use BrowserTestUtils.browserLoaded because it fails on non-tab
+  // docs. Instead, wait for something in the JS script.
+  let sidebarWin = document.getElementById("sidebar").contentWindow;
+  await TestUtils.waitForCondition(() => sidebarWin.PlacesUIUtils);
+  forceFocus(button);
+  EventUtils.synthesizeKey(" ");
+  await TestUtils.waitForCondition(() => !button.checked);
+  ok(true, "Sidebars button not checked after press");
+  ok(sidebarBox.hidden, "Sidebar hidden after press");
+  CustomizableUI.removeWidgetFromArea("sidebar-button");
+});
+
+// Test activation of the Bookmark this page button from the keyboard.
+// This is an image with a click handler on its parent and no command handler,
+// but the toolbar keyboard navigation code should handle keyboard activation.
+add_task(async function testBookmarkButtonPress() {
+  await BrowserTestUtils.withNewTab("https://example.com", async function(
+    aBrowser
+  ) {
+    let button = document.getElementById("star-button-box");
+    forceFocus(button);
+    StarUI._createPanelIfNeeded();
+    let panel = document.getElementById("editBookmarkPanel");
+    let focused = BrowserTestUtils.waitForEvent(panel, "focus", true);
+    // The button ignores activation while the bookmarked status is being
+    // updated. So, wait for it to finish updating.
+    await TestUtils.waitForCondition(
+      () => BookmarkingUI.status != BookmarkingUI.STATUS_UPDATING
+    );
+    EventUtils.synthesizeKey(" ");
+    await focused;
+    ok(true, "Focus inside edit bookmark panel after Bookmark button pressed");
+    let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
+    EventUtils.synthesizeKey("KEY_Escape");
+    await hidden;
+  });
+});
+
+// Test activation of the Bookmarks Menu button from the keyboard.
+// This is a button with type="menu".
+// The Bookmarks Menu should appear.
+add_task(async function testBookmarksmenuButtonPress() {
+  CustomizableUI.addWidgetToArea(
+    "bookmarks-menu-button",
+    CustomizableUI.AREA_NAVBAR
+  );
+  let button = document.getElementById("bookmarks-menu-button");
+  forceFocus(button);
+  let menu = document.getElementById("BMB_bookmarksPopup");
+  let shown = BrowserTestUtils.waitForEvent(menu, "popupshown");
+  EventUtils.synthesizeKey(" ");
+  await shown;
+  ok(true, "Bookmarks Menu shown after toolbar button pressed");
+  let hidden = BrowserTestUtils.waitForEvent(menu, "popuphidden");
+  menu.hidePopup();
+  await hidden;
+  CustomizableUI.reset();
+});
+
+// Test activation of the overflow button from the keyboard.
+// The overflow menu should appear and focus should move inside it.
+add_task(async function testOverflowButtonPress() {
+  // Move something to the overflow menu to make the button appear.
+  CustomizableUI.addWidgetToArea(
+    "developer-button",
+    CustomizableUI.AREA_FIXED_OVERFLOW_PANEL
+  );
+  let button = document.getElementById("nav-bar-overflow-button");
+  forceFocus(button);
+  let view = document.getElementById("widget-overflow-mainView");
+  let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
+  EventUtils.synthesizeKey(" ");
+  await focused;
+  ok(true, "Focus inside overflow menu after toolbar button pressed");
+  let panel = document.getElementById("widget-overflow");
+  let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
+  panel.hidePopup();
+  await hidden;
+  CustomizableUI.reset();
+});
+
+// Test activation of the Downloads button from the keyboard.
+// The Downloads panel should appear and focus should move inside it.
+add_task(async function testDownloadsButtonPress() {
+  DownloadsButton.unhide();
+  let button = document.getElementById("downloads-button");
+  forceFocus(button);
+  let panel = document.getElementById("downloadsPanel");
+  let focused = BrowserTestUtils.waitForEvent(panel, "focus", true);
+  EventUtils.synthesizeKey(" ");
+  await focused;
+  ok(true, "Focus inside Downloads panel after toolbar button pressed");
+  let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
+  panel.hidePopup();
+  await hidden;
+  DownloadsButton.hide();
+});
+
+// Test activation of the Save to Pocket button from the keyboard.
+// This is a customizable widget button which shows an popup panel
+// with a browser element to embed the pocket UI into it.
+// The Pocket panel should appear and focus should move inside it.
+add_task(async function testPocketButtonPress() {
+  await BrowserTestUtils.withNewTab("https://example.com", async function(
+    aBrowser
+  ) {
+    let button = document.getElementById("save-to-pocket-button");
+    forceFocus(button);
+    // The panel is created on the fly, so we can't simply wait for focus
+    // inside it.
+    let showing = BrowserTestUtils.waitForEvent(document, "popupshowing", true);
+    EventUtils.synthesizeKey(" ");
+    let event = await showing;
+    let panel = event.target;
+    is(panel.id, "customizationui-widget-panel");
+    let focused = BrowserTestUtils.waitForEvent(panel, "focus", true);
+    await focused;
+    is(
+      document.activeElement.tagName,
+      "browser",
+      "Focus inside Pocket panel after Bookmark button pressed"
+    );
+    let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
+    EventUtils.synthesizeKey("KEY_Escape");
+    await hidden;
+  });
+});