Bug 1410352 - Make the overflow menu adhere to touchmode sizing. r=nhnt11 draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 25 Oct 2017 13:07:46 +0200
changeset 686214 b786a695a954ef72eb08bf7ea5710fee7f3ead42
parent 685069 9056f2ee492fa481aa86146aba236c074628e9fd
child 737321 b0026b1014e1bf21e4b50f77eb347a829ee69b9e
push id86119
push userbmo:jhofmann@mozilla.com
push dateWed, 25 Oct 2017 15:10:24 +0000
reviewersnhnt11
bugs1410352
milestone58.0a1
Bug 1410352 - Make the overflow menu adhere to touchmode sizing. r=nhnt11 MozReview-Commit-ID: JhMIp65wuaq
browser/base/content/test/touch/browser_menu_touch.js
browser/components/customizableui/CustomizableUI.jsm
browser/themes/windows/browser.css
--- 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,