Bug 1410352 - Make the overflow menu adhere to touchmode sizing. r=nhnt11
MozReview-Commit-ID: JhMIp65wuaq
--- a/browser/base/content/test/touch/browser_menu_touch.js
+++ b/browser/base/content/test/touch/browser_menu_touch.js
@@ -100,8 +100,22 @@ add_task(async function test_customizati
let target = document.getElementById("library-button");
await openAndCheckCustomizationUIMenu(target);
target = document.getElementById("history-panelmenu");
await openAndCheckCustomizationUIMenu(target);
CustomizableUI.reset();
});
+
+// Test the overflow menu panel.
+add_task(async function test_overflow_panel_touch() {
+ // Move something in the overflow menu to make the button appear.
+ CustomizableUI.addWidgetToArea("library-button", CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+ await BrowserTestUtils.waitForCondition(() =>
+ CustomizableUI.getPlacementOfWidget("library-button").area == CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+
+ let overflowPanel = document.getElementById("widget-overflow");
+ let target = document.getElementById("nav-bar-overflow-button");
+ await openAndCheckMenu(overflowPanel, target);
+
+ CustomizableUI.reset();
+});
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4307,17 +4307,17 @@ OverflowableToolbar.prototype = {
case "popuphiding":
this._onPanelHiding(aEvent);
break;
case "resize":
this._onResize(aEvent);
}
},
- show() {
+ show(aEvent) {
if (this._panel.state == "open") {
return Promise.resolve();
}
return new Promise(resolve => {
let doc = this._panel.ownerDocument;
this._panel.hidden = false;
let photonView = this._panel.querySelector("photonpanelmultiview");
let contextMenu;
@@ -4328,33 +4328,33 @@ OverflowableToolbar.prototype = {
} else {
contextMenu = doc.getElementById(this._panel.getAttribute("context"));
}
gELS.addSystemEventListener(contextMenu, "command", this, true);
let anchor = doc.getAnonymousElementByAttribute(this._chevron, "class", "toolbarbutton-icon");
// Ensure we update the gEditUIVisible flag when opening the popup, in
// case the edit controls are in it.
this._panel.addEventListener("popupshowing", () => doc.defaultView.updateEditUIVisibility(), {once: true});
- this._panel.openPopup(anchor || this._chevron);
+ this._panel.openPopup(anchor || this._chevron, { triggerEvent: aEvent });
this._chevron.open = true;
- this._panel.addEventListener("popupshown", aEvent => {
+ this._panel.addEventListener("popupshown", () => {
this._panel.addEventListener("dragover", this);
this._panel.addEventListener("dragend", this);
resolve();
}, {once: true});
});
},
_onClickChevron(aEvent) {
if (this._chevron.open) {
this._panel.hidePopup();
this._chevron.open = false;
} else if (this._panel.state != "hiding" && !this._chevron.disabled) {
- this.show();
+ this.show(aEvent);
}
},
_onPanelHiding(aEvent) {
if (aEvent.target != this._panel) {
// Ignore context menus, <select> popups, etc.
return;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1115,16 +1115,17 @@ notification[value="translation"] {
margin-left: -10px;
margin-right: -10px;
margin-bottom: -10px;
}
%include ../shared/contextmenu.inc.css
/* Make menu items larger when opened through touch. */
+#widget-overflow[touchmode] .toolbarbutton-1,
panel[touchmode] .PanelUI-subView .subviewbutton,
menupopup[touchmode] menu,
menupopup[touchmode] menuitem {
padding-top: 12px;
padding-bottom: 12px;
}
panel[touchmode] .PanelUI-subView #appMenu-edit-controls > .subviewbutton,