commit 3bf17f3f9ca7fd40ed13d40f628384d38ba71368 Author: Kathy Brade brade@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;