[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [torbutton/master] Bug #10640: Fix about:tor's pointer position for RTL languages.
commit 1ba3e0449378bd0def3f1597cdad50d0e551feb6
Author: Kathy Brade <brade@xxxxxxxxxxxxxxxxx>
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 {
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits