Firefox Vertical Tabs

January 1, 1

Here is a quick guide to setting up vertical tabs and removing the horizontal tab bar in Firefox..

Vertical Tabs

Install Tree Style Tab

Self Explanatory. I also like having a supplementary plugin for indent lines.

Firefox Extension Links

Remove Horizontal Tab Bar

This requires some more work. First, you'll need to add some CSS to your userChrome.css file, and then you'll have to enable stylesheet customization within Firefox.

User Chrome

Go to your profile folder. You can open this by going to about:support and find the path underneath Profile Folder. It should have the form /Users/.../Firefox/Profiles/****.default-release.
Within this folder, find ./chrome/userChrome.css. You may have to create this file and folder if it does not exist.
Add the following line(s) to the file. This will always hide the tab bar.
```
#TabsToolbar { visibility: collapse !important; }
```

Enable Stylesheet Customization

Go to about:config and proceed with caution.
Toggle toolkit.legacyUserProfileCustomizations.stylesheets to True.

[Optional] Add title bar

If you want your traffic lights, you can enable the title bar by right-clicking the toolbar and selecting Customize Toolbar. The option should be at the bottom-right of the screen.

Restart Firefox

Once finished, restart Firefox.

Conclusion

I find that removing the horizontal tab bar significantly improves this experience, as it returns some vertical space and kills my habit of using the horiontal tab bar instead of the vertical tab bar.