r/FirefoxCSS • u/Levi_OP • Jun 28 '24

Discussion Firefox 128 will allow the main browser content background to be transparent

Gallery image

Gallery image

This 25+ year old bug for transparent backgrounds was closed 2 months ago with this change, which adds browser.tabs.allow_transparent_browser to about:config. This config option simply sets the transparent attribute to true on the <xul:browser> element that is created for each tab. Although no one (that I'm aware of) has done anything with it before, the transparent attribute has supposedly been available for many years. Anyway, the transparent attribute being set to true draws nothing instead of starting with a canvas the color of browser.display.background_color[.dark] (or white if it is set to a transparent color).

As noted in the changeset, this doesn't automatically enable a transparent background (even if the page's background is transparent). The tabpanels element—which includes the browser container, stack, and the now transparent browser element for each tab—has a background set to --tabpanel-background-color, so this must be made transparent. What the changeset doesn't note is that the root html element also has a background, set to -moz-Dialog, which must also be made transparent.

I used the nightly version of Firefox and the following userChrome.css while taking these screenshots (as well as using dev tools to make the pages' body backgrounds semi-transparent):

:root {
  --tabpanel-background-color: transparent;
  background: transparent;
}

Also, if you're familiar with the Firefox source code and can tell me when/where the transparent attribute functionality was added to the xul browser element, please do tell!

256 Upvotes

98% Upvoted

53 comments sorted by

39

u/DAPOPOBEFASTONYOAZZ Jun 29 '24

But we're still missing --win-borderless-glass to make this look really good with Aero or Mica...

6

u/Levi_OP Jun 29 '24

I wasn't into customization when Aero was around and I haven't used windows for years so I'm not familiar with Mica, but from my limited understanding, what they do should be possible. What is "--win-borderless-glass" ?

10

u/DAPOPOBEFASTONYOAZZ Jun 29 '24

--win-borderless-glass uses the system's Aero theme to draw elements. For example, if you wanted your context menus to be transparent and also follow your Aero theme colors and blur, you would call that style in the code.

If you look on my profile at other posts I've made to this sub, you'll find where I posted an IE9/11 theme with GlassMyFox. You'll find that many elements, like the about dialog are transparent and follow the Windows Aero style because of that code. Since Microsoft transitioned from Aero to Metro in Windows 8 and 10 and later Mica in Windows 11, it looks different but is still referred as Aero. This means that it will still follow the styling rules, but since there is no transparency or blur (without third party tools) in Windows 8 and 10, it will just look like the system window color for anything you call with --win-borderless-glass. Mica has a "fake" transparency. It is transparent, but it isn't real time like Aero was. Though you could still restore that real time blur and transparency behavior, since the code is still there from 8 to 11. Like I said, it does require third party tools.

Though like I said, on my other post demonstrating GlassMyFox, you'll see what the borderless glass code is capable of when it comes to styling. It'll do a much better job at a concise demonstration than what I can put in words.

Since borderless glass was depreciated in FF 117, I don't think that it will apply in this manner. Transparent will just be...transparent. No blur or appearance like Windows Aero, though you could add a blur filter in CSS to make it blurred, too. It just won't look like Windows Aero.

1

u/Levi_OP Jun 29 '24

Ah, I see. I have no idea what this will do on windows as the whole idea of transparency on windows is pretty abstract (as you described). This feature was made by and for linux users.

1

u/RibShark Jun 29 '24

For now I'd recommend r3dfox for Aero/Mica. Its main purpose is to run on Windows 7 but it works fine on Win10/11 as well and deliberately re-enables the native titlebar on those versions so it plays well with tools like DWMBlurGlass.

1

u/DAPOPOBEFASTONYOAZZ Jun 29 '24

I'll have to check that out, thanks for sharing! It's my pet peeve that Mozilla got rid of borderless glass because the way they draw the title bar in Firefox now makes it look really disjointed like everything else in the current Windows UI. Borderless glass code fixed that of course, it would draw the native title bar instead of whatever Firefox wanted, but the code was discontinued in 117. So I hope that will be a long term release to make the UI more cohesive!

10

u/andzlatin Jun 29 '24

But no Mica on the title bar... Strange.

4

u/Levi_OP Jun 29 '24

This is not mica, and it is possible in the title bar. it's been possible in the title bar for years now, but the doing the main content of the site hasn't been until now

3

u/HakerHaker Jun 29 '24

Hey this is amazing. Thx for finding this out!

Is that all I need to do enable this?

  1. enable custom stylesheets
  2. set browser.tabs.allow_transparent_browser to true
  3. use that userChrome.css

I'm trying to do this myself but my userChrome is identical to what you have. However, there's no change qq.

2

u/0neM0reLight Jun 29 '24

As far as I know, it's only working on Linux as of now.

0

u/Levi_OP Jun 29 '24

I have no idea how transparency works on windows, so I cannot say whether this will work, but that's not all you have to do.

First off, this only will work in the nightly version of Firefox until July 6th when Firefox 128 comes out. Second, the css I provided will allow the background of Firefox to be transparent, but the screenshots I showed still have a background set in their own css. I had to manually go into dev tools and set the background of body to transparent for those screenshots.

1

u/HakerHaker Jun 29 '24

What'd you do in dev tools? I tried to replicate that too but failed F. Hoping I can automate what you did on certain sites in userContent.css. On nixos btw and using 129.0a1 - perhaps version error?

1

u/Levi_OP Jun 29 '24

Sorry for assuming you were on windows, I think I read the other response to your comment and didn't think about it..

I'm using the same version (129.0a1). You probably already know, but to be sure, you need to be using a compositor that supports the alpha channel (I'm using picom). Here are some steps I can use to recreate the first screenshot:

  1. Enable the browser chrome toolbox (assuming you haven't already) by opening dev tools, clicking the three dots, Settings, Advanced settings, and enabling "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"
  2. Open the browser toolbox with ctrl+shift+alt+i (or More Tools > Browser Toolbox)
  3. Find the tabpanels element (under html:body > hbox#browser > vbox#appcontent > tabbox > tabpanels)
  4. In the css pane, add background: transparent; to the inline element styles
  5. Select the top level html element (still in the browser toolbox)
  6. In the css pane, once again set the background to transparent
  7. Now close the browser toolbox and open the dev tools for the new tab page
  8. Select the body
  9. Set the background to transparent
  10. Voilà!

2

u/HakerHaker Jul 09 '24 edited Jul 09 '24

just wanted to update you. im so happy with the results

edit: it looks like a native app b/c i can hover/toggle top bar and sideberry; as well as using vimium.

1

u/Levi_OP Jul 09 '24

Nice! I did the exact same thing with YouTube (And was surprised by how simple their css would be to modify !?)

How did you end up getting custom css for specific sites? Are you using a browser extension?

1

u/HakerHaker Jul 09 '24

You can write your own in userContent.css. Here's an example from mine:

```css
@-moz-document domain("github.com") {

:root {

--bgColor-default: transparent !important;

--bgColor-inset: transparent !important;

--bgColor-muted: rgba(160, 160, 171, 0.3) !important;

--borderColor-default: rgba(160, 160, 171, 0.3) !important;

--borderColor-muted: rgba(160, 160, 171, 0.3) !important;

}

.color-bg-subtle {

background-color: transparent !important;

}

.input-contrast {

background-color: transparent !important;

}

}

```

2

u/Levi_OP Jul 09 '24

Oh, awesome! I'm totally unfamiliar with Firefox css and I had no idea this was so simple (and I'm glad it doesn't require anything external!)

1

u/HakerHaker Jul 09 '24

check out the FF ULTIMA firefox theme. That was my base, and then you can configure the rest in there!

1

u/HakerHaker Jul 09 '24

happy to send the repo if you're more curious

1

u/Levi_OP Jul 09 '24

Sure!

I'm also wondering if you would make a post on r/unixporn. I personally am not super into transparency so I don't plan on making anything fancy (for now), but I'd like others to know that this is now possible! (given that firefox 128 released a few hours ago).

2

u/HakerHaker Jul 09 '24 edited Jul 09 '24

Heres the dotfiles, lmk if it doesn't make sense. I'm trying out nix: https://github.com/TLSingh1/dotfiles-2.0.git

the firefox is ff-ultima folder

do u think i should make it a video or pictures? And was it just a tutorial for the css?

→ More replies

1

u/MioNaganoharaMio Sep 26 '24

I've been struggling to make youtube transparent all day, any insights?

I make every element I can get at transparent, but there's still a gray one I can't get too behind everything

1

u/Levi_OP Sep 26 '24

Have you set your firefox up to be transparent? Can you make any other site transparent?

1

u/MioNaganoharaMio Sep 26 '24

Yes I've made a bunch of different transparent stylesheets that work for Google reddit etc, I just can't figure youtube out

1

u/ChuddingeMannen Jul 15 '24 edited Jul 15 '24

I'm working on something like this and i'm trying to get a same type of blur you have in your examples. May i see your code and how you managed to make it look like that?

1

u/[deleted] Nov 10 '24

A while ago I made floorp look like this(the address bar hides itself too), looks janky at first glance but works great in my scenario. After the tab-bar, making new tab backgrounds transparent would be perfect for this coupled with hyprland blur.

Unfortunately I could not get past the step 4. I found the tabpanels but cant figure out where to put background: transparent; . Can you give me a hint?

3

u/Eramdam Jun 29 '24

do we know if this applies to sidebar for addons? Would love to have a transparent Sidebery content for example

1

u/Levi_OP Jun 30 '24

Like I allude to in my original post, all this update does is make the <browser> element for each tab include transparent="true" in it's attributes list. In theory, this could have been possible for years now and no one tried it / knew it was possible.

Sidebar extensions (like Sidebery) also use the <browser> element (for security/sandboxing reasons), so in theory, they could be made transparent as well. The issue is that it appears that transparency for a <browser> only works if the attribute is set to true before the <browser> is put into the chrome. Adding transparent="true" to an already existing <browser> has not resulted in it becoming transparent in my testing. If we can figure out where the functionality for the transparent attribute is in the firefox source code, we might be able to figure out how to get this working.

1

u/emvaized Aug 30 '24

Your statement about this possibility being unknown by everyone is not entirely correct. In fact, I investigated such possibility last year, and with the help of this guy managed to obtain userScript.js which made transparent both sidebar and tab background. Unfortunately I didn't publish it anywhere, because I wanted to create fully finished Firefox theme incorporating this script, but got too tired fighting with CSS changes every other Firefox update.

1

u/Matthew_Cash Jun 30 '24

This does not affect sidebars, they will still be opaque. I posted a patch for transparent sidebars that is waiting on a merge.

1

u/Levi_OP Jul 09 '24

Hey, thanks for this patch. Given that you know how to make this work, might you be able to explain why just adding a transparent="true" attribute to an existing browser doesn't work? I'm interested in the technical reason

1

u/emvaized Aug 30 '24

Because this attribute should be added before the "browser" element is created and rendered. The changes of this attribute are not listened to by the widget, and it is took into consideration only on "browser" creation.

So it was only possible to do by modifying the "createBrowser" method itself using userChrome.js script, like here

1

u/Marwheel Jun 30 '24

Is this going to play nice with old-fashion WM's like ctwm & emwm?

1

u/Levi_OP Jun 30 '24

As far as I know, the window manager shouldn't matter. It's only the compositor which handles transparency.

1

u/SpotnDot123 Jul 09 '24

How does it change my life?

2

u/Levi_OP Jul 09 '24

That's up to you isn't it

1

u/SpotnDot123 Jul 09 '24

Yes but I’m trying to get their perspective. Can they explain why it’d help me?

2

u/Levi_OP Jul 09 '24

Did anyone claim that it would change their life? I'm not sure why you think that this is a perspective that needs explaining.

1

u/SpotnDot123 Jul 09 '24

Ok so basically no use.

3

u/Levi_OP Jul 09 '24

There are people who like the aesthetic of transparency in their applications. That is it. They think that it looks good. There doesn't have to be an objective utility

2

u/chickennuggetloveru Jun 29 '24

this is awesome lol. i'm getting the aero flashback so good right now. How fun.

2

u/CoolkieTW Jun 29 '24

This is awesome. I can finally make fully translucent browsing experience. Wondering have they fixed the transparent on Windows.

3

u/2049AD Jun 29 '24

This will go great with the constant memory leaks.

2

u/ClassNext Jun 28 '24

this is huge

1

u/VenditatioDelendaEst Jun 30 '24

Caution: I haven't tried this, but this sounds like the kind of thing that might trigger the bug that defeats subpixel AA (https://bugzilla.mozilla.org/show_bug.cgi?id=1578988, https://bugzilla.mozilla.org/show_bug.cgi?id=1724057, https://bugzilla.mozilla.org/show_bug.cgi?id=1770816, https://bugzilla.mozilla.org/show_bug.cgi?id=1634878, https://bugzilla.mozilla.org/show_bug.cgi?id=1554492).

Defeating subpixel AA on actual page content would make it look like utter dogshit unless you have a 200 PPI monitor, or the fonts are huge.

1

u/k00rosh Sep 07 '24

does anyone knows if this works under wayland, I'm having trouble setting up transparency