Bug 1393133 - wait for the overflow button to be visible before activating it in tests, r?jaws draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Thu, 24 Aug 2017 17:25:24 +0100
changeset 652223 7f59b2fce96b2a1671f76cf3dd5eaeddce1574f2
parent 651207 b911a4c97fde5d8bdeebfd5d0266ee9f7b9e59b2
child 728030 cdc681f64a2010e69f81132e333f2848097cf0cd
push id75995
push userbmo:gijskruitbosch+bugs@gmail.com
push dateThu, 24 Aug 2017 16:26:50 +0000
reviewersjaws
bugs1393133
milestone57.0a1
Bug 1393133 - wait for the overflow button to be visible before activating it in tests, r?jaws MozReview-Commit-ID: 58GGrPVufZ3
browser/components/customizableui/test/browser_1087303_button_fullscreen.js
browser/components/customizableui/test/browser_1087303_button_preferences.js
browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
browser/components/customizableui/test/browser_947914_button_addons.js
browser/components/customizableui/test/browser_947914_button_copy.js
browser/components/customizableui/test/browser_947914_button_cut.js
browser/components/customizableui/test/browser_947914_button_find.js
browser/components/customizableui/test/browser_947914_button_history.js
browser/components/customizableui/test/browser_947914_button_newPrivateWindow.js
browser/components/customizableui/test/browser_947914_button_newWindow.js
browser/components/customizableui/test/browser_947914_button_paste.js
browser/components/customizableui/test/browser_947914_button_print.js
browser/components/customizableui/test/browser_947914_button_zoomIn.js
browser/components/customizableui/test/browser_947914_button_zoomOut.js
browser/components/customizableui/test/browser_947914_button_zoomReset.js
browser/components/customizableui/test/browser_967000_button_charEncoding.js
browser/components/customizableui/test/browser_967000_button_feeds.js
browser/components/customizableui/test/browser_973641_button_addon.js
browser/components/customizableui/test/browser_981305_separator_insertion.js
browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
browser/components/customizableui/test/browser_987640_charEncoding.js
browser/components/customizableui/test/browser_989751_subviewbutton_class.js
browser/components/customizableui/test/browser_customization_context_menus.js
browser/components/customizableui/test/browser_remote_tabs_button.js
browser/components/customizableui/test/browser_synced_tabs_menu.js
browser/components/customizableui/test/head.js
--- a/browser/components/customizableui/test/browser_1087303_button_fullscreen.js
+++ b/browser/components/customizableui/test/browser_1087303_button_fullscreen.js
@@ -6,16 +6,18 @@
 "use strict";
 
 add_task(async function() {
   info("Check fullscreen button existence and functionality");
 
   CustomizableUI.addWidgetToArea("fullscreen-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
 
   let fullscreenButton = document.getElementById("fullscreen-button");
   ok(fullscreenButton, "Fullscreen button appears in Panel Menu");
 
   let fullscreenPromise = promiseFullscreenChange();
   fullscreenButton.click();
   await fullscreenPromise;
--- a/browser/components/customizableui/test/browser_1087303_button_preferences.js
+++ b/browser/components/customizableui/test/browser_1087303_button_preferences.js
@@ -7,16 +7,18 @@
 
 var newTab = null;
 
 add_task(async function() {
   info("Check preferences button existence and functionality");
   CustomizableUI.addWidgetToArea("preferences-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let preferencesButton = document.getElementById("preferences-button");
   ok(preferencesButton, "Preferences button exists in Panel Menu");
   preferencesButton.click();
 
   newTab = gBrowser.selectedTab;
--- a/browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
+++ b/browser/components/customizableui/test/browser_885052_customize_mode_observers_disabed.js
@@ -7,16 +7,19 @@
 function isFullscreenSizeMode() {
   let sizemode = document.documentElement.getAttribute("sizemode");
   return sizemode == "fullscreen";
 }
 
 // Observers should be disabled when in customization mode.
 add_task(async function() {
   CustomizableUI.addWidgetToArea("fullscreen-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+  await waitForOverflowButtonShown();
+
   // Show the panel so it isn't hidden and has bindings applied etc.:
   await document.getElementById("nav-bar").overflowable.show();
 
   // Hide it again.
   document.getElementById("widget-overflow").hidePopup();
 
   let fullscreenButton = document.getElementById("fullscreen-button");
   ok(!fullscreenButton.checked, "Fullscreen button should not be checked when not in fullscreen.")
--- a/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
+++ b/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
@@ -7,16 +7,19 @@
 var button, menuButton;
 /* Clicking a button should close the panel */
 add_task(async function plain_button() {
   button = document.createElement("toolbarbutton");
   button.id = "browser_940307_button";
   button.setAttribute("label", "Button");
   gNavToolbox.palette.appendChild(button);
   CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   let hiddenAgain = promiseOverflowHidden(window);
   EventUtils.synthesizeMouseAtCenter(button, {});
   await hiddenAgain;
   CustomizableUI.removeWidgetFromArea(button.id);
   button.remove();
 });
 
@@ -34,16 +37,18 @@ add_task(async function menu_button_popu
   menuItem.setAttribute("label", "Menu item");
   menuItem.id = "browser_940307_menuitem";
 
   menuPopup.appendChild(menuItem);
   menuButton.appendChild(menuPopup);
   gNavToolbox.palette.appendChild(menuButton);
   CustomizableUI.addWidgetToArea(menuButton.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   let hiddenAgain = promiseOverflowHidden(window);
   let innerButton = document.getAnonymousElementByAttribute(menuButton, "anonid", "button");
   EventUtils.synthesizeMouseAtCenter(innerButton, {});
   await hiddenAgain;
 
   // Now click the dropmarker to show the menu
   await document.getElementById("nav-bar").overflowable.show();
@@ -63,16 +68,19 @@ add_task(async function menu_button_popu
   menuButton.remove();
 });
 
 add_task(async function searchbar_in_panel() {
   let searchbar = document.getElementById("searchbar");
   gCustomizeMode.addToPanel(searchbar);
   let placement = CustomizableUI.getPlacementOfWidget("search-container");
   is(placement.area, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL, "Should be in panel");
+
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   await waitForCondition(() => "value" in searchbar && searchbar.value === "");
 
   // Focusing a non-empty searchbox will cause us to open the
   // autocomplete panel and search for suggestions, which would
   // trigger network requests. Temporarily disable suggestions.
   await SpecialPowers.pushPrefEnv({set: [["browser.search.suggest.enabled", false]]});
 
@@ -110,16 +118,19 @@ add_task(async function searchbar_in_pan
 
 add_task(async function disabled_button_in_panel() {
   button = document.createElement("toolbarbutton");
   button.id = "browser_946166_button_disabled";
   button.setAttribute("disabled", "true");
   button.setAttribute("label", "Button");
   gNavToolbox.palette.appendChild(button);
   CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   EventUtils.synthesizeMouseAtCenter(button, {});
   is(PanelUI.overflowPanel.state, "open", "Popup stays open");
   button.removeAttribute("disabled");
   let hiddenAgain = promiseOverflowHidden(window);
   EventUtils.synthesizeMouseAtCenter(button, {});
   await hiddenAgain;
   button.remove();
--- a/browser/components/customizableui/test/browser_947914_button_addons.js
+++ b/browser/components/customizableui/test/browser_947914_button_addons.js
@@ -6,16 +6,18 @@
 
 var initialLocation = gBrowser.currentURI.spec;
 var newTab = null;
 
 add_task(async function() {
   CustomizableUI.addWidgetToArea("add-ons-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   info("Check addons button existence and functionality");
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let addonsButton = document.getElementById("add-ons-button");
   ok(addonsButton, "Add-ons button exists in Panel Menu");
   addonsButton.click();
 
   newTab = gBrowser.selectedTab;
--- a/browser/components/customizableui/test/browser_947914_button_copy.js
+++ b/browser/components/customizableui/test/browser_947914_button_copy.js
@@ -7,16 +7,18 @@
 var initialLocation = gBrowser.currentURI.spec;
 var globalClipboard;
 
 add_task(async function() {
   await BrowserTestUtils.withNewTab({gBrowser, url: "about:blank"}, async function() {
     info("Check copy button existence and functionality");
     CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+    await waitForOverflowButtonShown();
+
     let testText = "copy text test";
 
     gURLBar.focus();
     info("The URL bar was focused");
     await document.getElementById("nav-bar").overflowable.show();
     info("Menu panel was opened");
 
     let copyButton = document.getElementById("copy-button");
--- a/browser/components/customizableui/test/browser_947914_button_cut.js
+++ b/browser/components/customizableui/test/browser_947914_button_cut.js
@@ -7,16 +7,18 @@
 var initialLocation = gBrowser.currentURI.spec;
 var globalClipboard;
 
 add_task(async function() {
   await BrowserTestUtils.withNewTab({gBrowser, url: "about:blank"}, async function() {
     info("Check cut button existence and functionality");
     CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+    await waitForOverflowButtonShown();
+
     let testText = "cut text test";
 
     gURLBar.focus();
     await document.getElementById("nav-bar").overflowable.show();
     info("Menu panel was opened");
 
     let cutButton = document.getElementById("cut-button");
     ok(cutButton, "Cut button exists in Panel Menu");
--- a/browser/components/customizableui/test/browser_947914_button_find.js
+++ b/browser/components/customizableui/test/browser_947914_button_find.js
@@ -4,16 +4,18 @@
 
 "use strict";
 
 add_task(async function() {
   info("Check find button existence and functionality");
   CustomizableUI.addWidgetToArea("find-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let findButton = document.getElementById("find-button");
   ok(findButton, "Find button exists in Panel Menu");
 
   findButton.click();
   ok(!gFindBar.hasAttribute("hidden"), "Findbar opened successfully");
--- a/browser/components/customizableui/test/browser_947914_button_history.js
+++ b/browser/components/customizableui/test/browser_947914_button_history.js
@@ -11,16 +11,18 @@ add_task(async function() {
   let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PATH + "dummy_history_item.html");
   await BrowserTestUtils.removeTab(tab);
 
   tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PATH); // will 404, but we don't care.
 
   CustomizableUI.addWidgetToArea("history-panelmenu", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let historyButton = document.getElementById("history-panelmenu");
   ok(historyButton, "History button appears in Panel Menu");
 
   let historyPanel = document.getElementById("PanelUI-history");
   let promise = BrowserTestUtils.waitForEvent(historyPanel, "ViewShown");
--- a/browser/components/customizableui/test/browser_947914_button_newPrivateWindow.js
+++ b/browser/components/customizableui/test/browser_947914_button_newPrivateWindow.js
@@ -4,16 +4,18 @@
 
 "use strict";
 
 add_task(async function() {
   info("Check private browsing button existence and functionality");
   CustomizableUI.addWidgetToArea("privatebrowsing-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let windowWasHandled = false;
   let privateWindow = null;
 
   let observerWindowOpened = {
     observe(aSubject, aTopic, aData) {
--- a/browser/components/customizableui/test/browser_947914_button_newWindow.js
+++ b/browser/components/customizableui/test/browser_947914_button_newWindow.js
@@ -4,16 +4,18 @@
 
 "use strict";
 
 add_task(async function() {
   info("Check new window button existence and functionality");
   CustomizableUI.addWidgetToArea("new-window-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let windowWasHandled = false;
   let newWindow = null;
 
   let observerWindowOpened = {
     observe(aSubject, aTopic, aData) {
--- a/browser/components/customizableui/test/browser_947914_button_paste.js
+++ b/browser/components/customizableui/test/browser_947914_button_paste.js
@@ -10,16 +10,18 @@ var globalClipboard;
 add_task(async function() {
   await BrowserTestUtils.withNewTab({gBrowser, url: "about:blank"}, async function() {
     CustomizableUI.addWidgetToArea("edit-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
     info("Check paste button existence and functionality");
 
     let clipboard = Cc["@mozilla.org/widget/clipboardhelper;1"].getService(Ci.nsIClipboardHelper);
     globalClipboard = Services.clipboard.kGlobalClipboard;
 
+    await waitForOverflowButtonShown();
+
     await document.getElementById("nav-bar").overflowable.show();
     info("Menu panel was opened");
 
     let pasteButton = document.getElementById("paste-button");
     ok(pasteButton, "Paste button exists in Panel Menu");
 
     // add text to clipboard
     let text = "Sample text for testing";
--- a/browser/components/customizableui/test/browser_947914_button_print.js
+++ b/browser/components/customizableui/test/browser_947914_button_print.js
@@ -10,16 +10,18 @@ add_task(async function() {
   CustomizableUI.addWidgetToArea("print-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
   await BrowserTestUtils.withNewTab({
     gBrowser,
     url: "http://example.com/",
   }, async function() {
     info("Check print button existence and functionality");
 
+    await waitForOverflowButtonShown();
+
     await document.getElementById("nav-bar").overflowable.show();
     info("Menu panel was opened");
 
     await waitForCondition(() => document.getElementById("print-button") != null);
 
     let printButton = document.getElementById("print-button");
     ok(printButton, "Print button exists in Panel Menu");
 
--- a/browser/components/customizableui/test/browser_947914_button_zoomIn.js
+++ b/browser/components/customizableui/test/browser_947914_button_zoomIn.js
@@ -9,16 +9,18 @@ var initialPageZoom = ZoomManager.zoom;
 add_task(async function() {
   info("Check zoom in button existence and functionality");
 
   is(initialPageZoom, 1, "Initial zoom factor should be 1");
 
   CustomizableUI.addWidgetToArea("zoom-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let zoomInButton = document.getElementById("zoom-in-button");
   ok(zoomInButton, "Zoom in button exists in Panel Menu");
 
   zoomInButton.click();
   let pageZoomLevel = parseInt(ZoomManager.zoom * 100);
--- a/browser/components/customizableui/test/browser_947914_button_zoomOut.js
+++ b/browser/components/customizableui/test/browser_947914_button_zoomOut.js
@@ -9,16 +9,18 @@ var initialPageZoom = ZoomManager.zoom;
 add_task(async function() {
   info("Check zoom out button existence and functionality");
 
   is(initialPageZoom, 1, "Initial zoom factor should be 1");
 
   CustomizableUI.addWidgetToArea("zoom-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let zoomOutButton = document.getElementById("zoom-out-button");
   ok(zoomOutButton, "Zoom out button exists in Panel Menu");
 
   zoomOutButton.click();
   let pageZoomLevel = Math.round(ZoomManager.zoom * 100);
--- a/browser/components/customizableui/test/browser_947914_button_zoomReset.js
+++ b/browser/components/customizableui/test/browser_947914_button_zoomReset.js
@@ -9,16 +9,18 @@ var initialPageZoom = ZoomManager.zoom;
 add_task(async function() {
   info("Check zoom reset button existence and functionality");
 
   is(initialPageZoom, 1, "Page zoom reset correctly");
   ZoomManager.zoom = 0.5;
   CustomizableUI.addWidgetToArea("zoom-controls", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   registerCleanupFunction(() => CustomizableUI.reset());
 
+  await waitForOverflowButtonShown();
+
   await document.getElementById("nav-bar").overflowable.show();
   info("Menu panel was opened");
 
   let zoomResetButton = document.getElementById("zoom-reset-button");
   ok(zoomResetButton, "Zoom reset button exists in Panel Menu");
 
   zoomResetButton.click();
   await new Promise(SimpleTest.executeSoon);
--- a/browser/components/customizableui/test/browser_967000_button_charEncoding.js
+++ b/browser/components/customizableui/test/browser_967000_button_charEncoding.js
@@ -8,28 +8,30 @@ const TEST_PAGE = "http://mochi.test:888
 
 add_task(async function() {
   info("Check Character Encoding button functionality");
 
   // add the Character Encoding button to the panel
   CustomizableUI.addWidgetToArea("characterencoding-button",
                                   CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
   registerCleanupFunction(() => CustomizableUI.reset());
 
   await document.getElementById("nav-bar").overflowable.show();
 
   let charEncodingButton = document.getElementById("characterencoding-button");
   ok(charEncodingButton, "The Character Encoding button was added to the Panel Menu");
   is(charEncodingButton.getAttribute("disabled"), "true",
      "The Character encoding button is initially disabled");
 
   let panelHidePromise = promiseOverflowHidden(window);
-  await document.getElementById("nav-bar").overflowable._panel.hidePopup();
+  document.getElementById("nav-bar").overflowable._panel.hidePopup();
   await panelHidePromise;
+  info("Panel hidden");
 
   let newTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PAGE, true, true);
 
   await document.getElementById("nav-bar").overflowable.show();
   ok(!charEncodingButton.hasAttribute("disabled"), "The Character encoding button gets enabled");
   let characterEncodingView = document.getElementById("PanelUI-characterEncodingView");
   let subviewShownPromise = subviewShown(characterEncodingView);
   charEncodingButton.click();
@@ -45,18 +47,19 @@ add_task(async function() {
   let checkedButtons = characterEncodingView.querySelectorAll("toolbarbutton[checked='true']");
   is(checkedButtons.length, 2, "There should be 2 checked items (1 charset, 1 detector).");
   is(checkedButtons[0].getAttribute("label"), "Unicode", "The unicode encoding is correctly selected");
   is(characterEncodingView.querySelectorAll("#PanelUI-characterEncodingView-autodetect toolbarbutton[checked='true']").length,
      1,
      "There should be 1 checked detector.");
 
   panelHidePromise = promiseOverflowHidden(window);
-  await document.getElementById("nav-bar").overflowable._panel.hidePopup();
+  document.getElementById("nav-bar").overflowable._panel.hidePopup();
   await panelHidePromise;
+  info("Panel hidden");
 
   await BrowserTestUtils.removeTab(newTab);
 });
 
 add_task(async function asyncCleanup() {
   // reset the panel to the default state
   await resetCustomization();
   ok(CustomizableUI.inDefaultState, "The UI is in default state again.");
--- a/browser/components/customizableui/test/browser_967000_button_feeds.js
+++ b/browser/components/customizableui/test/browser_967000_button_feeds.js
@@ -12,16 +12,18 @@ var initialLocation = gBrowser.currentUR
 
 add_task(async function() {
   info("Check Subscribe button functionality");
 
   // add the Subscribe button to the panel
   CustomizableUI.addWidgetToArea("feed-button",
                                   CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
+
   // check the button's functionality
   await document.getElementById("nav-bar").overflowable.show();
 
   let feedButton = document.getElementById("feed-button");
   ok(feedButton, "The Subscribe button was added to the Panel Menu");
   is(feedButton.getAttribute("disabled"), "true", "The Subscribe button is initially disabled");
 
   let panelHidePromise = promiseOverflowHidden(window);
--- a/browser/components/customizableui/test/browser_973641_button_addon.js
+++ b/browser/components/customizableui/test/browser_973641_button_addon.js
@@ -29,16 +29,18 @@ add_task(async function() {
   await checkButtonFunctionality(addonButton);
 
   resetTabs();
 
   // move the add-on button in the Panel Menu
   CustomizableUI.addWidgetToArea(kButton, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
   ok(!navBar.contains(addonButton), "Addon button was removed from the browser bar");
 
+  await waitForOverflowButtonShown();
+
   // check the addon button's functionality in the Panel Menu
   await document.getElementById("nav-bar").overflowable.show();
   var panelMenu = document.getElementById("widget-overflow-mainView");
   let addonButtonInPanel = panelMenu.getElementsByAttribute("id", kButton);
   ok(panelMenu.contains(addonButton), "Addon button was added to the Panel Menu");
   await checkButtonFunctionality(addonButtonInPanel[0]);
 });
 
--- a/browser/components/customizableui/test/browser_981305_separator_insertion.js
+++ b/browser/components/customizableui/test/browser_981305_separator_insertion.js
@@ -25,16 +25,19 @@ function insertTempItemsIntoMenu(parentM
 
 function checkSeparatorInsertion(menuId, buttonId, subviewId) {
   return async function() {
     info("Checking for duplicate separators in " + buttonId + " widget");
     let menu = document.getElementById(menuId);
     insertTempItemsIntoMenu(menu);
 
     CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+    await waitForOverflowButtonShown();
+
     await document.getElementById("nav-bar").overflowable.show();
 
     let button = document.getElementById(buttonId);
     button.click();
 
     await BrowserTestUtils.waitForEvent(PanelUI.overflowPanel, "ViewShown");
     let subview = document.getElementById(subviewId);
     ok(subview.firstChild, "Subview should have a kid");
--- a/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
+++ b/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
@@ -55,16 +55,17 @@ add_task(async function testAddOnBeforeC
       clearTimeout(shownTimeout);
       ok(true, "Found view shown");
 
       let panelHiddenPromise = promisePanelElementHidden(window, tempPanel);
       tempPanel.hidePopup();
       await panelHiddenPromise;
 
       CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+      await waitForOverflowButtonShown();
       await document.getElementById("nav-bar").overflowable.show();
 
       viewShownDeferred = Promise.defer();
       widgetNode.click();
 
       shownTimeout = setTimeout(() => viewShownDeferred.reject("Panel not shown within 20s"), 20000);
       await viewShownDeferred.promise;
       clearTimeout(shownTimeout);
--- a/browser/components/customizableui/test/browser_987640_charEncoding.js
+++ b/browser/components/customizableui/test/browser_987640_charEncoding.js
@@ -8,16 +8,18 @@ const TEST_PAGE = "http://mochi.test:888
 
 add_task(async function() {
   info("Check Character Encoding panel functionality");
 
   // add the Character Encoding button to the panel
   CustomizableUI.addWidgetToArea("characterencoding-button",
                                   CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
+
   let newTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_PAGE, true, true);
 
   await document.getElementById("nav-bar").overflowable.show();
   let charEncodingButton = document.getElementById("characterencoding-button");
   let characterEncodingView = document.getElementById("PanelUI-characterEncodingView");
   let subviewShownPromise = subviewShown(characterEncodingView);
   charEncodingButton.click();
   await subviewShownPromise;
--- a/browser/components/customizableui/test/browser_989751_subviewbutton_class.js
+++ b/browser/components/customizableui/test/browser_989751_subviewbutton_class.js
@@ -20,16 +20,19 @@ function checkSubviewButtonClass(menuId,
     Cu.import("resource://devtools/shared/Loader.jsm", {})
         .require("devtools/client/framework/devtools-browser");
 
     info("Checking for items without the subviewbutton class in " + buttonId + " widget");
     let menu = document.getElementById(menuId);
     insertClassNameToMenuChildren(menu);
 
     CustomizableUI.addWidgetToArea(buttonId, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+    await waitForOverflowButtonShown();
+
     await document.getElementById("nav-bar").overflowable.show();
 
     let button = document.getElementById(buttonId);
     button.click();
 
     await BrowserTestUtils.waitForEvent(PanelUI.overflowPanel, "ViewShown");
     let subview = document.getElementById(subviewId);
     ok(subview.firstChild, "Subview should have a kid");
--- a/browser/components/customizableui/test/browser_customization_context_menus.js
+++ b/browser/components/customizableui/test/browser_customization_context_menus.js
@@ -145,16 +145,18 @@ add_task(async function urlbar_context()
 // Right-click on the searchbar and moving it to the menu
 // and back should move the search-container instead.
 add_task(async function searchbar_context_move_to_panel_and_back() {
   let searchbar = document.getElementById("searchbar");
   gCustomizeMode.addToPanel(searchbar);
   let placement = CustomizableUI.getPlacementOfWidget("search-container");
   is(placement.area, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL, "Should be in panel");
 
+  await waitForOverflowButtonShown();
+
   let shownPanelPromise = popupShown(overflowPanel);
   overflowButton.click();
   await shownPanelPromise;
   let hiddenPanelPromise = popupHidden(overflowPanel);
   overflowPanel.hidePopup();
   await hiddenPanelPromise;
 
   gCustomizeMode.addToToolbar(searchbar);
@@ -167,16 +169,19 @@ add_task(async function searchbar_contex
   placement = CustomizableUI.getPlacementOfWidget("search-container");
   is(placement.area, CustomizableUI.AREA_NAVBAR, "Should be in navbar");
 });
 
 // Right-click on an item within the panel should
 // show a context menu with options to move it.
 add_task(async function context_within_panel() {
   CustomizableUI.addWidgetToArea("new-window-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+  await waitForOverflowButtonShown();
+
   let shownPanelPromise = popupShown(overflowPanel);
   overflowButton.click();
   await shownPanelPromise;
 
   let contextMenu = document.getElementById("customizationPanelItemContextMenu");
   let shownContextPromise = popupShown(contextMenu);
   let newWindowButton = document.getElementById("new-window-button");
   ok(newWindowButton, "new-window-button was found");
--- a/browser/components/customizableui/test/browser_remote_tabs_button.js
+++ b/browser/components/customizableui/test/browser_remote_tabs_button.js
@@ -20,16 +20,18 @@ add_task(async function testSyncRemoteTa
   mockFunctions();
 
   // Force UI update.
   Services.obs.notifyObservers(null, UIState.ON_UPDATE);
 
   // add the sync remote tabs button to the panel
   CustomizableUI.addWidgetToArea("sync-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
+
   // check the button's functionality
   await document.getElementById("nav-bar").overflowable.show();
   info("The panel menu was opened");
 
   let syncRemoteTabsBtn = document.getElementById("sync-button");
   let remoteTabsPanel = document.getElementById("PanelUI-remotetabs");
   let viewShown = BrowserTestUtils.waitForEvent(remoteTabsPanel, "ViewShown");
   ok(syncRemoteTabsBtn, "The sync remote tabs button was added to the Panel Menu");
--- a/browser/components/customizableui/test/browser_synced_tabs_menu.js
+++ b/browser/components/customizableui/test/browser_synced_tabs_menu.js
@@ -58,16 +58,18 @@ add_task(async function setup() {
 });
 
 // The test expects the about:preferences#sync page to open in the current tab
 async function openPrefsFromMenuPanel(expectedPanelId, entryPoint) {
   info("Check Sync button functionality");
   Services.prefs.setCharPref("identity.fxaccounts.remote.signup.uri", "http://example.com/");
   CustomizableUI.addWidgetToArea("sync-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
+  await waitForOverflowButtonShown();
+
   // check the button's functionality
   await document.getElementById("nav-bar").overflowable.show();
 
   if (entryPoint == "uitour") {
     UITour.tourBrowsersByWindow.set(window, new Set());
     UITour.tourBrowsersByWindow.get(window).add(gBrowser.selectedBrowser);
   }
 
--- a/browser/components/customizableui/test/head.js
+++ b/browser/components/customizableui/test/head.js
@@ -505,8 +505,19 @@ function checkContextMenu(aContextMenu, 
                                relatedCommand.getAttribute("disabled") == "true" :
                                menuitem.getAttribute("disabled") == "true";
       is(menuItemDisabled, !aExpectedEntries[i][1], "disabled state for " + selector);
     } catch (e) {
       ok(false, "Exception when checking context menu: " + e);
     }
   }
 }
+
+function waitForOverflowButtonShown(win = window) {
+  let dwu = win.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
+  return BrowserTestUtils.waitForCondition(() => {
+    info("Waiting for overflow button to have non-0 size");
+    let ov = win.document.getElementById("nav-bar-overflow-button");
+    let icon = win.document.getAnonymousElementByAttribute(ov, "class", "toolbarbutton-icon");
+    let bounds = dwu.getBoundsWithoutFlushing(icon);
+    return bounds.width > 0 && bounds.height > 0;
+  });
+}