Compact Firefox UI

I’ve been on holiday this week, and prior to that was very hard at work delivering exciting new proof of concepts (that were very well received!). The time off has let me catch up on some much-needed family time, as well as a couple of smaller personal projects. All this has left me without much time for me to write on, though I’ve received some wonderful feedback on my Presentation of Self piece which I intend to address in another post soon. And, of course there’s been a lot of exciting news around ForgeRock and Ping Identity which I’m sure I’ll write about in due course.

For now, I wanted to share one of those personal projects – my Compact Firefox UI, that modifies the look and feel of the Firefox UI through changes to the userChrome.css file.

I’ve found that over the years it’s been a habit of browser UIs to not optimise the amount of space one has to look at the contents of a page. Rather, default configurations space out navigation buttons, tabs, address bars, further buttons to access extensions, yet more buttons to access Lord knows what…

So I made some changes to my favourite browser for the OS that I use day-to-day for most of my browsing, and the result can be seen above. I find it especially useful to have this type of view when using a browser in windowed mode.

Don’t get me started on this idea of trying to squeeze any more things into view via sidebars!

The main elements are:

  • Aligning the address bar, tabs, and min/max/close buttons.
  • Shrinking the min/max/close buttons to make room for more tabs.
  • Shrinking the font-sizes.
  • Removing the back and forward buttons (mice buttons / swiping does that now)
  • Removing various buttons that appear by default, or under various circumstances (downloads, burger menu, extensions, bookmarks)

I’ve often thought of also removing the reload button as I don’t really ever press it. Perhaps I’ll do that shortly.

It only takes a few small lines of CSS to keep the code up to date with whatever modifications the Firefox team make, and I’ve used a layout similar to this for the best part of the last decade. Hats off to the team for making it so easy to discover and modify elements via the userChrome.css and the Browser Toolbox.

You can see all of the code over in the repo – it’s not much, but it’s been nice to find a few hours this week to work on some chill projects after the non-stop busyness of the past month.