Bug 1256754 - Add padding to contextmenu items when opened through touch. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 04 May 2017 03:18:35 -0700
changeset 574381 2ec2a2d04201e494c2d759de819e3dc0109ac94c
parent 573811 17d8a1e278a9c54a6fdda9d390abce4077e55b20
child 627577 0fe0380b8fb278fa926fa94ac4950b98f4e1945c
push id57688
push userbmo:jhofmann@mozilla.com
push dateMon, 08 May 2017 20:10:33 +0000
reviewersdao
bugs1256754
milestone55.0a1
Bug 1256754 - Add padding to contextmenu items when opened through touch. r=dao MozReview-Commit-ID: C7z6Pnzf2nb
browser/base/content/nsContextMenu.js
browser/themes/windows/browser.css
--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@@ -51,16 +51,24 @@ function openContextMenu(aMessage) {
                               selectionInfo: data.selectionInfo,
                               disableSetDesktopBackground: data.disableSetDesktopBg,
                               loginFillInfo: data.loginFillInfo,
                               parentAllowsMixedContent: data.parentAllowsMixedContent,
                               userContextId: data.userContextId,
                             };
   let popup = browser.ownerDocument.getElementById("contentAreaContextMenu");
   let event = gContextMenuContentData.event;
+
+  // Set touch mode to get larger menu items.
+  if (event.mozInputSource == MouseEvent.MOZ_SOURCE_TOUCH) {
+    popup.setAttribute("touchmode", "true");
+  } else {
+    popup.removeAttribute("touchmode");
+  }
+
   popup.openPopupAtScreen(event.screenX, event.screenY, true);
 }
 
 function nsContextMenu(aXulMenu, aIsShift) {
   this.shouldDisplay = true;
   this.initMenu(aXulMenu, aIsShift);
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2009,16 +2009,28 @@ notification.pluginVulnerable > .notific
    */
   margin-left: -10px;
   margin-right: -10px;
   margin-bottom: -10px;
 }
 
 %include ../shared/contextmenu.inc.css
 
+/* Make context menu items larger when opened through touch. */
+#contentAreaContextMenu[touchmode] menu,
+#contentAreaContextMenu[touchmode] menuitem {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
 #context-navigation {
   background-color: menu;
   padding-bottom: 4px;
 }
 
 #context-sep-navigation {
   margin-inline-start: -28px;
   margin-top: -4px;