[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

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

Title: GitLab

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

Commits:

  • 0cb13087
    by hackademix at 2024-01-29T16:32:32+01:00 
    fixup! Bug 32308: use direct browser sizing for letterboxing.

Bug 41917: Make the appearance of letterboxing look more intentional

3 changed files:

Changes:

  • browser/app/profile/001-base-profile.js
    ... ... @@ -376,6 +376,10 @@ pref("security.remote_settings.intermediates.enabled", false);
    376 376 
     pref("dom.use_components_shim", false);
    377 377 
     // Enable letterboxing
    378 378 
     pref("privacy.resistFingerprinting.letterboxing", true);
    379 
    +// tor-browser#41917 center letterboxed area vertically
    380 
    +pref("privacy.resistFingerprinting.letterboxing.vcenter", true);
    381 
    +// tor-browser#41917 letterboxing gradient background
    382 
    +pref("privacy.resistFingerprinting.letterboxing.gradient", true);
    379 383 
     // tor-browser#41695: how many warnings we show if user closes them without restoring the window size
    380 384 
     pref("privacy.resistFingerprinting.resizeWarnings", 3);
    381 385 
     // 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 {
    134 134 
       doesn't get notified on horizontal shrinking.
    135 135 
       */
    136 136 
       overflow-x: hidden;
    137 
    +  background: var(--letterboxing-bgcolor);
    138 
    +}
    139 
    +
    140 
    +.letterboxing {
    141 
    +  --letterboxing-border-radius: 8px;
    142 
    +  --letterboxing-border-top-radius: 0;
    143 
    +  --letterboxing-vertical-alignment: start;
    144 
    +  --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
    145 
    +  --letterboxing-bgcolor: var(--tabpanel-background-color);
    146 
    +  --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
    147 
    +  --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
    148 
    +}
    149 
    +
    150 
    +.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
    151 
    +  --letterboxing-border-top-radius: var(--letterboxing-border-radius);
    152 
    +  --letterboxing-vertical-alignment: center;
    153 
    +}
    154 
    +
    155 
    +.letterboxing.letterboxing-gradient .browserContainer {
    156 
    +  background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);
    157 
    +  box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
    158 
    +}
    159 
    +
    160 
    +/*
    161 
    +  Align status bar with content.
    162 
    +  TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
    163 
    +*/
    164 
    +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
    165 
    +  > #statuspanel:not([hidden]) {
    166 
    +  position: relative;
    167 
    +  place-self: end left;
    168 
    +  left: 0;
    169 
    +  right: 0;
    170 
    +  --letterboxing-status-left-radius: var(--letterboxing-border-radius);
    171 
    +  --letterboxing-status-right-radius: 0;
    172 
    +}
    173 
    +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
    174 
    +  > #statuspanel:not([mirror]):-moz-locale-dir(rtl),
    175 
    +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
    176 
    +  > #statuspanel[mirror]:-moz-locale-dir(ltr) {
    177 
    +  left: 0;
    178 
    +  right: 0;
    179 
    +  --letterboxing-status-right-radius: var(--letterboxing-border-radius);
    180 
    +  --letterboxing-status-left-radius: 0;
    181 
    +  justify-self: right;
    182 
    +}
    183 
    +
    184 
    +.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
    185 
    +#statuspanel-label {
    186 
    +  border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
    137 187 
     }
    138 188
    139 189 
     /**
    ... ... @@ -142,21 +192,15 @@ body {
    142 192 
     **/
    143 193 
     .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
    144 194 
       /* width & height to be dynamically set by RFPHelper.jsm */
    145 
    -  outline: 1px solid var(--chrome-content-separator-color);
    195 
    +  box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
    196 
    +  border-radius: var(--letterboxing-border-radius);
    197 
    +  border-top-left-radius: var(--letterboxing-border-top-radius);
    198 
    +  border-top-right-radius: var(--letterboxing-border-top-radius);
    146 199 
     }
    147 200
    148 
    -.exclude-letterboxing > browser {
    149 
    -  outline: initial;
    150 
    -}
    151 
    -
    152 
    -:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
    153 
    -  place-content: start center;
    154 
    -}
    155 
    -
    156 
    -/* extend down the toolbar's colors when letterboxing is enabled */
    157 
    -.letterboxing {
    158 
    -  background-color: var(--toolbar-bgcolor);
    159 
    -  background-image: var(--toolbar-bgimage);
    201 
    +:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
    202 
    +  > .browserStack:not(.exclude-letterboxing) {
    203 
    +  place-content: var(--letterboxing-vertical-alignment) center;
    160 204 
     }
    161 205
    162 206 
     #toolbar-menubar[autohide="true"] {

  • toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
    ... ... @@ -14,6 +14,11 @@ const kPrefLetterboxingDimensions =
    14 14 
       "privacy.resistFingerprinting.letterboxing.dimensions";
    15 15 
     const kPrefLetterboxingTesting =
    16 16 
       "privacy.resistFingerprinting.letterboxing.testing";
    17 
    +const kPrefLetterboxingVcenter =
    18 
    +  "privacy.resistFingerprinting.letterboxing.vcenter";
    19 
    +const kPrefLetterboxingGradient =
    20 
    +  "privacy.resistFingerprinting.letterboxing.gradient";
    21 
    +
    17 22 
     const kTopicDOMWindowOpened = "domwindowopened";
    18 23
    19 24 
     const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings";
    ... ... @@ -140,6 +145,9 @@ class _RFPHelper {
    140 145 
         // Add unconditional observers
    141 146 
         Services.prefs.addObserver(kPrefResistFingerprinting, this);
    142 147 
         Services.prefs.addObserver(kPrefLetterboxing, this);
    148 
    +    Services.prefs.addObserver(kPrefLetterboxingVcenter, this);
    149 
    +    Services.prefs.addObserver(kPrefLetterboxingGradient, this);
    150 
    +
    143 151 
         XPCOMUtils.defineLazyPreferenceGetter(
    144 152 
           this,
    145 153 
           "_letterboxingDimensions",
    ... ... @@ -171,6 +179,8 @@ class _RFPHelper {
    171 179
    172 180 
         // Remove unconditional observers
    173 181 
         Services.prefs.removeObserver(kPrefResistFingerprinting, this);
    182 
    +    Services.prefs.removeObserver(kPrefLetterboxingGradient, this);
    183 
    +    Services.prefs.removeObserver(kPrefLetterboxingVcenter, this);
    174 184 
         Services.prefs.removeObserver(kPrefLetterboxing, this);
    175 185 
         // Remove the RFP observers, swallowing exceptions if they weren't present
    176 186 
         this._removeRFPObservers();
    ... ... @@ -218,6 +228,8 @@ class _RFPHelper {
    218 228 
             this._handleSpoofEnglishChanged();
    219 229 
             break;
    220 230 
           case kPrefLetterboxing:
    231 
    +      case kPrefLetterboxingVcenter:
    232 
    +      case kPrefLetterboxingGradient:
    221 233 
             this._handleLetterboxingPrefChanged();
    222 234 
             break;
    223 235 
           default:
    ... ... @@ -429,8 +441,7 @@ class _RFPHelper {
    429 441 
         });
    430 442 
       }
    431 443
    432 
    -  getLetterboxingDefaultRule(aBrowser) {
    433 
    -    let document = aBrowser.ownerDocument;
    444 
    +  getLetterboxingDefaultRule(document) {
    434 445 
         return (document._letterBoxingSizingRule ||= (() => {
    435 446 
           // If not already cached on the document object, traverse the CSSOM and
    436 447 
           // find the rule applying the default letterboxing styles to browsers
    ... ... @@ -555,11 +566,16 @@ class _RFPHelper {
    555 566 
           return;
    556 567 
         }
    557 568
    569 
    +    let lastRoundedSize;
    570 
    +
    558 571 
         const roundDimensions = (aWidth, aHeight) => {
    559 
    -      const r = (aWidth, aHeight) => ({
    560 
    -        width: `var(--rdm-width, ${aWidth}px)`,
    561 
    -        height: `var(--rdm-height, ${aHeight}px)`,
    562 
    -      });
    572 
    +      const r = (width, height) => {
    573 
    +        lastRoundedSize = {width, height};
    574 
    +        return {
    575 
    +          width: `var(--rdm-width, ${width}px)`,
    576 
    +          height: `var(--rdm-height, ${height}px)`,
    577 
    +        }
    578 
    +      };
    563 579
    564 580 
           let result;
    565 581
    ... ... @@ -642,7 +658,7 @@ class _RFPHelper {
    642 658 
         const roundedDefault = roundDimensions(containerWidth, containerHeight);
    643 659
    644 660 
         styleChanges.queueIfNeeded(
    645 
    -      this.getLetterboxingDefaultRule(aBrowser),
    661 
    +      this.getLetterboxingDefaultRule(aBrowser.ownerDocument),
    646 662 
           roundedDefault
    647 663 
         );
    648 664
    ... ... @@ -655,6 +671,21 @@ class _RFPHelper {
    655 671 
             : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
    656 672 
         styleChanges.queueIfNeeded(aBrowser, roundedInline);
    657 673
    674 
    +    if (lastRoundedSize) {
    675 
    +      // check wether the letterboxing margin is less than the border radius, and if so flatten the borders
    676 
    +      let borderRadius = parseInt(win.getComputedStyle(browserContainer).getPropertyValue("--letterboxing-border-radius"));
    677 
    +      if (borderRadius &&
    678 
    +        (parentWidth - lastRoundedSize.width < borderRadius &&
    679 
    +          parentHeight - lastRoundedSize.height < borderRadius)) {
    680 
    +        borderRadius = 0;
    681 
    +      } else {
    682 
    +        borderRadius = "";
    683 
    +      }
    684 
    +      styleChanges.queueIfNeeded(browserParent, {
    685 
    +        '--letterboxing-border-radius': borderRadius
    686 
    +      });
    687 
    +    }
    688 
    +
    658 689 
         // If the size of the content is already quantized, we do nothing.
    659 690 
         if (!styleChanges.length) {
    660 691 
           log(`${logPrefix} is_rounded == true`);
    ... ... @@ -690,6 +721,10 @@ class _RFPHelper {
    690 721 
       _updateSizeForTabsInWindow(aWindow) {
    691 722 
         let tabBrowser = aWindow.gBrowser;
    692 723 
         tabBrowser.tabpanels?.classList.add("letterboxing");
    724 
    +    tabBrowser.tabpanels?.classList.toggle("letterboxing-vcenter",
    725 
    +      Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false));
    726 
    +    tabBrowser.tabpanels?.classList.toggle("letterboxing-gradient",
    727 
    +      Services.prefs.getBoolPref(kPrefLetterboxingGradient, false));
    693 728
    694 729 
         for (let tab of tabBrowser.tabs) {
    695 730 
           let browser = tab.linkedBrowser;

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help 

    _______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits