Tab bar sharing system color in Windows 10 (Firefox CSS)
Hello,
In Windows 10 and 11, Firefox's tab bar and other elements that may be transparent render in Windows 10 using some sort of uDWM method (speculation, I could be wrong?) rather than the traditional win32 window frame as you can see with the title bar toggled on. This leads to elements like the tab bar being black or white, depending on your theme unless you have specified otherwise in your chrome. Highlighted yellow below is my problem area.
In my CSS code, I am trying to extend the system color to be drawn to the tab bar (and in this instance, the address bar as well,) but I can't find any way to be able to do this. I have found forums that say to add -moz:appearance -moz-windows-glass, but this completely removes the window border and leaves the Firefox window unresponsive to controls. The only way to close it is if you close it through the taskbar or task manager.
Note that I am aware of .titlebar-color{color: AccentColorText; background-color: AccentColor}, but that's not what I am going for here. That still draws using Windows 10 modern UI. Windows 7 on ESR 115 or unofficially on 116 still draw with Windows Aero in all parts of this CSS code that are black (highligted yellow below.)
I can attach my CSS code if need be.
Thanks for any help!
All Replies (5)
If I understand the screenshot, you want the main toolbar and/or tab bar to have a transparent background, with the expectation that they will then display with the same appearance as the title bar. Does that sound like what you need?
Yes, in this instance, the main toolbar/address bar/tab bar should all be transparent. Only due to a program being used by Windows 10, but otherwise should the program not be installed, those same aforementioned elements (highlighted yellow in the image) should be drawn in the same manner in which the title bar is if enabled.
I gather you are using a userChrome.css file already. I don't have your setup, but I can suggest something to try:
/*
Make the tabs bar and main toolbar transparent to allow the
background of the #navigator-toolbox to show through
*/
#TabsToolbar, #nav-bar {
background-color: transparent !important;
}
This doesn't work on Windows 10. This effect will work on Windows Vista using extended kernel and Windows 7, but Windows 10 will only render the area black. Version 115 and up.
I know that Windows 10 is capable of drawing the traditional window border, because as you can see it is visible when the title bar is enabled. But there's something different on how Firefox draws the window for Windows 10 compared to Vista/7, which is why the address bar and tab bar display differently and I'm aiming to restoring the behavior of Vista/7.
Opacity does work, but it makes the entire region transparent, rather than drawing the area using the traditional window border.
The attached image shows the desired effect, how it normally displays on Vista/7.
I no longer have access to Windows 7 to compare the old Aero styles, so I don't think I can figure out how its CSS differed from the Windows 8-11 theme.
If you don't get a solution here, the style wizards on the FirefoxCSS subreddit probably can help.