commit 4eafa99d5a0f93184b674b099a49946f8846f766 Author: Richard Pospesel richard@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