[tbb-commits] [torbutton/maint-1.9.3] Bug 17792: Auto-adjust font size for donation banner l10n

[gk at torproject.org]

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