Customizing Firefox Proton with CSS

Proton is a pretty hot topic. The new UI looks… neat I think. But it is annoying to many because the tabs are now buttons, separated from the - well… tab.

Everything is also BIGGER and takes up more space, not good for your smaller screens (many folks still aren’t even at 1080p).

So I had some time messing with CSS - a lot of theft, some borrowing, and tweaking.

So if you like it tidy, small, cute - and certainly more space efficient than Chrome…


Here alongside standard Proton.

01 Compare Chrome

With new playing notifications it expands slightly - compared here to Chrome.

02 Compare nothing playing - more compact

I tidied up the close tabs - gave them a red colour and made them appear only when you mouse up there (I generally use shortcuts)

So join the fun - rice up the Proton.


Slightly relevant - What is the Application theme? Looks similar to Ayu

I like Gruvbox - so I installed a similar one for GTK - it’s actually called ‘Klaus - Gruvbox theme for GTK’.

I can’t stand the new design and took it as an invitation to look at alternatives.

Having been a fan and user of vertical tabs on and off over the years, I’m rocking Sidebery now. Love it, great extension.

I’m using proton’s “unsupported” compact mode and I think it looks fine.
I hate how every developer these days likes breaking stuff in the name of the ‘greater good’ (5 out of every 100 users will prefer it!)

can you explain that? Because I use the default firefox theme and my tabs are not separated from the tab they belong to? Just tried with a new profile to be sure:

dark default theme does not separate them either:

nor does the no titlebar option

Firefox Proton is the new UI. It’s enabled by default in the Developer and Nightly versions and I think you can use some flags to enable it in Stable.


enabling it on stable does not change the look of the tabs (yet), it only changes the hamburger menu and some other stuff - but downloaded the developer edition and I see it now. I hope that they still modify that before releasing it to stable …

1 Like

I hate it with a passion.

Like the OP said, everything is filled with useless white space because these day’s, that is what people think is “modern”.

I disabled Firefox now from updating. There is a Github repo where someone already has a good CSS that restores the UI to the good proper one, a UI made for a desktop and not fatty fingers touchscreen users.

He did pause development on it until the new UI is on stable so he doesn’t have to constantly tweak stuff.

I myself really don’t get why a new UI was needed and who thought this was good design.

Is “modern” design these day’s really making everything needlessly bigger and boring?

And let’s not forget that they are planning on removing compact mode. It is now a about:config preference but only a matter of time before that will be removed as well.

Mozilla surely is working hard on making users switch to Chrome…

1 Like

I’m thinking of switching to falkon.

Beat the crap out of me - but I think I like the new look … why always stick to old …

I don’t really see what the problem is in general. Maybe I need to see it myself, but those pictures aren’t really good to understand why people think it sucks.


I have the compact mode enabled, look at OP’s pictures without it.

Yeah, but I don’t see what the big deal is. I watched some comparisons and I am just indifferent about it. It’s neither worse nor bad, just a bit different.


I edited the thread title. Can we avoid the term ricing please? It is offensive to some. Thank you for your understanding. :hugs:

1 Like

Can you please explain this to me! I do not understand the connection.

1 Like

“Ricing” comes from using the word “rice” as an adjective to degenerate products that come from Asia. For example, a Rice Rocket is a Japanese racing motorcycle. “Ricing” is used to describe putting worthless accessories on one’s car to make it look “cool”.


Ok, got it. The term rice bowl for Japanese motorcycles spontaneously comes to mind. Is that what is meant?


Maybe this helps a bit:


I dislike the useless white space, I can now see less of a page and gain nothing feature wise on the browser. I also dislike the fact tabs are disconnected now which feels wrong.

The hamburger menu now also looks disconnected and again, wastes space and we see even less features in the new hamburger menu and they also removed icons so visually it’s harder at a glance to find things. Mozilla managed to give us less and still use more vertical spacing.

See here the old vs new:
image image


I’m pretty sure that people will know what the term means; I’ve never heard it deemed offensive in the context customizing. But sure, I’ll try to use “customizing” from now