[tor-commits] [torbutton/master] Bug 26960: implement new about:tor start page
gk at torproject.org
gk at torproject.org
Tue Aug 14 21:02:01 UTC 2018
commit 985bcbf8323c159b18345fbfc010a7277d54559f
Author: Kathy Brade <brade at pearlcrescent.com>
Date: Fri Jul 27 12:23:36 2018 -0400
Bug 26960: implement new about:tor start page
Implement new design from UX team.
Remove "update needed" notification (will be addressed by bug 25694).
---
src/chrome/content/aboutTor/aboutTor-content.js | 222 +--------------
src/chrome/content/aboutTor/aboutTor.xhtml | 212 +++++++++-----
src/chrome/content/torbutton.js | 63 +----
src/chrome/locale/en/aboutTor.dtd | 42 +--
src/chrome/locale/en/aboutTor.properties | 8 +-
src/chrome/skin/aboutTor.css | 353 ++++++++++--------------
src/chrome/skin/forwardArrow.png | Bin 0 -> 258 bytes
src/chrome/skin/onionArrow-extension.png | Bin 1798 -> 0 bytes
src/chrome/skin/onionArrow-leftBend.png | Bin 2080 -> 0 bytes
src/chrome/skin/onionArrow-rightBend.png | Bin 2077 -> 0 bytes
src/chrome/skin/onionArrow-short.png | Bin 1913 -> 0 bytes
src/chrome/skin/search.png | Bin 934 -> 0 bytes
src/chrome/skin/searchLogo.png | Bin 0 -> 1912 bytes
src/chrome/skin/tor-off.png | Bin 5835 -> 0 bytes
src/chrome/skin/tor-on.png | Bin 17945 -> 0 bytes
src/defaults/preferences/preferences.js | 1 -
16 files changed, 318 insertions(+), 583 deletions(-)
diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js
index 1a8d5cfa..c2e26c8c 100644
--- a/src/chrome/content/aboutTor/aboutTor-content.js
+++ b/src/chrome/content/aboutTor/aboutTor-content.js
@@ -12,8 +12,6 @@
* the code in torbutton.js:
* AboutTor:Loaded page loaded content -> chrome
* AboutTor:ChromeData privileged data chrome -> content
- * AboutTor:GetToolbarData request toolbar info content -> chrome
- * AboutTor:ToolbarData toolbar info chrome -> content
*/
var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
@@ -24,7 +22,8 @@ let { bindPrefAndInit } = Cu.import("resource://torbutton/modules/utils.js", {})
var AboutTorListener = {
- kAboutTorMessages: [ "AboutTor:ChromeData", "AboutTor:ToolbarData" ],
+ kAboutTorLoadedMessage: "AboutTor:Loaded",
+ kAboutTorChromeDataMessage: "AboutTor:ChromeData",
get isAboutTor() {
return content.document.documentURI.toLowerCase() == "about:tor";
@@ -45,9 +44,6 @@ var AboutTorListener = {
case "pagehide":
this.onPageHide();
break;
- case "resize":
- sendAsyncMessage("AboutTor:GetToolbarData");
- break;
}
},
@@ -56,12 +52,9 @@ var AboutTorListener = {
return;
switch (aMessage.name) {
- case "AboutTor:ChromeData":
+ case this.kAboutTorChromeDataMessage:
this.onChromeDataUpdate(aMessage.data);
break;
- case "AboutTor:ToolbarData":
- this.onToolbarDataUpdate(aMessage.data);
- break;
}
},
@@ -74,70 +67,42 @@ var AboutTorListener = {
});
// Add message and event listeners.
- this.kAboutTorMessages.forEach(aMsg => addMessageListener(aMsg, this));
- addMessageListener("AboutTor:ChromeData", this);
+ addMessageListener(this.kAboutTorChromeDataMessage, this);
addEventListener("pagehide", this, false);
addEventListener("resize", this, false);
- sendAsyncMessage("AboutTor:Loaded");
+ sendAsyncMessage(this.kAboutTorLoadedMessage);
},
onPageHide: function() {
removeEventListener("resize", this, false);
removeEventListener("pagehide", this, false);
- this.kAboutTorMessages.forEach(aMsg => removeMessageListener(aMsg, this));
+ removeMessageListener(this.kAboutTorChromeDataMessage, this);
},
onChromeDataUpdate: function(aData) {
let body = content.document.body;
- // Update status: tor on/off, update needed, Tor Browser manual shown.
+ // Update status: tor on/off, Tor Browser manual shown.
if (aData.torOn)
body.setAttribute("toron", "yes");
else
body.removeAttribute("toron");
- if (aData.updateNeeded)
- body.setAttribute("torNeedsUpdate", "yes");
- else
- body.removeAttribute("torNeedsUpdate");
-
if (aData.showManual)
body.setAttribute("showmanual", "yes");
else
body.removeAttribute("showmanual");
- // Setting body.initialized="yes" displays the body, which must be done
- // at this point because our remaining initialization depends on elements
- // being visible so that their size and position are accurate.
+ // Setting body.initialized="yes" displays the body.
body.setAttribute("initialized", "yes");
-
- let containerName = "torstatus-" + (aData.torOn ? "on" : "off") +
- "-container";
- this.adjustFontSizes(containerName);
-
- this.onToolbarDataUpdate(aData);
- },
-
- onToolbarDataUpdate: function(aData) {
- this.adjustArrow(aData.toolbarButtonXPos);
},
onLocaleChange: function(aLocale) {
- this.insertPropertyStrings();
-
// Set Tor Browser manual link.
content.document.getElementById("manualLink").href =
"https://tb-manual.torproject.org/" + aLocale;
- // Insert "Test Tor Network Settings" url.
- let elem = content.document.getElementById("testTorSettings");
- if (elem) {
- let url = Services.prefs.getCharPref(
- "extensions.torbutton.test_url_interactive");
- elem.href = url.replace(/__LANG__/g, aLocale.replace(/-/g, '_'));
- }
-
// Display the Tor Browser product name and version.
try {
const kBrandBundle = "chrome://branding/locale/brand.properties";
@@ -153,177 +118,6 @@ var AboutTorListener = {
elem.appendChild(content.document.createTextNode(productName + '\n'
+ tbbVersion));
} catch (e) {}
- },
-
- insertPropertyStrings: function() {
- try {
- let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
-
- let stringBundle = Services.strings.createBundle(kPropertiesURL);
- let s1 = stringBundle.GetStringFromName("aboutTor.searchDDG.privacy.link");
- let s2 = stringBundle.GetStringFromName("aboutTor.searchDDG.search.link");
- let result = stringBundle.formatStringFromName(
- "aboutTor.searchDDG.privacy", [s1, s2], 2);
- if (result) {
- let elem = content.document.getElementById("searchProviderInfo");
- if (elem)
- elem.innerHTML = result;
- }
- } catch(e) {}
- },
-
- // Ensure that text in top area does not overlap the tor on/off (onion) image.
- // This is done by reducing the font sizes as necessary.
- adjustFontSizes: function(aContainerName)
- {
- let imgElem = content.document.getElementById("torstatus-image");
- let containerElem = content.document.getElementById(aContainerName);
- if (!imgElem || !containerElem)
- return;
-
- try
- {
- let imgRect = imgElem.getBoundingClientRect();
-
- for (let textElem = containerElem.firstChild; textElem;
- textElem = textElem.nextSibling)
- {
- if ((textElem.nodeType != textElem.ELEMENT_NODE) ||
- (textElem.nodeName.toLowerCase() == "br"))
- {
- continue;
- }
-
- let textRect = textElem.getBoundingClientRect();
- if (0 == textRect.width)
- continue;
-
- // Reduce font to 90% of previous size, repeating the process up to 7
- // times. This allows for a maximum reduction to just less than 50% of
- // the original size.
- let maxTries = 7;
- while ((textRect.left < imgRect.right) && (--maxTries >= 0))
- {
- let style = content.document.defaultView
- .getComputedStyle(textElem, null);
- let fontSize = parseFloat(style.getPropertyValue("font-size"));
- textElem.style.fontSize = (fontSize * 0.9) + "px";
- textRect = textElem.getBoundingClientRect();
- }
- }
-
- } catch (e) {}
- },
-
- adjustArrow: function(aToolbarButtonXPos)
- {
- let win = content;
- let doc = content.document;
- let textElem = doc.getElementById("updatePrompt");
- let arrowHeadDiv = doc.getElementById("toolbarIconArrowHead");
- let vertExtDiv = doc.getElementById("toolbarIconArrowVertExtension");
- let bendDiv = doc.getElementById("toolbarIconArrowBend");
- let horzExtDiv = doc.getElementById("toolbarIconArrowHorzExtension");
- if (!textElem || !arrowHeadDiv || !vertExtDiv || !bendDiv || !horzExtDiv)
- return;
-
- let arrowTailElems = [ vertExtDiv, bendDiv, horzExtDiv ];
- if (!aToolbarButtonXPos || isNaN(aToolbarButtonXPos) ||
- (aToolbarButtonXPos < 0))
- {
- arrowHeadDiv.style.display = "none";
- for (let elem of arrowTailElems)
- elem.style.display = "none";
- return;
- }
-
- 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;
-
- try {
- // Compensate for any content zoom that may be in effect on about:tor.
- // Because window.devicePixelRatio always returns 1.0 for non-Chrome
- // windows (see bug 13875), we use screenPixelsPerCSSPixel for the
- // content window.
- let pixRatio = content.QueryInterface(Ci.nsIInterfaceRequestor)
- .getInterface(Ci.nsIDOMWindowUtils)
- .screenPixelsPerCSSPixel;
- let tbXpos = Math.round(aToolbarButtonXPos / pixRatio);
-
- 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 < (win.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)
- {
- 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";
- }
- }
-
- 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;
- } catch (e) {}
}
};
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index 5cb2a605..c2bbcb25 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -31,87 +31,173 @@ window.addEventListener("pageshow", function() {
</script>
</head>
<body dir="&locale.dir;">
- <div class="hideIfTorIsUpToDate">
- <div id="toolbarIconArrowHead" class="arrow"/>
- <div id="toolbarIconArrowVertExtension" class="arrow"/>
- <div id="toolbarIconArrowBend" class="arrow"/>
- <div id="toolbarIconArrowHorzExtension" class="arrow"/>
- </div>
<div class="torcontent-container">
<div id="torstatus-version"/>
<div id="torstatus" class="top">
- <div id="torstatus-image"/>
<div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
- <h1>&aboutTor.success.label;</h1>
- <br/>
- <h3 class="hideIfTBBNeedsUpdate">&aboutTor.success3.label;</h3>
+ <div class="heading1">&aboutTor.ready.label;</div>
<br/>
- <div style="margin-top: 20px;">
- <a id="testTorSettings" href="about:blank">&aboutTor.check.label;</a>
- </div>
+ <div class="heading2">&aboutTor.ready2.label;</div>
</div>
<div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
- <h1>&aboutTor.failure.label;</h1>
+ <div class="heading1">&aboutTor.failure.label;</div>
<br/>
- <h2>&aboutTor.failure2.label;</h2>
- </div>
- </div>
- <div class="top">
- <div class="hideIfTorIsUpToDate">
- <h1 class="hideIfTorOff">&aboutTor.outOfDateTorOn.label;</h1>
- <h1 class="hideIfTorOn">&aboutTor.outOfDateTorOff.label;</h1>
- <div>
- <h3 id="updatePrompt">&aboutTor.outOfDate2.label;</h3>
- </div>
+ <div class="heading2">&aboutTor.failure2.label;</div>
</div>
</div>
<div class="searchbox hideIfTorOff"> <!-- begin form based search -->
<form action="&aboutTor.searchDDGPost.link;" method="post">
- <div id="sxw">
- <div id="sbutton">
- <input name="b" id="sb" value="" title="&aboutTor.search.label;"
- alt="&aboutTor.search.label;" type="submit"/>
+ <div class="searchwrapper">
+ <label class="searchlabel" for="search-text"> </label>
+ <input name="q" id="search-text" placeholder="&aboutTor.search.label;"
+ autocomplete="off" type="text"/>
+ <input name="b" id="search-button" value=""
+ title="&aboutTor.search.label;"
+ alt="&aboutTor.search.label;" type="submit"/>
</div>
- <input name="q" autocomplete="off" id="sx" type="text"/>
- </div>
- <h4 id="searchProviderInfo" />
</form>
</div>
- <div class="hideIfTorOn" style="height:100px"/>
-
- <div id="middle" class="hideIfTorOff">
- <div class="bubble">
- <h1>&aboutTor.whatnextQuestion.label;</h1>
- <p>&aboutTor.whatnextAnswer.label;</p>
- <ul>
- <li>
- <a href="&aboutTor.whatnext.link;">
- &aboutTor.whatnext.label;
- </a>
- </li>
- <li class="showForManual">
- <a id="manualLink">
- &aboutTor.torbrowser_user_manual.label; »
- </a>
- </li>
- </ul>
- </div>
- <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> <!-- middle -->
-
<div id="bottom">
- <p>&aboutTor.footer.label;
- <a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
+ <p class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
+ <a id="manualLink">&aboutTor.torbrowser_user_manual_link.label;</a></p>
+ <p>&aboutTor.tor_mission.label;
+ <a href="&aboutTor.getInvolved.link;">&aboutTor.getInvolved.label;</a></p>
+ </div>
+ </div>
+
+<!--
+ - The abstract onion pattern begins here. There are two
+ - "onion-pattern-row" elements, each containing 14 circles. The width
+ - of "onion-pattern-row" is fixed at a value that is wide enough so the
+ - circles are not distorted by the flex-based layout. The parent
+ - "onion-pattern-container" element has overflow: hidden and is designed
+ - to expand to the width of the page, until it reaches a maximum width
+ - that can accommodate all 14 circles. Since the rows are wider than
+ - most browser windows, typically the two rows of onions will fill the
+ - bottom of the page. On really wide pages, the onions are centered at
+ - the bottom of the page.
+ -->
+ <div class="onion-pattern-container">
+ <div class="onion-pattern-row">
+ <div class="circle solid"></div>
+
+ <div class="circle border"></div>
+
+ <div class="circle border">
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ </div>
+
+ <div class="circle">
+ <div class="half solid"></div>
+ <div class="half dotted"></div>
+ </div>
+
+ <div class="circle dotted"></div>
+
+ <div class="circle dotted">
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ </div>
+
+ <div class="circle dashed"></div>
+
+ <div class="circle dashed">
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ </div>
+
+ <div class="circle bold"></div>
+
+ <div class="circle solid"></div>
+
+ <div class="circle dotted">
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ </div>
+
+ <div class="circle border">
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ </div>
+
+ <div class="circle">
+ <div class="half solid"></div>
+ <div class="half solid"></div>
+ </div>
+
+ <div class="circle dashed">
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ </div>
+ </div>
+
+ <div class="onion-pattern-row onion-pattern-offset-row">
+ <div class="circle dashed">
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ </div>
+
+ <div class="circle bold"></div>
+
+ <div class="circle solid"></div>
+
+ <div class="circle dotted">
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ </div>
+
+ <div class="circle border">
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ </div>
+
+ <div class="circle">
+ <div class="half solid"></div>
+ <div class="half solid"></div>
+ </div>
+
+ <div class="circle dashed">
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ <div class="inner dashed"></div>
+ </div>
+
+ <div class="circle solid"></div>
+
+ <div class="circle border"></div>
+
+ <div class="circle border">
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ <div class="inner border"></div>
+ </div>
+
+ <div class="circle">
+ <div class="half solid"></div>
+ <div class="half dotted"></div>
+ </div>
+
+ <div class="circle dotted"></div>
+
+ <div class="circle dotted">
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ <div class="inner dotted"></div>
+ </div>
+
+ <div class="circle dashed"></div>
</div>
</div>
</body>
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index d0195b46..8e62a5ab 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -338,10 +338,9 @@ function torbutton_init() {
}
}
- // Add about:tor IPC message listeners.
- let aboutTorMessages = [ "AboutTor:Loaded", "AboutTor:GetToolbarData" ];
- aboutTorMessages.forEach(aMsg => window.messageManager.addMessageListener(
- aMsg, torbutton_abouttor_message_handler));
+ // Add about:tor IPC message listener.
+ window.messageManager.addMessageListener("AboutTor:Loaded",
+ torbutton_abouttor_message_handler);
// XXX: Get rid of the cached asmjs (or IndexedDB) files on disk in case we
// don't allow things saved to disk. This is an ad-hoc fix to work around
@@ -369,11 +368,6 @@ 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_abouttor_message_handler.updateAllOpenPages();
- }, false);
-
//setting up context menu
//var contextMenu = document.getElementById("contentAreaContextMenu");
//if (contextMenu)
@@ -425,10 +419,6 @@ var torbutton_abouttor_message_handler = {
aMessage.target.messageManager.sendAsyncMessage("AboutTor:ChromeData",
this.chromeData);
break;
- case "AboutTor:GetToolbarData":
- aMessage.target.messageManager.sendAsyncMessage("AboutTor:ToolbarData",
- this.toolbarData);
- break;
}
},
@@ -441,23 +431,12 @@ var torbutton_abouttor_message_handler = {
// The chrome data contains all of the data needed by the about:tor
// content process that is only available here (in the chrome process).
// It is sent to the content process when an about:tor window is opened
- // and in response to events such as the browser noticing that an update
- // is available.
+ // and in response to events such as the browser noticing that Tor is
+ // not working.
get chromeData() {
return {
torOn: torbutton_tor_check_ok(),
- updateNeeded: torbutton_update_is_needed(),
- showManual: torbutton_show_torbrowser_manual(),
- toolbarButtonXPos: torbutton_get_toolbarbutton_xpos()
- };
- },
-
- // The toolbar data only contains the x coordinate of Torbutton's toolbar
- // item; it is sent back to the content process as the about:tor window
- // is resized.
- get toolbarData() {
- return {
- toolbarButtonXPos: torbutton_get_toolbarbutton_xpos()
+ showManual: torbutton_show_torbrowser_manual()
};
}
};
@@ -593,9 +572,6 @@ function torbutton_notify_if_update_needed() {
var btn = torbutton_get_toolbutton();
setOrClearAttribute(btn, "tbUpdateNeeded", updateNeeded);
- // Update all open about:tor pages.
- torbutton_abouttor_message_handler.updateAllOpenPages();
-
// Make the "check for update" menu item bold if an update is needed.
var item = document.getElementById("torbutton-checkForUpdate");
setOrClearAttribute(item, "tbUpdateNeeded", updateNeeded);
@@ -621,33 +597,6 @@ function torbutton_check_for_update() {
prompter.checkForUpdates();
}
-// Determine X position of Torbutton toolbar item. The value returned
-// accounts for retina but not content zoom.
-// undefined is returned if the value cannot be determined (e.g., if the
-// toolbar item is not on the toolbar).
-function torbutton_get_toolbarbutton_xpos() {
- try {
- let tbXpos = -1;
- let tbItem = torbutton_get_toolbutton();
- if (tbItem) {
- let tbItemRect = tbItem.getBoundingClientRect();
- let contentElem = document.getElementById("tabbrowser-initialBrowser");
- let contentRect = contentElem.getBoundingClientRect();
- if (tbItemRect.top < contentRect.top) {
- tbXpos = tbItemRect.left + (tbItemRect.width / 2.0) - contentRect.left;
- }
- }
-
- if (tbXpos >= 0) {
- // Convert to device-independent units, compensating for retina display.
- tbXpos *= window.devicePixelRatio;
- return tbXpos;
- }
- } catch(e) {}
-
- return undefined;
-}
-
function torbutton_show_sec_slider_notification() {
// Show the notification about the new security slider.
if (m_tb_prefs.
diff --git a/src/chrome/locale/en/aboutTor.dtd b/src/chrome/locale/en/aboutTor.dtd
index 676878e2..3eecc0bc 100644
--- a/src/chrome/locale/en/aboutTor.dtd
+++ b/src/chrome/locale/en/aboutTor.dtd
@@ -1,45 +1,25 @@
<!--
- - Copyright (c) 2015, The Tor Project, Inc.
+ - Copyright (c) 2018, The Tor Project, Inc.
- See LICENSE for licensing information.
- vim: set sw=2 sts=2 ts=8 et syntax=xml:
-->
<!ENTITY aboutTor.title "About Tor">
-<!ENTITY aboutTor.outOfDateTorOn.label "WARNING: this browser is out of date.">
-<!ENTITY aboutTor.outOfDateTorOff.label "ALSO, this browser is out of date.">
-<!ENTITY aboutTor.outOfDate2.label "Click on the onion and then choose Check for Tor Browser Update.">
-
-<!ENTITY aboutTor.check.label "Test Tor Network Settings">
-
-<!ENTITY aboutTor.success.label "Welcome to Tor Browser">
-<!ENTITY aboutTor.success2.label "Connected to the Tor network.">
-<!ENTITY aboutTor.success3.label "You are now free to browse the Internet anonymously.">
+<!ENTITY aboutTor.ready.label "Explore. Privately.">
+<!ENTITY aboutTor.ready2.label "You’re ready for the world’s most private browsing experience.">
<!ENTITY aboutTor.failure.label "Something Went Wrong!">
<!ENTITY aboutTor.failure2.label "Tor is not working in this browser.">
-<!ENTITY aboutTor.search.label "Search">
+<!ENTITY aboutTor.search.label "Search with DuckDuckGo">
<!ENTITY aboutTor.searchDDGPost.link "https://duckduckgo.com">
-<!ENTITY aboutTor.torInfo1.label "Additional Info:">
-<!ENTITY aboutTor.torInfo2.label "Country & IP Address:">
-<!ENTITY aboutTor.torInfo3.label "Exit Node:">
-<!ENTITY aboutTor.torInfo4.label "This server does not log any information about visitors.">
-<!ENTITY aboutTor.whatnextQuestion.label "What Next?">
-<!ENTITY aboutTor.whatnextAnswer.label "Tor is NOT all you need to browse anonymously! You may need to change some of your browsing habits to ensure your identity stays safe.">
-<!ENTITY aboutTor.whatnext.label "Tips On Staying Anonymous »">
-<!ENTITY aboutTor.whatnext.link "https://www.torproject.org/download/download.html.en#warning">
+<!ENTITY aboutTor.torbrowser_user_manual_questions.label "Questions?">
+<!ENTITY aboutTor.torbrowser_user_manual_link.label "Check our Tor Browser Manual »">
+<!-- The next two entities are used within the browser's Help menu. -->
<!ENTITY aboutTor.torbrowser_user_manual.accesskey "M">
-<!ENTITY aboutTor.torbrowser_user_manual.label "Tor Browser User Manual">
-<!ENTITY aboutTor.helpInfo1.label "You Can Help!">
-<!ENTITY aboutTor.helpInfo2.label "There are many ways you can help make the Tor Network faster and stronger:">
-<!ENTITY aboutTor.helpInfo3.label "Run a Tor Relay Node »">
-<!ENTITY aboutTor.helpInfo3.link "https://www.torproject.org/docs/tor-doc-relay.html.en">
-<!ENTITY aboutTor.helpInfo4.label "Volunteer Your Services »">
-<!ENTITY aboutTor.helpInfo4.link "https://www.torproject.org/getinvolved/volunteer.html.en">
-<!ENTITY aboutTor.helpInfo5.label "Make a Donation »">
-<!ENTITY aboutTor.helpInfo5.link "https://www.torproject.org/donate/donate.html.en">
+<!ENTITY aboutTor.torbrowser_user_manual.label "Tor Browser Manual">
-<!ENTITY aboutTor.footer.label "The Tor Project is a US 501(c)(3) non-profit dedicated to the research, development, and education of online anonymity and privacy.">
-<!ENTITY aboutTor.learnMore.label "Learn more about The Tor Project »">
-<!ENTITY aboutTor.learnMore.link "https://www.torproject.org/about/overview.html.en">
+<!ENTITY aboutTor.tor_mission.label "The Tor Project is a US 501(c)(3) non-profit organization advancing human rights and freedoms by creating and deploying free and open source anonymity and privacy technologies, supporting their unrestricted availability and use, and furthering their scientific and popular understanding.">
+<!ENTITY aboutTor.getInvolved.label "Get Involved »">
+<!ENTITY aboutTor.getInvolved.link "https://www.torproject.org/getinvolved/volunteer.html.en">
diff --git a/src/chrome/locale/en/aboutTor.properties b/src/chrome/locale/en/aboutTor.properties
index d0d3a64b..375c0da1 100644
--- a/src/chrome/locale/en/aboutTor.properties
+++ b/src/chrome/locale/en/aboutTor.properties
@@ -1,13 +1,7 @@
-# Copyright (c) 2014, The Tor Project, Inc.
+# Copyright (c) 2018, The Tor Project, Inc.
# See LICENSE for licensing information.
# vim: set sw=2 sts=2 ts=8 et:
-aboutTor.searchDDG.privacy=Search <a href="%1$S">securely</a> with <a href="%2$S">DuckDuckGo</a>.
-# The following string is a link which replaces %1$S above.
-aboutTor.searchDDG.privacy.link=https://duckduckgo.com/privacy.html
-# The following string is a link which replaces %2$S above.
-aboutTor.searchDDG.search.link=https://duckduckgo.com/
-
aboutTor.donationBanner.donate=Donate Now!
aboutTor.donationBanner.slogan=Tor: Powering Digital Resistance
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 62c9256c..02a81744 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -5,6 +5,12 @@
* vim: set sw=2 sts=2 ts=8 et syntax=css:
*/
+:root {
+ --abouttor-text-color: white;
+ --abouttor-bg-toron-color: #420C5D;
+ --abouttor-bg-toroff-color: #A4000F;
+}
+
* {
padding: 0px;
margin: 0px;
@@ -15,21 +21,15 @@ body {
height: 100%;
margin: 0px auto;
padding: 0px 0px;
- font-size: 62.5%;
- font-family: "Liberation Sans", Arial, Helvetica, sans-serif;
- font-weight: normal;
- color: #4d4d4d;
- background-color: #FFFFFF;
+ font-family: Helvetica, Arial, sans-serif;
+ color: var(--abouttor-text-color);
+ background-color: var(--abouttor-bg-toroff-color);
background-attachment: fixed;
background-size: 100% 100%;
}
-body {
- background-image: linear-gradient(to bottom, #ffffff, #ffffff 10%, #dddddd 50%, #dddddd);
-}
-
body[toron] {
- background-image: linear-gradient(to bottom, #ffffff, #ffffff 10%, #d5ffd5 50%, #d5ffd5);
+ background-color: var(--abouttor-bg-toron-color);
}
/* Hide the entire document by default to avoid showing the incorrect
@@ -42,88 +42,44 @@ body:not([initialized]) {
}
.torcontent-container {
- margin: 40px 20px;
+ margin: 40px 20px 28px 20px;
display: flex;
flex-direction: column;
}
+ at media only screen and (min-width: 900px) {
+ .torcontent-container {
+ margin: 40px auto 28px auto;
+ max-width: 1000px;
+ min-width: 1000px;
+ }
+}
+
#torstatus-version {
position: absolute;
top: 6px;
right: 6px;
height: 30px;
width: 200px;
- font-size: 1.4em;
+ font-size: 15px;
white-space: pre-wrap;
text-align: right;
}
-body[toron] #torstatus-image {
- background-image: url('chrome://torbutton/skin/tor-on.png');
-}
-
-#torstatus-image {
- display: none;
- position: absolute;
- left: 85px;
- height: 128px;
- width: 128px;
- background-image: url('chrome://torbutton/skin/tor-off.png');
- background-repeat: no-repeat;
- background-position: center;
- z-index: -1;
-}
-
-.arrow {
- display: none;
- position: absolute;
- z-index: -1;
-}
-
-#toolbarIconArrowHead {
- top: 4px;
- width: 30px;
- height: 36px;
- background-image: url('chrome://torbutton/skin/onionArrow-short.png');
-}
-
-#toolbarIconArrowVertExtension, #toolbarIconArrowHorzExtension {
- width: 11px;
- height: 11px;
- background-image: url('chrome://torbutton/skin/onionArrow-extension.png');
-}
-
-#toolbarIconArrowBend {
- width: 22px;
- height: 22px;
- background-image: url('chrome://torbutton/skin/onionArrow-leftBend.png');
-}
-
-#toolbarIconArrowBend[pos="right"] {
- background-image: url('chrome://torbutton/skin/onionArrow-rightBend.png');
-}
-
a {
- color: #008000;
- text-decoration: none;
-}
-
-a:hover {
- color: #00A000;
- text-decoration: underline;
-}
-
-#testTorSettings {
- font-size: 1.6em;
- text-decoration: underline;
- margin-bottom: 5px;
+ color: var(--abouttor-text-color);
}
#torstatus {
- position: relative; /* needed for torstatus-image positioning */
+ margin-top: 135px;
display: flex;
justify-content: center;
- min-height: 148px;
+ vertical-align: bottom;
+ min-height: 92px;
+}
+
+#torstatus > div {
+ align-self: flex-end; /* align text to bottom of container */
}
.top {
@@ -134,206 +90,183 @@ a:hover {
text-align: center;
}
-body[toron][torNeedsUpdate] .hideIfTBBNeedsUpdate,
-body:not([torNeedsUpdate]) .hideIfTorIsUpToDate {
- display: none;
-}
-
body[toron] .hideIfTorOn,
body:not([toron]) .hideIfTorOff {
display: none;
}
-body[toron] .top h1 {
- color: #600060;
-}
-
body:not([showmanual]) .showForManual {
display: none;
}
-div.hideIfTorIsUpToDate {
- display: flex;
- flex-direction: column;
-}
-
-div.hideIfTorIsUpToDate,
-body .top div.hideIfTorIsUpToDate h1 {
- color: black;
- text-align: center;
-}
-
-/* Use inline-block for text-oriented elements whose widths need to measured. */
-.torstatus-container *,
-.top div.hideIfTorIsUpToDate h3 {
- display: inline-block;
+.torstatus-container * {
text-align: center;
}
-.top div.hideIfTorOff h1 {
+.top div.hideIfTorOff .heading1 {
margin-top: 20px;
}
-.top h1 {
- font-size: 4.00em;
- font-weight: bold;
+.top .heading1 {
+ font-size: 50px;
+ font-weight: 300;
margin-bottom: 5px;
}
-.top h2 {
- font-size: 2.934em;
+.top .heading2 {
+ font-size: 15px;
margin-bottom: 20px;
- font-weight: normal;
}
-.top h3 {
- font-size: 1.8em;
- font-weight: normal;
- color: #3B503C;
+#bottom {
+ margin-top: 170px;
}
-#middle {
- display: flex;
- flex-flow: row wrap;
- font-size: 1.6em;
- justify-content: space-evenly;
- margin-top: 40px;
+#bottom p {
+ font-size: 10px;
+ text-align: start;
+ margin: auto;
+ padding-bottom: 20px;
}
-.bubble {
- width: 242px;
- padding: 20px 30px;
- color: #3B503C;
- background-color: #FFFFFF;
- border: none;
- border-radius: 16px;
- margin-bottom: 40px;
- text-align: start;
- vertical-align: top;
+ at media only screen and (min-width: 900px) {
+ #bottom p {
+ margin: 0px 135px 0px 135px;
+ }
}
-#middle h1 {
- font-size: 1.2em;
- margin-bottom: 10px;
+#bottom p:last-child {
+ padding-bottom: 0px;
}
-#middle ul {
- padding: 5px 0 0 22px;
+#bottom p.moreInfoLink {
+ font-size: 15px;
}
-#middle ul:dir(rtl) {
- padding: 5px 22px 0 0;
+.searchbox form {
+ width: 500px;
+ margin: 39px auto 0px auto;
+ text-align: left;
}
-#middle li {
- padding-top: 2px;
+ at media only screen and (max-width: 540px) {
+ .searchbox form {
+ width: auto;
+ }
}
-#bottom {
- padding-bottom: 40px;
+.searchwrapper {
+ display: flex;
+ height: 46px;
+ border: 1px solid black;
+ border-radius: 8px;
+ background-color: white;
}
-#bottom p {
- font-size: 1.6em;
- text-align: start;
- margin: auto;
+.searchlabel {
+ height: auto;
+ width: 50px;
+ display: inline-block;
+ background: url('chrome://torbutton/skin/searchLogo.png') no-repeat center center;
+ background-size: 30px 30px;
}
-#bottom a {
- color: #800080;
- text-decoration: underline;
+#search-button {
+ height: auto;
+ width: 36px;
+ border: 0;
+ background: url('chrome://torbutton/skin/forwardArrow.png') no-repeat center center;
+ background-size: 16px 14px;
+ cursor: pointer;
}
-#bottom a:hover {
- color: #A000A0;
- text-decoration: none;
+#search-button:hover {
+ background-color: rgba(12, 12, 13, 0.1); /* same as Firefox's about:home */
}
-#bottom h4 {
- margin-top: 50px;
- line-height: 1em;
- font-size: 1em;
- font-weight: normal;
- text-align: center;
+/* #search-text is the search input field */
+#search-text {
+ flex: 1;
+ border: none;
+ padding: 4px 2px 5px 2px;
+ margin: 0;
+ font-size: 15px;
}
-#bottom p.lang {
- max-width: 620px;
- margin: 10px auto;
- font-size: 1em;
- font-weight: normal;
- text-align: center;
+.onion-pattern-container {
+ margin: 0px auto;
+ width: 100%;
+ max-width: 1624px; /* room for 14 of the widest circles */
+ overflow: hidden;
}
-.searchbox form {
- width: 396px;
- margin: 35px auto 1px auto;
- text-align: left;
+.onion-pattern-row {
+ width: 1624px;
+ display: flex;
+ flex-direction: row;
+ position: relative;
}
-.searchbox h4 {
- padding-top: 5px;
- font-size: 12px;
- font-weight: normal;
- text-align: center;
+.onion-pattern-offset-row {
+ left: -40px;
}
-#sbutton {
- display: block;
- float: right;
- width: 33px;
+/* With borders, circles range in size from 100 x 100px to 116 x 116px. */
+.circle {
+ opacity: 0.2;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
}
-#sbutton input {
- height: 34px;
- width: 33px;
- border: 0;
- background: url('chrome://torbutton/skin/search.png') no-repeat top left;
- cursor: pointer;
+.inner {
+ position: absolute;
}
-/* #sxw is the container div for the search field and button */
-#sxw {
- border: none;
+.inner:nth-child(1){
+ transform: translate(calc(12.5% - 2px),calc(12.5% - 2px));
+ width: calc(100% * 0.75);
+ height: calc(100% * 0.75);
+ border-radius: 50%;
}
-/* #sx is the search input (text) field */
-#sx {
- border-color: lightgray;
- border-style: solid;
- border-width: 1px 0px 1px 1px;
- width: 350px;
- min-height: 23px;
- padding: 4px 6px 5px 6px;
- margin: 0;
- outline: none;
- color: #222;
- font-size: 18px;
+.inner:nth-child(2){
+ transform: translate(calc(40% - 2px),calc(40% - 2px));
+ width: calc(100% * 0.5);
+ height: calc(100% * 0.5);
+ border-radius: 50%;
}
- at media only screen and (min-width : 820px) {
-.torcontent-container {
- margin: auto;
- margin-top: 40px;
- max-width: 920px;
- min-width: 920px;
- }
+.inner:nth-child(3){
+ transform: translate(calc(108% - 2px),calc(108% - 2px));
+ width: calc(100% * 0.25);
+ height: calc(100% * 0.25);
+ border-radius: 50%;
+}
- #torstatus-image {
- display: block;
- }
+.solid {
+ background-color: #fff;
+}
- #bottom p {
- margin: 10px 125px 0px 125px;
- }
+.border {
+ border: 4px solid #fff;
}
- at media only screen and (max-width : 436px) {
- .searchbox form {
- width: auto;
- }
+.dashed {
+ border: 4px dashed #fff;
+}
- #sx {
- width: calc(100% - 46px);
- }
+.dotted {
+ border: 4px dotted #fff;
+}
+
+.bold {
+ border: 8px solid #fff;
+}
+
+.half {
+ width: 100px;
+ height: 50px;
+ border-radius: 50px 50px 0 0;
}
diff --git a/src/chrome/skin/forwardArrow.png b/src/chrome/skin/forwardArrow.png
new file mode 100644
index 00000000..ceea950f
Binary files /dev/null and b/src/chrome/skin/forwardArrow.png differ
diff --git a/src/chrome/skin/onionArrow-extension.png b/src/chrome/skin/onionArrow-extension.png
deleted file mode 100644
index 55ff2084..00000000
Binary files a/src/chrome/skin/onionArrow-extension.png and /dev/null differ
diff --git a/src/chrome/skin/onionArrow-leftBend.png b/src/chrome/skin/onionArrow-leftBend.png
deleted file mode 100644
index 9d1bb456..00000000
Binary files a/src/chrome/skin/onionArrow-leftBend.png and /dev/null differ
diff --git a/src/chrome/skin/onionArrow-rightBend.png b/src/chrome/skin/onionArrow-rightBend.png
deleted file mode 100644
index 6b60342d..00000000
Binary files a/src/chrome/skin/onionArrow-rightBend.png and /dev/null differ
diff --git a/src/chrome/skin/onionArrow-short.png b/src/chrome/skin/onionArrow-short.png
deleted file mode 100644
index 23e5a20e..00000000
Binary files a/src/chrome/skin/onionArrow-short.png and /dev/null differ
diff --git a/src/chrome/skin/search.png b/src/chrome/skin/search.png
deleted file mode 100644
index 698a77df..00000000
Binary files a/src/chrome/skin/search.png and /dev/null differ
diff --git a/src/chrome/skin/searchLogo.png b/src/chrome/skin/searchLogo.png
new file mode 100644
index 00000000..98ae319e
Binary files /dev/null and b/src/chrome/skin/searchLogo.png differ
diff --git a/src/chrome/skin/tor-off.png b/src/chrome/skin/tor-off.png
deleted file mode 100644
index a4509ba5..00000000
Binary files a/src/chrome/skin/tor-off.png and /dev/null differ
diff --git a/src/chrome/skin/tor-on.png b/src/chrome/skin/tor-on.png
deleted file mode 100644
index 186fcf15..00000000
Binary files a/src/chrome/skin/tor-on.png and /dev/null differ
diff --git a/src/defaults/preferences/preferences.js b/src/defaults/preferences/preferences.js
index ab9b4bf4..43401ad0 100644
--- a/src/defaults/preferences/preferences.js
+++ b/src/defaults/preferences/preferences.js
@@ -10,7 +10,6 @@ pref("extensions.torbutton.updateNeeded", false);
// Tor check and proxy prefs
pref("extensions.torbutton.test_enabled",true);
pref("extensions.torbutton.test_url","https://check.torproject.org/?TorButton=true");
-pref("extensions.torbutton.test_url_interactive", "https://check.torproject.org/?lang=__LANG__");
pref("extensions.torbutton.local_tor_check",true);
pref("extensions.torbutton.versioncheck_url","https://www.torproject.org/projects/torbrowser/RecommendedTBBVersions");
pref("extensions.torbutton.versioncheck_enabled",true);
More information about the tor-commits
mailing list