Firefox 157 Nova - Restore look of vertical tabs

README.md

Firefox 157 - Nova UI

Firefox introduced a UI overhaul in 157 and for users of vertical tabs you may agree with me that it's absolutely terrible looking. This gist gives you a simple userChrome.css to restore tabs to the pre-Nova look while still retaining the rest of the Nova UI enhancements. This works to fix both vertical and horizontal tabs.

Steps to fix

In Firefox's about:config, verify the following settings:

browser.nova.enabled = true
sidebar.verticalTabs = true
toolkit.legacyUserProfileCustomizations.stylesheets = true

In Firefox's about:support, find your Profile Folder. Mine was something like /Users/matt/Library/Application Support/Firefox/Profiles/xxxxxxxx.default-release

Then add the userChrome.css below to chrome/userChrome.css in your profile folder. Pay attention to the chrome subfolder as it may not exist and needs created. If you already have a userChrome.css, you may need to modify it so it doesn't conflict with this gist.

Before

After

userChrome.css

/* Nova tabs (horizontal + vertical): no outline, less rounding */
.tabbrowser-tab {
  --tab-selected-outline-color: transparent !important;
  --tab-border-radius: 4px !important;
}
.tab-background,
.tab-background:is([selected], [multiselected]) {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  position: relative !important;
}

/* Container indicator, shared */
.tab-context-line {
  position: absolute !important;
  margin: 0 !important;
  background-color: var(--identity-tab-color) !important;
}

/* Horizontal tabs: flat line across the top of the tab */
#tabbrowser-tabs:not([orient="vertical"]) .tab-context-line {
  inset-block-start: 0 !important;
  inset-block-end: auto !important;
  inset-inline: 0 !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Vertical tabs: bar on the right edge */
#tabbrowser-tabs[orient="vertical"] .tab-context-line {
  inset-block: 4px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 2px !important;
}