Own your Firefox sidebar width

Does the width of your Firefox sidebar reset on each launch? Is it just a bit too small for Bitwarden and other cool stuff you constantly use? Our good old friend userChrome.css is here to help.

# #whats-a-userchromecss What’s a userChrome.css?

Rather than web content, it lets us style Firefox itself. We’ll need to create it since it doesn’t exist by default. Go to about:support, open your profile folder, then add a chrome folder with an empty userChrome.css.

1cd ~/.mozilla/firefox/myprofile.whatever
2mkdir chrome
3cd chrome
4touch userChrome.css

Next we need to tell Firefox to actually use it, since Firefox 69 made it disabled by default. Go to about:config, tell the warning to kindly fuck off, and set toolkit.legacyUserProfileCustomizations.stylesheets to true.

If you use Firefox Sync like me and want the setting synced, add a boolean services.sync.prefs.sync.toolkit.legacyUserProfileCustomizations.stylesheets set to true.

# #changing-the-sidebar Changing the sidebar

We can now screw up the UI as much as we want! Let’s set a default width:

1#sidebar {
2  width: 350px !important;
3}

Restart Firefox and we’re done!

Let’s add two lines to remove any dumb-ass size restrictions as well:

1#sidebar {
2  max-width: none !important;
3  min-width: 0 !important;
4  width: 350px !important;
5}

# #down-the-rabbit-hole Down the rabbit hole

Pretty much every aspect of the UI can be changed. But how do you know what to change, and how?

Searching the web is one way, but you’d be working blind. Instead inspect the structure and styles on your own and play around with changes on-the-fly.

You’ll need the full “Browser Toolbox” for this. Hit Ctrl-Shift-I for devtools, then F1. Tick “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging.” Open it with Ctrl-Shift-Alt-I. Enjoy!

To also disable hundreds of hours of your life, check out r/FirefoxCSS on Reddit. It’s a treat. My own tweaks are less of a treat, but nonetheless available on GitHub.