[FF133] New tab group feature not supported

[jaydenlo08]

Describe the bug
Firefox recently introduced a new tab group feature in Firefox 133 (similar to the tab group feature in Chromium-based browser), although it is not yet enabled by default.
With more users expected to try it out, we should consider making this feature compatible with the GNOME theme.

To Reproduce

1. Enable the tab group feature
   about:config - "browser.tabs.groups.enabled --> true"
2. Add tabs to a group
   Right click on multiple tabs --> "Add tabs to group"
3. Attempt to collapse the group by clicking on the group icon
4. Icon of the tabs within group are still shown

Expected behavior
When the group is collapsed all tabs within it should be fully hidden.

Screenshots
With GNOME theme:

Without any themes:

Setup information

• OS: NixOS 24.11
• Installation method: Nixpkgs
• Firefox version: 133.0.3
• Theme version: v133.1
• Optional features enabled:
  • gnomeTheme.dragWindowHeaderbarButtons = true
  • gnomeTheme.hideWebrtcIndicator = true
  • gnomeTheme.noThemedIcons = true

[elmagio]

Yeah, the feature is still experimental but basic support for it in the theme would be great !

[elmagio]

I don't know if it's something that changed Firefox side or theme side but the feature is even more awkward with the theme now.

With the group expanded, no indicator which tabs are part of it:

With the group hidden, now the grouped tabs are crunched up in a borked manner:

I get that the feature is experimental still so it's fine that it's not supported yet, just giving a "status report".

[Arbee4ever]

Hey, to fix this feature you can modify the files yourself:

1. Go to your profile directory as described in the Manual Installation Section in the README
2. open the tabsbar.css file (is in the <profile-dir>/chrome/firefox-gnome-theme/theme/parts/ folder)
3. add this code to the end of this file

tab-group {
	&[collapsed] > .tabbrowser-tab {
		min-width: 0;
		max-width: 0;
		width: 0;
		margin: 0;
		padding: 0 !important;

		&:not([pinned]) {
			flex: initial !important;
		}
	}
}

4. replace line 124 to line 132 with:

border-color: transparent !important;
			border-style: solid !important;
			color: var(--gnome-window-color) !important;
			position: relative;
			
			:has(> tab-group[collapsed]) {
				border-left-width: 1px !important;
				padding: 0px 2px 6px !important;
				&:not([hidden="true"]):last-of-type {
					padding-right: 3px !important;
				}
			}

5. restart Firefox
6. Enjoy

Do note that this will break again on the next update if this isn't implemented natively

Edit: added &:not([pinned]) block

[elmagio]

@Arbee4ever Thanks for this, it does have a few issues however at least for. One probably easily fixable which is that the color line is slightly misaligned at least for me:

Another maybe more problematic is that said line is absent with TabsAsHeaderbar enabled:

And lastly the group title is not really aligned with the text from the tabs as seen on those screenshots which is not ideal.

But this seems like a good basis for initial support for the feature !

[Arbee4ever]

@Arbee4ever Thanks for this, it does have a few issues however at least for. One probably easily fixable which is that the color line is slightly misaligned at least for me:

Another maybe more problematic is that said line is absent with TabsAsHeaderbar enabled:

And lastly the group title is not really aligned with the text from the tabs as seen on those screenshots which is not ideal.

But this seems like a good basis for initial support for the feature !

Yeah, I know that it isn't perfect, but my only goal was to make it work, so it's in a usable state (and maybe give the dev some pointers on what needs to be done to implement this)