How to Restore Old Tabs UI Firefox 89

How to Restore Old Tabs UI Firefox 89 Proton UI to Photon UI

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

  1. Open about:config
  2. Click Accept the Risk and Continue
  3. Search browser.proton.enabled and set value to false
Click to Show Image

  1. To make more compact search and set value to true
Click to Show Image

  1. Click on the hamburger menu → More Tools → Customize Toolbar… → Density → Compact (not supported)
Click to Show Image

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

Revert Old Tabs with userChrome.css

  1. Open about:config
  2. Search toolkit.legacyUserProfileCustomizations.stylesheets and set value to true
  3. Open about:support and Click on Open Directory
  4. Create a new folder named chrome
  5. Create a new text file inside the chrome folder named userChrome.css (extensions must be CSS not TXT)
  6. Copy and Paste this CSS code to userChrome.css and Save it
@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::before {
    margin-top: 9px !important;
    margin-bottom: 9px !important
  1. Restart Firefox
  2. The UI look like this
Click to Show Image

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

Bantu bagikan halaman ini ke:
Dibangun dengan Hugo
Tema Stack dirancang oleh Jimmy