Bug 1775712 - make browser_toolbarButtonKeyPress.js more reliable by having forceFocus run a callback before removing focusability, r=mak

Differential Revision: https://phabricator.services.mozilla.com/D181444

browser/base/content/test/keyboard/browser.ini

@@ -9,10 +9,6 @@ support-files = file_empty.html
 https_first_disabled = true
 support-files = focusableContent.html
 [browser_toolbarButtonKeyPress.js]
-skip-if = 
-   os == "linux" #Bug 1532501
-   os == "win" && asan # Bug 1775712
-   os == "win" && os_version == "6.1" # Skip on Azure - frequent failure
 [browser_toolbarKeyNav.js]
 support-files = !/browser/base/content/test/permissions/permissions.html
 skip-if =

browser/base/content/test/keyboard/browser_popup_keyNav.js

@@ -36,8 +36,9 @@ add_task(async function test_popup_keynav() {
     });
     let win = await windowPromise;
     let hamburgerButton = win.document.getElementById("PanelUI-menu-button");
-    forceFocus(hamburgerButton);
-    await expectFocusAfterKey("Tab", win.gBrowser.selectedBrowser, false, win);
+    await focusAndActivateElement(hamburgerButton, () =>
+      expectFocusAfterKey("Tab", win.gBrowser.selectedBrowser, false, win)
+    );
     // Focus the button inside the webpage.
     EventUtils.synthesizeKey("KEY_Tab", {}, win);
     // Focus the first item in the URL bar

browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js

@@ -32,13 +32,12 @@ add_task(async function setPref() {
 // 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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await focused;
   ok(true, "Focus inside app menu after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(
@@ -53,8 +52,9 @@ add_task(async function testAppMenuButtonPress() {
 // pressed .
 add_task(async function testAppMenuButtonWrongKey() {
   let button = document.getElementById("PanelUI-menu-button");
-  forceFocus(button);
-  EventUtils.synthesizeKey("KEY_Tab");
+  await focusAndActivateElement(button, () =>
+    EventUtils.synthesizeKey("KEY_Tab")
+  );
   await TestUtils.waitForTick();
   is(window.PanelUI.panel.state, "closed", "App menu is closed after tab");
 });
@@ -64,8 +64,7 @@ add_task(async function testAppMenuButtonWrongKey() {
 add_task(async function testLibraryButtonPress() {
   CustomizableUI.addWidgetToArea("library-button", "nav-bar");
   let button = document.getElementById("library-button");
-  forceFocus(button);
-  EventUtils.synthesizeKey(" ");
+  await focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   let view = document.getElementById("appMenu-libraryView");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
   await focused;
@@ -85,8 +84,7 @@ add_task(async function testDeveloperButtonPress() {
     CustomizableUI.AREA_NAVBAR
   );
   let button = document.getElementById("developer-button");
-  forceFocus(button);
-  EventUtils.synthesizeKey(" ");
+  await focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   let view = document.getElementById(kDevPanelID);
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
   await focused;
@@ -105,8 +103,9 @@ add_task(async function testDeveloperButtonWrongKey() {
     CustomizableUI.AREA_NAVBAR
   );
   let button = document.getElementById("developer-button");
-  forceFocus(button);
-  EventUtils.synthesizeKey("KEY_Tab");
+  await focusAndActivateElement(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");
@@ -124,8 +123,7 @@ add_task(async function testPageActionsButtonPress() {
   });
   await BrowserTestUtils.withNewTab("https://example.com", async function () {
     let button = document.getElementById("pageActionButton");
-    forceFocus(button);
-    EventUtils.synthesizeKey(" ");
+    await focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
     let view = document.getElementById("pageActionPanelMainView");
     let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
     await focused;
@@ -145,16 +143,18 @@ add_task(async function testBackForwardButtonPress() {
 
       await BrowserTestUtils.browserLoaded(aBrowser);
       let backButton = document.getElementById("back-button");
-      forceFocus(backButton);
       let onLocationChange = waitForLocationChange();
-      EventUtils.synthesizeKey(" ");
+      await focusAndActivateElement(backButton, () =>
+        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 focusAndActivateElement(forwardButton, () =>
+        EventUtils.synthesizeKey(" ")
+      );
       await onLocationChange;
       ok(true, "Location changed after forward button pressed");
     }
@@ -168,14 +168,15 @@ 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.");
+      let button = document.getElementById("reload-button");
       await TestUtils.waitForCondition(() => !button.disabled);
       let loaded = BrowserTestUtils.browserLoaded(aBrowser);
       info("Focusing button");
-      forceFocus(button);
-      info("Pressing space on the button");
-      EventUtils.synthesizeKey(" ");
+      await focusAndActivateElement(button, () => {
+        info("Pressing space on the button");
+        EventUtils.synthesizeKey(" ");
+      });
       info("Waiting for load.");
       await loaded;
       ok(true, "Page loaded after Reload button pressed");
@@ -191,8 +192,7 @@ add_task(async function testSidebarsButtonPress() {
   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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await TestUtils.waitForCondition(() => button.checked);
   ok(true, "Sidebars button checked after press");
   ok(!sidebarBox.hidden, "Sidebar visible after press");
@@ -202,8 +202,7 @@ add_task(async function testSidebarsButtonPress() {
   // 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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await TestUtils.waitForCondition(() => !button.checked);
   ok(true, "Sidebars button not checked after press");
   ok(sidebarBox.hidden, "Sidebar hidden after press");
@@ -218,7 +217,6 @@ add_task(async function testBookmarkButtonPress() {
     "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);
@@ -227,7 +225,9 @@ add_task(async function testBookmarkButtonPress() {
       await TestUtils.waitForCondition(
         () => BookmarkingUI.status != BookmarkingUI.STATUS_UPDATING
       );
-      EventUtils.synthesizeKey(" ");
+      await focusAndActivateElement(button, () =>
+        EventUtils.synthesizeKey(" ")
+      );
       await focused;
       ok(
         true,
@@ -249,10 +249,9 @@ add_task(async function testBookmarksmenuButtonPress() {
     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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await shown;
   ok(true, "Bookmarks Menu shown after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(menu, "popuphidden");
@@ -270,10 +269,9 @@ add_task(async function testOverflowButtonPress() {
     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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await focused;
   ok(true, "Focus inside overflow menu after toolbar button pressed");
   let panel = document.getElementById("widget-overflow");
@@ -288,10 +286,9 @@ add_task(async function testOverflowButtonPress() {
 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 focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   await focused;
   ok(true, "Focus inside Downloads panel after toolbar button pressed");
   let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
@@ -309,7 +306,6 @@ add_task(async function testPocketButtonPress() {
     "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(
@@ -317,7 +313,9 @@ add_task(async function testPocketButtonPress() {
         "popupshowing",
         true
       );
-      EventUtils.synthesizeKey(" ");
+      await focusAndActivateElement(button, () =>
+        EventUtils.synthesizeKey(" ")
+      );
       let event = await showing;
       let panel = event.target;
       is(panel.id, "customizationui-widget-panel");

browser/base/content/test/keyboard/browser_toolbarKeyNav.js

@@ -366,8 +366,7 @@ add_task(async function testArrowsOverflowButton() {
 add_task(async function testArrowsInPanelMultiView() {
   AddOldMenuSideButtons();
   let button = document.getElementById("library-button");
-  forceFocus(button);
-  EventUtils.synthesizeKey(" ");
+  await focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   let view = document.getElementById("appMenu-libraryView");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
   let focusEvt = await focused;
@@ -427,8 +426,9 @@ add_task(async function testArrowsBookmarksOverflowButton() {
     }
     lastVisible = item;
   }
-  forceFocus(lastVisible);
-  await expectFocusAfterKey("ArrowRight", "PlacesChevron");
+  await focusAndActivateElement(lastVisible, () =>
+    expectFocusAfterKey("ArrowRight", "PlacesChevron")
+  );
   setToolbarVisibility(toolbar, false, true, false);
 });
 
@@ -530,10 +530,9 @@ add_task(async function testCharacterNavigation() {
 add_task(async function testCharacterInPanelMultiView() {
   AddOldMenuSideButtons();
   let button = document.getElementById("library-button");
-  forceFocus(button);
   let view = document.getElementById("appMenu-libraryView");
   let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
-  EventUtils.synthesizeKey(" ");
+  await focusAndActivateElement(button, () => EventUtils.synthesizeKey(" "));
   let focusEvt = await focused;
   ok(true, "Focus inside Library menu after toolbar button pressed");
   EventUtils.synthesizeKey("s");

browser/base/content/test/keyboard/head.js

@@ -9,11 +9,17 @@
  * focus them, which is undesirable. Therefore, they're only made focusable
  * when a user is navigating with the keyboard. This function forces focus as
  * is done during toolbar keyboard navigation.
+ * It then runs the `activateMethod` passed in, and restores usual focus state
+ * afterwards. `activateMethod` can be async.
  */
-function forceFocus(aElem) {
-  aElem.setAttribute("tabindex", "-1");
-  aElem.focus();
-  aElem.removeAttribute("tabindex");
+async function focusAndActivateElement(elem, activateMethod) {
+  elem.setAttribute("tabindex", "-1");
+  elem.focus();
+  try {
+    await activateMethod(elem);
+  } finally {
+    elem.removeAttribute("tabindex");
+  }
 }
 
 async function expectFocusAfterKey(