Verified Commit 8d25c1cc authored by ma1's avatar ma1
Browse files

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

Bug 41917: Make the appearance of letterboxing look more intentional
parent 478ddecb

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

+4 −0
Original line number Diff line number Diff line
@@ -376,6 +376,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

+57 −13
Original line number Diff line number Diff line
@@ -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);

}



.exclude-letterboxing > browser {

  outline: initial;

  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);

}



: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

+42 −7
Original line number Diff line number Diff line
@@ -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;