Draft: Bug 32324: center letterboxing w/ shadow

Merge Info

• Related Issues

  • #32324
  • #41585 (closed)
  • #32308 (closed)

• Backport Timeline

  • Immediate - patchsets for critical bug fixes or other major blocker (e.g. fixes for a 0-day exploit) OR patchsets with trivial changes which do not need testing (e.g. fixes for typos or fixes easily verified in a local developer build)
  • Next Minor Stable Release - patchset that needs to be verified in nightly before backport
  • Eventually - patchset that needs to be verified in alpha before backport
  • No Backport - patchset for the next major stable

• Upstream Merging

  • Merge to base-browser - typically for !fixups to patches in the base-browser branch, though sometimes new patches as well
    • NOTE: if your changeset includes patches to both base-browser and tor-browser please please make separate merge requests for each part

• Issue Tracking

  • Link resolved issues with appropriate Release Prep issue for changelog generation

Change Description

/cc @thorin , @donuts per #32324 (comment 2899484)

browser/base/content/browser.css

@@ -142,15 +142,11 @@ body {
 **/
 .letterboxing .browserStack:not(.exclude-letterboxing) > browser {
   /* width & height to be dynamically set by RFPHelper.jsm */
-  outline: 1px solid var(--chrome-content-separator-color);
-}
-
-.exclude-letterboxing > browser {
-  outline: initial;
+  box-shadow: 0 0 2px 2px var(--chrome-content-separator-color);
 }
 
 :root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserStack:not(.exclude-letterboxing) {
-  place-content: start center;
+  place-content: center;
 }
 
 /* extend down the toolbar's colors when letterboxing is enabled */