Here's a quick post on how I use and configure Firefox on my Macs. The last time I posted about any of this was in 2011, and things have changed a fair bit since then. First, a screenshot (from my new iMac):
Key extensions for this setup:
Vim Vixen : Vim keybindings for Firefox. Not quite as good as Vimperator, but works with modern Firefox, and getting better all the time. The only thing I really miss is macro recording, which I used all the time in Vimperator.
Tree-Style Tabs : Our monitors are widescreen; why would you try to stack tabs at the top of the window, taking up vertical space? Tree-style tabs lets you have a tab-hierarchy in a space-friendly manner.
uBlock Origin : I tried to go without an ad-blocker for a few years, to support independent businesses, but it's just not possible. Loading even relatively trustworthy sites (especially, for some reason, webcomics lately) is just a flood of malvertising now. uBlock Origin is the most popular ad-blocker these days. ¯\_(ツ)_/¯
Multi-Account Containers : This little extension makes it possible for me to have work tabs alongside personal tabs without corrupting all of my history all of the time. In particular, it lets me map sites (at the domain level) to automatically open in one tab container or another. I wish this supported wildcard domains so I could point every work domain at a container, but it's a start
New Container Tab : Adds a keybinding to open a new tab in the same container as the current tab (as opposed to the Firefox default, which opens the "Default", untagged container when you press Cmd-t
Mac OSX Light : This just makes the toolbar/titlebar color match the rest of macOS instead of being slightly off. It only works in "Light Mode".
1Password : Don't leave home without it.
One thing you might've noticed from the screenshot is that I've hidden tabs from the titlebar (since they're in the sidebar), but I don't have a big ugly blank space up there. That trick is actually the driving impetus for this blog post, since every other post on how to do that is broken as of Firefox 64. If you want the exact same appearance I have, just create a chrome/userChrome.css
file inside your Firefox profile directory1 with the following contents:
Note: This was updated on December 1, 2024.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* hide the native tabs */
#TabsToolbar .toolbar-items {
visibility: collapse;
}
/* fix the titlebar color and padding */
.browser-titlebar {
background-color: var(--toolbar-bgcolor) !important;
justify-content: space-between !important;
padding: 8px 0 !important;
--inactive-titlebar-opacity: 1.0;
}
/* hide the sidebar header so Tree-Style Tabs looks native */
#sidebar-header {
visibility: collapse;
}
/* Hide the border under where native tabs would be, to get the "unified toolbar" appearance of modern macOS */
#navigator-toolbox {
--tabs-border-color: transparent !important;
}
/* the coloration of the titlebar to look like a toolbar */
#titlebar {
background: var(--toolbar-bgcolor);
}
/* hide a single stray vertical line that creeps in if you have tabs hidden */
#titlebar .titlebar-spacer[type="pre-tabs"] {
border-inline-end: 0 !important;
}
You'll need to restart firefox for it to take effect.
NOTE: You may need to set the toolkit.legacyUserProfileCustomizations.stylesheets
to true
in about:config
to get Firefox
to load userChrome.css
.
~/Library/Application Support/Firefox/Profiles/*
on macOS; probably somewhere similar on other platforms.
Want to comment on this? How about we talk on Mastodon instead? Share on Mastodon