How to Restore Old Tabs UI Firefox 89

Firefox 89.0 is the latest stable version of the Firefox web browser. Released on June 1, 2021, it ships with major interface changes, a new custom theme, and more. The focus of the release is the interface redesign that is affecting major interface elements such as the main toolbar, address bar, menus, prompts that the browser displays, and tabs.

Some users maybe hate proton tabs because it’s looking like floating button instead of tabs, but you can revert to old tabs with only change value in about:config

Revert Old Tabs via about:config

Open about:config
Click Accept the Risk and Continue
Search browser.proton.enabled and set value to false

Click to Show Image

Disable Proton Tabs

To make more compact search browser.compactmode.show and set value to true

Click to Show Image

Show Compact Mode

Click on the hamburger menu → More Tools → Customize Toolbar… → Density → Compact (not supported)

Click to Show Image

Enable Compact Mode

Sadly, browser.proton.enabled will be removed in Firefox 90 Stable.

Revert Old Tabs with userChrome.css

Open about:config
Search toolkit.legacyUserProfileCustomizations.stylesheets and set value to true
Open about:support and Click on Open Directory
Create a new folder named chrome
Create a new text file inside the chrome folder named userChrome.css (extensions must be CSS not TXT)
Copy and Paste this CSS code to userChrome.css and Save it

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@media (-moz-proton) {
    .tab-background {
        border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0 0 !important;
        margin-block: 1px 0 !important
    }

    .tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line {
        margin: 0 max(calc(var(--user-tab-rounding) - 3px), 0) | !important
    }
}

@media (-moz-proton) {
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
        border-right: 1px solid rgba(0, 0, 0, .20) | !important;
    }

    [brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
        border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) | !important;
    }

    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
        border-radius: 0 !important;
    }

    .tabbrowser-tab {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.tabbrowser-tab:not([pinned]):not([selected]) .tab-close-button {
    display: none !important
}

.tabbrowser-tab:not([pinned]):not([selected]):hover .tab-close-button {
    display: -moz-box !important
}

.tabbrowser-tab[pending] {
    opacity: .66
}

#nav-bar {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: -1px !important
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
    margin-top: 9px !important;
    margin-bottom: 9px !important
}

Restart Firefox
The UI look like this

Click to Show Image

Firefox userChrome.css

To disable userChrome.css just set value toolkit.legacyUserProfileCustomizations.stylesheets to false