commit 8952236a3df76957ed1539f00c232978e032a59f
Author: Arthur Edelstein <arthuredelstein(a)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;