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 348648 e5b7fe7de013f16df861ec28c452eeb3f3a6270c
parent 348647 7cd48e5cb14c647f86faa98628301959b86393cb
child 348649 59ab86516175cf922f7de494d2a628cc8719b480
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1128156
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
+}