Custom Firefox UI
I use Firefox as my main web browser. I have been for decades. The only thing I really dislike about it is the total amount of space the UI takes up.
I don't care much for tabs, so I don't need an entire row for them. Usually I have one or two tabs open at a time, up to a maximum of six in rare occasions. Another bit of lost screen real-estate is the enormous URL/search bar. Mozilla even recognizes this and adds empty space next to both sides of the bar by default to not make it as big.
There is also a refresh button I'll never touch (due to F5 existing); a Pocket icon, which I don't use and it also features a hamburger menu I never want to navigate (as I can get to settings by either pressing Alt to bring up the entire menu bar or by pressing Ctrl+Shift+A, and then clicking Firefox Settings at the bottom left).
Using userChrome.css
I like a clean experience, so for years I used a custom userChrome.css file. This file makes it possible to edit, move or remove certain elements of the Firefox UI. For a long while I used a userChrome.css file I made myself, which was an assortment of bits of CSS code I found online, which I edited to suit my needs. This worked fine, but not perfectly, so I went and started to search for a better solution.
My Firefox
After some searching I found LR Tech's OnelineProton, which offers an easy to customize, one-line Firefox useChrome.css file. I copied it and edited it so that it's exactly how I want it. My version can be found in my dotfiles.
Installing
The process of installing a userChrome.css file is quite easy, just follow the steps below (which LR kindly provided) and you'll too have an awesome Firefox experience!
- In the search bar, type about:config. A dialog will be shown to you. Press the I accept the risk button.
- Search for toolkit.legacyUserProfileCustomizations.stylesheets and change it to True.
- Go to your Firefox profile: In the search bar, type about:support and press Enter. Search for Profile Directory and click on Open Directory button.
- Create a folder and name it chrome (all lowercase).
- Paste userChrome.css file into the folder.
- Restart Firefox
- Enjoy your new Firefox!