Bug 1698377 - Treat button-and-view widgets as being in a panel when they overflow off the toolbar. r=Gijs

When a toolbar button overflows out of the toolbar and into the overflow menu,
CustomizableUI continues to report the widget's type as "toolbar". This means
that whether the widget is currently overflowed must be considered in addition
to the widget's type when the panel and toolbar states need different handling.

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

browser/components/customizableui/CustomizableUI.jsm

@@ -2083,14 +2083,16 @@ var CustomizableUIInternal = {
       this.showWidgetView(aWidget, aNode, aEvent);
     } else if (aWidget.type == "button-and-view") {
       // Do the command if we're in the toolbar and the button was clicked.
-      // Otherwise, open the view. There is no way to trigger the command while
+      // Otherwise, including when we have currently overflowed out of the
+      // toolbar, open the view. There is no way to trigger the command while
       // the widget is in the panel, by design.
       let button = aNode.firstElementChild;
       let area = this.getPlacementOfWidget(aNode.id).area;
       let areaType = CustomizableUI.getAreaType(area);
       if (
         areaType == CustomizableUI.TYPE_TOOLBAR &&
-        button.contains(aEvent.target)
+        button.contains(aEvent.target) &&
+        !aNode.hasAttribute("overflowedItem")
       ) {
         this.doWidgetCommand(aWidget, aNode, aEvent);
       } else {

browser/components/downloads/test/browser/browser_overflow_anchor.js

@@ -1,9 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-// This is the same value used by CustomizableUI tests.
-const kForceOverflowWidthPx = 450;
-
 registerCleanupFunction(async function() {
   // Clean up when the test finishes.
   await task_resetState();

browser/themes/shared/customizableui/panelUI.inc.css

@@ -1778,7 +1778,8 @@ toolbarpaletteitem[place="menu-panel"] > toolbaritem {
   -moz-box-flex: 1;
 }
 
-.toolbaritem-combined-buttons[cui-areatype="menu-panel"] > .toolbarbutton-combined-buttons-dropmarker {
+.toolbaritem-combined-buttons[cui-areatype="menu-panel"] > .toolbarbutton-combined-buttons-dropmarker,
+.toolbaritem-combined-buttons[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker {
   display: none;
 }
 

devtools/client/performance-new/test/browser/browser_split-toolbar-button.js

@@ -4,6 +4,9 @@
 
 "use strict";
 
+// This is the same value used by CustomizableUI tests.
+const kForceOverflowWidthPx = 450;
+
 function isActive() {
   return Services.profiler.IsActive();
 }
@@ -83,6 +86,53 @@ add_task(async function click_dropmarker() {
   ok(!dropmarker.hasAttribute("open"), "panel should be closed");
 });
 
+add_task(async function click_overflowed_icon() {
+  info("Test that the profiler icon opens the panel when overflowed.");
+
+  const overflowMenu = document.getElementById("widget-overflow");
+  const profilerPanel = document.getElementById("PanelUI-profiler");
+
+  ok(!dropmarker.hasAttribute("open"), "should start with the panel closed");
+  ok(!isActive(), "should start with the profiler inactive");
+
+  const navbar = document.getElementById(CustomizableUI.AREA_NAVBAR);
+  ok(
+    !navbar.hasAttribute("overflowing"),
+    "Should start with a non-overflowing toolbar."
+  );
+
+  info("Force the toolbar to overflow.");
+  const originalWindowWidth = window.outerWidth;
+  window.resizeTo(kForceOverflowWidthPx, window.outerHeight);
+  await TestUtils.waitForCondition(() => navbar.hasAttribute("overflowing"));
+  ok(navbar.hasAttribute("overflowing"), "Should have an overflowing toolbar.");
+
+  info("Open the overflow menu.");
+  const chevron = document.getElementById("nav-bar-overflow-button");
+  chevron.click();
+  await TestUtils.waitForCondition(() => overflowMenu.state == "open");
+
+  info("Open the profiler panel.");
+  button.click();
+  await TestUtils.waitForCondition(() =>
+    profilerPanel?.hasAttribute("visible")
+  );
+
+  info("Ensure the panel is open and the profiler still inactive.");
+  ok(profilerPanel?.hasAttribute("visible"), "panel should be open");
+  ok(!isActive(), "profiler should still be inactive");
+  await getElementByLabel(document, "Start Recording");
+
+  info("Press Escape to close the panel.");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await TestUtils.waitForCondition(() => overflowMenu.state == "closed");
+  ok(!dropmarker.hasAttribute("open"), "panel should be closed");
+
+  info("Undo the forced toolbar overflow.");
+  window.resizeTo(originalWindowWidth, window.outerHeight);
+  return TestUtils.waitForCondition(() => !navbar.hasAttribute("overflowing"));
+});
+
 add_task(async function space_key() {
   info("Test that the Space key starts and captures a profile.");