commit 9a1289a9402a2eb2ae8af10915afbb86337ae37a
parent 48c74bd83a3155bbaaa3f5940855ff1b7b456e5c
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:16 +0000
Bug 1983833 - Part 2: Migrate TabCounter to use M3 Acorn color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-4870&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270336
Diffstat:
3 files changed, 62 insertions(+), 25 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/TabCounter.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/TabCounter.kt
@@ -4,24 +4,24 @@
package mozilla.components.compose.browser.toolbar.ui
-import android.content.res.Configuration.UI_MODE_NIGHT_NO
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
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.button.IconButton
import mozilla.components.compose.base.button.LongPressIconButton
import mozilla.components.compose.base.menu.CustomPlacementPopup
import mozilla.components.compose.base.menu.CustomPlacementPopupVerticalContent
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.store.BrowserToolbarInteraction
import mozilla.components.compose.browser.toolbar.store.BrowserToolbarInteraction.BrowserToolbarEvent
import mozilla.components.compose.browser.toolbar.store.BrowserToolbarInteraction.BrowserToolbarMenu
@@ -68,6 +68,7 @@ fun TabCounter(
contentDescription = "", // Set internally by the TabCounter View for every count change.
) {
TabCounter(count, showPrivacyMask)
+
CustomPlacementPopup(
isVisible = showMenu,
onDismissRequest = { showMenu = false },
@@ -94,12 +95,12 @@ fun TabCounter(
}
}
-@Preview(uiMode = UI_MODE_NIGHT_NO)
+@PreviewLightDark
@Composable
private fun TabCounterPreview() {
AcornTheme {
- Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
- Box(modifier = Modifier.background(AcornTheme.colors.layer1)) {
+ Surface {
+ Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
TabCounter(
count = 3,
showPrivacyMask = true,
@@ -107,9 +108,36 @@ private fun TabCounterPreview() {
onLongClick = null,
onInteraction = {},
)
+
+ TabCounter(
+ count = 234,
+ showPrivacyMask = false,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
}
+ }
+ }
+}
+
+@Preview
+@Composable
+private fun TabCounterPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ Surface {
+ Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+ TabCounter(
+ count = 3,
+ showPrivacyMask = true,
+ onClick = object : BrowserToolbarEvent {},
+ onLongClick = null,
+ onInteraction = {},
+ )
- Box(modifier = Modifier.background(AcornTheme.colors.layer1)) {
TabCounter(
count = 234,
showPrivacyMask = false,
diff --git a/mobile/android/android-components/components/ui/tabcounter/src/main/java/mozilla/components/ui/tabcounter/TabCounter.kt b/mobile/android/android-components/components/ui/tabcounter/src/main/java/mozilla/components/ui/tabcounter/TabCounter.kt
@@ -5,11 +5,12 @@
package mozilla.components.ui.tabcounter
import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
@@ -32,6 +33,8 @@ 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.base.utils.toLocaleString
import mozilla.components.ui.tabcounter.TabCounterTestTags.NORMAL_TABS_COUNTER
import mozilla.components.ui.icons.R as iconsR
@@ -47,18 +50,16 @@ private const val TWO_DIGITS_SIZE_RATIO = 0.4f
* This composable uses LocalContentColor, provided by CompositionLocalProvider,
* to set the color of its icons and text.
*
- * @param tabCount the number to be displayed inside the counter.
- * @param showPrivacyBadge if true, show the privacy badge.
- * @param textColor the color of the text inside of tab counter.
- * @param iconColor the border color of the tab counter.
+ * @param tabCount The number to be displayed inside the counter.
+ * @param showPrivacyBadge If true, show the privacy badge.
+ * @param contentColor The content color to be used for the text and border of the tab counter.
*/
@Composable
@Suppress("CognitiveComplexMethod")
fun TabCounter(
tabCount: Int,
showPrivacyBadge: Boolean = false,
- textColor: Color = AcornTheme.colors.textPrimary,
- iconColor: Color = AcornTheme.colors.iconPrimary,
+ contentColor: Color = MaterialTheme.colorScheme.onSurface,
) {
val formattedTabCount = remember(tabCount) { tabCount.toLocaleString() }
val normalTabCountText by remember(tabCount) {
@@ -113,14 +114,14 @@ fun TabCounter(
id = counterBoxBackground,
),
contentDescription = tabsCounterDescription,
- tint = iconColor,
+ tint = contentColor,
)
if (tabCount <= MAX_VISIBLE_TABS) {
Text(
text = normalTabCountText,
modifier = Modifier.clearAndSetSemantics {},
- color = textColor,
+ color = contentColor,
fontSize = with(LocalDensity.current) { counterTabsTextSize.toDp().toSp() },
fontWeight = FontWeight.W700,
textAlign = TextAlign.Center,
@@ -153,9 +154,20 @@ object TabCounterTestTags {
@Composable
private fun TabCounterPreview() {
AcornTheme {
- Box(
- modifier = Modifier.background(color = AcornTheme.colors.layer1),
- ) {
+ Surface {
+ TabCounter(tabCount = 55)
+ }
+ }
+}
+
+@Preview
+@Composable
+private fun TabCounterPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ Surface {
TabCounter(tabCount = 55)
}
}
@@ -166,9 +178,7 @@ private fun TabCounterPreview() {
@Composable
private fun InfiniteTabCounterPreview() {
AcornTheme {
- Box(
- modifier = Modifier.background(color = AcornTheme.colors.layer1),
- ) {
+ Surface {
TabCounter(tabCount = 100)
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt
@@ -305,8 +305,7 @@ private fun TabPageBanner(
) {
TabCounter(
tabCount = counts.normalTabCount,
- textColor = LocalContentColor.current,
- iconColor = LocalContentColor.current,
+ contentColor = LocalContentColor.current,
)
}
