Zen Tab Group Fix

README-zen-tab-group-fix.md

Zen Tab Group Fix

This stylesheet fixes tab groups in Zen. There are still some issues with it (see below), but I'll try to polish it further when I find the time.

How to use this

1. Open about:config (skip to step 5 if you have enabled both settings already)
2. Set browser.tabs.groups.enabled to true if it isn't yet, by double-clicking it or tapping its ↹ button
3. Set toolkit.legacyUserProfileCustomizations.stylesheets to true if it isn't yet
4. Restart Zen
5. Open your profile folder (e.g. through about:profiles and clicking "Open directory" next to the "Root directory" of the profile that is missing the "Open in new browser" button)
6. Place userChrome.css from below inside the there (or if that file already exists, just append the contents below into it) - to update the CSS from here, open the file in any text editor to replace the old copy of this CSS with a new copy, in order to prevent different copies of it from clashing.
7. You might need to restart Zen again in order for the changes to apply.

Known issues

^{(If you have a fix or discovered further issues, feel free to comment below!)}

• Tick set means fixed, kept for completeness' sake.
• My repair attempt in userChrome.css uses the !important flag to override Zen styles.
  • [needs upstream fix] The stylesheet for Zen Folders sets e.g. the collapsed group overflow counter to display: none !important, making my use of !important unfortunately necessary.
  • I used a selector that should only unhide it when vanilla Firefox would unhide it.
• The group line is misaligned severely between the three different parts of a group (label, tab, overflow counter)
  • Sadly, my fix has to abuse !important…
• When glance is open and focused inside a collapsed group, the group line does not extend next to the overflow counter
• Tab groups do not animate opening or closing (though they don't do so either in vanilla Firefox)

userChrome.css

@media -moz-pref("browser.tabs.groups.enabled", true) {
    tab-group {

        &[collapsed]:not(:has(tab[selected], tab[visuallyselected]))>vbox.tab-group-label-container,
        &:not([collapsed])>div.tab-group-container {
            margin-block-end: var(--space-small);
        }

        &>vbox.tab-group-label-container::after {
            inset-inline: calc(var(--tab-border-radius) * -1.5 - var(--zen-toolbox-min-width)) auto !important;
        }

        & .tab-group-line,
        &[hasmultipletabs][collapsed]:has(tab[selected], tab[visuallyselected])>vbox.tab-group-overflow-count-container {
            display: flex !important;
            /* TODO: Check if this actually fixes it or only works in my setup! */
            inset-inline: calc(var(--tab-border-radius) * -1 + var(--zen-toolbox-min-width)) auto;
        }

        &>div.tab-group-container>tab {
            /* TODO: Make transitions work! */
            transition: height .3s ease-in-out, opacity .3s ease-in-out;
            opacity: 100%;
        }

        &[hasmultipletabs][collapsed]>div.tab-group-container>tab:not([selected], [visuallyselected]) {
            height: 0px;
            opacity: 0%;
        }
    }
}