This is an automated email from the git hooks/post-receive script.
richard pushed a commit to branch tor-browser-91.13.0esr-11.5-1 in repository tor-browser.
commit 672069ae1cc3e7df4124433a0a4ffa0524024dd8 Author: Richard Pospesel richard@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 b1aef1309784..384475e92753 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -100,10 +100,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); }
%ifdef MENUBAR_CAN_AUTOHIDE diff --git a/toolkit/components/resistfingerprinting/RFPHelper.jsm b/toolkit/components/resistfingerprinting/RFPHelper.jsm index 7bd645c308d4..388fb372a735 100644 --- a/toolkit/components/resistfingerprinting/RFPHelper.jsm +++ b/toolkit/components/resistfingerprinting/RFPHelper.jsm @@ -524,6 +524,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); @@ -586,9 +587,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(); }