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-1 in repository tor-browser.
commit adddd32fba8fb8f4d5f988ccb6273ca9d200badd 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 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(); }