[tbb-commits] [tor-browser] 19/57: Bug 32220: Improve the letterboxing experience

[gitolite role]

This is an automated email from the git hooks/post-receive script.

richard pushed a commit to branch tor-browser-102.5.0esr-12.0-2
in repository tor-browser.

commit c31dba58a686dd82027897e2e986c8fc30ce069d
Author: Richard Pospesel <richard at torproject.org>
AuthorDate: Mon Oct 28 17:42:17 2019 -0700

    Bug 32220: Improve the letterboxing experience
    
    CSS and JS changes to alter the UX surrounding letterboxing. The
    browser element containing page content is now anchored to the bottom
    of the toolbar, and the remaining letterbox margin is the same color
    as the firefox chrome. The letterbox margin and outline are tied to
    the currently selected theme.
    
    Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1594455
---
 browser/base/content/browser.css                      | 8 ++++++++
 toolkit/components/resistfingerprinting/RFPHelper.jsm | 8 +++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 2ea45e3a40b7..b9b42dc2a769 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -104,10 +104,18 @@ body {
 **/
 .letterboxing .browserStack > browser:not(.exclude-letterboxing) {
   margin: 0; /* to be dynamically set by RFHelper.jsm */
+  outline: 1px solid var(--chrome-content-separator-color);
 }
 
 browser.exclude-letterboxing {
   margin: 0 !important;
+  outline: initial;
+}
+
+/* extend down the toolbar's colors when letterboxing is enabled */
+.letterboxing {
+  background-color: var(--toolbar-bgcolor);
+  background-image: var(--toolbar-bgimage);
 }
 
 #toolbar-menubar[autohide="true"] {
diff --git a/toolkit/components/resistfingerprinting/RFPHelper.jsm b/toolkit/components/resistfingerprinting/RFPHelper.jsm
index fde005fc6e21..c6f257111099 100644
--- a/toolkit/components/resistfingerprinting/RFPHelper.jsm
+++ b/toolkit/components/resistfingerprinting/RFPHelper.jsm
@@ -515,6 +515,7 @@ class _RFPHelper {
     // Calculating the margins around the browser element in order to round the
     // content viewport. We will use a 200x100 stepping if the dimension set
     // is not given.
+    // Margin and outline colors are set in browser.css (.letterboxing  * selectors).
 
     const buildMarginStyleString = (aWidth, aHeight) => {
       const marginDims = calcMargins(aWidth, aHeight);
@@ -577,9 +578,10 @@ class _RFPHelper {
     }
 
     log(`${logPrefix} setting margins to ${marginStyleString}`);
-    // One cannot (easily) control the color of a margin unfortunately.
-    // An initial attempt to use a border instead of a margin resulted
-    // in offset event dispatching; so for now we use a colorless margin.
+    // Here we set the browser's margin to round its content size.
+    // A "border" visual is created by using a CSS outline, which does't
+    // affect layout, while the background appearance is borrowed from the
+    // toolbar and set in the .letterboxing ancestor (see browser.css).
     marginChanges.perform();
   }
 

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.