User.js: Is it possible to change the letterbox background color?

[GIPeon]

I've tried fiddling with browser.display.background_color but without success.
Any suggestion? Thanks!

[Okamoi]

Failing an about:config solution, I would use userChrome.css with, for a black background:

.browserStack {
  background-color: rgb(0, 0, 0);
}

[GIPeon]

Brilliant!
Looking around for docs on userChrome.css I found this (source):

(6) Set Firefox to look for userChrome.css at startup (updated 5/24/2019)

To make startup faster for most users, Firefox 69 will no longer look for this file automatically. You need to tell it to look. Here's how:

• In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
• In the search box above the list, type or paste userprof and pause while the list is filtered. If you do not see anything on the list, please ignore the rest of these instructions. You can close this tab now.
• Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true.

That change should take effect on your next startup.

Are there any RFP side effects using userChrome.css customisations?

[Okamoi]

The chrome is inaccessible to websites, so the only things they should be able to detect are modifications to the size of the viewport, or the viewport/window ratio. But that is covered by privacy.resistFingerprinting in windowed mode, and Letterboxing in maximized and full screen modes.

So I'd say it's safe. userContent.css would be the detectable kind, as it allows to let's say change Github's background color to pink and add blackjack and hookers animated gifs, which Github might notice.

The downside of userChrome.css is that you need to update it yourself when it breaks, which happens every now and then as Firefox updates and the properties targetted by userChrome.css change. Maybe 3 times a year ? Depends on how many rules you have. If you only use this one, you should be fine for quite some time, assuming the graphical appearance of the Letterboxing feature is stable. (Which I'm not sure it is.)

You can ask on Reddit's /r/Firefox or more appropriately /r/FirefoxCSS when it breaks.

[crssi]

@Okamoi

Failing an about:config solution, I would use userChrome.css with, for a black background:

.browserStack {
  background-color: rgb(0, 0, 0);
}

Interestingly the canvas is immediately repainted into white color, when opening a new tab, when a new tab is set to be blank page, even the class is still .browserstack.

[Okamoi]

Yeah it's not surprising that using such a generic rule would have side effects, but I don't know another way to target the "Letterbox area". Anything that uses the CSS class browserStack is going to get a custom coloured background unless or until it specifies its own colour.

@GIPeon To experiment with shit like that it's best to use a separate profile and explore the chrome with developer tools (two checkboxes must be ticked at the bottom of the advanced parameters section of the tools, and then a "special" version must be opened with CTRL+ALT+SHIFT+I). It's possible to edit userChrome.css from the developer tools, see the changes happen live, and then save them to disk. Without dev tools, Firefox has to be restarted to pick up the CSS file again after any change.

[crssi]

is going to get a custom coloured background unless or until it specifies its own colour

True, that is why a flickering happens, where the !important should prevent that. :disappointed:

[GIPeon]

@crssi yes I can confirm the flickering without !important.
Also I wanted to add a border around the browser box and testing with TZP I can see that the border is read by the fingerprint data (2px less in widthxheight).

[WellOrientedLlama]

(I'm locked out of my dummy account Okamoi so I'm ditching it and now I'm a llama.)

@GIPeon That's because the border increases the size of the Letterboxing area and reduces the inner window. If you want a border on the edges of the Firefox window, I guess box-shadow: inset 0px 0px 0px 2px #000066; would do as a dark blue border. It might look funny when the letterboxing area gets smaller than the shadow, as the content area will sit above the shadow.

!important doesn't prevent flickering on about:blank here, it seems that the content area sometimes starts smaller, gets painted (white, in about:blank), and then resized to the whole screen and painted larger.

[GIPeon]

Thank you @WellOrientedLlama @Thorin-Oakenpants , yea I gave up with borders and just changed the BG color.

I use a 1600x900 static inner window size (I use an extension, as this also fixes the inner window sizing issues that have persisted since FF57: the one where toolbar causes height to be out by various degrees of a few pixels depending on platform and theme density, and even installed themes from AMO).

Little OT and I don't know if this is related, I can see on TZP that my viewport is 1383x700 being my window 1400x700, is there anything I should check for the scroll bar "gap"? Is it relevant?

Thank you!

[GIPeon]

I see, all this details when stacked up are truly a behemoth to wrangle with, very interesting thank you! If none want's to add more this issue can be closed!

Fun fact: I wondered if scroll bar width changes between Windows OS versions, apparently not. IE, chrome and FF, it's always 17px wide. But on Win10 Edge browser, the scroll bar is 12px.
Source: https://codepen.io/sambible/post/browser-scrollbar-widths

[claustromaniac]

This is called an Information Paradox

Pretty sure black holes don't have much to do with entropy :trollface:

(just messing around, but do read that if you're into physics)

[LegitLlama]

^This is the better one to use. That's where the actual default white-ish colour is set and it's a CSS ID rather than a class.

#tabbrowser-tabpanels  {
  background-color: unset !important;
}

unset should enforce the theme background color, meaning it will change automatically as you change theme. It worked well for my theme at least, but the default light and dark themes looked surprising on Windows 7 ! I got the OS color and transparency on the whole letterbox area. With the lowest color intensity setting (from customization through a right click on the desktop), it basically let me see my wallpaper.

[crssi]

^^ this maybe works at your config, since you are using dialer and you are messing with it.
But normally it doesn't work.

General solution... you need both:

userChrome.css

#tabbrowser-tabpanels{
  background-color: rgb(46,54,69) !important;
}

userContent.css

@-moz-document url("about:home"),url("about:blank"),url("about:newtab"),url("about:privatebrowsing") {
  body{ background-color: rgb(46,54,69) !important }
}

Cheers