VOOZH about

URL: https://phabricator.services.mozilla.com/D295657

⇱ ⚙ D295657 Bug 2024959 - empty state for new tab groups list r=dwalker,jswinarton

Paths

Bug 2024959 - empty state for new tab groups list r=dwalker,jswinarton
ClosedPublic

Authored by sthompson on Apr 21 2026, 8:37 PM.
Referenced Files
Unknown Object (File)
Sun, Jun 14, 6:38 PM
Unknown Object (File)
Sun, Jun 14, 5:18 PM
Unknown Object (File)
Sun, Jun 14, 3:29 PM
Unknown Object (File)
Sun, Jun 14, 3:29 PM
Unknown Object (File)
Sun, Jun 14, 3:29 PM
Unknown Object (File)
Sun, Jun 14, 1:56 PM
Unknown Object (File)
Sun, Jun 14, 1:56 PM
Unknown Object (File)
Sun, Jun 14, 12:43 PM

Details

Summary

If a user doesn't have any open or saved tab groups, the tab groups list (in application menu > Tab Groups or in the non-default customizable UI Tab Groups toolbar panel) will tell the user how to create a tab group and give a button to quickly create one.

The "create a tab group" button is supposed to create a new tab and add that new tab to a new tab group. This patch reuses existing telemetry info; the telemetry will be overhauled in bug 2021191.

This patch includes an illustration originally created in 2025 for the release of tab groups, but it appears that it was never deployed. There is a desire to update the illustration in the future.

Diff Detail

Event Timeline

phab-bot changed the visibility from "Custom Policy" to "Public (No Login Required)".
phab-bot changed the edit policy from "Custom Policy" to "Restricted Project (Project)".
phab-bot removed a project: secure-revision.
Comment Actions

UX specs were created with the Nova component/styles system, but this menu is expected to launch before Nova.

UX specs based on its presentation in the application menu:

UX specs based on its presentation in a toolbar menu:

Screenshot of the application menu with this patch's changes:

browser/themes/shared/tabbrowser/tab-groups-list.css
83

I chose this arbitrarily because the spec didn't have a specific target.

86–88

The chrome doesn't have a set of font size tokens. The spec says the header is medium and the description is small; the root size for me on macOS seems to match the small size. Is there a better way to define the font sizes for this use case?

91

Is this an appropriate token for use in a panel? The spec uses the text/secondary Figma token but I am not sure whether this is appropriate. The closest thing I saw was deactivated panel text, which was too different from the header text.

Comment Actions

Code analysis found 3 defects in diff 1254856:

  • 1 defect found by stylelint (Mozlint)
  • 2 defects found by fluent-lint (Mozlint)
IMPORTANT: Found 3 defects (error level) that must be fixed before landing.

You can run this analysis locally with:

If you see a problem in this automated review, please report it here.

You can view these defects in the Diff Detail section of Phabricator diff 1254856.

browser/themes/shared/tabbrowser/tab-groups-list.css
74–78

I feel like it's better to use these panel properties rather than more fundamental token values. What's recommended here?

Comment Actions

Code analysis found 2 defects in diff 1255102:

  • 2 defects found by stylelint (Mozlint)
IMPORTANT: Found 2 defects (error level) that must be fixed before landing.

You can run this analysis locally with:

If you see a problem in this automated review, please report it here.

You can view these defects in the Diff Detail section of Phabricator diff 1255102.

Comment Actions

Overall this visually looks good, though one thing I noticed is that the padding on the panel seems to be quite thin. I compared it to the padding on the extensions panel (the non-nova version) and it seems to be about twice the size. It's tough to get right since we don't have a actual spec, but I think maybe a bit of additional padding wouldn't make this fit a little bit better for now, and of course we can adjust once we get into Nova-land. I didn't measure it exactly, but the padding seems to total around 18px on the extensions panel.

browser/locales/en-US/browser/tabbrowser.ftl
381

Maybe the a11y team could confirm, but I suspect this probably qualifies as a decorative image and therefore shouldn't have alt text: https://www.w3.org/WAI/tutorials/images/decorative/

Our a11y guidelines also suggest an empty string for decorative images. https://wiki.mozilla.org/Accessibility/Guidelines

dao added inline comments.
browser/themes/shared/tabbrowser/tab-groups-list.css
74–78

is a bit odd because it's so unspecific, this it seems tricky to derive any semantics from it which is what we'd normally try to do in order to use element-specific semantic tokens. What exactly are these elements? Are they menu items?

Comment Actions

Overall this visually looks good, though one thing I noticed is that the padding on the panel seems to be quite thin. I compared it to the padding on the extensions panel (the non-nova version) and it seems to be about twice the size. It's tough to get right since we don't have a actual spec, but I think maybe a bit of additional padding wouldn't make this fit a little bit better for now, and of course we can adjust once we get into Nova-land. I didn't measure it exactly, but the padding seems to total around 18px on the extensions panel.

The UX spec has 16px padding and I've been trying to achieve the same result. It would be easier to just things directly and use a flex gap, but I'm trying to figure out how to get there from the standard panel classes and tokens...

The general idea that I'm picking up is that children of the .panel-subview-body are supposed to have (8px block and inline) and (8px inline only), resulting in 16px inline whitespace against the edges of the panel and 16px block whitespace between different items. It feels awkward because the empty state isn't a simple list of that has all of these things already configured.

I reworked it and got the padding in better shape. Unfortunately, I'm still using panel tokens that use-design-tokens doesn't like, and I'm still not addressing Dao's desire for better semantic rules.

browser/themes/shared/tabbrowser/tab-groups-list.css
74–78

From what I gather, https://searchfox.org/firefox-main/rev/a78cfde410d7bb58c143d46f3dea0af8ec0181f3/browser/themes/shared/customizableui/panelUI-shared.css#1152-1163 are the rules for the items that are supposed to go in a panel subview body. In this case, matches the contents of the empty state div, where I have an odd collection of items (img, p, p, moz-button) where applying the same padding and margin rules achieves the standard panel spacing among these items.

I tried a different approach using h2.subview-subheader for the heading, adding .subviewbutton to the moz-button, etc. to try to better use the existing semantic classes, but these had negative side effects. The extensions panel, for instance, uses more of these semantic classes, but also resorts to using these panel tokens: https://searchfox.org/firefox-main/rev/a78cfde410d7bb58c143d46f3dea0af8ec0181f3/browser/themes/shared/addons/unified-extensions.css#43-44

Comment Actions

Code analysis found 2 defects in diff 1255592:

  • 2 defects found by stylelint (Mozlint)
IMPORTANT: Found 2 defects (error level) that must be fixed before landing.

You can run this analysis locally with:

If you see a problem in this automated review, please report it here.

You can view these defects in the Diff Detail section of Phabricator diff 1255592.

sthompson added inline comments.
browser/locales/en-US/browser/tabbrowser.ftl
381

Thanks. I had read our standard before but I didn't think of it at all.

sthompson marked an inline comment as done.
Comment Actions

Code analysis found 2 defects in diff 1255803:

  • 2 defects found by stylelint (Mozlint)
IMPORTANT: Found 2 defects (error level) that must be fixed before landing.

You can run this analysis locally with:

If you see a problem in this automated review, please report it here.

You can view these defects in the Diff Detail section of Phabricator diff 1255803.

Comment Actions

Just a nit for the .svg, I'll let Dao complete the theme review he's already started here.

browser/themes/shared/illustrations/tab-groups.svg
19

I'm pretty certain this clipPath is a no-op and can be removed.

Comment Actions

Code analysis found 2 defects in diff 1256012:

  • 2 defects found by stylelint (Mozlint)
IMPORTANT: Found 2 defects (error level) that must be fixed before landing.

You can run this analysis locally with:

If you see a problem in this automated review, please report it here.

You can view these defects in the Diff Detail section of Phabricator diff 1256012.

browser/themes/shared/illustrations/tab-groups.svg
19

Hmm, I think you're right. This path is a ~105x~101 box, while the viewbox is 105x102, so I don't think it's going to clip anything. I guess svgo didn't remove it. Thank you!

Comment Actions

Overall looks good. One visual issue, the panel itself is substantially wider than the Figma spec, but this should be a simple fix. Good to go other than this imo.

Comment Actions

Rebased and added only to the toolbar panelview to prevent its long description text from widening the panel. The application menu is already constraining the width of its panelview.

dao added inline comments.
browser/themes/shared/tabbrowser/tab-groups-list.css
74–78

please remove from these selecors

This revision is now accepted and ready to land.May 16 2026, 8:52 AM

Revision Contents

PathSize
browser/
components/
tabbrowser/
content/
38 lines
test/
browser/
tabs/
65 lines
locales/
en-US/
browser/
8 lines
themes/
shared/
customizableui/
4 lines
illustrations/
17 lines
1 line
tabbrowser/
26 lines
CommitTreeParentsAuthorSummaryDate
a50d30aded87d866f26fb0aaStephen Thompson
Bug 2024959 - empty state for new tab groups list r=jswinarton,fluent-reviewers… (Show More…)

Diff 1277214

browser/components/tabbrowser/content/tab-groups-list.mjs

Loading...

browser/components/tabbrowser/test/browser/tabs/browser_tab_groups_list.js

Loading...

browser/locales/en-US/browser/tabbrowser.ftl

Loading...

browser/themes/shared/customizableui/panelUI-shared.css

Loading...

browser/themes/shared/illustrations/tab-groups.svg

Loading...

browser/themes/shared/jar.inc.mn

Loading...

browser/themes/shared/tabbrowser/tab-groups-list.css

Loading...