[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-115.7.0esr-13.5-1] 2 commits: fixup! Bug 32308: use direct browser sizing for letterboxing.

ma1 pushed to branch tor-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser

Commits:

8d25c1cc

by hackademix at 2024-01-29T16:28:12+01:00

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

Bug 41917: Make the appearance of letterboxing look more intentional

366c81df
by hackademix at 2024-01-29T16:28:18+01:00
```
Bug 41917: Tor brand-specific styles.
```

6 changed files:

browser/app/profile/001-base-profile.js
browser/base/content/browser.css
browser/themes/shared/browser-shared.css
browser/themes/shared/jar.inc.mn
+ browser/themes/shared/tor-branding.css
toolkit/components/resistfingerprinting/RFPHelper.sys.mjs

Changes:

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

@@ -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

@@ -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"] {

browser/themes/shared/browser-shared.css

@@ -24,6 +24,7 @@
  @import url("chrome://browser/skin/UITour.css");
  @import url("chrome://global/skin/browser-colors.css");
  @import url("chrome://browser/skin/tor-urlbar-button.css");
 +@import url("chrome://browser/skin/tor-branding.css");
  @import url("chrome://browser/skin/onionlocation.css");
  @namespace html url("http://www.w3.org/1999/xhtml");

browser/themes/shared/jar.inc.mn

@@ -29,6 +29,7 @@
    skin/classic/browser/tabs.css                                (../shared/tabs.css)
    skin/classic/browser/toolbarbuttons.css                      (../shared/toolbarbuttons.css)
    skin/classic/browser/toolbarbutton-icons.css                 (../shared/toolbarbutton-icons.css)
 +  skin/classic/browser/tor-branding.css                        (../shared/tor-branding.css)
    skin/classic/browser/tor-urlbar-button.css                   (../shared/tor-urlbar-button.css)
    skin/classic/browser/urlbar-dynamic-results.css              (../shared/urlbar-dynamic-results.css)
    skin/classic/browser/urlbar-searchbar.css                    (../shared/urlbar-searchbar.css)

browser/themes/shared/tor-branding.css

 +.letterboxing {
 +  --letterboxing-bgcolor: var(--color-grey-light-20, #F0F0F4);
 +  --letterboxing-gradient-color1: rgba(0, 219, 222, 0.02);
 +  --letterboxing-gradient-color2: rgba(252, 0, 255, 0.02);
 +}
++
 +@media (prefers-color-scheme: dark) {
 +  .letterboxing {
 +    --letterboxing-bgcolor: var(--color-grey-dark-10, #52525E);
 +    --letterboxing-gradient-color1: rgba(0, 219, 222, 0.06);
 +    --letterboxing-gradient-color2: rgba(252, 0, 255, 0.06);
 +  }
 +}
 \ No newline at end of file

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;