commit c6d94fb1c74b579ea442395ad15cf37bf815e2df Author: Kathy Brade <brade@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;