commit 256e8bad1a52af07e29574baf4aaf02f05b39d93 parent 4bb0da661fc2eae340c5a7954676d168fc117c9e Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Tue, 2 Dec 2025 07:24:57 +0000 Bug 1993368 - Part 33: Migrate old tabs tray to use M3 color tokens r=android-reviewers,007 - This focused on migrating layer1, textPrimary, textSecondary, borderPrimary, and iconPrimary to the equivalent M3 color tokens. Differential Revision: https://phabricator.services.mozilla.com/D274536 Diffstat:
9 files changed, 47 insertions(+), 55 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/tabstray/TabListItem.kt @@ -25,6 +25,7 @@ import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.ripple import androidx.compose.runtime.Composable @@ -148,7 +149,7 @@ private fun TabContent( val contentBackgroundColor = if (isSelected) { FirefoxTheme.colors.layerAccentNonOpaque } else { - FirefoxTheme.colors.layer1 + MaterialTheme.colorScheme.surface } // Used to propagate the ripple effect to the whole tab @@ -178,7 +179,6 @@ private fun TabContent( Row( modifier = Modifier .fillMaxWidth() - .background(FirefoxTheme.colors.layer3) .background(contentBackgroundColor) .then(clickableModifier) .padding(start = 16.dp, top = 8.dp, bottom = 8.dp) @@ -204,7 +204,7 @@ private fun TabContent( ) { Text( text = tab.toDisplayTitle().take(MAX_URI_LENGTH), - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, style = FirefoxTheme.typography.body1, overflow = TextOverflow.Ellipsis, maxLines = 2, @@ -212,7 +212,7 @@ private fun TabContent( Text( text = tab.content.url.toShortUrl(), - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, style = FirefoxTheme.typography.body2, overflow = TextOverflow.Ellipsis, maxLines = 1, @@ -232,7 +232,7 @@ private fun TabContent( id = R.string.close_tab_title, tab.toDisplayTitle(), ), - tint = FirefoxTheme.colors.iconPrimary, + tint = MaterialTheme.colorScheme.onSurface, ) } } else { diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/pbmlock/UnlockPrivateTabsTrayScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/pbmlock/UnlockPrivateTabsTrayScreen.kt @@ -70,7 +70,6 @@ internal fun UnlockPrivateTabsTrayScreen( Text( text = stringResource(id = R.string.pbm_authentication_unlock_private_tabs), modifier = Modifier.align(Alignment.Center), - color = FirefoxTheme.colors.textPrimary, style = FirefoxTheme.typography.headline6, ) } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTray.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTray.kt @@ -12,6 +12,7 @@ import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.derivedStateOf @@ -171,7 +172,7 @@ fun TabsTray( modifier = Modifier .fillMaxSize() .then(shapeModifier) - .background(FirefoxTheme.colors.layer1) + .background(MaterialTheme.colorScheme.surface) .testTag(TabsTrayTestTag.TABS_TRAY), ) { Box(modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())) { 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 @@ -18,6 +18,7 @@ import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Tab import androidx.compose.material3.TabRow import androidx.compose.material3.Text @@ -267,7 +268,7 @@ private fun TabPageBanner( val inactiveColor = FirefoxTheme.colors.iconPrimaryInactive var showMenu by remember { mutableStateOf(false) } - Column(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) { + Column(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) { Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.bottom_sheet_handle_top_margin))) BottomSheetHandle( @@ -370,7 +371,7 @@ private fun TabPageBanner( Icon( painter = painterResource(R.drawable.ic_menu), contentDescription = stringResource(id = R.string.open_tabs_menu), - tint = FirefoxTheme.colors.iconPrimary, + tint = MaterialTheme.colorScheme.onSurface, ) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayTabLayouts.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayTabLayouts.kt @@ -6,8 +6,6 @@ package org.mozilla.fenix.tabstray import androidx.compose.animation.core.DecayAnimationSpec import androidx.compose.animation.rememberSplineBasedDecay -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height @@ -19,6 +17,7 @@ import androidx.compose.foundation.lazy.grid.itemsIndexed import androidx.compose.foundation.lazy.grid.rememberLazyGridState import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -342,11 +341,7 @@ private fun TabListPreview() { val tabs = remember { generateFakeTabsList().toMutableStateList() } FirefoxTheme { - Box( - modifier = Modifier - .fillMaxSize() - .background(FirefoxTheme.colors.layer1), - ) { + Surface { TabLayout( tabs = tabs, selectedTabId = tabs[1].id, @@ -369,11 +364,7 @@ private fun TabGridPreview() { val tabs = remember { generateFakeTabsList().toMutableStateList() } FirefoxTheme { - Box( - modifier = Modifier - .fillMaxSize() - .background(FirefoxTheme.colors.layer1), - ) { + Surface { TabLayout( tabs = tabs, selectedTabId = tabs[0].id, @@ -390,7 +381,6 @@ private fun TabGridPreview() { } } -@Suppress("MagicNumber") @PreviewLightDark @Composable private fun TabGridMultiSelectPreview() { @@ -398,11 +388,7 @@ private fun TabGridMultiSelectPreview() { val selectedTabs = remember { tabs.take(4).toMutableStateList() } FirefoxTheme { - Box( - modifier = Modifier - .fillMaxSize() - .background(FirefoxTheme.colors.layer1), - ) { + Surface { TabLayout( tabs = tabs, selectedTabId = tabs[0].id, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/inactivetabs/InactiveTabs.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/inactivetabs/InactiveTabs.kt @@ -8,9 +8,7 @@ package org.mozilla.fenix.tabstray.inactivetabs import androidx.compose.animation.animateContentSize import androidx.compose.foundation.BorderStroke -import androidx.compose.foundation.background import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -23,6 +21,8 @@ import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +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 @@ -96,7 +96,7 @@ fun InactiveTabsList( shape = ROUNDED_CORNER_SHAPE, border = BorderStroke( width = 1.dp, - color = FirefoxTheme.colors.borderPrimary, + color = MaterialTheme.colorScheme.outlineVariant, ), ) { Column( @@ -221,9 +221,9 @@ private fun InactiveTabsHeader( modifier = Modifier.padding(horizontal = 4.dp), ) { Icon( - painter = painterResource(R.drawable.ic_delete), + painter = painterResource(iconsR.drawable.mozac_ic_delete_24), contentDescription = stringResource(R.string.inactive_tabs_delete_all), - tint = FirefoxTheme.colors.iconPrimary, + tint = MaterialTheme.colorScheme.onSurface, ) } } @@ -247,7 +247,7 @@ private fun InactiveTabsAutoClosePrompt( colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer2), border = BorderStroke( width = 1.dp, - color = FirefoxTheme.colors.borderPrimary, + color = MaterialTheme.colorScheme.outlineVariant, ), ) { Column( @@ -261,7 +261,7 @@ private fun InactiveTabsAutoClosePrompt( ) { Text( text = stringResource(R.string.tab_tray_inactive_auto_close_title), - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, modifier = Modifier.weight(1f), style = FirefoxTheme.typography.headline8, ) @@ -274,7 +274,7 @@ private fun InactiveTabsAutoClosePrompt( painter = painterResource(iconsR.drawable.mozac_ic_cross_20), contentDescription = stringResource(R.string.tab_tray_inactive_auto_close_button_content_description), - tint = FirefoxTheme.colors.iconPrimary, + tint = MaterialTheme.colorScheme.onSurface, ) } } @@ -284,7 +284,7 @@ private fun InactiveTabsAutoClosePrompt( R.string.tab_tray_inactive_auto_close_body_2, stringResource(R.string.app_name), ), - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier.fillMaxWidth(), fontSize = 14.sp, ) @@ -301,7 +301,7 @@ private fun InactiveTabsAutoClosePrompt( @PreviewLightDark private fun InactiveTabsAutoClosePromptPreview() { FirefoxTheme { - Box(Modifier.background(FirefoxTheme.colors.layer1)) { + Surface { InactiveTabsAutoClosePrompt( onDismissClick = {}, onEnableAutoCloseClick = {}, @@ -317,7 +317,7 @@ private fun InactiveTabsListPreview() { var showAutoClosePrompt by remember { mutableStateOf(true) } FirefoxTheme { - Box(Modifier.background(FirefoxTheme.colors.layer1)) { + Surface { InactiveTabsList( inactiveTabs = generateFakeInactiveTabsList(), expanded = expanded, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabsList.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabsList.kt @@ -21,6 +21,8 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember @@ -42,6 +44,7 @@ import org.mozilla.fenix.compose.list.FaviconListItem import org.mozilla.fenix.tabstray.TabsTrayTestTag import org.mozilla.fenix.theme.FirefoxTheme import mozilla.components.browser.storage.sync.Tab as SyncTab +import mozilla.components.ui.icons.R as iconsR private const val EXPANDED_BY_DEFAULT = true @@ -103,7 +106,7 @@ fun SyncedTabsList( description = syncedTab.displayURL, onClick = { onTabClick(syncedTab.tab) }, iconDescription = stringResource(R.string.close_tab), - iconPainter = painterResource(R.drawable.ic_close), + iconPainter = painterResource(iconsR.drawable.mozac_ic_cross_24), onIconClick = { onTabCloseClick(syncedTab.action.deviceId, syncedTab.tab) }, ) is SyncedTabsListItem.Tab.Action.None -> FaviconListItem( @@ -158,7 +161,7 @@ fun SyncedTabsSectionHeader( Column( modifier = Modifier .fillMaxWidth() - .background(FirefoxTheme.colors.layer1), + .background(MaterialTheme.colorScheme.surface), ) { ExpandableListHeader( headerText = headerText, @@ -188,7 +191,7 @@ fun SyncedTabsErrorItem( .padding(all = 8.dp) .height(IntrinsicSize.Min) .dashedBorder( - color = FirefoxTheme.colors.borderPrimary, + color = MaterialTheme.colorScheme.outlineVariant, cornerRadius = 8.dp, dashHeight = 2.dp, dashWidth = 4.dp, @@ -201,7 +204,7 @@ fun SyncedTabsErrorItem( ) { Text( text = errorText, - color = FirefoxTheme.colors.textPrimary, + color = MaterialTheme.colorScheme.onSurface, modifier = Modifier.fillMaxWidth(), fontSize = 14.sp, ) @@ -212,7 +215,7 @@ fun SyncedTabsErrorItem( FilledButton( text = it.buttonText, modifier = Modifier.fillMaxWidth(), - icon = painterResource(R.drawable.ic_sign_in), + icon = painterResource(iconsR.drawable.mozac_ic_avatar_circle_fill_24), onClick = it.onClick, ) } @@ -227,7 +230,7 @@ fun SyncedTabsErrorItem( fun SyncedTabsNoTabsItem() { Text( text = stringResource(R.string.synced_tabs_no_open_tabs), - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier .padding(horizontal = 16.dp, vertical = 8.dp) .fillMaxWidth(), @@ -240,7 +243,7 @@ fun SyncedTabsNoTabsItem() { @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) private fun SyncedTabsListItemsPreview() { FirefoxTheme { - Column(Modifier.background(FirefoxTheme.colors.layer1)) { + Surface { SyncedTabsSectionHeader(headerText = "Google Pixel Pro Max +Ultra 5000") Spacer(modifier = Modifier.height(16.dp)) @@ -276,7 +279,7 @@ private fun SyncedTabsListItemsPreview() { @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) private fun SyncedTabsErrorPreview() { FirefoxTheme { - Box(Modifier.background(FirefoxTheme.colors.layer1)) { + Surface { SyncedTabsErrorItem( errorText = stringResource(R.string.synced_tabs_no_tabs), errorButton = SyncedTabsListItem.ErrorButton( @@ -293,7 +296,7 @@ private fun SyncedTabsErrorPreview() { @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) private fun SyncedTabsListPreview() { FirefoxTheme { - Box(Modifier.background(FirefoxTheme.colors.layer1)) { + Surface { SyncedTabsList( syncedTabs = getFakeSyncedTabList(), onTabClick = { println("Tab clicked") }, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/syncedtabs/SyncedTabsList.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/syncedtabs/SyncedTabsList.kt @@ -8,7 +8,6 @@ package org.mozilla.fenix.tabstray.ui.syncedtabs import android.content.res.Configuration import androidx.annotation.VisibleForTesting -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -28,6 +27,7 @@ import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember @@ -52,6 +52,7 @@ import org.mozilla.fenix.tabstray.syncedtabs.SyncedTabsListItem import org.mozilla.fenix.tabstray.ui.tabitems.BasicTabListItem import org.mozilla.fenix.theme.FirefoxTheme import mozilla.components.browser.storage.sync.Tab as SyncTab +import mozilla.components.ui.icons.R as iconsR private const val EXPANDED_BY_DEFAULT = true private val CardRoundedCornerShape = RoundedCornerShape(12.dp) @@ -252,7 +253,7 @@ private fun SyncedTabsErrorItem( FilledButton( text = it.buttonText, modifier = Modifier.fillMaxWidth(), - icon = painterResource(R.drawable.ic_sign_in), + icon = painterResource(iconsR.drawable.mozac_ic_avatar_circle_fill_24), onClick = it.onClick, ) } @@ -289,7 +290,7 @@ private fun SyncedTabsNoTabsItem() { @FlexibleWindowLightDarkPreview private fun SyncedTabsListItemsPreview() { FirefoxTheme { - Column(Modifier.background(MaterialTheme.colorScheme.surface)) { + Surface { SyncedTabsSectionHeader(headerText = "Google Pixel Pro Max +Ultra 5000") Spacer(modifier = Modifier.height(16.dp)) @@ -324,7 +325,7 @@ private fun SyncedTabsListItemsPreview() { @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) private fun SyncedTabsErrorPreview() { FirefoxTheme { - Box(Modifier.background(MaterialTheme.colorScheme.surface)) { + Surface { SyncedTabsErrorItem( errorText = stringResource(R.string.synced_tabs_no_tabs), errorButton = SyncedTabsListItem.ErrorButton( @@ -341,7 +342,7 @@ private fun SyncedTabsErrorPreview() { @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) private fun SyncedTabsListPreview() { FirefoxTheme { - Box(Modifier.background(MaterialTheme.colorScheme.surface)) { + Surface { SyncedTabsList( syncedTabs = getFakeSyncedTabList(), onTabClick = { println("Tab clicked") }, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabpage/PrivateTabsPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabpage/PrivateTabsPage.kt @@ -4,13 +4,12 @@ package org.mozilla.fenix.tabstray.ui.tabpage -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width 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.ui.Alignment @@ -134,6 +133,8 @@ private fun EmptyPrivateTabsPage( @Composable private fun EmptyPrivateTabsPagePreview() { FirefoxTheme(theme = Theme.Private) { - EmptyPrivateTabsPage(modifier = Modifier.background(color = MaterialTheme.colorScheme.surface)) + Surface { + EmptyPrivateTabsPage() + } } }