2067232 - [customizable-menu] Add a ExpandableMenuItem to compose-menu

Status: RESOLVED FIXED

(Firefox for Android :: Menu, task)

Description

[Petru-Mugurel Lingurar [:petru]]

Based on the recent investigation we need special support for two scenarios:

• the "Extensions" menu item and
• the "More" menu item

Basic overview:

• header row plus a body revealed beneath it.
• animatedVisibility with expandVertically(from = Top) + fadeIn / shrinkVertically + fadeOut, matching the current ExpandableMenuItemAnimation from Fenix.
• expanded status and onExpandedChange are hoisted.
• will take in as children a list of MenuItem to display as MenuListItem (see bug 2067220).

Note: We might need to support moving the focus to the first item in the "More" section when this is expanded and is removed from the menu. This is not currently supported in Fenix.

Comment 1

[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 2

[Petru-Mugurel Lingurar [:petru]]

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

When clicked this will show an expanded list of "subMenuItems".
When clicked again this list will be collapsed, all happening with an animation.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/14518ce8c359
https://hg.mozilla.org/integration/autoland/rev/1e9dc5b623a4
New ExpandableHeaderItem composable for the compose-menu module r=android-reviewers,giorga

Comment 4

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/1e9dc5b623a4