[tor-commits] [torbutton/master] Bug #10640: Fix about:tor's pointer position for RTL languages.

mikeperry at torproject.org mikeperry at torproject.org
Mon Feb 3 21:12:57 UTC 2014


commit 1ba3e0449378bd0def3f1597cdad50d0e551feb6
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Wed Jan 22 11:03:16 2014 -0500

    Bug #10640: Fix about:tor's pointer position for RTL languages.
    
    We now position the arrow so it points to the toolbar button regardless
    of its position.
---
 src/chrome/content/aboutTor/aboutTor.xhtml         |   80 +++++++++++++++++---
 .../content/aboutTor/onionArrow-extension.png      |  Bin 0 -> 1695 bytes
 src/chrome/content/aboutTor/onionArrow-right.png   |  Bin 0 -> 2503 bytes
 src/chrome/content/aboutTor/onionArrow-short.png   |  Bin 0 -> 1913 bytes
 src/chrome/content/aboutTor/onionArrowRight.png    |  Bin 1695 -> 0 bytes
 src/chrome/content/torbutton.js                    |   45 ++++++++++-
 src/chrome/skin/aboutTor.css                       |   21 +++--
 7 files changed, 126 insertions(+), 20 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index ce06941..6efe617 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) 2013, The Tor Project, Inc.
+   - Copyright (c) 2014, The Tor Project, Inc.
    - See LICENSE for licensing information.
    - vim: set sw=2 sts=2 ts=8 et syntax=xml:
   -->
@@ -25,24 +25,82 @@
  <![CDATA[
 function onLoad()
 {
-  window.addEventListener("resize", function() {
-    resizeToolbarIconArrow();
+  document.addEventListener("AboutTorAdjustArrow", function() {
+    adjustToolbarIconArrow();
   }, false);
 
   window.setTimeout( function() {
-    resizeToolbarIconArrow();
+    adjustToolbarIconArrow();
     document.getElementById('sx').focus();
   }, 0);
 }
 
-function resizeToolbarIconArrow()
+function adjustToolbarIconArrow()
 {
   var textElem = document.getElementById("updatePrompt");
-  var rightDiv = document.getElementById("toolbarIconArrowRight");
-  if (textElem && rightDiv)
+  var arrowDiv = document.getElementById("toolbarIconArrow");
+  var extDiv = document.getElementById("toolbarIconArrowExtension");
+  if (textElem && arrowDiv && extDiv)
   {
-    var width = textElem.offsetLeft - rightDiv.offsetLeft - 6;
-    rightDiv.style.width = width + "px";
+    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;
+    }
+
+    // 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).
+    {
+      arrowDisplay = "none";
+      extDisplay = "none";
+    }
+
+    arrowDiv.style.display = arrowDisplay;
+    extDiv.style.display = extDisplay;
   }
 }
 ]]>
@@ -70,8 +128,8 @@ function resizeToolbarIconArrow()
     <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
     <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
     <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
-    <div id="toolbarIconArrowLeft"/>
-    <div id="toolbarIconArrowRight"/>
+    <div id="toolbarIconArrow"/>
+    <div id="toolbarIconArrowExtension"/>
   </div>
 </div>
 
diff --git a/src/chrome/content/aboutTor/onionArrow-extension.png b/src/chrome/content/aboutTor/onionArrow-extension.png
new file mode 100644
index 0000000..7552f2d
Binary files /dev/null and b/src/chrome/content/aboutTor/onionArrow-extension.png differ
diff --git a/src/chrome/content/aboutTor/onionArrow-right.png b/src/chrome/content/aboutTor/onionArrow-right.png
new file mode 100644
index 0000000..b9f6d1e
Binary files /dev/null and b/src/chrome/content/aboutTor/onionArrow-right.png differ
diff --git a/src/chrome/content/aboutTor/onionArrow-short.png b/src/chrome/content/aboutTor/onionArrow-short.png
new file mode 100644
index 0000000..23e5a20
Binary files /dev/null and b/src/chrome/content/aboutTor/onionArrow-short.png differ
diff --git a/src/chrome/content/aboutTor/onionArrowRight.png b/src/chrome/content/aboutTor/onionArrowRight.png
deleted file mode 100644
index 7552f2d..0000000
Binary files a/src/chrome/content/aboutTor/onionArrowRight.png and /dev/null differ
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index c9e03e9..3b51c86 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -512,6 +512,11 @@ function torbutton_init() {
 
     torbutton_log(1, "registering Tor check observer");
     torbutton_tor_check_observer.register();
+
+    // Detect toolbar customization and update arrow on about:tor pages.
+    window.addEventListener("aftercustomization", function() {
+      torbutton_update_all_abouttor_pages(undefined, undefined);
+    }, false);
     
     //setting up context menu
     //var contextMenu = document.getElementById("contentAreaContextMenu");
@@ -848,8 +853,8 @@ function torbutton_update_abouttor_doc(aDoc, aTorOn, aUpdateNeeded) {
     else
       aDoc.body.removeAttribute("torNeedsUpdate");
 
-    try
-    {
+    // Display product name and TBB version.
+    try {
       const kBrandBundle = "chrome://branding/locale/brand.properties";
       let brandBundle = Cc["@mozilla.org/intl/stringbundle;1"]
                           .getService(Ci.nsIStringBundleService)
@@ -862,11 +867,43 @@ function torbutton_update_abouttor_doc(aDoc, aTorOn, aUpdateNeeded) {
         e.removeChild(e.firstChild);
       e.appendChild(aDoc.createTextNode(productName + '\n' + tbbVersion));
     } catch (e) {}
+
+    torbutton_update_abouttor_arrow(aDoc);
   }
 
   return isAboutTor;
 }
 
+// Determine X position of torbutton toolbar item and pass it through
+// to the xhtml document.
+function torbutton_update_abouttor_arrow(aDoc) {
+  try {
+    let tbXpos = -1;
+    let tbItem = torbutton_get_toolbutton();
+    if (tbItem) {
+      let tbItemRect = tbItem.getBoundingClientRect();
+      let contentElem = document.getElementById("content");
+      let contentRect = contentElem.getBoundingClientRect();
+      if (tbItemRect.top < contentRect.top) {
+        tbXpos = tbItemRect.left + (tbItemRect.width / 2.0) -
+                    contentElem.getBoundingClientRect().left;
+      }
+    }
+    if (tbXpos >= 0) {
+     if ("devicePixelRatio" in window)     // FF18+
+       tbXpos *= window.devicePixelRatio;  // Convert to device pixels.
+
+      tbXpos = Math.round(tbXpos);
+      aDoc.body.setAttribute("torbutton-xpos", tbXpos);
+    } else {
+      aDoc.body.removeAttribute("torbutton-xpos");
+    }
+
+    let evt = new Event("AboutTorAdjustArrow");
+    aDoc.dispatchEvent(evt);
+  } catch(e) {}
+}
+
 function torbutton_override_BrowserOnAboutPageLoad(aDoc) {
   if (torbutton_is_abouttor_doc(aDoc) &&
       !aDoc.documentElement.hasAttribute("aboutTorLoaded")) {
@@ -877,6 +914,10 @@ function torbutton_override_BrowserOnAboutPageLoad(aDoc) {
     let needsUpdate = torbutton_update_is_needed();
     torbutton_update_abouttor_doc(aDoc, torOn, needsUpdate);
 
+    aDoc.defaultView.addEventListener("resize",
+                      function() { torbutton_update_abouttor_arrow(aDoc); },
+                      false);
+
     // Insert "Test Tor Network Settings" url.
     let elem = aDoc.getElementById("testTorSettings");
     if (elem) {
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 12f8a09..192e345 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2013, The Tor Project, Inc.
+ * Copyright (c) 2014, The Tor Project, Inc.
  * See LICENSE for licensing information.
  *
  * vim: set sw=2 sts=2 ts=8 et syntax=css:
@@ -58,22 +58,29 @@ body[toron] #torstatus-image {
   background-image: url('chrome://torbutton/content/aboutTor/tor-off.png');
 }
 
-#toolbarIconArrowLeft, #toolbarIconArrowRight {
+#toolbarIconArrow, #toolbarIconArrowExtension {
   position: absolute;
   top: 4px;
   height: 250px;
 }
 
-#toolbarIconArrowLeft {
-  left: 78px;
+#toolbarIconArrow {
   width: 30px;
   background-image: url('chrome://torbutton/content/aboutTor/onionArrow.png');
 }
 
-#toolbarIconArrowRight {
-  left: 108px;
+#toolbarIconArrow[pos="middle"] {
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-short.png');
+  height: 36px;
+}
+
+#toolbarIconArrow[pos="right"] {
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-right.png');
+}
+
+#toolbarIconArrowExtension {
   width: 10px;
-  background-image: url('chrome://torbutton/content/aboutTor/onionArrowRight.png');
+  background-image: url('chrome://torbutton/content/aboutTor/onionArrow-extension.png');
 }
 
 a {





More information about the tor-commits mailing list