GitLab

at 2025-10-15T15:59:48+01:00

dropme! fixup! TB 41917: Change letterboxing styling for Tor Browser.

TB 44214: Drop letterboxing changes for Tor Browser only.

The commit "TB 41917: Change letterboxing styling for Tor Browser."
should be entirely dropped.

@@ -879,7 +879,13 @@ var FullScreen = {
+     }
      this._isChromeCollapsed = false;
 -    Services.obs.notifyObservers(null, "fullscreen-nav-toolbox", "shown");
 +    // Need a subject to know which window this applies to.
 +    // Base browser patch can be dropped after bugzilla bug 1992036.
 +    Services.obs.notifyObservers(
 +      gNavToolbox,
 +      "fullscreen-nav-toolbox",
 +      "shown"
 +    );
    },
    hideNavToolbox(aAnimate = false) {
@@ -943,7 +949,13 @@ var FullScreen = {
      gNavToolbox.style.marginTop =
        -gNavToolbox.getBoundingClientRect().height + "px";
      this._isChromeCollapsed = true;
 -    Services.obs.notifyObservers(null, "fullscreen-nav-toolbox", "hidden");
 +    // Need a subject to know which window this applies to.
 +    // Base browser patch can be dropped after bugzilla bug 1880918.
 +    Services.obs.notifyObservers(
 +      gNavToolbox,
 +      "fullscreen-nav-toolbox",
 +      "hidden"
 +    );
      MousePosTracker.removeListener(this);
    },

@@ -242,13 +242,17 @@
+   }
+ }
 -#statuspanel[type=letterboxingStatus] > #statuspanel-label,
 -#statuspanel[previoustype=letterboxingStatus][inactive] > #statuspanel-label {
 +#statuspanel:is([type=letterboxingStatus], [previoustype=letterboxingStatus][inactive]) > #statuspanel-label {
    background-image: url("chrome://browser/skin/window.svg");
    background-size: 1em;
    background-repeat: no-repeat;
 -  background-position-x: .5em;
    background-position-y: center;
 +  background-position-x: left .5em;
++
 +  &:-moz-locale-dir(rtl) {
 +    background-position-x: right .5em;
 +  }
++
    padding-inline-start: 2em;
    -moz-context-properties: fill;
    fill: var(--color-accent-primary);

henry pushed to branch tor-browser-140.4.0esr-15.0-1 at The Tor Project / Applications / Tor Browser

Commits:

4 changed files:

Changes:

@@ -18,8 +18,6 @@ const kPrefLetterboxingTesting =
    "privacy.resistFingerprinting.letterboxing.testing";
  const kPrefLetterboxingVcenter =
    "privacy.resistFingerprinting.letterboxing.vcenter";
 -const kPrefLetterboxingGradient =
 -  "privacy.resistFingerprinting.letterboxing.gradient";
  const kPrefLetterboxingDidForceSize =
    "privacy.resistFingerprinting.letterboxing.didForceSize";
  const kPrefLetterboxingRememberSize =
@@ -28,10 +26,17 @@ const kPrefLetterboxingRememberSize =
  const kTopicDOMWindowOpened = "domwindowopened";
  const kTopicDOMWindowClosed = "domwindowclosed";
 +const kTopicFullscreenNavToolbox = "fullscreen-nav-toolbox";
++
  const kPrefResizeWarnings = "privacy.resistFingerprinting.resizeWarnings";
 +const kPrefVerticalTabs = "sidebar.verticalTabs";
++
  const lazy = {};
 +ChromeUtils.defineESModuleGetters(lazy, {
 +  Color: "resource://gre/modules/Color.sys.mjs",
 +});
  ChromeUtils.defineLazyGetter(lazy, "logConsole", () =>
    console.createInstance({
      prefix: "RFPHelper",
@@ -155,7 +160,8 @@ class _RFPHelper {
      Services.prefs.addObserver(kPrefResistFingerprinting, this);
      Services.prefs.addObserver(kPrefLetterboxing, this);
      Services.prefs.addObserver(kPrefLetterboxingVcenter, this);
 -    Services.prefs.addObserver(kPrefLetterboxingGradient, this);
 +    Services.prefs.addObserver(kPrefVerticalTabs, this);
 +    Services.obs.addObserver(this, kTopicFullscreenNavToolbox);
      XPCOMUtils.defineLazyPreferenceGetter(
        this,
@@ -188,9 +194,10 @@ 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);
 +    Services.prefs.removeObserver(kPrefVerticalTabs, this);
 +    Services.obs.removeObserver(this, kTopicFullscreenNavToolbox);
      // Remove the RFP observers, swallowing exceptions if they weren't present
      this._removeLanguagePrefObservers();
+   }
@@ -212,6 +219,15 @@ class _RFPHelper {
        case kTopicDOMWindowClosed:
          this._handleDOMWindowClosed(subject);
          break;
 +      case kTopicFullscreenNavToolbox:
 +        // The `subject` is the gNavToolbox.
 +        // Record whether the toobox has been hidden when the browser (not
 +        // content) is in fullscreen.
 +        subject.ownerGlobal.gBrowser.tabbox.classList.toggle(
 +          "letterboxing-nav-toolbox-hidden",
 +          data === "hidden"
 +        );
 +        break;
        default:
          break;
+     }
@@ -226,6 +242,13 @@ class _RFPHelper {
          resizeObserver.observe(browser.parentElement);
          break;
+       }
 +      case "nativethemechange":
 +        // NOTE: "nativethemechange" seems to always be sent after
 +        // "windowlwthemeupdate". So all the lwtheme CSS properties should be
 +        // set to the new theme's values already, so we don't need to wait for
 +        // windowlwthemeupdate.
 +        this._updateLetterboxingColors(aMessage.currentTarget, true);
 +        break;
        default:
          break;
+     }
@@ -245,9 +268,13 @@ class _RFPHelper {
          Services.prefs.clearUserPref(kPrefLetterboxingDidForceSize);
        // fall-through
        case kPrefLetterboxingVcenter:
 -      case kPrefLetterboxingGradient:
          this._handleLetterboxingPrefChanged();
          break;
 +      case kPrefVerticalTabs:
 +        if (this.letterboxingEnabled) {
 +          forEachWindow(win => this._updateLetterboxingColors(win));
 +        }
 +        break;
        default:
          break;
+     }
@@ -452,7 +479,7 @@ class _RFPHelper {
      // If not already cached on the document object, traverse the CSSOM and
      // find the rule applying the default letterboxing styles to browsers
      // preemptively in order to beat race conditions on tab/window creation
 -    return (document._letterboxingMarginsRule ||= (() => {
 +    return (document._letterboxingDefaultRule ||= (() => {
        const LETTERBOX_CSS_SELECTOR = ".letterboxing";
        const LETTERBOX_CSS_URL =
          "chrome://global/content/resistfingerprinting/letterboxing.css";
@@ -688,26 +715,22 @@ class _RFPHelper {
      if (lastRoundedSize) {
        // Check whether 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")
 +      // and if so do not show an outline.
 +      const gapVertical = parentHeight - lastRoundedSize.height;
 +      const gapHorizontal = parentWidth - lastRoundedSize.width;
 +      browserParent.classList.toggle(
 +        "letterboxing-show-outline",
 +        gapVertical >= this._letterboxingBorderRadius ||
 +          gapHorizontal >= this._letterboxingBorderRadius
 +      );
 +      // When the Letterboxing area is top-aligned, only show the sidebar corner
 +      // if there is enough horizontal space.
 +      // The factor of 4 is from the horizontal centre-alignment and wanting
 +      // enough space for twice the corner radius.
 +      browserParent.classList.toggle(
 +        "letterboxing-show-sidebar-corner",
 +        gapHorizontal >= 4 * this._letterboxingBorderRadius
        );
 -      if (
 -        borderRadius &&
 -        parentWidth - lastRoundedSize.width < borderRadius &&
 -        parentHeight - lastRoundedSize.height < borderRadius
 -      ) {
 -        borderRadius = 0;
 -      } else {
 -        borderRadius = "";
 -      }
 -      styleChanges.queueIfNeeded(browserParent, {
 -        "--letterboxing-decorator-visibility":
 -          borderRadius === 0 ? "hidden" : "",
 -        "--letterboxing-border-radius": borderRadius,
 -      });
        if (win.gBrowser.selectedBrowser == aBrowser) {
          const updateStatus = async args => {
            win.XULBrowserWindow.letterboxingStatus = args
@@ -769,20 +792,31 @@ class _RFPHelper {
    _resetContentSize(aBrowser) {
      aBrowser.parentElement.classList.add("exclude-letterboxing");
 +    aBrowser.parentElement.classList.remove(
 +      "letterboxing-show-outline",
 +      "letterboxing-show-sidebar-corner"
 +    );
+   }
    _updateSizeForTabsInWindow(aWindow) {
      let tabBrowser = aWindow.gBrowser;
 -    tabBrowser.tabpanels?.classList.add("letterboxing");
 -    tabBrowser.tabpanels?.classList.toggle(
 +    tabBrowser.tabbox.classList.add("letterboxing");
 +    tabBrowser.tabbox.classList.toggle(
        "letterboxing-vcenter",
        Services.prefs.getBoolPref(kPrefLetterboxingVcenter, false)
      );
 -    tabBrowser.tabpanels?.classList.toggle(
 -      "letterboxing-gradient",
 -      Services.prefs.getBoolPref(kPrefLetterboxingGradient, false)
 -    );
 +    if (this._letterboxingBorderRadius === undefined && tabBrowser.tabbox) {
 +      // Cache the value since it is not expected to change in a session for any
 +      // window.
 +      this._letterboxingBorderRadius = Math.ceil(
 +        parseFloat(
 +          aWindow
 +            .getComputedStyle(tabBrowser.tabbox)
 +            .getPropertyValue("--letterboxing-border-radius")
 +        )
 +      );
 +    }
      for (let tab of tabBrowser.tabs) {
        let browser = tab.linkedBrowser;
@@ -791,7 +825,7 @@ class _RFPHelper {
      // We need to add this class late because otherwise new windows get
      // maximized.
      aWindow.setTimeout(() => {
 -      tabBrowser.tabpanels?.classList.add("letterboxing-ready");
 +      tabBrowser.tabbox.classList.add("letterboxing-ready");
        if (!aWindow._rfpOriginalSize) {
          this._recordWindowSize(aWindow);
+       }
@@ -869,6 +903,247 @@ class _RFPHelper {
      this._resizeObservers.set(aWindow, resizeObserver);
      // Rounding the content viewport.
      this._updateSizeForTabsInWindow(aWindow);
++
 +    this._updateLetterboxingColors(aWindow, true);
 +    aWindow.addEventListener("nativethemechange", this);
 +  }
++
 +  /**
 +   * Convert a CSS property to its RGBA value.
 +   *
 +   * @param {Window} win - The window for the element.
 +   * @param {CSSStyleDeclaration} style - The computed style for the element we
 +   *   want to grab the color from.
 +   * @param {string} property - The name of the property we want.
 +   *
 +   * @returns {InspectorRGBATuple} - The RGBA color. The "r", "g", "b" fields
 +   *   are relative to the 0-255 color range. The "a" field is in the 0-1 range.
 +   */
 +  _convertToRGBA(win, style, property) {
 +    let cssColor = style.getPropertyValue(property);
 +    if (!cssColor) {
 +      lazy.logConsole.error(`Missing color "${property}"`);
 +      return { r: 0, g: 0, b: 0, a: 0 };
 +    }
 +    const currentColorRegex =
 +      /(^|[^a-zA-Z0-9_-])currentColor($|[^a-zA-Z0-9_-])/g;
 +    if (currentColorRegex.test(cssColor)) {
 +      const currentColor = style.color;
 +      cssColor = cssColor.replace(currentColorRegex, (_, pre, post) => {
 +        return pre + currentColor + post;
 +      });
 +      lazy.logConsole.debug(
 +        "Replaced currentColor.",
 +        property,
 +        currentColor,
 +        cssColor
 +      );
 +    }
 +    /* Can drop the document argument after bugzilla bug 1973684 (142). */
 +    const colorRGBA = win.InspectorUtils.colorToRGBA(cssColor, win.document);
 +    if (!colorRGBA) {
 +      lazy.logConsole.error(
 +        `Failed to convert "${property}" color (${cssColor}) to RGBA`
 +      );
 +      return { r: 0, g: 0, b: 0, a: 0 };
 +    }
 +    return colorRGBA;
 +  }
++
 +  /**
 +   * Compose two colors with alpha values on top of each other.
 +   *
 +   * @param {InspectorRGBATuple} topRGBA - The color to place on the top.
 +   * @param {InspectorRGBATuple} bottomRGBA - The color to place on the bottom.
 +   *
 +   * @returns {InspectorRGBATuple} - The composed color.
 +   */
 +  _composeRGBA(topRGBA, bottomRGBA) {
 +    const topA = Math.max(0, Math.min(1, topRGBA.a));
 +    const bottomA = Math.max(0, Math.min(1, bottomRGBA.a));
 +    const a = topA + bottomA - topA * bottomA; // Should be 1 if either is 1.
 +    if (a === 0) {
 +      return { r: 0, g: 0, b: 0, a };
 +    }
 +    const ret = { a };
 +    for (const field of ["r", "g", "b"]) {
 +      ret[field] =
 +        (topRGBA[field] * topA + bottomRGBA[field] * bottomA * (1 - topA)) / a;
 +    }
 +    return ret;
 +  }
++
 +  /**
 +   * Calculate the urlbar's container opaque background color, removing any
 +   * transparency.
 +   *
 +   * @param {Window} win - The window to calculate the color for.
 +   * @param {CSSStyleDeclaration} style - The computed style for the #nav-bar
 +   *   element.
 +   *
 +   * @returns {InspectorRGBATuple} - The calculated color, which will be opaque.
 +   */
 +  _calculateUrlbarContainerColor(win, style) {
 +    let colorRGBA;
 +    if (!Services.prefs.getBoolPref(kPrefVerticalTabs)) {
 +      lazy.logConsole.debug("Toolbar background used.");
 +      colorRGBA = this._convertToRGBA(win, style, "--toolbar-bgcolor");
 +      if (colorRGBA.a === 1) {
 +        return colorRGBA;
 +      }
 +    } else {
 +      // The urlbar only has the toolbox colour.
 +      colorRGBA = { r: 0, g: 0, b: 0, a: 0 };
 +    }
 +    let toolboxHasBackgroundImage = false;
 +    const isLwTheme = win.document.documentElement.hasAttribute("lwtheme");
 +    if (isLwTheme) {
 +      for (const prop of ["--lwt-header-image", "--lwt-additional-images"]) {
 +        const headerImage = style.getPropertyValue(prop);
 +        if (headerImage && headerImage !== "none") {
 +          // The theme sets a background image behind the urlbar. No easy way to
 +          // derive a single colour from this.
 +          toolboxHasBackgroundImage = true;
 +          lazy.logConsole.debug(
 +            "Toolbox has background image.",
 +            prop,
 +            headerImage
 +          );
 +          break;
 +        }
 +      }
 +    }
 +    if (!toolboxHasBackgroundImage) {
 +      lazy.logConsole.debug("Toolbox background used.");
 +      colorRGBA = this._composeRGBA(
 +        colorRGBA,
 +        this._convertToRGBA(win, style, "--toolbox-bgcolor")
 +      );
 +      if (colorRGBA.a === 1) {
 +        return colorRGBA;
 +      }
 +    }
++
 +    // Determine whether the urlbar is dark.
 +    // At this point, the urlbar background has some transparency, likely on top
 +    // of an image.
 +    // We use the theme's text colour to figure out whether the urlbar
 +    // background is overall meant to be light or dark. Unlike the urlbar, we
 +    // expect this colour to be (almost) opaque.
 +    const textRGBA = this._convertToRGBA(win, style, "--toolbar-field-color");
 +    const textColor = new lazy.Color(textRGBA.r, textRGBA.g, textRGBA.b);
 +    if (textColor.relativeLuminance >= 0.5) {
 +      // Light text, so assume it has a dark background.
 +      // Combine with a generic opaque dark colour. Copied from "frame" for the
 +      // built-in dark theme.
 +      lazy.logConsole.debug("Generic dark background used.");
 +      const darkFrameRGBA = { r: 28, g: 27, b: 34, a: 1 };
 +      return this._composeRGBA(colorRGBA, darkFrameRGBA);
 +    }
 +    // Combine with an opaque light colour. Copied from "frame" for the built-in
 +    // light theme.
 +    lazy.logConsole.debug("Generic light background used.");
 +    const lightFrameRGBA = { r: 234, g: 234, b: 237, a: 1 };
 +    return this._composeRGBA(colorRGBA, lightFrameRGBA);
 +  }
++
 +  /**
 +   * Update the Letterboxing colors and related classes, or clear them if
 +   * Letterboxing is not enabled.
 +   *
 +   * @param {Window} win - The window to update the colors for.
 +   * @param {boolean} letterboxingEnabled - Whether Letterboxing is enabled.
 +   */
 +  _updateLetterboxingColors(win, letterboxingEnabled) {
 +    let urlbarBackgroundRGBA;
 +    let urlbarTextRGBA;
 +    let contentSeparatorRGBA;
 +    let urlbarBackgroundDark = false;
 +    let lowBackgroundOutlineContrast = false;
++
 +    if (letterboxingEnabled) {
 +      // Want the effective colour of various elements without any alpha values
 +      // so they can be used consistently.
 +      const navbarStyle = win.getComputedStyle(
 +        win.document.getElementById("nav-bar")
 +      );
 +      const containerRGBA = this._calculateUrlbarContainerColor(
 +        win,
 +        navbarStyle
 +      );
 +      urlbarBackgroundRGBA = this._composeRGBA(
 +        this._convertToRGBA(
 +          win,
 +          navbarStyle,
 +          "--toolbar-field-background-color"
 +        ),
 +        containerRGBA
 +      );
 +      urlbarTextRGBA = this._composeRGBA(
 +        this._convertToRGBA(win, navbarStyle, "--toolbar-field-color"),
 +        urlbarBackgroundRGBA
 +      );
 +      /* Separator between the urlbar container #nav-bar and the tabbox. */
 +      const tabboxStyle = win.getComputedStyle(win.gBrowser.tabbox);
 +      contentSeparatorRGBA = this._composeRGBA(
 +        this._convertToRGBA(
 +          win,
 +          tabboxStyle,
 +          "--chrome-content-separator-color"
 +        ),
 +        containerRGBA
 +      );
 +      const bgColor = new lazy.Color(
 +        urlbarBackgroundRGBA.r,
 +        urlbarBackgroundRGBA.g,
 +        urlbarBackgroundRGBA.b
 +      );
 +      const outlineColor = new lazy.Color(
 +        contentSeparatorRGBA.r,
 +        contentSeparatorRGBA.g,
 +        contentSeparatorRGBA.b
 +      );
 +      const contrastRatio = bgColor.contrastRatio(outlineColor);
 +      lazy.logConsole.debug(
 +        "Outline-background contrast ratio.",
 +        contrastRatio
 +      );
 +      urlbarBackgroundDark = bgColor.relativeLuminance < 0.5;
 +      /* Very low contrast ratio. For reference the default light theme has
 +       * a contrast ratio of ~1.1. */
 +      lowBackgroundOutlineContrast = contrastRatio < 1.05;
 +    }
 +    for (const { name, colorRGBA } of [
 +      {
 +        name: "--letterboxing-urlbar-text-color",
 +        colorRGBA: urlbarTextRGBA,
 +      },
 +      {
 +        name: "--letterboxing-urlbar-background-color",
 +        colorRGBA: urlbarBackgroundRGBA,
 +      },
 +      {
 +        name: "--letterboxing-content-separator-color",
 +        colorRGBA: contentSeparatorRGBA,
 +      },
 +    ]) {
 +      if (letterboxingEnabled) {
 +        win.gBrowser.tabbox.style.setProperty(
 +          name,
 +          `rgb(${colorRGBA.r}, ${colorRGBA.g}, ${colorRGBA.b})`
 +        );
 +      } else {
 +        win.gBrowser.tabbox.style.removeProperty(name);
 +      }
 +    }
 +    win.gBrowser.tabbox.classList.toggle(
 +      "letterboxing-urlbar-background-dark",
 +      urlbarBackgroundDark
 +    );
 +    win.gBrowser.tabbox.classList.toggle(
 +      "letterboxing-low-background-outline-contrast",
 +      lowBackgroundOutlineContrast
 +    );
+   }
    _detachWindow(aWindow) {
@@ -886,7 +1161,7 @@ class _RFPHelper {
      aWindow.removeEventListener("TabOpen", this);
      // revert tabpanel's style to default
 -    tabBrowser.tabpanels?.classList.remove("letterboxing");
 +    tabBrowser.tabbox.classList.remove("letterboxing");
      // and restore default size on each browser element
      for (let tab of tabBrowser.tabs) {
@@ -896,6 +1171,9 @@ class _RFPHelper {
      aWindow.removeEventListener("dblclick", this._onWindowDoubleClick);
      delete aWindow.shrinkToLetterbox;
      aWindow.removeEventListener("sizemodechange", windowResizeHandler);
++
 +    aWindow.removeEventListener("nativethemechange", this);
 +    this._updateLetterboxingColors(aWindow, false);
+   }
    _handleDOMWindowOpened(win) {

@@ -7,30 +7,106 @@
   * RFPHelper.sys.mjs (LETTERBOX_CSS_SELECTOR and LETTERBOX_CSS_URL,
   * respectively), where --letterboxing-width & --letterboxing-height are
   * actually set.
 + * Keep this block first and separate to the rules that do not necessarily
 + * require --letterboxing-width or --letterboxing-height.
   */
  .letterboxing {
 -  --letterboxing-bgcolor: var(--tabpanel-background-color);
 -  --letterboxing-border-radius: 8px;
 -  --letterboxing-border-top-radius: 0;
 +  .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
 +    width: var(--letterboxing-width) !important;
 +    height: var(--letterboxing-height) !important;
 +  }
 +}
++
 +#tabbrowser-tabbox.letterboxing {
 +  --letterboxing-bgcolor: var(--background-color-canvas);
 +  /* Match the border radius used for the sidebar. */
 +  --letterboxing-border-radius: var(--border-radius-medium);
 +  --letterboxing-border-radius-top: 0;
    --letterboxing-vertical-alignment: start;
 -  --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
 -  --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
 -  --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
 -  --letterboxing-border-color: var(--letterboxing-bgcolor);
 -  --letterboxing-decorator-visibility: visible;
+-
 -  /* Re-styling for Tor Browser. */
 -  /* stylelint-disable declaration-block-no-duplicate-custom-properties */
 -  --letterboxing-bgcolor: light-dark(#F0F0F4, #52525E);
 -  --letterboxing-gradient-color1: light-dark(
 -    rgba(0, 219, 222, 0.02),
 -    rgba(0, 219, 222, 0.06)
 -  );
 -  --letterboxing-gradient-color2: light-dark(
 -    rgba(252, 0, 255, 0.02),
 -    rgba(252, 0, 255, 0.06)
 -  );
 -  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
 +  --letterboxing-shadow: none;
 +  --letterboxing-outline-color: var(--border-color);
 +  --letterboxing-outline-width: 1px;
++
 +  @media not ((prefers-contrast) or (forced-colors)) {
 +    /* Match the #sidebar outline width. */
 +    --letterboxing-outline-width: 0.5px;
 +    --letterboxing-shadow-color: rgba(58, 57, 68, 0.20);
 +    --letterboxing-shadow: 0 2px 14px 0 var(--letterboxing-shadow-color);
++
 +    /* Match the effective urlbar background colour. */
 +    --letterboxing-bgcolor: var(--letterboxing-urlbar-background-color);
 +    /* Match the effective colour of the separator between the urlbar container
 +     * and the content. */
 +    --letterboxing-outline-color: var(--letterboxing-content-separator-color);
++
 +    &.letterboxing-urlbar-background-dark {
 +      --letterboxing-shadow-color: #15141a;
 +    }
++
 +    &.letterboxing-low-background-outline-contrast {
 +      /* The default content separator colour has insufficient contrast. */
 +      --letterboxing-outline-color: color-mix(in srgb, var(--letterboxing-content-separator-color) 90%, black);
++
 +      &.letterboxing-urlbar-background-dark {
 +        /* Lighten the colour. */
 +        --letterboxing-outline-color: color-mix(in srgb, var(--letterboxing-content-separator-color) 90%, white);
 +      }
 +    }
 +  }
++
 +  @media (prefers-contrast) and (not (forced-colors)) {
 +    :root[lwtheme] & {
 +      /* User with prefers-contrast coming from the system settings, but also an
 +       * installed theme. */
 +      --letterboxing-bgcolor: var(--letterboxing-urlbar-background-color);
 +      /* Presumably a user with prefers-contrast and a custom theme has chosen
 +       * a theme where the contrast between the urlbar and the text is
 +       * sufficiently high or low. */
 +      --letterboxing-outline-color: var(--letterboxing-urlbar-text-color);
 +    }
 +  }
++
 +  background: var(--letterboxing-bgcolor);
++
 +  &:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline) {
 +    /* Letterboxing outline is visible for the current tab. Replace the usual
 +     * outline to match the Letterboxing outline. For most scenarios, this
 +     * should be mostly the same colour as when Letterboxing is not visible. But
 +     * it may make a difference for some theme combinations. */
 +    outline-color: var(--letterboxing-outline-color);
 +    outline-width: var(--letterboxing-outline-width);
 +  }
++
 +  #tabbrowser-tabpanels {
 +    /* Override the --tabpanel-background-color.
 +     * Also, make sure this remains transparent, otherwise it will overlap the
 +     * parent's corner's border-radius due to it's "position: relative" rule. */
 +    /* TODO: FIX this for newtab pages. tor-browser#44085 */
 +    background: transparent;
 +  }
++
 +  /* stylelint-disable-next-line media-query-no-invalid */
 +  @media -moz-pref("sidebar.revamp") {
 +    :root:not([inDOMFullscreen]) &[sidebar-shown]:not(.letterboxing-nav-toolbox-hidden):is(
 +      /* When the Letterboxing area is aligned to the top, show the rounded
 +       * corner if there is enough vertical space between the sidebar and the
 +       * browser element, which is not rounded at the top. */
 +      :not(.letterboxing-vcenter):has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-sidebar-corner),
 +      /* When the Letterboxing area is aligned to the centre, show the rounded
 +       * corner if the Letterboxing border is shown. */
 +      .letterboxing-vcenter:has(.deck-selected .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing).letterboxing-show-outline)
 +    ) {
 +      /* stylelint-disable-next-line media-query-no-invalid */
 +      @media -moz-pref("sidebar.position_start") {
 +        border-start-start-radius: var(--letterboxing-border-radius);
 +      }
++
 +      /* stylelint-disable-next-line media-query-no-invalid */
 +      @media not -moz-pref("sidebar.position_start") {
 +        border-start-end-radius: var(--letterboxing-border-radius);
 +      }
 +    }
 +  }
    .browserContainer {
      /*
@@ -39,101 +115,71 @@
       * doesn't get notified on horizontal shrinking.
       */
      overflow: hidden;
 -    background: var(--letterboxing-bgcolor);
+   }
 -  .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
 -    box-shadow: 0 4px 8px 0 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);
 -    width: var(--letterboxing-width) !important;
 -    height: var(--letterboxing-height) !important;
 -    background: var(--letterboxing-gradient-color2);
 +  &.letterboxing-vcenter {
 +    --letterboxing-border-radius-top: var(--letterboxing-border-radius);
 +    --letterboxing-vertical-alignment: center;
+   }
+ }
 -:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
 -  > .browserStack:not(.exclude-letterboxing) {
 -  place-content: start center;
 -}
+-
 -.browserDecorator {
 -  display: none;
 -  pointer-events: none;
 -  background: transparent;
 -  position: relative;
 -  z-index: 1;
 -}
 +.browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
 +  :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready & {
 +    place-content: var(--letterboxing-vertical-alignment) center;
 +  }
 -.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
 -  --letterboxing-border-top-radius: var(--letterboxing-border-radius);
 -  --letterboxing-vertical-alignment: center;
 -}
 +  :root:not([inDOMFullscreen]) .letterboxing &.letterboxing-show-outline {
 +    browser {
 +      /* We use clip-path rather than border-radius because border-radius on its
 +       * own leads to rendering artefacts in the corners (tested with GNOME).
 +       * See tor-browser#44214 (comment 3262962). */
 +      /* TODO: Use border-radius once bugzilla bug 1991874 is resolved. */
 +      clip-path: rect(auto auto auto auto round var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius) var(--letterboxing-border-radius));
 +    }
 -.letterboxing.letterboxing-gradient .browserContainer {
 -  background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);
 -}
 +    .browserDecorator {
 +      /* Need a separate browserDecorator element because the clip-path on the
 +       * browser would exclude the outline and box-shadow. */
 +      /* TODO: Move these rules to the browser element once bugzilla bug 1991874
 +       * is resolved, and drop browserDecorator. */
 +      display: block;
 +      border-radius: var(--letterboxing-border-radius-top) var(--letterboxing-border-radius-top) var(--letterboxing-border-radius) var(--letterboxing-border-radius);
 +      /* NOTE: The top outline will not be visible when this is aligned to the
 +       * top. */
 +      outline: var(--letterboxing-outline-width) solid var(--letterboxing-outline-color);
 +      box-shadow: var(--letterboxing-shadow);
 +    }
 -:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
 -  > .browserStack:not(.exclude-letterboxing)
 -  > .browserDecorator {
 -  display: initial;
 -  visibility: var(--letterboxing-decorator-visibility);
 -  border-radius: var(--letterboxing-border-radius);
 -  border-top-left-radius: var(--letterboxing-border-top-radius);
 -  border-top-right-radius: var(--letterboxing-border-top-radius);
 -  box-shadow: var(--letterboxing-border-color) 0 0 .1px inset, var(--letterboxing-border-color) 0 0 .1px;
 -  border: .1px solid var(--letterboxing-border-color);
 -  outline: .1px solid var(--letterboxing-bgcolor);
 -  height: calc(var(--letterboxing-height) + 1px);
 -  top: -1px;
 -}
 +    #statuspanel:not([mirror]) #statuspanel-label {
 +      border-end-start-radius: var(--letterboxing-border-radius);
 +    }
 -.letterboxing-vcenter .browserDecorator {
 -  height: auto !important;
 -  top: 0 !important;
 -}
 +    #statuspanel[mirror] #statuspanel-label {
 +      border-end-end-radius: var(--letterboxing-border-radius);
 +    }
 +  }
 -/*
 -  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;
 -  z-index: 2;
 -  --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;
 -}
 +  #statuspanel {
 +    position: relative;
 +    place-self: end start;
 +    z-index: 2;
 -.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);
 -  margin: 0;
 -  border: 1px solid var(--letterboxing-border-color);
 -  max-width: calc(var(--letterboxing-width) * .5);
 -}
 +    &[mirror] {
 +      justify-self: end;
 +    }
 +  }
 -browser:fullscreen {
 -  --letterboxing-border-top-radius: 0;
 -  --letterboxing-border-radius: 0;
 +  #statuspanel-label {
 +    margin: 0;
 +    outline: var(--letterboxing-outline-width) solid var(--letterboxing-outline-color);
 +    max-width: calc(var(--letterboxing-width) * .5);
 +  }
+ }
 -:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
 -  > .browserStack:not(.exclude-letterboxing) {
 -  place-content: var(--letterboxing-vertical-alignment) center;
 +.browserDecorator {
 +  display: none;
 +  pointer-events: none;
 +  background: transparent;
 +  position: relative;
 +  z-index: 1;
+ }