commit 0a628166a527bb643fa256e20332fbf54357697c Author: Kathy Brade brade@pearlcrescent.com Date: Wed Jan 16 10:08:38 2019 -0500

Bug 28836: Links on about:tor are not clickable.

When the about:tor window was short, links such as the Tor Browser manual one were not clickable (the fundraising banner made this problem more likely). The root cause was that the onions/circles at the bottom of the page overlapped with the links, and the divs that were used to generate the circles were in front of the links.

This patch changes the behavior on desktop to not allow the onions to be placed under any page content; instead, they are displayed at the bottom of the page after all other content. If they won't fit on the page, a vertical scrollbar is shown.

On mobile, the existing behavior is preserved (onions can appear behind content). We added `z-index: -1` to ensure that all tappable content will be usable (although no links are currently displayed on mobile, we might add some in the future). --- src/chrome/content/aboutTor/aboutTor.xhtml | 4 ++-- src/chrome/skin/aboutTor.css | 28 ++++++++++++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml index 5f5fccdc..1a9c701e 100644 --- a/src/chrome/content/aboutTor/aboutTor.xhtml +++ b/src/chrome/content/aboutTor/aboutTor.xhtml @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="UTF-8"?> <!-- - - Copyright (c) 2018, The Tor Project, Inc. + - Copyright (c) 2019, The Tor Project, Inc. - See LICENSE for licensing information. - vim: set sw=2 sts=2 ts=8 et syntax=xml: --> @@ -120,7 +120,7 @@ window.addEventListener("pageshow", function() { - "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: hidden and is designed + - "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 diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css index 37fa30fe..02d18b78 100644 --- a/src/chrome/skin/aboutTor.css +++ b/src/chrome/skin/aboutTor.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2018, The Tor Project, Inc. + * Copyright (c) 2019, The Tor Project, Inc. * See LICENSE for licensing information. * * vim: set sw=2 sts=2 ts=8 et syntax=css: @@ -16,7 +16,13 @@ margin: 0px; }

+html { + height: 100%; +} + body { + display: flex; + flex-direction: column; width: 100%; height: 100%; margin: 0px auto; @@ -194,12 +200,15 @@ body:not([showmanual]) .showForManual { }

.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 */ - overflow: hidden; - position: absolute; - bottom: 0px; + min-height: 232px; /* room for 2 rows of circles */ + overflow-x: hidden; /* clip extra circles on the sides */ }

.onion-pattern-row { @@ -386,10 +395,6 @@ body[show-donation-banner="true"] .onion-pattern-container { transition: transform 0ms; }

-body[show-donation-banner="true"] .onion-pattern-container { - position: fixed; -} - body[show-donation-banner="true"] #torstatus-version, body[show-donation-banner="true"] #onboarding-overlay-button { transform: translateY(200px); @@ -431,6 +436,13 @@ body[mobile] .top .heading1 { line-height: 1.1 }

+body[mobile] .onion-pattern-container { + flex: none; + z-index: -1; /* ensure that circles do not block access to clickable links */ + position: absolute; + bottom: 0px; +} + body[mobile] #donation-banner { position: static; }