commit 1ba3e0449378bd0def3f1597cdad50d0e551feb6 Author: Kathy Brade <brade@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 {