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

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



Title: GitLab

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

Commits:

  • 922c0f76
    by hackademix at 2024-01-31T14:22:39+01:00
    fixup! Bug 32308: use direct browser sizing for letterboxing.
    
    Bug 42387: hide visual artifacts and fix the status label on rounded letterboxing borders.
    

3 changed files:

Changes:

  • browser/base/content/browser.css
    ... ... @@ -127,6 +127,11 @@ body {
    127 127
       -moz-window-dragging: drag;
    
    128 128
     }
    
    129 129
     
    
    130
    +/**
    
    131
    +  Never modify the following selector without synchronizing
    
    132
    +  LETTERBOX_CSS_SELECTOR in RFPHelper.sys.jsm, where
    
    133
    +  --letterboxing-width & --letterboxing-height are actually set.
    
    134
    +**/
    
    130 135
     .letterboxing .browserContainer {
    
    131 136
       /*
    
    132 137
       From Firefox 115 on, .browserContainer layout is flex / column,
    
    ... ... @@ -137,6 +142,14 @@ body {
    137 142
       background: var(--letterboxing-bgcolor);
    
    138 143
     }
    
    139 144
     
    
    145
    +.browserDecorator {
    
    146
    +  display: none;
    
    147
    +  pointer-events: none;
    
    148
    +  background: transparent;
    
    149
    +  position: relative;
    
    150
    +  z-index: 1;
    
    151
    +}
    
    152
    +
    
    140 153
     .letterboxing {
    
    141 154
       --letterboxing-border-radius: 8px;
    
    142 155
       --letterboxing-border-top-radius: 0;
    
    ... ... @@ -145,6 +158,7 @@ body {
    145 158
       --letterboxing-bgcolor: var(--tabpanel-background-color);
    
    146 159
       --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
    
    147 160
       --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
    
    161
    +  --letterboxing-border-color: var(--letterboxing-bgcolor);
    
    148 162
     }
    
    149 163
     
    
    150 164
     .letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
    
    ... ... @@ -157,6 +171,26 @@ body {
    157 171
       box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
    
    158 172
     }
    
    159 173
     
    
    174
    +:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
    
    175
    +  > .browserStack:not(.exclude-letterboxing)
    
    176
    +  > .browserDecorator {
    
    177
    +  display: initial;
    
    178
    +  visibility: visible;
    
    179
    +  border-radius: var(--letterboxing-border-radius);
    
    180
    +  border-top-left-radius: var(--letterboxing-border-top-radius);
    
    181
    +  border-top-right-radius: var(--letterboxing-border-top-radius);
    
    182
    +  box-shadow: var(--letterboxing-border-color) 0px 0px .1px inset, var(--letterboxing-border-color) 0 0 .1px;
    
    183
    +  border: .1px solid var(--letterboxing-border-color);
    
    184
    +  outline: .1px solid var(--letterboxing-bgcolor);
    
    185
    +  height: calc(var(--letterboxing-height) + 1px);
    
    186
    +  top: -1px;
    
    187
    +}
    
    188
    +
    
    189
    +.letterboxing-vcenter .browserDecorator {
    
    190
    +  height: auto !important;
    
    191
    +  top: 0 !important;
    
    192
    +}
    
    193
    +
    
    160 194
     /*
    
    161 195
       Align status bar with content.
    
    162 196
       TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
    
    ... ... @@ -167,6 +201,7 @@ body {
    167 201
       place-self: end left;
    
    168 202
       left: 0;
    
    169 203
       right: 0;
    
    204
    +  z-index: 2;
    
    170 205
       --letterboxing-status-left-radius: var(--letterboxing-border-radius);
    
    171 206
       --letterboxing-status-right-radius: 0;
    
    172 207
     }
    
    ... ... @@ -184,23 +219,24 @@ body {
    184 219
     .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
    
    185 220
     #statuspanel-label {
    
    186 221
       border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
    
    222
    +  margin: 0;
    
    223
    +  border: 1px solid var(--letterboxing-border-color);
    
    224
    +  max-width: calc(var(--letterboxing-width) * .5);
    
    187 225
     }
    
    188 226
     
    
    189
    -/**
    
    190
    -  Never modify the following selector without synchronizing
    
    191
    -  LETTERBOX_CSS_SELECTOR in RFPHelper.jsm!
    
    192
    -**/
    
    193 227
     .letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
    
    194
    -  /* width & height to be dynamically set by RFPHelper.jsm */
    
    195 228
       box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
    
    196 229
       border-radius: var(--letterboxing-border-radius);
    
    197 230
       border-top-left-radius: var(--letterboxing-border-top-radius);
    
    198 231
       border-top-right-radius: var(--letterboxing-border-top-radius);
    
    232
    +  width: var(--letterboxing-width) !important;
    
    233
    +  height: var(--letterboxing-height) !important;
    
    199 234
     }
    
    200 235
     
    
    201 236
     :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
    
    202 237
       > .browserStack:not(.exclude-letterboxing) {
    
    203 238
       place-content: var(--letterboxing-vertical-alignment) center;
    
    239
    +  background: var(--letterboxing-bgcolor);
    
    204 240
     }
    
    205 241
     
    
    206 242
     #toolbar-menubar[autohide="true"] {
    

  • browser/base/content/tabbrowser.js
    ... ... @@ -2238,6 +2238,10 @@
    2238 2238
           stack.className = "browserStack";
    
    2239 2239
           stack.appendChild(b);
    
    2240 2240
     
    
    2241
    +      let decorator = document.createXULElement("hbox");
    
    2242
    +      decorator.className = "browserDecorator";
    
    2243
    +      stack.appendChild(decorator);
    
    2244
    +
    
    2241 2245
           let browserContainer = document.createXULElement("vbox");
    
    2242 2246
           browserContainer.className = "browserContainer";
    
    2243 2247
           browserContainer.appendChild(notificationbox);
    

  • toolkit/components/resistfingerprinting/RFPHelper.sys.mjs
    ... ... @@ -447,8 +447,7 @@ class _RFPHelper {
    447 447
           // find the rule applying the default letterboxing styles to browsers
    
    448 448
           // preemptively in order to beat race conditions on tab/window creation
    
    449 449
           const LETTERBOX_CSS_URL = "chrome://browser/content/browser.css";
    
    450
    -      const LETTERBOX_CSS_SELECTOR =
    
    451
    -        ".letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser";
    
    450
    +      const LETTERBOX_CSS_SELECTOR = ".letterboxing .browserContainer";
    
    452 451
           for (let ss of document.styleSheets) {
    
    453 452
             if (ss.href !== LETTERBOX_CSS_URL) {
    
    454 453
               continue;
    
    ... ... @@ -572,8 +571,8 @@ class _RFPHelper {
    572 571
           const r = (width, height) => {
    
    573 572
             lastRoundedSize = {width, height};
    
    574 573
             return {
    
    575
    -          width: `var(--rdm-width, ${width}px)`,
    
    576
    -          height: `var(--rdm-height, ${height}px)`,
    
    574
    +          "--letterboxing-width": `var(--rdm-width, ${width}px)`,
    
    575
    +          "--letterboxing-height": `var(--rdm-height, ${height}px)`,
    
    577 576
             }
    
    578 577
           };
    
    579 578
     
    
    ... ... @@ -637,7 +636,7 @@ class _RFPHelper {
    637 636
             for (let [name, value] of Object.entries(props)) {
    
    638 637
               if (style[name] !== value) {
    
    639 638
                 this.push(() => {
    
    640
    -              style.setProperty(name, value, "important");
    
    639
    +              style.setProperty(name, value);
    
    641 640
                 });
    
    642 641
               }
    
    643 642
             }
    
    ... ... @@ -668,8 +667,11 @@ class _RFPHelper {
    668 667
             ? // optional UI components such as the notification box, the find bar
    
    669 668
               // or devtools are constraining this browser's size: recompute custom
    
    670 669
               roundDimensions(parentWidth, parentHeight)
    
    671
    -        : { width: "", height: "" }; // otherwise we can keep the default (rounded) size
    
    672
    -    styleChanges.queueIfNeeded(aBrowser, roundedInline);
    
    670
    +        : {
    
    671
    +          "--letterboxing-width": "",
    
    672
    +          "--letterboxing-height": "",
    
    673
    +        }; // otherwise we can keep the default (rounded) size
    
    674
    +    styleChanges.queueIfNeeded(browserParent, roundedInline);
    
    673 675
     
    
    674 676
         if (lastRoundedSize) {
    
    675 677
           // check wether the letterboxing margin is less than the border radius, and if so flatten the borders
    

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