I am very keyboard-driven as a computer user, and 2023 was the year where I properly started using a Tiling Window Manager for my computing. It really fits with the way I like to do things and has made using my machine a lot more pleasurable. This post is about some tweaks to Firefox that I’ve made via extensions and userChrome.css to make it fit better into my workflow.
Most of the software I use on a daily basis integrates beautifully into my workflow and window management: I have various TUI or CLI programs which can all be configured to use the same keybindings, and I can use the window manager to create layouts which allow me to complete work smoothly. My browser, on the other hand, is a bit of an exception to this.
I’ve used Firefox as a browser since around 2006 — excepting a brief flirtation with Chrome during uni between 2011 and 2014 — and while it’s certainly a decent browser; when integrated into my computing workflow it can be very jarring to use.
For me, the main culprit behind this friction is Firefox’s built-in management of tabs and windows. It’s very different from my window manager’s, and doesn’t fit in because it’s sort of doing its own thing. Closing tabs is done via Ctrl+w whereas my i3 keybinding for closing a window is <Super>+Shift+q. Switching between tabs involves the use of the Alt key and numbers. Ctrl+Tab cycles through recently used tabs, but to go left or right I’d need to use Ctrl+PgUp/PgDown. Very different than my window manager’s <Super>+h/j/k/l to navigate windows without needing to leave the home row!
One of the most frustrating things I came up against quite often was trying to split out a tab into a new window so I could look at two things at once. This is a fairly common task I feel, but Firefox’s built-in window/tab management doesn’t seem to support it out of the box; at least going by their list of Windows and Tabs shortcuts. In order to achieve this I needed to: Focus the URL bar and copy the URL, close the tab, open a new window, and paste the address.
This wasn’t too awful but it was quite frustrating especially when some tabs contained active GDocs for a client project and I’d lose my place. Or I’d lose my place on a dense documentation page. Going the other way was also difficult and I’d need to close the window and open up a new tab in my other window; again losing my place and breaking my workflow.
I was briefly tempted by Surf but the lack of ad-blocking was a deal-breaker and getting Surf to build properly on Debian was a bit much. I decided to put a little bit of effort in to make Firefox play nicer with i3. Thankfully, this didn’t take much effort at all, for a drastic improvement in quality of life.
My first port of call was actually to disable Firefox’s native tabs. i3 has built-in tabbed and stacking layouts which would effectively take care of tabbing for me and get me the seamless integration into my window management that I wanted originally. I couldn’t find a way to do this natively in Firefox’s settings/preferences, so I ended up installing the One Tab Per Window extension. This basically just redirects any new tabs into a new window; and if I’ve got Firefox’s i3 container set to “tabbed”, the new window pops up as a new tab and I can use my i3 keybindings to manipulate the window. Bliss!
I honestly could have stopped there as my mission was accomplished in a single swoop. However, now I had some wasted screen space taken up by the now-useless tab bar in Firefox’s UI, and I wanted to reclaim it. This was, again, very straightforward and enabled by the userChrome.css feature. There’s a decent tutorial on HowToGeek about getting started with this if you’re interested; it’s what I used.
I enabled userChrome.css via preferences and then did a quick search on how to hide the tab bar since it was no longer needed. I found it pretty quickly online:
#TabsToolbar, #back-button, #forward-button, #star-button{
display: none;
}
I also took the opportunity to disable a few buttons I didn’t need, since I use keyboard shortcuts to manage going backwards and forwards. Et voilá! A sleek and fairly minimal UI meaning that the web page has a lot of screen space for display, and now I can manipulate the tabs and windows via my Window Manager smoothly.
I’ve had this Firefox setup for around 6 weeks now; so how’s it been? Honestly it’s been pretty great. It’s not totally without some minor quirks but compared to the ball of frustration I was experiencing before this is wonderful.
I can now navigate tabs easily using my i3 keybindings for moving between windows. This sounds superficial but actually I’ve found this much more ergonomic both mentally and physically. There’s no mental context switch where I need to remember different keybindings; i3 just takes care of it. And because my i3 bindings are Vim keys they’re fairly physically ergonomic as well.
It’s also pretty easy now to quickly split a “tab” off into a new window using those same keybindings; I just move it along outside of the bounds of the i3 tabbed container and off to the side and i3 creates a split with the group of Firefox tabs on one side and my new window on the other. Reintegrating is as easy as moving it back into the tabbed container using the same keybindings.
An additional win is that I can now send individual “tabs” to workspaces very quickly. I make heavy use of i3 workspaces, so if I’m doing some work in Firefox and then want to dedicate an entire i3 workspace to a particular task/workflow which requires a new tiling setup I can now do that very quickly and much more efficiently than before. I didn’t even realise that I wanted this, but I’d really struggle to do things differently now.
It’s difficult to overstate just how much nicer browsing the web is via the bonus screen real-estate. If you ever want to experience a moment where you realise how much screen space is wasted by most browsers, just download Surf and use it for a few minutes. There’s likely a pre-compiled binary in your repos which is suitable for a taster. Other browsers just feel… cramped. Eventually I may investigate trying to hide or toggle the Firefox URL/preferences button interface elements to reclaim more space. For now I’m satisfied.
The only noticeable drawback I’ve encountered to my tweaks is that if I’m sharing my screen with a client, I need to share the entire screen now. Previously I could just share a window and then share a pre-curated Firefox window containing all the tabs I need. It hasn’t impacted me much, as I can just do the same with a workspace, but if I need to swap back to the call window to check the chat then I risk an infinity mirror.
So that’s it. I made a few very minor tweaks to Firefox using an extension and userChrome.css and made it integrate into my workflow much better. I also use Tridactyl to add some better Vim-style keyboard controls. Together, these all make for a much nicer experience.