commit 0fb285c3ca6b2196406084a50b11c641f2b8406e Author: Kathy Brade brade@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; }