[tor-commits] [torbutton/master] Bug 28836: Links on about:tor are not clickable.

[gk at torproject.org]

commit 0a628166a527bb643fa256e20332fbf54357697c
Author: Kathy Brade <brade at 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;
 }