My custom Firefox CSS to have clean and compact vertical tabs

Files
README.md

Firefox compact tabs #

userChrome.css that makes Firefox's native vertical tabs (and tab groups) denser, Chrome-style.

Firefox default With this CSS
before after

Features #

  • Compact rows: 26px tabs with 1px spacing, no extra gap between rows.
  • Smaller tab groups: tighter group labels and less space around them.
  • Wider sidebar: fits 6 pinned tabs per row instead of 5 (until you resize it by hand).
  • No close button: close tabs with middle-click or Ctrl+W.
  • Sound icon on the right: the speaker/mute icon sits where the X was, and the title keeps its normal spacing.
  • Container badge: container tabs get their container's icon as a badge on the favicon, instead of Firefox's colored line (which, in compact rows, looks like it belongs to the tab above).
  • Faded tabs: tabs are at 10% opacity, 75% in the current tab's group, and the current tab, its group name and tabs playing sound stay at 100%. Hover the sidebar to bring every tab back to 100%.
  • Faded toolbar buttons: the buttons around the URL bar are at 30% opacity, 100% when you hover the toolbar.
  • No "+ New Tab" button: use Ctrl+T or right-click โ†’ New Tab.

Only applies when vertical tabs are enabled (sidebar.verticalTabs).

Install #

./install.sh --list     # show your profiles
./install.sh            # install into the default profile
./install.sh <profile>  # or a specific one from --list

This symlinks chrome/ into the profile and enables toolkit.legacyUserProfileCustomizations.stylesheets via user.js. Restart Firefox.

Tune sizes with the variables at the top of chrome/userChrome.css. Debug live with the Browser Toolbox (Ctrl+Alt+Shift+I).

Dev #

make screenshots  # regenerate screenshots/*.png when the CSS or fixtures changed
make check        # headless Firefox: CSS parses, every rule matches the UI, sizes applied
make lint         # shellcheck + ruff
make test         # lint + check
make              # all three (V=1 to show devenv logs)