53

The recent update (89 I think) causes all tabs to render in the same continuous shading, which makes it somehow more difficult to spot each tab's start and end (regardless of the favicon, I'm sorry, silly old proper borders just were easier on my eyes). How do I get that back? I tried this related answer's browser.proton.enabled=false to no avail, and re-enabling compact mode also did only partially restore the previous look and feel. How can I get good old tab shading and borders back?

8
  • 4
    Oddly enough, that proton toggle did work for me... And yes, FF89. Jun 3, 2021 at 19:49
  • 3
    I also just learned the browser.proton.enabled-fix will likely not work anymore with FF90: bugzilla.mozilla.org/show_bug.cgi?id=1709425#c2 edit make that 91 Jun 3, 2021 at 19:53
  • 2
    I was referring to both the missing separators and the color being so uniform. I flipped that switch in the config, and got back my dark tabs for unselected, and they were separated with a thin line. Jun 4, 2021 at 10:34
  • 10
    I just turned off auto updates and will probably never leave FF89 with browser.proton.enabled=false. Mozilla can no longer be trusted with the future of their own product. Jun 6, 2021 at 3:59
  • 3
    Well dang, FF92 broke the vestigial browser.proton.enabled=false support that at least kept the titlebar tab colors matched to the Windows 10 accent color :(
    – genpfault
    Sep 8, 2021 at 18:58

4 Answers 4

45

In Firefox 91, restore the old tab style as follows:

  1. Open about:config.

  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets.

  3. Double-click the value to set it to true.

  4. Open about:support.

  5. Search for Profile Directory (or Profile Folder).

  6. Click Open Directory (or Open Folder).

  7. Create a directory named chrome.

  8. Navigate into the chrome directory.

  9. Create a new file inside chrome named userChrome.css.

  10. Copy and paste the following code into userChrome.css:

     .tab-background {
       border-radius: 0px 0px !important;
       margin-bottom: 0px !important;
     }
    
     .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
       background-color: color-mix(in srgb, currentColor 5%, transparent);
     }
    
     menupopup>menu,
     menupopup>menuitem {
       padding-block: 2px !important;
     }
    
     :root {
       --arrowpanel-menuitem-padding: 2px !important;
     }
    
  11. Save the file.

  12. Restart Firefox.

The old tab style is restored.

3
  • 2
    Thanks a lot. I changed 5% to 15% for more contrast.
    – FedKad
    Aug 16, 2021 at 16:43
  • 5
    Is this some kind of bad taste joke? The settings page is bloated with useless options no one ever cares or needs but they failed to add a Classic tab style option? Who is running Firefox now, Yahoo? AOL?
    – andreszs
    Sep 15, 2021 at 11:41
  • 3
    Since the disconnected tab is the only thing really bothering me, to me, it suffices to change it just with .tab-background { border-radius: 5px 5px 0 0 !important; margin-bottom: 0 !important; margin-top: 0 !important; }
    – geekley
    Oct 30, 2021 at 5:42
12

Not surprisingly I'm not the only one disliking this, and fortunately there's already a fix called Lepton at https://github.com/black7375/Firefox-UI-Fix#installation-guide. It still doesn't feel 100% proper, but so much better already with simple tab separators.

2

My version of userChrome.css, where I changed only the part that bothers me (detached tabs).

  • Tabs are attached to the toolbar, except when a background tab is multi-selected.
  • The tab has the same color as the toolbar when selected.
.tab-background {
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  padding-bottom: 31px !important;
}
.tabbrowser-tab[multiselected=true]:not([selected=true]) .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
  padding-bottom: 29px !important;
}
.tabbrowser-tab[selected=true] .tab-background ,
.tabbrowser-tab[multiselected=true] .tab-background {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}
1
  • +1 for the use of variables, rather than hard-coded values.
    – HappyDog
    Jun 27 at 12:14
1

Using userChrome.css. you can easily customize many aspects of Firefox. In the example below, inactive tabs are uniformly gray, the active tab is a gradient ascending from red to green, and the tab over which the cursor hovers is a gradient from light to dark gray.

Firefox tab appearance change

  • Open your Firefox profile.

    • In Linux, Home\.mozilla\firefox\xxxxxxxx.default
    • In Windows, C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default
    • Mac OS, Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default.
  • If there is no folder Chrome, create it.

  • If there is no file userChrome.css in that folder, create it as a text document, i.e. with Notepad, Notepad++, or other text editor.

  • Copy and paste text below and save the file. (If you're editing an existing userChrome.css and the @namespace line exists, there's no need to duplicate it.)

  • Close and restart Firefox to see the new tab style.

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    
    /* Tab: selected colors */
    #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { background: linear-gradient(to bottom,#AAFFAA,#FFAAFF) !important; }
    
    /* Tab: hovered colors */
    #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content { background: linear-gradient(to bottom,#808080,#FFFFFF) !important; }
    

Feel free to modify the appearance to your taste. The style sheet code is easy to understand by inspection, and mistakes do no harm - just remove them and restart Firefox. See Mozilla here and here, for example, on tab coloring.

2
  • 1
    Those still look awful
    – Zombo
    Aug 18, 2021 at 4:43
  • 2
    @StevenPenny, Chacun à son goût. However, if you don't like the appearance, read the answer to make them fit your taste. Aug 18, 2021 at 18:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.