Bug 1786587 Fix browser action panel when toolbar is overflowed r=Gijs

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

browser/components/extensions/test/AppUiTestDelegate.jsm

@@ -84,10 +84,15 @@ async function showBrowserAction(window, extensionId) {
     return;
   }
 
+  let navbar = window.document.getElementById("nav-bar");
   if (group.areaType == lazy.CustomizableUI.TYPE_TOOLBAR) {
-    Assert.ok(!widget.overflowed, "Expect widget not to be overflowed");
+    Assert.equal(
+      widget.overflowed,
+      navbar.hasAttribute("overflowing"),
+      "Expect widget overflow state to match toolbar"
+    );
   } else if (group.areaType == lazy.CustomizableUI.TYPE_MENU_PANEL) {
-    await window.document.getElementById("nav-bar").overflowable.show();
+    await navbar.overflowable.show();
   }
 }
 

browser/components/extensions/test/browser/browser_ext_popup_corners.js

@@ -2,6 +2,20 @@
 /* vim: set sts=2 sw=2 et tw=80: */
 "use strict";
 
+function promisePanelElementShown(win, panel) {
+  return new Promise((resolve, reject) => {
+    let timeoutId = win.setTimeout(() => {
+      reject("Panel did not show within 20 seconds.");
+    }, 20000);
+    function onPanelOpen(e) {
+      panel.removeEventListener("popupshown", onPanelOpen);
+      win.clearTimeout(timeoutId);
+      resolve();
+    }
+    panel.addEventListener("popupshown", onPanelOpen);
+  });
+}
+
 add_task(async function testPopupBorderRadius() {
   let extension = ExtensionTestUtils.loadExtension({
     background() {
@@ -101,6 +115,50 @@ add_task(async function testPopupBorderRadius() {
     await closeBrowserAction(extension);
   }
 
+  {
+    info("Test overflowed browserAction popup");
+    const kForceOverflowWidthPx = 450;
+    let overflowPanel = document.getElementById("widget-overflow");
+
+    let originalWindowWidth = window.outerWidth;
+    let navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
+    ok(
+      !navbar.hasAttribute("overflowing"),
+      "Should start with a non-overflowing toolbar."
+    );
+    window.resizeTo(kForceOverflowWidthPx, window.outerHeight);
+
+    await TestUtils.waitForCondition(() => navbar.hasAttribute("overflowing"));
+    ok(
+      navbar.hasAttribute("overflowing"),
+      "Should have an overflowing toolbar."
+    );
+
+    let chevron = document.getElementById("nav-bar-overflow-button");
+    let shownPanelPromise = promisePanelElementShown(window, overflowPanel);
+    chevron.click();
+    await shownPanelPromise;
+
+    clickBrowserAction(extension);
+    let browser = await awaitExtensionPanel(extension);
+
+    is(
+      overflowPanel.state,
+      "closed",
+      "The widget overflow panel should not be open."
+    );
+
+    await testPanel(browser, false);
+    await closeBrowserAction(extension);
+
+    window.resizeTo(originalWindowWidth, window.outerHeight);
+    await TestUtils.waitForCondition(() => !navbar.hasAttribute("overflowing"));
+    ok(
+      !navbar.hasAttribute("overflowing"),
+      "Should not have an overflowing toolbar."
+    );
+  }
+
   {
     info("Test menu panel browserAction popup");