Bug 1128156, set the maximum height of the select popup to exactly 20 rows, r=mconley
authorNeil Deakin <neil@mozilla.com>
Mon, 25 Jul 2016 09:08:34 -0400
changeset 331612 e5b7fe7de013f16df861ec28c452eeb3f3a6270c
parent 331611 7cd48e5cb14c647f86faa98628301959b86393cb
child 331613 59ab86516175cf922f7de494d2a628cc8719b480
push id9858
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 14:37:10 +0000
treeherdermozilla-aurora@203106ef6cb6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1128156
milestone50.0a1
Bug 1128156, set the maximum height of the select popup to exactly 20 rows, r=mconley
browser/base/content/browser.css
toolkit/modules/SelectParentHelper.jsm
toolkit/themes/osx/global/popup.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1037,17 +1037,16 @@ toolbarpaletteitem[place="palette"] > #d
 #main-window[inFullscreen][inDOMFullscreen] chatbar,
 #main-window[inFullscreen][inDOMFullscreen] #social-sidebar-box,
 #main-window[inFullscreen][inDOMFullscreen] #social-sidebar-splitter {
   display: none;
 }
 
 /* Combobox dropdown renderer */
 #ContentSelectDropdown > menupopup {
-  max-height: 350px;
   /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
    * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
   direction: ltr;
 }
 
 /* Indent options in optgroups */
 .contentSelectDropdown-ingroup .menu-iconic-text {
   padding-inline-start: 2em;
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -3,16 +3,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 this.EXPORTED_SYMBOLS = [
   "SelectParentHelper"
 ];
 
+// Maximum number of rows to display in the select dropdown.
+const MAX_ROWS = 20;
+
 var currentBrowser = null;
 var currentMenulist = null;
 var currentZoom = 1;
 
 this.SelectParentHelper = {
   populate: function(menulist, items, selectedIndex, zoom) {
     // Clear the current contents of the popup
     menulist.menupopup.textContent = "";
@@ -22,16 +25,29 @@ this.SelectParentHelper = {
   },
 
   open: function(browser, menulist, rect) {
     menulist.hidden = false;
     currentBrowser = browser;
     this._registerListeners(browser, menulist.menupopup);
 
     let win = browser.ownerDocument.defaultView;
+
+    // Set the maximum height to show exactly MAX_ROWS items.
+    let firstItem = menulist.getItemAtIndex(0);
+    if (firstItem) {
+      let itemHeight = firstItem.getBoundingClientRect().height;
+
+      // Include the padding and border on the popup.
+      let cs = win.getComputedStyle(menulist.menupopup);
+      let bpHeight = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth) +
+                     parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+      menulist.menupopup.style.maxHeight = (itemHeight * MAX_ROWS + bpHeight) + "px";
+    }
+
     let constraintRect = browser.getBoundingClientRect();
     constraintRect = new win.DOMRect(constraintRect.left + win.mozInnerScreenX,
                                      constraintRect.top + win.mozInnerScreenY,
                                      constraintRect.width, constraintRect.height);
     menulist.menupopup.setConstraintRect(constraintRect);
     menulist.menupopup.openPopupAtScreenRect("after_start", rect.left, rect.top, rect.width, rect.height, false, false);
     menulist.selectedItem.scrollIntoView();
   },
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -128,11 +128,15 @@ tooltip[titletip="true"] {
 menulist > menupopup {
   min-width: 0px;
 }
 
 menulist[editable="true"] > menupopup {
   -moz-appearance: none;
 }
 
-menulist[editable="true"] > menupopup > .popup-internal-box {
+menulist > menupopup > .popup-internal-box {
   padding: 0;
 }
+
+menulist:not([editable="true"]) > menupopup {
+  padding: 4px 0;
+}