[tor-commits] [torbutton/master] Bug 11472: about:tor logo and text may overlap.

[mikeperry at torproject.org]

commit 0fb285c3ca6b2196406084a50b11c641f2b8406e
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Wed Jul 16 10:33:52 2014 -0400

    Bug 11472: about:tor logo and text may overlap.
    
    This problem occurred in some non-English locales (e.g., de).
    We now reduce the font size of some elements if necessary.
---
 src/chrome/content/aboutTor/aboutTor.xhtml |    9 ++++--
 src/chrome/content/torbutton.js            |   43 ++++++++++++++++++++++++++++
 src/chrome/skin/aboutTor.css               |    2 ++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index b99bc7e..f8f829d 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -132,15 +132,20 @@ function insertPropertyStrings()
 <div id="torstatus" class="top">
   <div id="torstatus-version"/>
   <div id="torstatus-image"/>
-  <div class="hideIfTorOff">
+  <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
     <h1>&aboutTor.success.label;</h1>
+    <br/>
     <h2 id="success2">&aboutTor.success2.label;</h2>
+    <br/>
     <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
+    <br/>
     <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
   </div>
-  <div class="hideIfTorOn">
+  <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
     <h1>&aboutTor.failure.label;</h1>
+    <br/>
     <h2>&aboutTor.failure2.label;</h2>
+    <br/>
     <h3>&aboutTor.failure3prefix.label;<a href="mailto:&aboutTor.failure3Link;"
 >&aboutTor.failure3Link;</a>&aboutTor.failure3suffix.label;</h3>
   </div>
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index 3e7cf62..f682f05 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -875,12 +875,55 @@ function torbutton_update_abouttor_doc(aDoc, aTorOn, aUpdateNeeded) {
       e.appendChild(aDoc.createTextNode(productName + '\n' + tbbVersion));
     } catch (e) {}
 
+    let containerName = "torstatus-" + (aTorOn ? "on" : "off") + "-container";
+    torbutton_adjust_abouttor_fontsizes(aDoc, containerName);
     torbutton_update_abouttor_arrow(aDoc);
   }
 
   return isAboutTor;
 }
 
+// Ensure that text in top area does not overlap the tor on/off (onion) image.
+// This is done by reducing the font sizes as necessary.
+function torbutton_adjust_abouttor_fontsizes(aDoc, aContainerName)
+{
+  let imgElem = aDoc.getElementById("torstatus-image");
+  let containerElem = aDoc.getElementById(aContainerName);
+  if (!imgElem || !containerElem)
+    return;
+
+  try
+  {
+    let imgRect = imgElem.getBoundingClientRect();
+
+    for (let textElem = containerElem.firstChild; textElem;
+         textElem = textElem.nextSibling)
+    {
+      if ((textElem.nodeType != textElem.ELEMENT_NODE) ||
+          (textElem.nodeName.toLowerCase() == "br"))
+      {
+        continue;
+      }
+
+      let textRect = textElem.getBoundingClientRect();
+      if (0 == textRect.width)
+        continue;
+
+      // Reduce font to 90% of previous size, repeating the process up to 7
+      // times.  This allows for a maximum reduction to just less than 50% of
+      // the original size.
+      let maxTries = 7;
+      while ((textRect.left < imgRect.right) && (--maxTries >= 0))
+      {
+        let style = aDoc.defaultView.getComputedStyle(textElem, null);
+        let fontSize = parseFloat(style.getPropertyValue("font-size"));
+        textElem.style.fontSize = (fontSize * 0.9) + "px";
+        textRect = textElem.getBoundingClientRect();
+      }
+    }
+  } catch (e) {}
+}
+
 // Determine X position of torbutton toolbar item and pass it through
 // to the xhtml document.
 function torbutton_update_abouttor_arrow(aDoc) {
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 192e345..0c12374 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -135,6 +135,8 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
   margin-left: 30px;
 }
 
+/* Use inline-block for text-oriented elements whose widths need to measured. */
+.torstatus-container *,
 .top div.hideIfTorIsUpToDate h3 {
   display: inline-block;
 }