Jorisvandijk.com

Future full-stack developer

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.

Previous website

Representation of stock Firefox. Image property of Mozilla

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

Previous website

"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 here.

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!

  1. In the search bar, type about:config. A dialog will be shown to you. Press the I accept the risk button.
  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and change it to True.
  3. 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.
  4. Create a folder and name it chrome (all lowercase).
  5. Paste userChrome.css file into the folder.
  6. Restart Firefox
  7. Enjoy your new Firefox!