fixup! Bug 32308: use direct browser sizing for letterboxing.

Bug 41917: Make the appearance of letterboxing look more intentional

browser/app/profile/001-base-profile.js

@@ -375,6 +375,10 @@ pref("security.remote_settings.intermediates.enabled", false);
 pref("dom.use_components_shim", false);
 // Enable letterboxing
 pref("privacy.resistFingerprinting.letterboxing", true);
+// tor-browser#41917 center letterboxed area vertically
+pref("privacy.resistFingerprinting.letterboxing.vcenter", true);
+// tor-browser#41917 letterboxing gradient background
+pref("privacy.resistFingerprinting.letterboxing.gradient", true);
 // tor-browser#41695: how many warnings we show if user closes them without restoring the window size
 pref("privacy.resistFingerprinting.resizeWarnings", 3);
 // tor-browser#33282: new windows start at 1400x900 when there's enough screen space, otherwise down by 200x100 blocks

browser/base/content/browser.css

@@ -134,6 +134,56 @@ body {
   doesn't get notified on horizontal shrinking.
   */
   overflow-x: hidden;
+  background: var(--letterboxing-bgcolor);
+}
+
+.letterboxing {
+  --letterboxing-border-radius: 8px;
+  --letterboxing-border-top-radius: 0;
+  --letterboxing-vertical-alignment: start;
+  --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
+  --letterboxing-bgcolor: var(--tabpanel-background-color);
+  --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
+  --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
+}
+
+.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
+  --letterboxing-border-top-radius: var(--letterboxing-border-radius);
+  --letterboxing-vertical-alignment: center;
+}
+
+.letterboxing.letterboxing-gradient .browserContainer {
+  background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
+}
+
+/*
+  Align status bar with content.
+  TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
+*/
+.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
+  > #statuspanel:not([hidden]) {
+  position: relative;
+  place-self: end left;
+  left: 0;
+  right: 0;
+  --letterboxing-status-left-radius: var(--letterboxing-border-radius);
+  --letterboxing-status-right-radius: 0;
+}
+.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
+  > #statuspanel:not([mirror]):-moz-locale-dir(rtl),
+.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
+  > #statuspanel[mirror]:-moz-locale-dir(ltr) {
+  left: 0;
+  right: 0;
+  --letterboxing-status-right-radius: var(--letterboxing-border-radius);
+  --letterboxing-status-left-radius: 0;
+  justify-self: right;
+}
+
+.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
+#statuspanel-label {
+  border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
 }
 
 /**
@@ -142,21 +192,15 @@ body {
 **/
 .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
   /* width & height to be dynamically set by RFPHelper.jsm */
-  outline: 1px solid var(--chrome-content-separator-color);
+  box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
+  border-radius: var(--letterboxing-border-radius);
+  border-top-left-radius: var(--letterboxing-border-top-radius);
+  border-top-right-radius: var(--letterboxing-border-top-radius);
 }
 
-.exclude-letterboxing > browser {
-  outline: initial;
-}
-
-:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
-  place-content: start center;
-}
-
-/* extend down the toolbar's colors when letterboxing is enabled */
-.letterboxing {
-  background-color: var(--toolbar-bgcolor);
-  background-image: var(--toolbar-bgimage);
+:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
+  > .browserStack:not(.exclude-letterboxing) {
+  place-content: var(--letterboxing-vertical-alignment) center;
 }
 
 #toolbar-menubar[autohide="true"] {

toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

@@ -14,6 +14,11 @@ const kPrefLetterboxingDimensions =
   "privacy.resistFingerprinting.letterboxing.dimensions";
 const kPrefLetterboxingTesting =
   "privacy.resistFingerprinting.letterboxing.testing";
+const kPrefLetterboxingVcenter =
+  "privacy.resistFingerprinting.letterboxing.vcenter";
+const kPrefLetterboxingGradient =
+  "privacy.resistFingerprinting.letterboxing.gradient";
+
 const kTopicDOMWindowOpened = "domwindowopened";
 
 const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings";
@@ -140,6 +145,9 @@ class _RFPHelper {
     // Add unconditional observers
     Services.prefs.addObserver(kPrefResistFingerprinting, this);
     Services.prefs.addObserver(kPrefLetterboxing, this);
+    Services.prefs.addObserver(kPrefLetterboxingVcenter, this);
+    Services.prefs.addObserver(kPrefLetterboxingGradient, this);
+
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       "_letterboxingDimensions",
@@ -171,6 +179,8 @@ class _RFPHelper {
 
     // Remove unconditional observers
     Services.prefs.removeObserver(kPrefResistFingerprinting, this);
+    Services.prefs.removeObserver(kPrefLetterboxingGradient, this);
+    Services.prefs.removeObserver(kPrefLetterboxingVcenter, this);
     Services.prefs.removeObserver(kPrefLetterboxing, this);
     // Remove the RFP observers, swallowing exceptions if they weren't present
     this._removeRFPObservers();
@@ -218,6 +228,8 @@ class _RFPHelper {
         this._handleSpoofEnglishChanged();
         break;
       case kPrefLetterboxing:
+      case kPrefLetterboxingVcenter:
+      case kPrefLetterboxingGradient:
         this._handleLetterboxingPrefChanged();
         break;
       default:
@@ -429,8 +441,7 @@ class _RFPHelper {
     });
   }
 
-  getLetterboxingDefaultRule(aBrowser) {
-    let document = aBrowser.ownerDocument;
+  getLetterboxingDefaultRule(document) {
     return (document._letterBoxingSizingRule ||= (() => {
       // If not already cached on the document object, traverse the CSSOM and
       // find the rule applying the default letterboxing styles to browsers
@@ -555,11 +566,16 @@ class _RFPHelper {
       return;
     }
 
+    let lastRoundedSize;
+
     const roundDimensions = (aWidth, aHeight) => {
-      const r = (aWidth, aHeight) => ({
-        width: `var(--rdm-width, ${aWidth}px)`,
-        height: `var(--rdm-height, ${aHeight}px)`,
-      });
+      const r = (width, height) => {
+        lastRoundedSize = {width, height};
+        return {
+          width: `var(--rdm-width, ${width}px)`,
+          height: `var(--rdm-height, ${height}px)`,
+        }
+      };
 
       let result;
 
@@ -642,7 +658,7 @@ class _RFPHelper {
     const roundedDefault = roundDimensions(containerWidth, containerHeight);
 
     styleChanges.queueIfNeeded(
-      this.getLetterboxingDefaultRule(aBrowser),
+      this.getLetterboxingDefaultRule(aBrowser.ownerDocument),
       roundedDefault
     );
 
@@ -655,6 +671,21 @@ class _RFPHelper {
         : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
     styleChanges.queueIfNeeded(aBrowser, roundedInline);
 
+    if (lastRoundedSize) {
+      // check wether the letterboxing margin is less than the border radius, and if so flatten the borders
+      let borderRadius = parseInt(win.getComputedStyle(browserContainer).getPropertyValue("--letterboxing-border-radius"));
+      if (borderRadius &&
+        (parentWidth - lastRoundedSize.width < borderRadius &&
+          parentHeight - lastRoundedSize.height < borderRadius)) {
+        borderRadius = 0;
+      } else {
+        borderRadius = "";
+      }
+      styleChanges.queueIfNeeded(browserParent, {
+        '--letterboxing-border-radius': borderRadius
+      });
+    }
+
     // If the size of the content is already quantized, we do nothing.
     if (!styleChanges.length) {
       log(`${logPrefix} is_rounded == true`);
@@ -690,6 +721,10 @@ class _RFPHelper {
   _updateSizeForTabsInWindow(aWindow) {
     let tabBrowser = aWindow.gBrowser;
     tabBrowser.tabpanels?.classList.add("letterboxing");
+    tabBrowser.tabpanels?.classList.toggle("letterboxing-vcenter",
+      Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false));
+    tabBrowser.tabpanels?.classList.toggle("letterboxing-gradient",
+      Services.prefs.getBoolPref(kPrefLetterboxingGradient, false));
 
     for (let tab of tabBrowser.tabs) {
       let browser = tab.linkedBrowser;