2059389 - [Nova] Tab Group panels do not match Figma specifications in Dark Theme

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser: Tab Groups, defect, P2)

Description

[Simona Badau, Desktop Test Engineering]

Attachment: Screenshot with the issues

Found in

• Nightly 155.0a1

Affected versions

• Nightly 155.0a1

Tested platforms

• Affected platforms: Windows 11 x64, macOS 26.04, Ubuntu 24.04

Preconditions

• Nova is enabled
• Firefox Dark Theme is enabled

Steps to reproduce

1. Navigate to any website.
2. Right-click on the tab -> Add Tab to group -> New Group
3. Observe the Create Tab Group panel.

Expected result

• The Create Tab Group panel should match the Figma specifications.

Actual result

• The Cancel button has the same background as the panel instead of being Gray.
• The Input field is gray instead of being darker, as per Figma.
• The panel is narrower in Nightly than in the Figma design, making it appear cut, especially in the upper-left area near the Create Tab Group heading.

Regression range

• This is not a regression. The current behavior was introduced with the new Nova styling.

Additional notes

• The same issues can also be observed in the Manage Tab Group panel.

Comment 1

[Stephen Thompson [:sthompson]]

1. The "Create Tab Group" panel state "Cancel" button is type="muted" in the UX spec but type="default" in the codebase
2. The tab group name input is a <moz-text-input> in the UX spec but <input> in the codebase.
3. UX spec uses 16px effective padding around the whole panel but the codebase uses 8px effective padding. The codebase uses a combination of the .panel-no-padding class to set 0 padding on the panel and the --panel-menuitem-margin on each item in the panel to get 8px inline margins. Removing .panel-no-padding introduces 16px padding on the panel itself that combines with the 8px inline margins to produce 24px effective padding, which is too much padding.

I also noticed the following:
4. UX spec specifies large (12px) border radius on the panel, but the default --panel-border-radius we're using in the codebase for the panel now is 24px.

Some of these changes would be simple. Not sure if using <moz-text-input> will be a straight drop-in replacement in practice, but it may be worth trying it. Panel padding is kind of tricky because there are some specific configurations that make things easy, but diverging from those configurations makes things harder. :Itiel is a good resource on panels.

Comment 2

[Michael Hynson]

Attachment: Bug 2059389 - Create/Manage Tab Group panel nova tweaks.

Comment 3

[Michael Hynson]

A few follow ups:

1. After chatting with UX, the spec has been updated from type="muted" to type="default" for Dark Mode to be consistent with Light Mode.
2. For the input, the issue is just a visual change. I've simply updated the background color via design token. It turns out that <moz-input-text> is not a straight drop-in replacement. We'd have to ensure parity for accessibility, string, or style changes.
3. This is addressed in the patch
4. When chatting with UX, they said we can use the standard panel's border radius of 24px.
5. I've also slightly bumped the panel width from 22em to 24em for Nova.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f917bf70fd76
https://hg.mozilla.org/integration/autoland/rev/0df5c611d046
Create/Manage Tab Group panel nova tweaks. r=desktop-theme-reviewers,tabbrowser-reviewers,nsharpley,hjones

Comment 5

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/0df5c611d046

Comment 6

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:mhynson, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox155 to wontfix.

For more information, please visit BugBot documentation.

Comment 7

[Simona Badau, Desktop Test Engineering]

Verified as fixed using the latest Nightly 157.0a1, Firefox 156.0b4 (with Nova ON) on Windows 11, macOS 26 and Ubuntu 24.04 - the Tab Group panel matches the latest updated Figma specifications and follows the characteristics described in Comment 3.