Bug 1309938 - The padding of options and optgroups in select dropdowns should scale relatively with the font-size of the items. r?jaws,mconley draft
authorMark Golbeck <markgolbeck08@gmail.com>
Wed, 26 Oct 2016 17:43:18 -0700
changeset 429909 baf01927f5fcbec693e4d3f9f3a6b184f6267882
parent 427149 b56e66b699d37a684da13722a86d48863cb6dd14
child 535093 05850678c412b368caf2b853c24843c88f08f547
push id33704
push usermarkgolbeck08@gmail.com
push dateWed, 26 Oct 2016 21:49:45 +0000
reviewersjaws, mconley
bugs1309938
milestone51.0a1
Bug 1309938 - The padding of options and optgroups in select dropdowns should scale relatively with the font-size of the items. r?jaws,mconley MozReview-Commit-ID: ByZiGzLYDSH
toolkit/modules/SelectParentHelper.jsm
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -143,40 +143,45 @@ this.SelectParentHelper = {
     browser.messageManager.removeMessageListener("Forms:UpdateDropDown", this);
   },
 
 };
 
 function populateChildren(menulist, options, selectedIndex, zoom,
                           parentElement = null, isGroupDisabled = false, adjustedTextSize = -1) {
   let element = menulist.menupopup;
-  let paddingRatio = 4/11;
+  let paddingRatio;
+  let adjustedTextRatio; 
 
   // -1 just means we haven't calculated it yet. When we recurse through this function
   // we will pass in adjustedTextSize to save on recalculations.
   if (adjustedTextSize == -1) {
     let win = element.ownerDocument.defaultView;
 
     // Grab the computed text size and multiply it by the remote browser's fullZoom to ensure
     // the popup's text size is matched with the content's. We can't just apply a CSS transform
     // here as the popup's preferred size is calculated pre-transform.
     let textSize = win.getComputedStyle(element).getPropertyValue("font-size");
-    var adjustedTextRatio = (zoom * parseFloat(textSize, 10));
+    let padding = win.getComputedStyle(element).getPropertyValue("padding-top");
+    adjustedTextRatio = (zoom * parseFloat(textSize, 10));
     adjustedTextSize = adjustedTextRatio + "px";
+    paddingRatio = padding / textSize; 
   }
 
   for (let option of options) {
     let isOptGroup = (option.tagName == 'OPTGROUP');
     let item = element.ownerDocument.createElement(isOptGroup ? "menucaption" : "menuitem");
 
+    let itemDisplay = item; // used this for debugging. looked at the CSS2 properties for font size and padding
+
     item.setAttribute("label", option.textContent);
     item.style.direction = option.textDirection;
     item.style.fontSize = adjustedTextSize;
-    item.style.paddingTop = adjustedTextRatio * paddingRatio + "px";
-    item.style.paddingBottom = adjustedTextRatio * paddingRatio + "px";
+    item.style.paddingTop = (adjustedTextRatio * paddingRatio) + "px";
+    item.style.paddingBottom = (adjustedTextRatio * paddingRatio) + "px";
     item.hidden = option.display == "none" || (parentElement && parentElement.hidden);
     item.setAttribute("tooltiptext", option.tooltip);
 
     element.appendChild(item);
 
     // A disabled optgroup disables all of its child options.
     let isDisabled = isGroupDisabled || option.disabled;
     if (isDisabled) {