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
--- 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) {