Vertical tabs for Firefox, inspired by Edge. Works with Light theme, Dark theme, and System theme (auto dark mode). There are some minor glitches with Alpenglow but they should be easy to fix.
It also plays nice with Container Tabs.
Guarateed compatibility with Firefox 107.
There has recently been in change in Firefox that requires the use of
-moz-platform
instead of -moz-os-version
to use OS-specific CSS. This will work
from 99.0b1 upwards but might not on older versions, so be aware of that. If you
run an older version of Firefox and have an issue, change this back.
(Also, since the only OS-specific CSS in the file targets Windows, it should not affect you on Mac or Linux either way.)
It should work on newer versions as well unless there’s any breaking changes in
how userChrome.css
works.
I have only tested this for Linux and macOS. There might be some bugs on Windows because the window decorations look different. I can’t test this because I don’t have a Windows computer, but if you find any bugs and know how to fix it, feel free to submit a PR.
- Go to
about:config
in your URL bar, search fortoolkit.legacyUserProfileCustomizations.stylesheets
and set it totrue
. - Go to
about:profiles
in your URL bar, click “Open Directory” next to your Root Directory under your default profile. - If there is no
chrome
folder, create it. - Create a file called
userChrome.css
inside thechrome
folder. - Copy and paste the contents of
userChrome.css
into your file (or symlink it). - OPTIONAL: Adjust
--delay
setting in theuserChrome.css
file. - Install the Tab Center Reborn extension.
- Make sure to enable “Allow this extension to run in Private windows” so you’re not left stranded while browsing.
- Go to
about:addons
in your URL bar, select Tab Center Reborn, go to Preferences and set:- Animations: on.
- Use current browser theme: on, if you want to use dark mode.
- Compact Mode: either “Dynamic” or “Enabled”. It works with “Disabled” too but looks nicer with only favicons.
- Favicon-only pinned tabs: off.
- Activate Custom Stylesheet and paste the contents of
tabCenterReborn.css
into the text area below, and click “Save CSS” under the text box.
- Restart Firefox.
- If the sidebar does not show up, you can press
Shitft-F1
to show the Tab Center Reborn sidebar directy, orCmd-B
/Ctrl-B
to toggle the sidebar in general. - In Fullscreen mode, the sidebar will collapse to a 1px wide border instead to be as unintrusive as possible. You can expand it by pushing your cursor all the way to the edge of the screen.