[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

    • —
    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