2023693 - Nova tab group menu icon visual changes

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser: Tab Groups, task)

Description

[Stephen Thompson [:sthompson]]

UX spec: https://www.figma.com/design/XT0eDYh4RtbMNWaYQi0efM/Chrome-Sidebar-UX-Specifications--Sprint-1-?node-id=9044-96810&t=8JmJB8LIHAYiDTm9-0

• Add two new SVGs for tab groups when used for iconography. The assets are attached; they are described in comment 5 and comment 6. When Nova is disabled, the existing tab-group-chicklet should be displayed. When Nova is enabled, the appropriate new icon should be displayed (tab-group-label or tab-group-label-fill depending on context).
• This tab groups icon shows up in the following locations:
  -- History > Recently closed tabs (both the system menu and application menu). Tab groups appear there after clicking "Delete Group" to delete a whole tab group at once. Despite all of these groups being deleted, they are displayed with a filled-in icon like an open tab group.
  -- tab context menu "Add to/Move to Tab group" submenus. Open groups display with a filled-in icon, while closed groups display with only the outline.
  -- List All Tabs menu. Open tab groups in TabsList.sys.mjs or GroupsList.sys.mjs display with a filled-in icon, while closed groups in GroupsList.sys.mjs display with only the outline.
• Ensure updated tab group colors (--tab-group-${colorCode}) from bug 2023691 are used. NOTE: While the existing tab-group-chicklet used stroke to color the outline and fill to color the inside, the new icons only require setting the fill color. The unfilled scenario is handled with a separate SVG rather than a color change.

Current code lives in tabs.css https://searchfox.org/firefox-main/source/browser/themes/shared/tabbrowser/tabs.css#2943-2976. There was already some work to apply the new tab group colors to tab-group-chicklet, but... Given that there are a number of differences between Proton and Nova, I recommend a complete fork: put Proton-specific icons, colors, and rules in a media query targeting not-Nova, and Nova-specific icons, colors, and rules in a media query targeting Nova.

Comment 1

[Stephen Thompson [:sthompson]]

I requested the replacement icon for the "tab groups chiclet" SVG and it should take 7+ days to get it. Based on the specs, it looks like we need 16px for most menus. The tab groups list UX spec shows a 22px icon... but since that's a nonstandard icon size, I requested a 20px variant instead.

Comment 2

[Stephen Thompson [:sthompson]]

Icon request is at https://mozilla-hub.atlassian.net/browse/FDS-1279

Comment 3

[Stephen Thompson [:sthompson]]

New 16px icon for use in most places: https://github.com/FirefoxUX/acorn-icons/blob/main/icons/desktop/16/tab-group-label-16.svg

Need to add that to the codebase and replace most uses of the tab groups chicklet.

Note: this bug should NOT update the new tab groups list -- that menu will use a 22px icon variant, not the 16px variant. that will be tracked in bug 2048803.

Comment 4

[Stephen Thompson [:sthompson]]

I didn't actually look at https://github.com/FirefoxUX/acorn-icons/blob/main/icons/desktop/16/tab-group-label-16.svg and https://github.com/FirefoxUX/acorn-icons/blob/main/icons/desktop/16/tab-group-label-filled-16.svg until now and they are not suitable at this time :( Those icons can only be used for open tab groups, where the entire icon area is filled with the tab group color. These cannot be used for closed tab groups because they do not allow for a transparent central area. I'll work on a fix.

Comment 5

[Stephen Thompson [:sthompson]]

Attachment: tab-group-label-fill-16.svg

Here is tab-group-label-fill-16.svg from the acorn-icons Github repo at https://github.com/FirefoxUX/acorn-icons/blob/101ea31426c7c14f3db796c39dc7f2a885faa232/icons/desktop/16/tab-group-label-fill-16.svg without modifications. This can be added to the codebase as tab-group-label-fill.svg since the Desktop Theme team prefers not to include the icon size when it has the default 16px size.

Comment 6

[Stephen Thompson [:sthompson]]

Attachment: tab-group-label-16.svg

This is NOT the tab-group-label-16.svg from the acorn-icons repo, but we should add this to the codebase as tab-group-label.svg and use it as the icon to indicate a closed tab group.

I took the tab-group-label-fill-16.svg from the acorn-icons repo and used Claude Code to turn it into a version that draws the 1.5px outline using evenodd. This wasn't just a strict scaling, it also accounted for making sure that the lower-left corner used the right arc radius to preserve the same 1.5px outline. I think this is equivalent to what the icon designers would do, and I'll reach out to them when I return to get the acorn-icons version updated.

Comment 7

[kpatenio]

Attachment: Bug 2023693 — update tab group menu icons for Nova.

Comment 8

[Stephen Thompson [:sthompson]]

Attachment: tab-group-label-with-stroke-and-fill.svg

Based on the discussion in https://phabricator.services.mozilla.com/D310946 to put Nova paths into the existing icon, I processed the icon designers' assets into a format that allows independent stroke and fill colors while maintaining the 1.5 pixel stroke width of the Nova iconography design. Sorry for the churn.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/333c5bab21a1
https://hg.mozilla.org/mozilla-central/rev/c1608fcdd2e7
— update tab group menu icons for Nova. r=desktop-theme-reviewers,tabbrowser-reviewers,dao

Comment 10

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/c1608fcdd2e7