[tbb-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 tbb-commits mailing list