[Bug]: tab groups are not hidden on click

[notdodo]

What happened?

With the introduction of the new tag group feature, I noticed that clicking on the tag group, with this theme, does not hide its tabs.

The documentation from Mozilla states:

You can select the group label to collapse the tabs into the tab group, or select it again to expand the group to see the tabs within it.

This issue is not encountered when using vertical tabs.

Steps to reproduce

1. Create a tab group
2. Click on the tab group label
3. nothing happens

Additional info (Optional)

Firefox: 137.0.1 OS: Windows 11

[randomguy-2650]

Try creating a new Firefox profile or disabling the userChrome theme, does it work there? If it does, it’s probably an issue with the theme, otherwise, it may be that the installation is corrupted or is just a bug.

[notdodo]

I confirm that when creating a new profile the click on tab group works as expected.

[randomguy-2650]

Did you update to Firefox 138? That might fix some issues. If it doesn’t, then maybe contact @edelvarden or something as I don’t know why.

[notdodo]

Did you update to Firefox 138?

yes, now on latest

[imanubdesigner]

I can confirm that I’m experiencing the same issue on EndeavourOS (Arch-based). When the Material Fox Updated theme is enabled, the tab grouping feature in Firefox (the new Tab Groups / Organized Tabs) completely breaks — it simply doesn’t function.

If I disable the theme and revert Firefox to the default appearance, tab grouping works perfectly with no issues.

I’ve encountered a similar situation before with a different Firefox theme -Firefox Plus Theme- (which was available only on Windows at the time), and after reporting the issue, the developer was able to fix it.

Thanks for the great work on the theme!

[Shannon-97]

Updated for Firefox 144.0

I cobbled a quick fix together. Not quite like Chrome but close enough. Just add that to your custom.css.

/* hide grouped tabs */
.tabbrowser-tab[aria-hidden="true"] {
    display: none !important;
}

/* smaller group icon */
.tab-group-label {
    min-height: 20px !important;
    line-height: 1.2 !important;
    min-width: 20px !important;
}

/* lighter color and no border on group icon */
tab-group[collapsed] .tab-group-label-container .tab-group-label {
    background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* add border under grouped tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab {
    border-bottom: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    transform: translateY(-1px) !important;
}

/* remove broken hover border */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab:hover .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* add left/right/top border for selected group elements */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-background {
    border: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

/* remove the bottom border for selected tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] {
    border-bottom: none !important;
    transform: none !important;
}

vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}