[tor-commits] [torbutton/master] Bug 27301: Improve about:tor behavior and appearance.

[gk at torproject.org]

commit 3bf17f3f9ca7fd40ed13d40f628384d38ba71368
Author: Kathy Brade <brade at pearlcrescent.com>
Date:   Tue Aug 28 09:40:39 2018 -0400

    Bug 27301: Improve about:tor behavior and appearance.
    
    Change TB Manual link to open in a new tab.
    Use a dynamic margin between search box and TB Manual link (10% of viewport).
    Add more onion circles to improve appearance on wide displays.
---
 src/chrome/content/aboutTor/aboutTor.xhtml | 54 +++++++++++++++++++++++++++++-
 src/chrome/skin/aboutTor.css               |  6 ++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index c2bbcb25..ecdd0f85 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -61,7 +61,7 @@ window.addEventListener("pageshow", function() {
 
     <div id="bottom">
       <p class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
-        <a id="manualLink">&aboutTor.torbrowser_user_manual_link.label;</a></p>
+        <a id="manualLink" target="_blank">&aboutTor.torbrowser_user_manual_link.label;</a></p>
       <p>&aboutTor.tor_mission.label;
         <a href="&aboutTor.getInvolved.link;">&aboutTor.getInvolved.label;</a></p>
     </div>
@@ -138,6 +138,26 @@ window.addEventListener("pageshow", function() {
         <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">
@@ -198,6 +218,38 @@ window.addEventListener("pageshow", function() {
       </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>
 </body>
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 02a81744..c402bbed 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -119,7 +119,7 @@ body:not([showmanual]) .showForManual {
 }
 
 #bottom {
-  margin-top: 170px;
+  margin-top: 10vh;
 }
 
 #bottom p {
@@ -196,12 +196,12 @@ body:not([showmanual]) .showForManual {
 .onion-pattern-container {
   margin: 0px auto;
   width: 100%;
-  max-width: 1624px;    /* room for 14 of the widest circles */
+  max-width: 2200px;    /* room for our 20 circles */
   overflow: hidden;
 }
 
 .onion-pattern-row {
-  width: 1624px;
+  width: 2200px;
   display: flex;
   flex-direction: row;
   position: relative;