commit 91e0eb0b32eac2c94719fe003aa33bf6fb790b43
parent 416ef997d0d7fff79f39843e2eacfaf262a9ae50
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 23 Oct 2025 21:00:37 +0000
Bug 1993655 - Part 6: Migrate MenuNavigation to use M3 color tokens r=android-reviewers,007
Acorn Navigation Bar Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64178-18160&m=dev
Menu Figma: https://www.figma.com/design/FWc4e0Z7ZZZOQwTxkhWo34/Menu-Handoff---2025?node-id=15693-4882&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268425
Diffstat:
3 files changed, 95 insertions(+), 66 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/CustomTabMenu.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/CustomTabMenu.kt
@@ -98,16 +98,17 @@ internal fun CustomTabMenu(
if (!isBottomToolbar) {
MenuNavigation(
isSiteLoading = isSiteLoading,
- goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
- goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ isExtensionsExpanded = false,
+ isMoreMenuExpanded = false,
onBackButtonClick = onBackButtonClick,
onForwardButtonClick = onForwardButtonClick,
onRefreshButtonClick = onRefreshButtonClick,
onStopButtonClick = onStopButtonClick,
onShareButtonClick = onShareButtonClick,
- isExtensionsExpanded = false,
- isMoreMenuExpanded = false,
+ goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
)
+
if (scrollState.canScrollBackward) {
HorizontalDivider(color = FirefoxTheme.colors.borderPrimary)
}
@@ -118,17 +119,18 @@ internal fun CustomTabMenu(
if (scrollState.canScrollBackward) {
HorizontalDivider(color = FirefoxTheme.colors.borderPrimary)
}
+
MenuNavigation(
isSiteLoading = isSiteLoading,
- goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
- goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ isExtensionsExpanded = false,
+ isMoreMenuExpanded = false,
onBackButtonClick = onBackButtonClick,
onForwardButtonClick = onForwardButtonClick,
onRefreshButtonClick = onRefreshButtonClick,
onStopButtonClick = onStopButtonClick,
onShareButtonClick = onShareButtonClick,
- isExtensionsExpanded = false,
- isMoreMenuExpanded = false,
+ goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
)
}
},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MainMenu.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MainMenu.kt
@@ -209,18 +209,18 @@ fun MainMenu(
header = {
if (accessPoint != MenuAccessPoint.Home && !isBottomToolbar && !isExpandedToolbarEnabled) {
MenuNavigation(
- state = MenuItemState.ENABLED,
- goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
- goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
isSiteLoading = isSiteLoading,
+ isExtensionsExpanded = isExtensionsExpanded,
+ isMoreMenuExpanded = isMoreMenuExpanded,
onBackButtonClick = onBackButtonClick,
onForwardButtonClick = onForwardButtonClick,
onRefreshButtonClick = onRefreshButtonClick,
onStopButtonClick = onStopButtonClick,
onShareButtonClick = onShareButtonClick,
- isExtensionsExpanded = isExtensionsExpanded,
- isMoreMenuExpanded = isMoreMenuExpanded,
+ goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
)
+
if (scrollState.canScrollBackward) {
HorizontalDivider(color = FirefoxTheme.colors.borderPrimary)
}
@@ -231,18 +231,18 @@ fun MainMenu(
if (scrollState.canScrollBackward) {
HorizontalDivider(color = FirefoxTheme.colors.borderPrimary)
}
+
MenuNavigation(
- state = MenuItemState.ENABLED,
- goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
- goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
isSiteLoading = isSiteLoading,
+ isExtensionsExpanded = isExtensionsExpanded,
+ isMoreMenuExpanded = isMoreMenuExpanded,
onBackButtonClick = onBackButtonClick,
onForwardButtonClick = onForwardButtonClick,
onRefreshButtonClick = onRefreshButtonClick,
onStopButtonClick = onStopButtonClick,
onShareButtonClick = onShareButtonClick,
- isExtensionsExpanded = isExtensionsExpanded,
- isMoreMenuExpanded = isMoreMenuExpanded,
+ goBackState = if (canGoBack) MenuItemState.ENABLED else MenuItemState.DISABLED,
+ goForwardState = if (canGoForward) MenuItemState.ENABLED else MenuItemState.DISABLED,
)
}
},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuNavigation.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuNavigation.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -43,17 +44,17 @@ import mozilla.components.ui.icons.R as iconsR
@Suppress("LongParameterList")
@Composable
internal fun MenuNavigation(
- state: MenuItemState = MenuItemState.ENABLED,
isSiteLoading: Boolean,
- goBackState: MenuItemState = MenuItemState.ENABLED,
- goForwardState: MenuItemState = MenuItemState.ENABLED,
+ isExtensionsExpanded: Boolean,
+ isMoreMenuExpanded: Boolean,
onBackButtonClick: (longPress: Boolean) -> Unit,
onForwardButtonClick: (longPress: Boolean) -> Unit,
onRefreshButtonClick: (longPress: Boolean) -> Unit,
onStopButtonClick: () -> Unit,
onShareButtonClick: () -> Unit,
- isExtensionsExpanded: Boolean,
- isMoreMenuExpanded: Boolean,
+ state: MenuItemState = MenuItemState.ENABLED,
+ goBackState: MenuItemState = MenuItemState.ENABLED,
+ goForwardState: MenuItemState = MenuItemState.ENABLED,
) {
val navigationHeaderContentDescription =
stringResource(id = R.string.browser_main_menu_content_description_navigation_header)
@@ -63,9 +64,9 @@ internal fun MenuNavigation(
.fillMaxWidth()
.background(
color = if (isExtensionsExpanded || isMoreMenuExpanded) {
- FirefoxTheme.colors.layerSearch
+ MaterialTheme.colorScheme.surfaceContainerHighest
} else {
- FirefoxTheme.colors.layer1
+ MaterialTheme.colorScheme.surface
},
)
.padding(horizontal = 4.dp, vertical = 12.dp)
@@ -146,7 +147,7 @@ private fun MenuNavItem(
tint = getIconTint(state = state),
)
- Spacer(modifier = Modifier.height(4.dp))
+ Spacer(modifier = Modifier.height(FirefoxTheme.layout.space.static50))
Text(
text = label,
@@ -162,65 +163,91 @@ private fun MenuNavItem(
@Composable
private fun getLabelTextColor(state: MenuItemState): Color {
return when (state) {
- MenuItemState.ACTIVE -> FirefoxTheme.colors.textAccent
- MenuItemState.WARNING -> FirefoxTheme.colors.textCritical
- MenuItemState.DISABLED -> FirefoxTheme.colors.textDisabled
- else -> FirefoxTheme.colors.textPrimary
+ MenuItemState.ACTIVE -> MaterialTheme.colorScheme.tertiary
+ MenuItemState.WARNING -> MaterialTheme.colorScheme.error
+ MenuItemState.DISABLED -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+ else -> MaterialTheme.colorScheme.onSurface
}
}
@Composable
private fun getIconTint(state: MenuItemState): Color {
return when (state) {
- MenuItemState.ACTIVE -> FirefoxTheme.colors.iconAccentViolet
- MenuItemState.WARNING -> FirefoxTheme.colors.iconCritical
- MenuItemState.DISABLED -> FirefoxTheme.colors.iconDisabled
- else -> FirefoxTheme.colors.iconPrimary
+ MenuItemState.ACTIVE -> MaterialTheme.colorScheme.tertiary
+ MenuItemState.WARNING -> MaterialTheme.colorScheme.error
+ MenuItemState.DISABLED -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
+ else -> MaterialTheme.colorScheme.onSurface
}
}
@PreviewLightDark
@Composable
-private fun MenuHeaderPreview() {
+private fun MenuNavigationPreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
- ) {
- MenuNavigation(
- isSiteLoading = false,
- onBackButtonClick = {},
- onForwardButtonClick = {},
- onRefreshButtonClick = {},
- onStopButtonClick = {},
- onShareButtonClick = {},
- isExtensionsExpanded = false,
- isMoreMenuExpanded = false,
- )
- }
+ MenuNavigation(
+ isSiteLoading = false,
+ isExtensionsExpanded = false,
+ isMoreMenuExpanded = false,
+ onBackButtonClick = {},
+ onForwardButtonClick = {},
+ onRefreshButtonClick = {},
+ onStopButtonClick = {},
+ onShareButtonClick = {},
+ )
+ }
+}
+
+@PreviewLightDark
+@Composable
+private fun MenuNavigationExpandedPreview() {
+ FirefoxTheme {
+ MenuNavigation(
+ isSiteLoading = false,
+ isExtensionsExpanded = true,
+ isMoreMenuExpanded = false,
+ onBackButtonClick = {},
+ onForwardButtonClick = {},
+ onRefreshButtonClick = {},
+ onStopButtonClick = {},
+ onShareButtonClick = {},
+ )
}
}
@Preview
@Composable
-private fun MenuHeaderPrivatePreview(
+private fun MenuNavigationPrivatePreview(
@PreviewParameter(SiteLoadingPreviewParameterProvider::class) isSiteLoading: Boolean,
) {
FirefoxTheme(theme = Theme.Private) {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
- ) {
- MenuNavigation(
- isSiteLoading = isSiteLoading,
- onBackButtonClick = {},
- onForwardButtonClick = {},
- onRefreshButtonClick = {},
- onStopButtonClick = {},
- onShareButtonClick = {},
- isExtensionsExpanded = false,
- isMoreMenuExpanded = false,
- )
- }
+ MenuNavigation(
+ isSiteLoading = isSiteLoading,
+ isExtensionsExpanded = false,
+ isMoreMenuExpanded = false,
+ onBackButtonClick = {},
+ onForwardButtonClick = {},
+ onRefreshButtonClick = {},
+ onStopButtonClick = {},
+ onShareButtonClick = {},
+ )
+ }
+}
+
+@Preview
+@Composable
+private fun MenuNavigationExpandedPrivatePreview(
+ @PreviewParameter(SiteLoadingPreviewParameterProvider::class) isSiteLoading: Boolean,
+) {
+ FirefoxTheme(theme = Theme.Private) {
+ MenuNavigation(
+ isSiteLoading = isSiteLoading,
+ isExtensionsExpanded = true,
+ isMoreMenuExpanded = false,
+ onBackButtonClick = {},
+ onForwardButtonClick = {},
+ onRefreshButtonClick = {},
+ onStopButtonClick = {},
+ onShareButtonClick = {},
+ )
}
}
