commit 7034e11b2d0e6928f6a0999447f3866b10763fd5
parent 762cfb025da320e607e4f638a9dfa3f366515098
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:18 +0000
Bug 1983833 - Part 9: Migrate Origin and HighlightedDomainUrl to use M3 Acorn color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-4890&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270641
Diffstat:
2 files changed, 108 insertions(+), 83 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/HighlightedDomainUrl.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/HighlightedDomainUrl.kt
@@ -6,12 +6,12 @@ package mozilla.components.compose.browser.toolbar.ui
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import android.content.res.Configuration.UI_MODE_TYPE_NORMAL
-import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@@ -229,15 +229,15 @@ private fun HighlightedDomainUrlPreview(
@PreviewParameter(HighlightedUrlDomainDataProvider::class) config: HighlightedUrlDomainPreviewModel,
) {
AcornTheme {
- Box(Modifier.background(AcornTheme.colors.layer1)) {
+ Surface {
HighlightedDomainUrl(
url = config.url,
registrableDomainIndexRange = config.registrableDomainIndexRange,
fadedTextStyle = LocalTextStyle.current.merge(
- TextStyle(color = AcornTheme.colors.actionWarning),
+ TextStyle(color = MaterialTheme.colorScheme.onSurfaceVariant),
),
boldedTextStyle = LocalTextStyle.current.merge(
- TextStyle(color = AcornTheme.colors.textPrimary),
+ TextStyle(color = MaterialTheme.colorScheme.onSurface),
),
modifier = Modifier.width(200.dp),
)
@@ -251,15 +251,15 @@ private fun RTLHighlightedDomainUrlPreview(
@PreviewParameter(HighlightedUrlDomainDataProvider::class) config: HighlightedUrlDomainPreviewModel,
) {
AcornTheme {
- Box(Modifier.background(AcornTheme.colors.layer1)) {
+ Surface {
HighlightedDomainUrl(
url = config.url,
registrableDomainIndexRange = config.registrableDomainIndexRange,
fadedTextStyle = LocalTextStyle.current.merge(
- TextStyle(color = AcornTheme.colors.actionWarning),
+ TextStyle(color = MaterialTheme.colorScheme.onSurfaceVariant),
),
boldedTextStyle = LocalTextStyle.current.merge(
- TextStyle(color = AcornTheme.colors.textPrimary),
+ TextStyle(color = MaterialTheme.colorScheme.onSurface),
),
modifier = Modifier.width(200.dp),
)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/Origin.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/Origin.kt
@@ -19,6 +19,8 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
@@ -29,6 +31,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.Bottom
import androidx.compose.ui.Alignment.Companion.Start
import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.ContentDrawScope
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.node.DelegatableNode
@@ -148,12 +151,17 @@ internal fun Origin(
),
) { shouldReactToLongClicks },
) {
- Column(
- verticalArrangement = Center,
- ) {
- Title(title, textGravity)
+ Column(verticalArrangement = Center) {
+ val hasTitle = !title.isNullOrBlank()
+ if (hasTitle) {
+ Title(title = title, textGravity = textGravity)
+ }
- Url(urlToShow, urlTextSize)
+ Url(
+ url = urlToShow,
+ fontSize = urlTextSize,
+ color = getUrlColor(showUrlOnly = hasTitle || urlToShow == hint),
+ )
}
LongPressMenu(showMenu, contextualMenuOptions, clipboardHandler, onInteraction) {
@@ -165,27 +173,26 @@ internal fun Origin(
@Composable
private fun Title(
- title: String?,
+ title: String,
textGravity: TextGravity,
) {
- if (title != null && title.isNotBlank()) {
- FadedText(
- text = title,
- modifier = Modifier.testTag(ADDRESSBAR_TITLE),
- style = TextStyle(
- fontSize = URL_TEXT_SIZE_ALONE.sp,
- color = AcornTheme.colors.textSecondary,
- ),
- truncationDirection = textGravity.toTextTruncationDirection(),
- fadeLength = FADE_LENGTH.dp,
- )
- }
+ FadedText(
+ text = title,
+ modifier = Modifier.testTag(ADDRESSBAR_TITLE),
+ style = TextStyle(
+ fontSize = URL_TEXT_SIZE_ALONE.sp,
+ color = MaterialTheme.colorScheme.onSurface,
+ ),
+ truncationDirection = textGravity.toTextTruncationDirection(),
+ fadeLength = FADE_LENGTH.dp,
+ )
}
@Composable
private fun Url(
url: CharSequence,
fontSize: Int,
+ color: Color,
) {
// Ensure compatibility with MaterialTheme attributes. See bug 1936346 for more context.
val materialTextStyle = LocalTextStyle.current
@@ -199,17 +206,26 @@ private fun Url(
registrableDomainIndexRange = registrableDomainIndexRange,
fadedTextStyle = materialTextStyle.merge(
fontSize = fontSize.sp,
- color = AcornTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
),
boldedTextStyle = materialTextStyle.merge(
fontSize = fontSize.sp,
- color = AcornTheme.colors.textPrimary,
+ color = color,
),
modifier = Modifier.testTag(ADDRESSBAR_URL),
)
}
@Composable
+private fun getUrlColor(showUrlOnly: Boolean): Color {
+ return if (showUrlOnly) {
+ MaterialTheme.colorScheme.onSurfaceVariant
+ } else {
+ MaterialTheme.colorScheme.onSurface
+ }
+}
+
+@Composable
private fun LongPressMenu(
isVisible: Boolean,
contextualMenuOptions: List<ContextualMenuOption>,
@@ -260,14 +276,16 @@ private object NoRippleIndication : IndicationNodeFactory {
@Composable
private fun OriginPreviewWithJustTheHint() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- url = null,
- title = null,
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ url = null,
+ title = null,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
@@ -275,15 +293,17 @@ private fun OriginPreviewWithJustTheHint() {
@Composable
private fun OriginPreviewWithTitleAndURL() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- modifier = Modifier.background(AcornTheme.colors.layer1),
- url = "https://mozilla.com",
- title = "Test title",
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ modifier = Modifier.background(MaterialTheme.colorScheme.surface),
+ url = "https://mozilla.com",
+ title = "Test title",
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
@@ -291,14 +311,16 @@ private fun OriginPreviewWithTitleAndURL() {
@Composable
private fun OriginPreviewWithTitleAndURLStart() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- url = "https://mozilla.com/firefox-browser",
- title = "Test title",
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ url = "https://mozilla.com/firefox-browser",
+ title = "Test title",
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
@@ -306,16 +328,17 @@ private fun OriginPreviewWithTitleAndURLStart() {
@Composable
private fun OriginPreviewWithTitleAndURLEnd() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- modifier = Modifier.background(AcornTheme.colors.layer1),
- url = "https://mozilla.com/firefox-browser",
- title = "Test title",
- textGravity = TEXT_GRAVITY_START,
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ url = "https://mozilla.com/firefox-browser",
+ title = "Test title",
+ textGravity = TEXT_GRAVITY_START,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
@@ -323,16 +346,17 @@ private fun OriginPreviewWithTitleAndURLEnd() {
@Composable
private fun OriginPreviewWithJustURLStart() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- modifier = Modifier.background(AcornTheme.colors.layer1),
- url = "https://mozilla.com/firefox-browser",
- title = null,
- textGravity = TEXT_GRAVITY_END,
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ url = "https://mozilla.com/firefox-browser",
+ title = null,
+ textGravity = TEXT_GRAVITY_END,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
@@ -340,15 +364,16 @@ private fun OriginPreviewWithJustURLStart() {
@Composable
private fun OriginPreviewWithJustURLEnd() {
AcornTheme {
- Origin(
- hint = R.string.mozac_browser_toolbar_search_hint,
- modifier = Modifier.background(AcornTheme.colors.layer1),
- url = "https://mozilla.com/firefox-browser",
- title = null,
- textGravity = TEXT_GRAVITY_START,
- onClick = object : BrowserToolbarEvent {},
- onLongClick = null,
- onInteraction = {},
- )
+ Surface {
+ Origin(
+ hint = R.string.mozac_browser_toolbar_search_hint,
+ url = "https://mozilla.com/firefox-browser",
+ title = null,
+ textGravity = TEXT_GRAVITY_START,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
+ }
}
}
