commit 8952236a3df76957ed1539f00c232978e032a59f Author: Arthur Edelstein <arthuredelstein@gmail.com> Date: Thu Dec 10 15:59:38 2015 -0800 Bug 17792: Auto-adjust font size for donation banner l10n --- src/chrome/content/aboutTor/aboutTor.xhtml | 66 +++++++++++++++++++++++++--- src/chrome/skin/aboutTor.css | 13 +++++- 2 files changed, 70 insertions(+), 9 deletions(-) diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml index d9e7704..9ca9f31 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -169,18 +169,63 @@ window.addEventListener("pageshow", function() { // Donation banner constants let gBannerAlternates = ["lp", "cd", "rd"], - gBannerSuffixes = ["quote", "who", "speciality"], - populateBannerText = (suffix, alternate) => - document.getElementById("donation-banner-" + suffix).innerHTML - = gStringBundle.GetStringFromName("aboutTor.donationBanner." + - alternate + "." + suffix); + gBannerSuffixes = ["quote", "who", "speciality"]; + +// Change the font size of text in element by ratio. +let scaleFontBy = function (element, ratio) { + let style = window.getComputedStyle(element), + originalFontSize = parseFloat(style.fontSize), + targetFontSize = originalFontSize * ratio; + element.style.fontSize = targetFontSize + "px"; +}; + +// Shrink the font size if the text in the given element is overflowing. +let fitTextInElement = function(element) { + let style = window.getComputedStyle(element); + if (style.whiteSpace === "nowrap") { + // Look for horizontal overflow. + let elementWidth = element.getBoundingClientRect().width, + paddingWidth = parseFloat(style.paddingLeft) + + parseFloat(style.paddingRight), + targetWidth = elementWidth - paddingWidth, + textWidth = element.scrollWidth; + // Compute the appropriate font size to make the text fit. + let ratio = targetWidth / textWidth; + scaleFontBy(element, ratio); + } else { + // Look for vertical overflow. + let elementHeight = element.getBoundingClientRect().height, + paddingHeight = parseFloat(style.paddingTop) + + parseFloat(style.paddingBottom), + targetHeight = elementHeight - paddingHeight; + // Wrapping causes somewhat difficult-to-predict overflow. + // So shrink slightly and repeat. + let ratio = 0; + for (let i = 0; i < 100 && ratio < 1; ++i) { + let textHeight = element.scrollHeight; + ratio = targetHeight < textHeight ? 0.99 : 1; + if (ratio < 1) { + scaleFontBy(element, ratio); + } + } + } +}; + +// Put text of the appropriate locale into donation banner elements. +let populateBannerText = function (suffix, alternate) { + let text = gStringBundle.GetStringFromName("aboutTor.donationBanner." + + alternate + "." + suffix), + div = document.getElementById("donation-banner-" + suffix); + div.innerHTML = text; +}; // This function takes care of the donation banner. function setupDonationBanner() { try { - // Only show banner for US English + // Only show banner for locales for which we have translations. let browserLocale = Services.prefs.getCharPref("general.useragent.locale"); - if (browserLocale !== "en-US") { + if (!["en", "de", "fr", "nl", "ru", "sv", "tr", "zh"] + .some(code => browserLocale.startsWith(code))) { return; } // Only show banner until 2016 Jan 25. @@ -218,6 +263,13 @@ function setupDonationBanner() { } // Now we can show the banner. document.getElementById("donation-banner").style.display = "block"; + for (let id of ["donation-banner-quote", + "donate-button", + "donation-banner-who", + "donation-banner-speciality", + "donation-banner-plea"]) { + fitTextInElement(document.getElementById(id)); + } } ]]> </script> diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css index 5f43f8c..138757a 100644 --- a/src/chrome/skin/aboutTor.css +++ b/src/chrome/skin/aboutTor.css @@ -380,6 +380,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { color: darkgreen; font-family: serif; font-size: 18px; + max-height: 64px; text-align: start; white-space: normal; } @@ -393,11 +394,13 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { #donation-banner-who { font-size: 19px; font-style: bold; + width: 420px; } #donation-banner-speciality { font-size: 13px; text-transform: uppercase; + width: 420px; } #donation-banner-plea { @@ -406,9 +409,13 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { font-size: 20px; color: darkgreen; left: 250px; - padding: 10px; + line-height: 42px; + height: 42px; + padding: 0px 5px 0px 5px; position: absolute; + text-align: center; top: 144px; + width: 200px; } #donate-button { @@ -417,8 +424,10 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff { color: white; font-family: sans-serif; font-size: 20px; + height: 42px; left: 490px; - padding: 10px; + line-height: 42px; + padding: 0px 5px 0px 5px; position: absolute; text-align: center; top: 144px;