commit 1c8ca0b04ccab5c79d0bcfaa2f734abba920eff7
parent 77be8fe7b2f260870e3a88f2023bc1fcc5c6e9ed
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:16 +0000
Bug 1983833 - Part 4: Migrate NavigationBar to use M3 Acorn color tokens r=android-reviewers,007,petru
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=65318-23525&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270338
Diffstat:
1 file changed, 76 insertions(+), 27 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/NavigationBar.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/NavigationBar.kt
@@ -4,22 +4,26 @@
package mozilla.components.compose.browser.toolbar
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.theme.AcornTheme
+import mozilla.components.compose.base.theme.acornPrivateColorScheme
+import mozilla.components.compose.base.theme.privateColorPalette
import mozilla.components.compose.browser.toolbar.concept.Action
+import mozilla.components.compose.browser.toolbar.concept.Action.ActionButton
import mozilla.components.compose.browser.toolbar.concept.Action.ActionButtonRes
import mozilla.components.compose.browser.toolbar.concept.Action.TabCounterAction
import mozilla.components.compose.browser.toolbar.store.BrowserToolbarInteraction.BrowserToolbarEvent
@@ -42,34 +46,35 @@ fun NavigationBar(
toolbarGravity: ToolbarGravity = Top,
onInteraction: (BrowserToolbarEvent) -> Unit,
) {
- Box(
- modifier = Modifier
- .height(if (toolbarGravity == Top) 60.dp else 48.dp)
- .background(color = AcornTheme.colors.layer1)
- .pointerInput(Unit) {
- awaitPointerEventScope {
- while (true) {
- awaitPointerEvent() // Consume all events
+ Surface {
+ Box(
+ modifier = Modifier
+ .height(if (toolbarGravity == Top) 60.dp else 48.dp)
+ .pointerInput(Unit) {
+ awaitPointerEventScope {
+ while (true) {
+ awaitPointerEvent() // Consume all events
+ }
}
}
- }
- .semantics(mergeDescendants = true) {}
- .fillMaxWidth(),
- ) {
- ActionContainer(
- actions = actions,
- onInteraction = onInteraction,
- modifier = Modifier
- .padding(horizontal = 12.dp)
- .fillMaxWidth()
- .align(Alignment.Center),
- horizontalArrangement = Arrangement.SpaceBetween,
- )
-
- if (toolbarGravity == Top) {
- HorizontalDivider(
- modifier = Modifier.align(Alignment.TopCenter),
+ .semantics(mergeDescendants = true) {}
+ .fillMaxWidth(),
+ ) {
+ ActionContainer(
+ actions = actions,
+ onInteraction = onInteraction,
+ modifier = Modifier
+ .padding(horizontal = 12.dp)
+ .fillMaxWidth()
+ .align(Alignment.Center),
+ horizontalArrangement = Arrangement.SpaceBetween,
)
+
+ if (toolbarGravity == Top) {
+ HorizontalDivider(
+ modifier = Modifier.align(Alignment.TopCenter),
+ )
+ }
}
}
}
@@ -81,8 +86,52 @@ private fun NavigationBarPreview() {
NavigationBar(
actions = listOf(
ActionButtonRes(
- drawableResId = iconsR.drawable.mozac_ic_bookmark_24,
+ drawableResId = iconsR.drawable.mozac_ic_bookmark_fill_24,
+ contentDescription = android.R.string.untitled,
+ state = ActionButton.State.ACTIVE,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_share_android_24,
+ contentDescription = android.R.string.untitled,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_plus_24,
+ contentDescription = android.R.string.untitled,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ TabCounterAction(
+ count = 99,
+ contentDescription = "",
+ showPrivacyMask = false,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = object : BrowserToolbarEvent {},
+ ),
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_ellipsis_vertical_24,
+ contentDescription = menu2R.string.mozac_browser_menu2_button,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ ),
+ toolbarGravity = Top,
+ ) {}
+ }
+}
+
+@Preview
+@Composable
+private fun NavigationBarPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ NavigationBar(
+ actions = listOf(
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_bookmark_fill_24,
contentDescription = android.R.string.untitled,
+ state = ActionButton.State.ACTIVE,
onClick = object : BrowserToolbarEvent {},
),
ActionButtonRes(
