[tor-commits] [torbutton/master] Bug 27476: misc about:torconnect fixes and polish
sysrqb at torproject.org
sysrqb at torproject.org
Mon May 17 19:27:37 UTC 2021
commit 4eafa99d5a0f93184b674b099a49946f8846f766
Author: Richard Pospesel <richard at torproject.org>
Date: Mon Feb 15 19:18:29 2021 +0100
Bug 27476: misc about:torconnect fixes and polish
- about:tor fix to prevent showing 'something went wrong page' after about:torconnect bootstrap
- directly including tor-browser's onion-pattern xhtml/css rather than duplicating
- about:tor polish: replaced png with svg icons for ddg (from ddg), mail and arrow (photon UI included from firefox)
---
chrome/content/aboutTor/aboutTor.xhtml | 195 +--------------------------------
chrome/content/torbutton.js | 4 +-
chrome/skin/aboutTor.css | 101 ++---------------
chrome/skin/dax-logo.svg | 1 +
chrome/skin/forwardArrow.png | Bin 258 -> 0 bytes
chrome/skin/searchLogo.png | Bin 1912 -> 0 bytes
jar.mn | 15 ++-
7 files changed, 31 insertions(+), 285 deletions(-)
diff --git a/chrome/content/aboutTor/aboutTor.xhtml b/chrome/content/aboutTor/aboutTor.xhtml
index 6c712a67..f3a9032f 100644
--- a/chrome/content/aboutTor/aboutTor.xhtml
+++ b/chrome/content/aboutTor/aboutTor.xhtml
@@ -23,8 +23,8 @@
<meta http-equiv="Content-Security-Policy" content="default-src resource:; object-src 'none'" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>&aboutTor.title;</title>
- <link rel="stylesheet" type="text/css" media="all"
- href="resource://torbutton-assets/aboutTor.css"/>
+ <link rel="stylesheet" href="chrome://browser/skin/onionPattern.css" type="text/css" media="all" />
+ <link rel="stylesheet" href="resource://torbutton-assets/aboutTor.css" type="text/css" media="all" />
<script type="text/javascript" src="resource://torbutton-abouttor/aboutTor.js"></script>
</head>
<body dir="&locale.dir;">
@@ -55,7 +55,7 @@
<div class="searchbox hideIfTorOff"> <!-- begin form based search -->
<form action="&aboutTor.searchDDGPost.link;" method="get">
<div class="searchwrapper">
- <label class="searchlabel" for="search-text"> </label>
+ <label class="searchlabel" for="search-text"></label>
<input name="q" id="search-text" placeholder="&aboutTor.search.label;"
autocomplete="off" type="text"/>
<input id="search-button" value=""
@@ -71,198 +71,13 @@
</p>
<p id="manual" class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
<a id="manualLink" target="_blank">&aboutTor.torbrowser_user_manual_link.label;</a></p>
- <p id="newsletter" class="moreInfoLink"><img class="imageStyle" src="resource://torbutton-assets/icon-newsletter.png"/><br/>&aboutTor.newsletter.tagline;<br/>
+ <p id="newsletter" class="moreInfoLink"><img class="imageStyle" src="chrome://browser/skin/mail.svg"/><br/>&aboutTor.newsletter.tagline;<br/>
<a href="https://newsletter.torproject.org">&aboutTor.newsletter.link_text; »</a>
</p>
<p id="mission">&aboutTor.tor_mission.label;
<a id="getInvolvedLink">&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-x: 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 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>
-
- <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 class="circle solid"></div>
-
- <div class="circle dashed">
- <div class="inner dashed"></div>
- <div class="inner dashed"></div>
- <div class="inner dashed"></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 dotted">
- <div class="inner dotted"></div>
- <div class="inner dotted"></div>
- <div class="inner dotted"></div>
- </div>
-
- <div class="circle">
- <div class="half solid"></div>
- <div class="half dotted"></div>
- </div>
-
- <div class="circle dotted"></div>
- </div>
- </div>
+#include ../../../../../../browser/themes/shared/onionPattern.inc.xhtml
</body>
</html>
diff --git a/chrome/content/torbutton.js b/chrome/content/torbutton.js
index 39c1abeb..48539a96 100644
--- a/chrome/content/torbutton.js
+++ b/chrome/content/torbutton.js
@@ -934,8 +934,7 @@ function torbutton_do_tor_check()
{
let checkSvc = Cc["@torproject.org/torbutton-torCheckService;1"]
.getService(Ci.nsISupports).wrappedJSObject;
- if (checkSvc.kCheckNotInitiated != checkSvc.statusOfTorCheck ||
- m_tb_prefs.getBoolPref("extensions.torbutton.use_nontor_proxy") ||
+ if (m_tb_prefs.getBoolPref("extensions.torbutton.use_nontor_proxy") ||
!m_tb_prefs.getBoolPref("extensions.torbutton.test_enabled"))
return; // Only do the check once.
@@ -1119,6 +1118,7 @@ function torbutton_initiate_remote_tor_check() {
function torbutton_tor_check_ok()
{
+ torbutton_do_tor_check();
let checkSvc = Cc["@torproject.org/torbutton-torCheckService;1"]
.getService(Ci.nsISupports).wrappedJSObject;
return (checkSvc.kCheckFailed != checkSvc.statusOfTorCheck);
diff --git a/chrome/skin/aboutTor.css b/chrome/skin/aboutTor.css
index 8d5c4a83..38486241 100644
--- a/chrome/skin/aboutTor.css
+++ b/chrome/skin/aboutTor.css
@@ -9,6 +9,9 @@
--abouttor-text-color: white;
--abouttor-bg-toron-color: #420C5D;
--abouttor-bg-toroff-color: #A4000F;
+ --onion-opacity: 0.2;
+ --onion-color: #fff;
+ --onion-radius: 50px;
}
* {
@@ -23,6 +26,7 @@ html {
body {
display: flex;
flex-direction: column;
+ justify-content: space-between;
width: 100%;
height: 100%;
margin: 0px auto;
@@ -159,7 +163,11 @@ body:not([showmanual]) .showForManual {
}
#bottom img.imageStyle {
- padding-inline-end: 10px;
+ padding-inline-end: 0.5em;
+ height: 1.5em;
+ vertical-align: bottom;
+ -moz-context-properties: fill;
+ fill: white;
}
/* Hide the linebreaks on large enough screens (desktops, laptops, and
@@ -195,7 +203,7 @@ body:not([showmanual]) .showForManual {
height: auto;
width: 50px;
display: inline-block;
- background: url('searchLogo.png') no-repeat center center;
+ background: url('dax-logo.svg') no-repeat center center;
background-size: 30px 30px;
}
@@ -203,8 +211,8 @@ body:not([showmanual]) .showForManual {
height: auto;
width: 36px;
border: 0;
- background: url('forwardArrow.png') no-repeat center center;
- background-size: 16px 14px;
+ background: url('chrome://browser/skin/forward.svg') no-repeat center center;
+ background-size: 16px 16px;
cursor: pointer;
}
@@ -220,91 +228,6 @@ body:not([showmanual]) .showForManual {
margin: 0;
font-size: 15px;
}
-
-.onion-pattern-container {
- flex: auto; /* grow to consume remaining space on the page */
- display: flex;
- flex-direction: column;
- justify-content: end; /* position circles at the bottom */
- margin: 0px auto;
- width: 100%;
- max-width: 2200px; /* room for our 20 circles */
- min-height: 232px; /* room for 2 rows of circles */
- overflow-x: hidden; /* clip extra circles on the sides */
- direction: ltr;
-}
-
-.onion-pattern-row {
- width: 2200px;
- display: flex;
- flex-direction: row;
- position: relative;
-}
-
-.onion-pattern-offset-row {
- left: -40px;
-}
-
-/* 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%;
-}
-
-.inner {
- position: absolute;
-}
-
-.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%;
-}
-
-.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%;
-}
-
-.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%;
-}
-
-.solid {
- background-color: #fff;
-}
-
-.border {
- border: 4px solid #fff;
-}
-
-.dashed {
- border: 4px dashed #fff;
-}
-
-.dotted {
- border: 4px dotted #fff;
-}
-
-.bold {
- border: 8px solid #fff;
-}
-
-.half {
- width: 100px;
- height: 50px;
- border-radius: 50px 50px 0 0;
-}
-
/*
* Mobile specific css
*/
diff --git a/chrome/skin/dax-logo.svg b/chrome/skin/dax-logo.svg
new file mode 100644
index 00000000..94ad7c35
--- /dev/null
+++ b/chrome/skin/dax-logo.svg
@@ -0,0 +1 @@
+<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="50.833" cy="50.833" r="50.25"/><linearGradient x1="3.084%" y1="49.368%" x2="100.592%" y2="49.368%" id="c"><stop stop-color="#6176B9" offset=".56%"/><stop stop-color="#394A9F" offset="69.1%"/></linearGradient><linearGradient x1="-.006%" y1="49.006%" x2="98.932%" y2="49.006%" id="d"><stop stop-color="#6176B9" offset=".56%"/><stop stop-color="#394A9F" offset="69.1%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><circle fill="#FFF" cx="60" cy="60" r="57.5"/><ellipse fill="#DE5833" cx="60" cy="60" rx="50.25" ry="50.25"/><path d="M60 120C26.917 120 0 93.083 0 60S26.917 0 60 0s60 26.917 60 60-26.917 60-60 60zM60 4.917C29.667 4.917 4.917 29.583 4.917 60c0 30.333 24.666 55.083 55.083 55.083 30.417 0 55.083-24.666 55.083-55.083 0-30.333-24.75-55.083-55.083-55.083z" fill="#DE5833"/><g transform="translate(9.167 9.167)"><mask id
="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#DE5833" xlink:href="#a"/><g mask="url(#b)"><path d="M71.917 127.25c-1.75-8.25-12.25-27.167-16.334-35.083-3.916-7.917-7.916-19.084-6.083-26.417.417-1.417-3.333-11.417-2.333-12 8.5-5.5 10.666.583 14-1.75 1.75-1.167 4.166 1 4.75-1 2.166-7.667-2.917-20.917-8.834-26.583-2-2-4.75-3.167-8.083-3.75-1.167-1.75-3.333-3.334-6.083-4.917-3.167-1.75-10.25-3.917-13.834-4.5-2.583-.417-3.166.167-4.166.417 1 0 5.75 2.333 6.666 2.583-1 .583-3.583 0-5.333.75-.75.417-1.583 2-1.583 2.583 4.916-.583 12.583 0 17.166 2-3.583.417-9.083.75-11.416 2.167-6.917 3.583-9.834 12-8.084 22.25 1.75 10.083 9.834 47.083 12.25 59.333 2.584 12.25-5.5 20.334-10.416 22.5l5.5.417-1.75 3.917c6.5.75 13.833-1.417 13.833-1.417-1.417 3.917-11.25 5.5-11.25 5.5s4.75 1.417 12.25-1.417c7.667-2.916 12.25-4.75 12.25-4.75l7.5 9.417 2.917-6.917 6.916 7.25c-.25-.5 1.334-2.25-.416-10.583z" fill="#D5D7D8"/><path d="M74.083 125.5c-1.75-8.25-12.25-27.167-16.333-35.083C53.833 82.5 49.83
3 71.333 51.667 64c.416-1.417.416-6.667 1.416-7.5 8.5-5.5 7.917-.167 11.25-2.583 1.75-1.167 3.167-2.75 3.75-4.917 2.167-7.667-2.916-20.917-8.833-26.583-2-2-4.75-3.167-8.083-3.75-1.167-1.75-3.334-3.334-6.084-4.917-5.333-2.917-12-3.917-18.333-2.917 1 0 3.333 2.167 4.167 2.334-1.417 1-5.084.75-5.084 2.916 4.917-.416 10.25.167 15 2.334-3.583.416-6.916 1.416-9.25 2.583-6.916 3.583-8.666 10.833-6.916 20.917C26.417 52 34.5 89 36.917 101.25c2.583 12.25-5.5 20.333-10.417 22.5l5.5.417-1.75 3.916c6.5.75 13.833-1.416 13.833-1.416-1.416 3.916-11.25 5.5-11.25 5.5s4.75 1.416 12.25-1.417c7.667-2.917 12.25-4.75 12.25-4.75l3.584 9.417 6.916-6.917 2.917 7.25c-.417 0 5.083-1.75 3.333-10.25z" fill="#FFF"/><path d="M32.5 42.583c0-2.166 1.75-3.75 3.75-3.75 2.167 0 3.75 1.75 3.75 3.75 0 2.167-1.75 3.75-3.75 3.75-2.167 0-3.75-1.583-3.75-3.75z" fill="#2D4F8E"/><path d="M36.833 41.167c0-.584.417-1 1-1 .584 0 1 .416 1 1 0 .583-.416 1-1 1-.416 0-1-.417-1-1z" fill="#FFF"/><path d="M58.333 40.167c0-1.75 1.417-3.3
34 3.334-3.334 1.75 0 3.333 1.417 3.333 3.334 0 1.75-1.417 3.333-3.333 3.333-1.75.083-3.334-1.333-3.334-3.333z" fill="#2D4F8E"/><path d="M62.25 39.167c0-.417.417-.75.75-.75.417 0 .75.416.75.75 0 .416-.417.75-.75.75-.333.083-.75-.334-.75-.75z" fill="#FFF"/><path d="M15.583 21.5s-2.916-1.417-5.75.417c-2.75 1.75-2.75 3.583-2.75 3.583S5.5 22.167 9.417 20.583c4.416-1.583 6.166.917 6.166.917z" fill="url(#c)" transform="translate(21.667 10)"/><path d="M42 21.333s-2-1.166-3.75-1.166c-3.333 0-4.167 1.583-4.167 1.583s.584-3.583 4.75-2.75c2.334.167 3.167 2.333 3.167 2.333z" fill="url(#d)" transform="translate(21.667 10)"/><path d="M47.917 57.167c.416-2.334 6.333-6.667 10.416-6.917 4.167-.167 5.5-.167 9.084-1C71 48.5 80 46.083 82.583 44.917c2.584-1.167 13.167.583 5.75 4.75-3.166 1.75-12 5.083-18.333 7.083-6.333 1.75-10.083-1.75-12 1.417-1.583 2.333-.417 5.75 7.083 6.5 10.084 1 19.667-4.5 20.667-1.584 1 2.917-8.667 6.5-14.583 6.667-5.917.167-17.917-3.917-19.667-5.083-1.833-1.584-4.25-4.417-3.583
-7.5z" fill="#FDD20A"/></g></g><path d="M61.583 94.917s-14.166-7.5-14.416-4.5C47 93.583 47.167 106 48.75 107c1.583 1 13.417-6.083 13.417-6.083l-.584-6zm5.5-.667S76.75 87 78.917 87.333c2.166.417 2.583 15.584.75 16.334-1.917.833-13-3.667-13-3.667l.416-5.75z" fill="#65BC46"/><path d="M58.25 95.667c0 4.916-.75 7.083 1.417 7.5 2.166.416 6.083 0 7.5-1 1.416-1 .166-7.25-.167-8.5-.667-1.167-8.75-.167-8.75 2z" fill="#43A244"/><path d="M59 94.5c0 4.917-.75 7.083 1.417 7.5 2.166.417 6.083 0 7.5-1 1.416-1 .166-7.25-.167-8.5-.5-1-8.75-.167-8.75 2z" fill="#65BC46"/></g></svg>
\ No newline at end of file
diff --git a/chrome/skin/forwardArrow.png b/chrome/skin/forwardArrow.png
deleted file mode 100644
index ceea950f..00000000
Binary files a/chrome/skin/forwardArrow.png and /dev/null differ
diff --git a/chrome/skin/searchLogo.png b/chrome/skin/searchLogo.png
deleted file mode 100644
index 98ae319e..00000000
Binary files a/chrome/skin/searchLogo.png and /dev/null differ
diff --git a/jar.mn b/jar.mn
index c8fd813f..6476f8ff 100644
--- a/jar.mn
+++ b/jar.mn
@@ -4,10 +4,17 @@ torbutton.jar:
% content torbutton %content/
- content/ (chrome/content/*)
- components/ (components/*)
- modules/ (modules/*)
- skin/ (chrome/skin/*)
+ content/torbutton.js (chrome/content/torbutton.js)
+ content/tor-circuit-display.js (chrome/content/tor-circuit-display.js)
+ content/preferences.xhtml (chrome/content/preferences.xhtml)
+ content/aboutTor/aboutTor-content.js (chrome/content/aboutTor/aboutTor-content.js)
+* content/aboutTor/aboutTor.xhtml (chrome/content/aboutTor/aboutTor.xhtml)
+ content/aboutTor/resources/aboutTor.js (chrome/content/aboutTor/resources/aboutTor.js)
+ content/preferences-mobile.js (chrome/content/preferences-mobile.js)
+
+ components/ (components/*)
+ modules/ (modules/*)
+ skin/ (chrome/skin/*)
% resource torbutton %
% resource torbutton-abouttor resource://torbutton/content/aboutTor/resources/ contentaccessible=yes
More information about the tor-commits
mailing list