commit 08728b3bfac14fe5a325fe94cc9e7d6fe106b559
Author: Kathy Brade <brade(a)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;
