commit 4dab10588d00c2c53d673e6c45e028e4d88fb752
parent 7034e11b2d0e6928f6a0999447f3866b10763fd5
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:18 +0000
Bug 1983833 - Part 10: Migrate BrowserDisplayToolbar and BrowserEditToolbar to use M3 Acorn color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64371-9809&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270642
Diffstat:
2 files changed, 210 insertions(+), 132 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserDisplayToolbar.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserDisplayToolbar.kt
@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@@ -21,6 +23,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
@@ -28,6 +31,8 @@ import androidx.compose.ui.unit.dp
import androidx.window.core.layout.WindowSizeClass
import mozilla.components.compose.base.progressbar.AnimatedProgressBar
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.ActionButtonRes
import mozilla.components.compose.browser.toolbar.concept.Action.SearchSelectorAction
@@ -90,117 +95,104 @@ fun BrowserDisplayToolbar(
windowSizeClass.minWidthDp < WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND
}
- Box(
- modifier = Modifier
- .background(color = AcornTheme.colors.layer1)
- .fillMaxWidth()
- .padding(
- horizontal = when (isSmallWidthScreen) {
- true -> NO_TOOLBAR_PADDING_DP.dp
- else -> LARGE_TOOLBAR_PADDING_DP.dp
- },
- )
- .semantics { testTagsAsResourceId = true },
- ) {
- Row(
- verticalAlignment = Alignment.CenterVertically,
- ) {
- if (browserActionsStart.isNotEmpty()) {
- ActionContainer(
- actions = browserActionsStart,
- onInteraction = onInteraction,
+ Surface {
+ Box(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(
+ horizontal = when (isSmallWidthScreen) {
+ true -> NO_TOOLBAR_PADDING_DP.dp
+ else -> LARGE_TOOLBAR_PADDING_DP.dp
+ },
)
- }
-
+ .semantics { testTagsAsResourceId = true },
+ ) {
Row(
- modifier = Modifier
- .padding(
- start = when (browserActionsStart.isEmpty()) {
- true -> TOOLBAR_PADDING_DP.dp
- false -> NO_TOOLBAR_PADDING_DP.dp
- },
- top = TOOLBAR_PADDING_DP.dp,
- end = when (browserActionsEnd.isEmpty()) {
- true -> TOOLBAR_PADDING_DP.dp
- false -> NO_TOOLBAR_PADDING_DP.dp
- },
- bottom = when (gravity) {
- Top -> TOOLBAR_PADDING_DP
- Bottom -> if (browserActionsEnd.isEmpty()) NO_TOOLBAR_PADDING_DP else TOOLBAR_PADDING_DP
- }.dp,
- )
- .height(48.dp)
- .background(
- color = AcornTheme.colors.layer3,
- shape = RoundedCornerShape(90.dp),
- )
- .padding(
- start = when (pageActionsStart.isEmpty()) {
- true -> TOOLBAR_PADDING_DP.dp
- false -> NO_TOOLBAR_PADDING_DP.dp
- },
- top = NO_TOOLBAR_PADDING_DP.dp,
- end = when (pageActionsEnd.isEmpty()) {
- true -> TOOLBAR_PADDING_DP.dp
- false -> NO_TOOLBAR_PADDING_DP.dp
- },
- bottom = NO_TOOLBAR_PADDING_DP.dp,
- )
- .weight(1f),
verticalAlignment = Alignment.CenterVertically,
) {
- if (pageActionsStart.isNotEmpty()) {
+ if (browserActionsStart.isNotEmpty()) {
ActionContainer(
- actions = pageActionsStart,
+ actions = browserActionsStart,
onInteraction = onInteraction,
)
}
- Origin(
- hint = pageOrigin.hint,
+ Row(
modifier = Modifier
- .height(56.dp)
- .weight(1f)
- .testTag(ADDRESSBAR_URL_BOX),
- url = pageOrigin.url,
- title = pageOrigin.title,
- textGravity = pageOrigin.textGravity,
- contextualMenuOptions = pageOrigin.contextualMenuOptions,
- onClick = pageOrigin.onClick,
- onLongClick = pageOrigin.onLongClick,
- onInteraction = onInteraction,
- )
+ .padding(
+ start = when (browserActionsStart.isEmpty()) {
+ true -> TOOLBAR_PADDING_DP.dp
+ false -> NO_TOOLBAR_PADDING_DP.dp
+ },
+ top = TOOLBAR_PADDING_DP.dp,
+ end = when (browserActionsEnd.isEmpty()) {
+ true -> TOOLBAR_PADDING_DP.dp
+ false -> NO_TOOLBAR_PADDING_DP.dp
+ },
+ bottom = when (gravity) {
+ Top -> TOOLBAR_PADDING_DP
+ Bottom -> if (browserActionsEnd.isEmpty()) NO_TOOLBAR_PADDING_DP else TOOLBAR_PADDING_DP
+ }.dp,
+ )
+ .height(48.dp)
+ .background(
+ color = MaterialTheme.colorScheme.surfaceDim,
+ shape = RoundedCornerShape(90.dp),
+ )
+ .padding(
+ start = when (pageActionsStart.isEmpty()) {
+ true -> TOOLBAR_PADDING_DP.dp
+ false -> NO_TOOLBAR_PADDING_DP.dp
+ },
+ top = NO_TOOLBAR_PADDING_DP.dp,
+ end = when (pageActionsEnd.isEmpty()) {
+ true -> TOOLBAR_PADDING_DP.dp
+ false -> NO_TOOLBAR_PADDING_DP.dp
+ },
+ bottom = NO_TOOLBAR_PADDING_DP.dp,
+ )
+ .weight(1f),
+ verticalAlignment = Alignment.CenterVertically,
+ ) {
+ if (pageActionsStart.isNotEmpty()) {
+ ActionContainer(
+ actions = pageActionsStart,
+ onInteraction = onInteraction,
+ )
+ }
- if (pageActionsEnd.isNotEmpty()) {
- ActionContainer(
- actions = pageActionsEnd,
+ Origin(
+ hint = pageOrigin.hint,
+ modifier = Modifier
+ .height(56.dp)
+ .weight(1f)
+ .testTag(ADDRESSBAR_URL_BOX),
+ url = pageOrigin.url,
+ title = pageOrigin.title,
+ textGravity = pageOrigin.textGravity,
+ contextualMenuOptions = pageOrigin.contextualMenuOptions,
+ onClick = pageOrigin.onClick,
+ onLongClick = pageOrigin.onLongClick,
onInteraction = onInteraction,
)
+
+ if (pageActionsEnd.isNotEmpty()) {
+ ActionContainer(
+ actions = pageActionsEnd,
+ onInteraction = onInteraction,
+ )
+ }
}
- }
- if (browserActionsEnd.isNotEmpty()) {
- ActionContainer(
- actions = browserActionsEnd,
- onInteraction = onInteraction,
- )
+ if (browserActionsEnd.isNotEmpty()) {
+ ActionContainer(
+ actions = browserActionsEnd,
+ onInteraction = onInteraction,
+ )
+ }
}
- }
-
- HorizontalDivider(
- modifier = Modifier.align(
- when (gravity) {
- Top -> Alignment.BottomCenter
- Bottom -> Alignment.TopCenter
- },
- ),
- )
- if (progressBarConfig != null) {
- AnimatedProgressBar(
- progress = progressBarConfig.progress,
- color = progressBarConfig.color,
- trackColor = Color.Transparent,
+ HorizontalDivider(
modifier = Modifier.align(
when (gravity) {
Top -> Alignment.BottomCenter
@@ -208,6 +200,20 @@ fun BrowserDisplayToolbar(
},
),
)
+
+ if (progressBarConfig != null) {
+ AnimatedProgressBar(
+ progress = progressBarConfig.progress,
+ color = progressBarConfig.color,
+ trackColor = Color.Transparent,
+ modifier = Modifier.align(
+ when (gravity) {
+ Top -> Alignment.BottomCenter
+ Bottom -> Alignment.TopCenter
+ },
+ ),
+ )
+ }
}
}
}
@@ -236,6 +242,33 @@ private fun BrowserDisplayToolbarPreview(
}
}
+@Preview
+@Composable
+private fun BrowserDisplayToolbarPrivatePreview(
+ @PreviewParameter(DisplayToolbarDataProvider::class) config: DisplayToolbarPreviewModel,
+) {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ BrowserDisplayToolbar(
+ gravity = config.gravity,
+ progressBarConfig = ProgressBarConfig(progress = 66),
+ browserActionsStart = config.browserStartActions,
+ pageActionsStart = config.pageActionsStart,
+ pageOrigin = PageOrigin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ title = config.title,
+ url = config.url,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ pageActionsEnd = config.pageActionsEnd,
+ browserActionsEnd = config.browserEndActions,
+ onInteraction = {},
+ )
+ }
+}
+
private data class DisplayToolbarPreviewModel(
val browserStartActions: List<Action>,
val pageActionsStart: List<Action>,
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserEditToolbar.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserEditToolbar.kt
@@ -13,6 +13,8 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@@ -20,9 +22,12 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId
+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.ActionButtonRes
import mozilla.components.compose.browser.toolbar.concept.Action.SearchSelectorAction
@@ -73,51 +78,52 @@ fun BrowserEditToolbar(
onUrlCommitted: (String) -> Unit = {},
onInteraction: (BrowserToolbarEvent) -> Unit,
) {
- Box(
- modifier = Modifier
- .background(color = AcornTheme.colors.layer1)
- .fillMaxWidth()
- .semantics { testTagsAsResourceId = true },
- ) {
- Row(
+ Surface {
+ Box(
modifier = Modifier
.fillMaxWidth()
- .padding(all = 8.dp)
- .height(48.dp)
- .clip(shape = ROUNDED_CORNER_SHAPE)
- .background(color = AcornTheme.colors.layer3),
- verticalAlignment = Alignment.CenterVertically,
+ .semantics { testTagsAsResourceId = true },
) {
- ActionContainer(
- actions = editActionsStart,
- onInteraction = onInteraction,
- )
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(all = 8.dp)
+ .height(48.dp)
+ .clip(shape = ROUNDED_CORNER_SHAPE)
+ .background(color = MaterialTheme.colorScheme.surfaceDim),
+ verticalAlignment = Alignment.CenterVertically,
+ ) {
+ ActionContainer(
+ actions = editActionsStart,
+ onInteraction = onInteraction,
+ )
- InlineAutocompleteTextField(
- query = query,
- hint = hint,
- suggestion = suggestion,
- showQueryAsPreselected = isQueryPrefilled,
- usePrivateModeQueries = usePrivateModeQueries,
- modifier = Modifier.weight(1f),
- onUrlEdit = onUrlEdit,
- onUrlCommitted = onUrlCommitted,
- )
+ InlineAutocompleteTextField(
+ query = query,
+ hint = hint,
+ suggestion = suggestion,
+ showQueryAsPreselected = isQueryPrefilled,
+ usePrivateModeQueries = usePrivateModeQueries,
+ modifier = Modifier.weight(1f),
+ onUrlEdit = onUrlEdit,
+ onUrlCommitted = onUrlCommitted,
+ )
- ActionContainer(
- actions = editActionsEnd,
- onInteraction = onInteraction,
+ ActionContainer(
+ actions = editActionsEnd,
+ onInteraction = onInteraction,
+ )
+ }
+
+ HorizontalDivider(
+ modifier = Modifier.align(
+ when (gravity) {
+ Top -> Alignment.BottomCenter
+ Bottom -> Alignment.TopCenter
+ },
+ ),
)
}
-
- HorizontalDivider(
- modifier = Modifier.align(
- when (gravity) {
- Top -> Alignment.BottomCenter
- Bottom -> Alignment.TopCenter
- },
- ),
- )
}
}
@@ -156,3 +162,42 @@ private fun BrowserEditToolbarPreview() {
)
}
}
+
+@Preview
+@Composable
+private fun BrowserEditToolbarPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ BrowserEditToolbar(
+ query = "http://www.mozilla.org",
+ hint = "Search or enter address",
+ gravity = Top,
+ suggestion = null,
+ editActionsStart = listOf(
+ SearchSelectorAction(
+ icon = DrawableIcon(
+ AppCompatResources.getDrawable(LocalContext.current, iconsR.drawable.mozac_ic_search_24)!!,
+ ),
+ contentDescription = StringResContentDescription(android.R.string.untitled),
+ menu = { emptyList() },
+ onClick = null,
+ ),
+ ),
+ editActionsEnd = listOf(
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_microphone_24,
+ contentDescription = android.R.string.untitled,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ ActionButtonRes(
+ drawableResId = iconsR.drawable.mozac_ic_qr_code_24,
+ contentDescription = android.R.string.untitled,
+ onClick = object : BrowserToolbarEvent {},
+ ),
+ ),
+ onInteraction = {},
+ )
+ }
+}
