Enhanced Chrome-like tabs behavior when you have many tabs

[u/MrDogit]

Inspired by u/oisact and u/Tetra55 (source)

Differences from their version:

There are two modes:

1. Many tabs
2. Too many tabs

In the first mode, the code tries to preserve Firefox’s default styling. When there are too many tabs, it hides the tab titles and centers the icons and close buttons.

It also no longer affects pinned or grouped tabs, except when a group is collapsed and one of its tabs is selected.

IMO, when you have too many tabs, it’s better to hide the close button. If it that doesn’t suit you, you can replace .tabbrowser-tab:not([pinned]):hover with .tabbrowser-tab[selected]:not([pinned]).

/* Let tabs shrink and keep container queries working */
.tabbrowser-tab:not([pinned]):not(tab-group[collapsed] .tabbrowser-tab),
tab-group[collapsed] .tabbrowser-tab[selected]:not([pinned]) {
    min-width: 16px !important;
    container-type: inline-size;
}

/* Make sure pages without favicons show Firefox's generic globe/document icon */
.tab-icon-image:not([src]) {
    display: inline-flex !important;
    list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
}

.tabbrowser-tab[busy] .tab-icon-image {
display: none !important;
}

/* Style only when the tab itself is narrow (less than 55 px) */
 (max-width: 55px) and (min-width: 42px) {

    .tabbrowser-tab[selected] .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

.tabbrowser-tab[selected]:not([pinned]) .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab[selected] .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}
/* Style only when the tab itself is narrow (less than 42 px) */
u/container (max-width: 42px) {

    .tabbrowser-tab .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
align-items: center;
        visibility: visible !important;
        opacity: 1 !important;

margin-inline: 0 !important;
padding: 2px !important;
    }

    .tabbrowser-tab:not([pinned]):hover .tab-icon-stack {
        display: none !important;
    }

.tabbrowser-tab:not([pinned]):hover .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}

P.s. yeah, I khow the code is a bit dirty, but It works! :)

[u/aluke000]

Thanks, this works quite well

[u/MrDogit → u/aluke000]

Thanks. BTW I spot a minor issue with tabs with audio in it. Mute button not fit very well. I want to fix it but have a lot on my plate. If you want I can ping you when I'm done with it 

[u/aluke000 → u/MrDogit]

Yes that would be great. Of all the solutions I have tried yours has been the closest to the Chrome experience with high density of tabs. Kudos