2067220 - [customizable-menu] Add a MenuListItem composable to compose-menu

Status: RESOLVED FIXED

(Firefox for Android :: Menu, task)

Description

[Petru-Mugurel Lingurar [:petru]]

Attachment: image.png

Based on the recent investigation most menu items share a similar structure and UI.
While Fenix has different menu items composables to handle separately every small difference it might be easier to support a generic menu item structure with some elements optional.

The general structure of the MenuListItem: icon? · title + summary · "New" badge · state badge · action button (+ optional divider).
States: Default / Active / Disabled / Warning (for the item as a whole, the state badge and the summary also)
Two tap targets, each its own a11y node; only the container draws shape and background.

Note: This same structure is used by the addons items in the "Extensions" menu also. The only difference is that those items support a spinning action button while an addon is installing. We can support the same by adding another state to the action button: inProgress

Attached is an example design of all the elements this button should support.
IPProtectionMenuItem supports already most of this.

Comment 1

[Petru-Mugurel Lingurar [:petru]]

Attachment: Bug 2067220 - New MenuListItem composable for the compose-menu module r=#android-reviewers

This supports all details that Fenix might want to show in a menu item shown as a row.

Comment 2

[Petru-Mugurel Lingurar [:petru]]

Investigating the colors used by all the menu items in Fenix to find the commonalities I see there is quite a bit of disparity I saw the following configuration for the 4 possible states an item could be in:

Element	DEFAULT	ACTIVE	DISABLED	WARNING
Title	onSurface	tertiary	onSurface @38%	error
Summary	onSurfaceVariant	tertiary	onSurface @38%	error
Icon tint	onSurfaceVariant	tertiary	onSurface @38%	error
Badge container	surfaceContainerHigh	tertiaryContainer	surfaceContainerHigh	surfaceContainerHigh
Badge text	onSurface	tertiary	onSurface @38%	error
"New" indicator container	information	information	information @38%	information
"New" indicator text	onPrimary	onPrimary	onPrimary	onPrimary
Row background	surfaceBright	surfaceBright	surfaceBright	surfaceBright
Divider	outlineVariant	outlineVariant	outlineVariant	outlineVariant

All values are MaterialTheme.colorScheme roles. @38% is .copy(alpha = 0.38f).

Only the badge container varies by state, and only for ACTIVE. Title and summary/icon differ only
in DEFAULT; in every other state they share a colour.

Sources

Row	Fenix source
Title	components/menu/compose/MenuItem.kt:447 (getLabelTextColor)
Summary	components/menu/compose/MenuItem.kt:456 (getDescriptionTextColor)
Icon tint	components/menu/compose/MenuItem.kt:466 (getIconTint), components/menu/compose/MenuNavigation.kt:183
Badge	components/menu/compose/MenuItem.kt:475 (getBadgeColor)
"New" indicator	components/menu/compose/SummarizationMenuItem.kt:55-60
Row background	components/menu/compose/MenuItem.kt:152, LibraryMenuItem.kt:93

---

Element state is independent of item state

Summary, badge and action button each carry their own MenuItemState; they do not inherit the
item's.

• ExtensionsMenuItem.kt:155 greys the summary while the row stays enabled.
• IPProtectionMenuItem.kt:207 gives the badge ACTIVE or WARNING while the row stays
  enabled.

---

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3e222a6a392f
https://hg.mozilla.org/integration/autoland/rev/8bd2fbe43a91
New MenuListItem composable for the compose-menu module r=android-reviewers,android-l10n-reviewers,parker,giorga

Comment 4

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/8bd2fbe43a91