[tbb-commits] [torbutton/master] Bug 16735: about:tor should accommodate different fonts/font sizes.

mikeperry at torproject.org mikeperry at torproject.org
Wed Sep 16 04:05:59 UTC 2015


commit 08728b3bfac14fe5a325fe94cc9e7d6fe106b559
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Mon Sep 14 11:37:14 2015 -0400

    Bug 16735: about:tor should accommodate different fonts/font sizes.
    
    Avoid hard-coded heights and positions in about:tor. The "update needed"
      arrow is now constructed from 4 elements instead of 2 and the info.
      "bubbles" use table layout instead of hard-coded heights.
    Set the CSS z-index so that text will be in front of the status image
      (onion image) and the "update needed" arrow.
    Use "let" instead of "var" in the about:tor JS code.
---
 src/chrome/content/aboutTor/aboutTor.xhtml         |  205 ++++++++++++--------
 .../content/aboutTor/onionArrow-extension.png      |  Bin 1695 -> 1798 bytes
 .../content/aboutTor/onionArrow-leftBend.png       |  Bin 0 -> 2080 bytes
 src/chrome/content/aboutTor/onionArrow-right.png   |  Bin 2503 -> 0 bytes
 .../content/aboutTor/onionArrow-rightBend.png      |  Bin 0 -> 2077 bytes
 src/chrome/content/aboutTor/onionArrow.png         |  Bin 2381 -> 0 bytes
 src/chrome/skin/aboutTor.css                       |   68 +++----
 7 files changed, 157 insertions(+), 116 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index 95807fd..0991ebe 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-   - Copyright (c) 2014, The Tor Project, Inc.
+   - Copyright (c) 2015, The Tor Project, Inc.
    - See LICENSE for licensing information.
    - vim: set sw=2 sts=2 ts=8 et syntax=xml:
   -->
@@ -38,86 +38,122 @@ function onLoad()
 
 function adjustToolbarIconArrow()
 {
-  var textElem = document.getElementById("updatePrompt");
-  var arrowDiv = document.getElementById("toolbarIconArrow");
-  var extDiv = document.getElementById("toolbarIconArrowExtension");
-  if (textElem && arrowDiv && extDiv)
+  let textElem = document.getElementById("updatePrompt");
+  let arrowHeadDiv = document.getElementById("toolbarIconArrowHead");
+  let vertExtDiv = document.getElementById("toolbarIconArrowVertExtension");
+  let bendDiv = document.getElementById("toolbarIconArrowBend");
+  let horzExtDiv = document.getElementById("toolbarIconArrowHorzExtension");
+  if (!textElem || !arrowHeadDiv || !vertExtDiv || !bendDiv || !horzExtDiv)
+    return;
+
+  let arrowTailElems = [ vertExtDiv, bendDiv, horzExtDiv ];
+  let tbXpos;
+  if (document.body.hasAttribute("torbutton-xpos"))
+    tbXpos = parseInt(document.body.getAttribute("torbutton-xpos"), 10);
+
+  if (!tbXpos || isNaN(tbXpos) || (tbXpos < 0))
   {
-    var tbXpos;
-    if (document.body.hasAttribute("torbutton-xpos"))
-      tbXpos = parseInt(document.body.getAttribute("torbutton-xpos"), 10);
-
-    if (!tbXpos || isNaN(tbXpos) || (tbXpos < 0))
-    {
-      arrowDiv.style.display = "none";
-      extDiv.style.display = "none";
-      return;
-    }
+    arrowHeadDiv.style.display = "none";
+    for (let elem of arrowTailElems)
+      elem.style.display = "none";
+    return;
+  }
 
-    // Account for content zoom and retina displays by converting to device
-    // independent units.
-    if ("devicePixelRatio" in window)  // FF18+
-      tbXpos /= window.devicePixelRatio;
-
-    const kArrowMargin = 6;
-    arrowDiv.style.display = "block";  // Must be visible to get offsetWidth.
-    var arrowHalfWidth = arrowDiv.offsetWidth / 2.0;
-    var leftAnchor = textElem.offsetLeft - kArrowMargin - arrowHalfWidth;
-    var rightAnchor = textElem.offsetLeft + textElem.offsetWidth
-                      + kArrowMargin + arrowHalfWidth;
-
-    var arrowDisplay = "block";
-    var extDisplay = "block";
-    if (tbXpos < leftAnchor)
-    {
-      // Toolbar button to left of text.
-      arrowDiv.setAttribute("pos", "left");
-      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
-      var extLeft = tbXpos + arrowHalfWidth;
-      extDiv.style.left = extLeft + "px";
-      extDiv.style.width = (textElem.offsetLeft - extLeft - kArrowMargin) + "px";
-    }
-    else if ((tbXpos > rightAnchor) &&
-             (tbXpos < (window.innerWidth - arrowHalfWidth)))
-    {
-      // Toolbar button to right of text.
-      arrowDiv.setAttribute("pos", "right");
-      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
-      var extLeft = rightAnchor - arrowHalfWidth;
-      extDiv.style.left = extLeft + "px";
-      extDiv.style.width = (tbXpos - arrowHalfWidth - extLeft) + "px";
-    }
-    else if ((tbXpos >= leftAnchor) && (tbXpos <= rightAnchor))
-    {
-      // Toolbar button in middle about text; use arrow without a tail.
-      arrowDiv.setAttribute("pos", "middle");
-      arrowDiv.style.left = (tbXpos - arrowHalfWidth) + "px";
-      extDisplay = "none";
-    }
-    else  // Unable to display arrow (e.g., toolbar button is above sidebar).
+  // Account for content zoom and retina displays by converting to device
+  // independent units.
+  if ("devicePixelRatio" in window)  // FF18+
+    tbXpos /= window.devicePixelRatio;
+
+  const kArrowMargin = 6;          // Horizontal margin between line and text.
+  const kArrowHeadExtraWidth = 9;  // Horizontal margin to the line.
+  const kArrowLineThickness = 11;
+  const kBendWidth = 22;
+  const kBendHeight = 22;
+
+  arrowHeadDiv.style.display = "block";  // Must be visible to get offsetWidth.
+  let arrowHalfWidth = Math.round(arrowHeadDiv.offsetWidth / 2);
+  let leftAnchor = textElem.offsetLeft - kArrowMargin
+                    - kBendWidth + Math.round(kArrowLineThickness / 2);
+  let rightAnchor = textElem.offsetLeft + textElem.offsetWidth
+                    + kArrowMargin + arrowHalfWidth;
+
+  let isArrowOnLeft = (tbXpos < leftAnchor);
+  let isArrowOnRight = (tbXpos > rightAnchor) &&
+                       (tbXpos < (window.innerWidth - arrowHalfWidth));
+  let isArrowInMiddle = (tbXpos >= leftAnchor) && (tbXpos <= rightAnchor);
+
+  if (isArrowOnLeft || isArrowOnRight || isArrowInMiddle)
+  {
+    // Position the arrow head.
+    let arrowHeadLeft = tbXpos - arrowHalfWidth;
+    arrowHeadDiv.style.left = arrowHeadLeft + "px";
+    if (isArrowOnLeft || isArrowOnRight)
     {
-      arrowDisplay = "none";
-      extDisplay = "none";
+      let horzExtBottom = textElem.offsetTop +
+               Math.round((textElem.offsetHeight + kArrowLineThickness) / 2);
+
+      // Position the vertical (extended) line.
+      let arrowHeadBottom = arrowHeadDiv.offsetTop + arrowHeadDiv.offsetHeight;
+      vertExtDiv.style.top = arrowHeadBottom + "px";
+      vertExtDiv.style.left = (arrowHeadLeft + kArrowHeadExtraWidth) + "px";
+      let ht = horzExtBottom - kBendHeight - arrowHeadBottom;
+      vertExtDiv.style.height = ht + "px";
+
+      // Position the bend (elbow).
+      bendDiv.style.top = (horzExtBottom - kBendHeight) + "px";
+      let bendDivLeft;
+      if (isArrowOnLeft)
+      {
+        bendDiv.setAttribute("pos", "left");
+        bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth;
+      }
+      else if (isArrowOnRight)
+      {
+        bendDiv.setAttribute("pos", "right");
+        bendDivLeft = arrowHeadLeft + kArrowHeadExtraWidth
+                      + kArrowLineThickness - kBendWidth;
+      }
+      bendDiv.style.left = bendDivLeft + "px";
+
+      // Position the horizontal (extended) line.
+      horzExtDiv.style.top = (horzExtBottom - kArrowLineThickness) + "px";
+      let horzExtLeft, w;
+      if (isArrowOnLeft)
+      {
+        horzExtLeft = bendDivLeft + kBendWidth;
+        w = (textElem.offsetLeft - horzExtLeft - kArrowMargin);
+      }
+      else
+      {
+        horzExtLeft = rightAnchor - arrowHalfWidth;
+        w = tbXpos - arrowHalfWidth - horzExtLeft;
+      }
+      horzExtDiv.style.left = horzExtLeft + "px";
+      horzExtDiv.style.width = w + "px";
     }
-
-    arrowDiv.style.display = arrowDisplay;
-    extDiv.style.display = extDisplay;
   }
+
+  let headDisplay = (isArrowOnLeft || isArrowInMiddle || isArrowOnRight)
+                      ? "block" : "none";
+  arrowHeadDiv.style.display = headDisplay;
+  let tailDisplay = (isArrowOnLeft || isArrowOnRight) ? "block" : "none";
+  for (let elem of arrowTailElems)
+    elem.style.display = tailDisplay;
 }
 
 function insertPropertyStrings()
 {
   try {
-    var kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
+    let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
 
     Components.utils.import("resource://gre/modules/Services.jsm");
-    var gStringBundle = Services.strings.createBundle(kPropertiesURL);
-    var s1 = gStringBundle.GetStringFromName("aboutTor.searchDC.privacy.link");
-    var s2 = gStringBundle.GetStringFromName("aboutTor.searchDC.search.link");
-    var result = gStringBundle.formatStringFromName("aboutTor.searchDC.privacy",
+    let gStringBundle = Services.strings.createBundle(kPropertiesURL);
+    let s1 = gStringBundle.GetStringFromName("aboutTor.searchDC.privacy.link");
+    let s2 = gStringBundle.GetStringFromName("aboutTor.searchDC.search.link");
+    let result = gStringBundle.formatStringFromName("aboutTor.searchDC.privacy",
                   [s1, s2], 2);
     if (result) {
-      var elem = document.getElementById("searchProviderInfo");
+      let elem = document.getElementById("searchProviderInfo");
       if (elem)
         elem.innerHTML = result;
     }
@@ -159,8 +195,11 @@ window.addEventListener("pageshow", function() {
     <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
     <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
     <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
-    <div id="toolbarIconArrow"/>
-    <div id="toolbarIconArrowExtension"/>
+
+    <div id="toolbarIconArrowHead" class="arrow"/>
+    <div id="toolbarIconArrowVertExtension" class="arrow"/>
+    <div id="toolbarIconArrowBend" class="arrow"/>
+    <div id="toolbarIconArrowHorzExtension" class="arrow"/>
   </div>
 </div>
 
@@ -180,20 +219,22 @@ window.addEventListener("pageshow", function() {
 <div class="hideIfTorOn" style="height:100px"/>
 
 <div id="middle" class="hideIfTorOff">
-  <div class="container two">
-    <h1>&aboutTor.whatnextQuestion.label;</h1>
-    <p>&aboutTor.whatnextAnswer.label;</p>
-    <a class="tips" href="&aboutTor.whatnext.link;">&aboutTor.whatnext.label;</a>
-  </div>
+  <div class="bubbleRow">
+    <div class="bubble">
+      <h1>&aboutTor.whatnextQuestion.label;</h1>
+      <p>&aboutTor.whatnextAnswer.label;</p>
+      <a class="tips" href="&aboutTor.whatnext.link;">&aboutTor.whatnext.label;</a>
+    </div>
 
-  <div class="container three">
-    <h1>&aboutTor.helpInfo1.label;</h1>
-    <p>&aboutTor.helpInfo2.label;</p>
-    <ul>
-      <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
-      <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
-      <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
-    </ul>
+    <div class="bubble">
+      <h1>&aboutTor.helpInfo1.label;</h1>
+      <p>&aboutTor.helpInfo2.label;</p>
+      <ul>
+        <li><a href="&aboutTor.helpInfo3.link;">&aboutTor.helpInfo3.label;</a></li>
+        <li><a href="&aboutTor.helpInfo4.link;">&aboutTor.helpInfo4.label;</a></li>
+        <li><a href="&aboutTor.helpInfo5.link;">&aboutTor.helpInfo5.label;</a></li>
+      </ul>
+    </div>
   </div>
 </div> <!-- middle -->
 
diff --git a/src/chrome/content/aboutTor/onionArrow-extension.png b/src/chrome/content/aboutTor/onionArrow-extension.png
index 7552f2d..55ff208 100644
Binary files a/src/chrome/content/aboutTor/onionArrow-extension.png and b/src/chrome/content/aboutTor/onionArrow-extension.png differ
diff --git a/src/chrome/content/aboutTor/onionArrow-leftBend.png b/src/chrome/content/aboutTor/onionArrow-leftBend.png
new file mode 100644
index 0000000..9d1bb45
Binary files /dev/null and b/src/chrome/content/aboutTor/onionArrow-leftBend.png differ
diff --git a/src/chrome/content/aboutTor/onionArrow-right.png b/src/chrome/content/aboutTor/onionArrow-right.png
deleted file mode 100644
index b9f6d1e..0000000
Binary files a/src/chrome/content/aboutTor/onionArrow-right.png and /dev/null differ
diff --git a/src/chrome/content/aboutTor/onionArrow-rightBend.png b/src/chrome/content/aboutTor/onionArrow-rightBend.png
new file mode 100644
index 0000000..6b60342
Binary files /dev/null and b/src/chrome/content/aboutTor/onionArrow-rightBend.png differ
diff --git a/src/chrome/content/aboutTor/onionArrow.png b/src/chrome/content/aboutTor/onionArrow.png
deleted file mode 100644
index c778568..0000000
Binary files a/src/chrome/content/aboutTor/onionArrow.png and /dev/null differ
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 1342404..ab8dba8 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014, The Tor Project, Inc.
+ * Copyright (c) 2015, The Tor Project, Inc.
  * See LICENSE for licensing information.
  *
  * vim: set sw=2 sts=2 ts=8 et syntax=css:
@@ -56,31 +56,36 @@ body[toron] #torstatus-image {
   height: 128px;
   width: 128px;
   background-image: url('chrome://torbutton/content/aboutTor/tor-off.png');
+  z-index: -1;
 }
 
-#toolbarIconArrow, #toolbarIconArrowExtension {
+.arrow {
+  display: none;
   position: absolute;
-  top: 4px;
-  height: 250px;
+  z-index: -1;
 }
 
-#toolbarIconArrow {
+#toolbarIconArrowHead {
+  top: 4px;
   width: 30px;
-  background-image: url('chrome://torbutton/content/aboutTor/onionArrow.png');
+  height: 36px;
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-short.png');
 }
 
-#toolbarIconArrow[pos="middle"] {
-  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-short.png');
-  height: 36px;
+#toolbarIconArrowVertExtension, #toolbarIconArrowHorzExtension {
+  width: 11px;
+  height: 11px;
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-extension.png');
 }
 
-#toolbarIconArrow[pos="right"] {
-  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-right.png');
+#toolbarIconArrowBend {
+  width: 22px;
+  height: 22px;
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-leftBend.png');
 }
 
-#toolbarIconArrowExtension {
-  width: 10px;
-  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-extension.png');
+#toolbarIconArrowBend[pos="right"] {
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-rightBend.png');
 }
 
 a {
@@ -102,7 +107,7 @@ a:hover {
 #torstatus {
   position: relative; /* needed for torstatus-image positioning */
   max-width: 620px;
-  height: 148px;
+  min-height: 148px;
   padding: 15px 128px 0px 128px;
   margin: 20px auto 0px auto;
 }
@@ -168,20 +173,23 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
 }
 
 #middle {
-  position: relative;
-  width: 920px;
-  height: 20em;
+  display: table;
+  width: 904px;   /* 920px - (2 * 8px extra side margin) */
+  margin: 40px auto 10px auto;
+  border-spacing: 100px 0px;
+  border-collapse: separate;
   text-align: center;
 }
 
-#middle div.container {
-  position: absolute;
-  top: 3.1em;
-  width: 280px;
-  min-width: 280px;
-  min-height: 12.5em;
+.bubbleRow {
+  display: table-row;
+}
+
+.bubbleRow div.bubble {
+  display: table-cell;
+  width: 50%;
+  height: 100%;
   padding: 10px 10px;
-  margin: 8px 8px;
   color: #222222;
   background-color: #FFFFFF;
   border: 1px solid #008000;
@@ -190,14 +198,6 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
   vertical-align: top;
 }
 
-#middle div.two {
-  left: 120px;
-}
-
-#middle div.three {
-  left: 520px;
-}
-
 #middle h1 {
   font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
   font-size: 1.9em;
@@ -334,7 +334,7 @@ body .top div.hideIfTorIsUpToDate h1.hideIfTorOff {
 /* #sx is the search input (text) field */
 #sx {
   width: 350px;
-  height: 23px;
+  min-height: 23px;
   padding: 4px 6px 5px 6px;
   margin: 0;
   outline: none;





More information about the tbb-commits mailing list