commit 8490d107c724dc0d3c4fed9f50319d3ac795dbcc
parent 312f59ad22621482219b752c3f5f9a1d630c6d5b
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 3 Dec 2025 01:08:45 +0000
Bug 1993856 - Part 16: Migrate RecentSyncedTab and Thumbnail to M3 color tokens r=android-reviewers,devota
- Aligned the Card and Placeholder colors with https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61820-4186&m=dev
- Reduced recent tabs preview count to 1 since there's only ever one recent tab to display.
- Swapped out OutlinedButton for FilledButton since those are the colors we already showed if we looked into how the card background and content color are set https://searchfox.org/firefox-main/rev/5ccf4a7d77a329f237d3a41e400049f9c47dc71f/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/wallpapers/WallpaperState.kt#36-59
Differential Revision: https://phabricator.services.mozilla.com/D274678
Diffstat:
4 files changed, 150 insertions(+), 145 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@@ -47,7 +48,7 @@ fun ThumbnailCard(
url: String,
request: ImageLoadRequest,
modifier: Modifier = Modifier,
- backgroundColor: Color = FirefoxTheme.colors.layer2,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
contentDescription: String? = null,
contentScale: ContentScale = ContentScale.FillWidth,
alignment: Alignment = Alignment.TopCenter,
@@ -67,7 +68,11 @@ fun ThumbnailCard(
) {
components.core.icons.Loader(url) {
Placeholder {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer3))
+ Box(
+ modifier = Modifier.background(
+ color = MaterialTheme.colorScheme.surfaceContainerHighest,
+ ),
+ )
}
WithIcon { icon ->
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/fake/FakeHomepagePreview.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/fake/FakeHomepagePreview.kt
@@ -292,7 +292,7 @@ internal object FakeHomepagePreview {
}
}
- internal fun recentTabs(tabCount: Int = 2): List<RecentTab.Tab> =
+ internal fun recentTabs(tabCount: Int = 1): List<RecentTab.Tab> =
mutableListOf<RecentTab.Tab>().apply {
repeat(tabCount) {
add(
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt
@@ -4,7 +4,6 @@
package org.mozilla.fenix.home.recentsyncedtabs.view
-import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement
@@ -20,8 +19,11 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@@ -37,10 +39,10 @@ import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
-import mozilla.components.compose.base.button.OutlinedButton
+import mozilla.components.compose.base.button.FilledButton
import mozilla.components.compose.base.menu.DropdownMenu
import mozilla.components.compose.base.menu.MenuItem
import mozilla.components.compose.base.text.Text
@@ -52,6 +54,7 @@ import org.mozilla.fenix.compose.Image
import org.mozilla.fenix.compose.ThumbnailCard
import org.mozilla.fenix.home.recentsyncedtabs.RecentSyncedTab
import org.mozilla.fenix.theme.FirefoxTheme
+import mozilla.components.ui.icons.R as iconsR
private const val THUMBNAIL_SIZE = 108
@@ -70,9 +73,9 @@ private const val THUMBNAIL_SIZE = 108
@Composable
fun RecentSyncedTab(
tab: RecentSyncedTab?,
- backgroundColor: Color = FirefoxTheme.colors.layer2,
- buttonBackgroundColor: Color = FirefoxTheme.colors.actionSecondary,
- buttonTextColor: Color = FirefoxTheme.colors.textActionSecondary,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
+ buttonBackgroundColor: Color = ButtonDefaults.buttonColors().containerColor,
+ buttonTextColor: Color = ButtonDefaults.buttonColors().contentColor,
onRecentSyncedTabClick: (RecentSyncedTab) -> Unit,
onSeeAllSyncedTabsButtonClick: () -> Unit,
onRemoveSyncedTab: (RecentSyncedTab) -> Unit,
@@ -134,7 +137,6 @@ fun RecentSyncedTab(
} else {
Text(
text = tab.title.trimmed(),
- color = FirefoxTheme.colors.textPrimary,
fontSize = 14.sp,
overflow = TextOverflow.Ellipsis,
maxLines = 2,
@@ -145,12 +147,12 @@ fun RecentSyncedTab(
if (tab == null) {
Box(
modifier = Modifier
- .background(FirefoxTheme.colors.layer3)
+ .background(MaterialTheme.colorScheme.surfaceContainerHighest)
.size(18.dp),
)
} else {
- Image(
- painter = painterResource(R.drawable.ic_synced_tabs),
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_sync_tabs_24),
contentDescription = stringResource(
R.string.recent_tabs_synced_device_icon_content_description,
),
@@ -165,7 +167,7 @@ fun RecentSyncedTab(
} else {
Text(
text = tab.deviceDisplayName,
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
fontSize = 12.sp,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
@@ -177,7 +179,7 @@ fun RecentSyncedTab(
Spacer(modifier = Modifier.height(32.dp))
- OutlinedButton(
+ FilledButton(
text = if (tab != null) {
stringResource(R.string.recent_tabs_see_all_synced_tabs_button_text)
} else {
@@ -211,7 +213,7 @@ private fun RecentTabImagePlaceholder() {
modifier = Modifier
.size(108.dp, 80.dp)
.clip(RoundedCornerShape(8.dp))
- .background(color = FirefoxTheme.colors.layer3),
+ .background(color = MaterialTheme.colorScheme.surfaceContainerHighest),
)
}
@@ -238,11 +240,11 @@ private fun TextLinePlaceHolder() {
modifier = Modifier
.height(12.dp)
.fillMaxWidth()
- .background(FirefoxTheme.colors.layer3),
+ .background(MaterialTheme.colorScheme.surfaceContainerHighest),
)
}
-@Preview
+@PreviewLightDark
@Composable
private fun LoadedRecentSyncedTab() {
val tab = RecentSyncedTab(
@@ -262,13 +264,13 @@ private fun LoadedRecentSyncedTab() {
}
}
-@Preview
+@PreviewLightDark
@Composable
private fun LoadingRecentSyncedTab() {
FirefoxTheme {
RecentSyncedTab(
tab = null,
- buttonBackgroundColor = FirefoxTheme.colors.layer3,
+ buttonBackgroundColor = MaterialTheme.colorScheme.surfaceContainerHighest,
onRecentSyncedTabClick = {},
onSeeAllSyncedTabsButtonClick = {},
onRemoveSyncedTab = {},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/Homepage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/Homepage.kt
@@ -4,7 +4,6 @@
package org.mozilla.fenix.home.ui
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
@@ -15,6 +14,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.ReadOnlyComposable
@@ -177,7 +177,7 @@ internal fun Homepage(
buttonBackgroundColor = if (syncedTab != null) {
buttonBackgroundColor
} else {
- FirefoxTheme.colors.layer3
+ MaterialTheme.colorScheme.surfaceContainerHighest
},
buttonTextColor = buttonTextColor,
onRecentSyncedTabClick = interactor::onRecentSyncedTabClicked,
@@ -459,49 +459,49 @@ private fun CollectionsSection(
@PreviewLightDark
private fun HomepagePreview() {
FirefoxTheme {
- Homepage(
- state = HomepageState.Normal(
- nimbusMessage = FakeHomepagePreview.nimbusMessageState(),
- topSites = FakeHomepagePreview.topSites(),
- recentTabs = FakeHomepagePreview.recentTabs(),
- syncedTab = FakeHomepagePreview.recentSyncedTab(),
- bookmarks = FakeHomepagePreview.bookmarks(),
- recentlyVisited = FakeHomepagePreview.recentHistory(),
- collectionsState = FakeHomepagePreview.collectionsPlaceholder(),
- pocketState = FakeHomepagePreview.pocketState(),
- showTopSites = true,
- showRecentTabs = true,
- showRecentSyncedTab = true,
- showBookmarks = true,
- showRecentlyVisited = true,
- showPocketStories = true,
- showCollections = true,
- headerState = HeaderState(
- showHeader = false,
- wordmarkTextColor = null,
- privateBrowsingButtonColor = colorResource(
- getAttr(
- iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ Surface {
+ Homepage(
+ state = HomepageState.Normal(
+ nimbusMessage = FakeHomepagePreview.nimbusMessageState(),
+ topSites = FakeHomepagePreview.topSites(),
+ recentTabs = FakeHomepagePreview.recentTabs(),
+ syncedTab = FakeHomepagePreview.recentSyncedTab(),
+ bookmarks = FakeHomepagePreview.bookmarks(),
+ recentlyVisited = FakeHomepagePreview.recentHistory(),
+ collectionsState = FakeHomepagePreview.collectionsPlaceholder(),
+ pocketState = FakeHomepagePreview.pocketState(),
+ showTopSites = true,
+ showRecentTabs = true,
+ showRecentSyncedTab = true,
+ showBookmarks = true,
+ showRecentlyVisited = true,
+ showPocketStories = true,
+ showCollections = true,
+ headerState = HeaderState(
+ showHeader = false,
+ wordmarkTextColor = null,
+ privateBrowsingButtonColor = colorResource(
+ getAttr(
+ iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ ),
),
),
+ searchBarVisible = true,
+ searchBarEnabled = false,
+ firstFrameDrawn = true,
+ setupChecklistState = null,
+ topSiteColors = TopSiteColors.colors(),
+ cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
+ buttonTextColor = WallpaperState.default.buttonTextColor,
+ buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
+ isSearchInProgress = false,
+ bottomPadding = 68,
),
- searchBarVisible = true,
- searchBarEnabled = false,
- firstFrameDrawn = true,
- setupChecklistState = null,
- topSiteColors = TopSiteColors.colors(),
- cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
- buttonTextColor = WallpaperState.default.buttonTextColor,
- buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
- isSearchInProgress = false,
- bottomPadding = 68,
- ),
- interactor = FakeHomepagePreview.homepageInteractor,
- onTopSitesItemBound = {},
- modifier = Modifier
- .fillMaxSize()
- .background(color = MaterialTheme.colorScheme.surface),
- )
+ interactor = FakeHomepagePreview.homepageInteractor,
+ onTopSitesItemBound = {},
+ modifier = Modifier.fillMaxSize(),
+ )
+ }
}
}
@@ -509,49 +509,49 @@ private fun HomepagePreview() {
@PreviewLightDark
private fun HomepagePreviewCollections() {
FirefoxTheme {
- Homepage(
- state = HomepageState.Normal(
- nimbusMessage = null,
- topSites = FakeHomepagePreview.topSites(),
- recentTabs = FakeHomepagePreview.recentTabs(),
- syncedTab = FakeHomepagePreview.recentSyncedTab(),
- bookmarks = FakeHomepagePreview.bookmarks(),
- recentlyVisited = FakeHomepagePreview.recentHistory(),
- collectionsState = FakeHomepagePreview.collectionState(),
- pocketState = FakeHomepagePreview.pocketState(),
- showTopSites = false,
- showRecentTabs = false,
- showRecentSyncedTab = false,
- showBookmarks = false,
- showRecentlyVisited = true,
- showPocketStories = true,
- showCollections = true,
- headerState = HeaderState(
- showHeader = false,
- wordmarkTextColor = null,
- privateBrowsingButtonColor = colorResource(
- getAttr(
- iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ Surface {
+ Homepage(
+ state = HomepageState.Normal(
+ nimbusMessage = null,
+ topSites = FakeHomepagePreview.topSites(),
+ recentTabs = FakeHomepagePreview.recentTabs(),
+ syncedTab = FakeHomepagePreview.recentSyncedTab(),
+ bookmarks = FakeHomepagePreview.bookmarks(),
+ recentlyVisited = FakeHomepagePreview.recentHistory(),
+ collectionsState = FakeHomepagePreview.collectionState(),
+ pocketState = FakeHomepagePreview.pocketState(),
+ showTopSites = false,
+ showRecentTabs = false,
+ showRecentSyncedTab = false,
+ showBookmarks = false,
+ showRecentlyVisited = true,
+ showPocketStories = true,
+ showCollections = true,
+ headerState = HeaderState(
+ showHeader = false,
+ wordmarkTextColor = null,
+ privateBrowsingButtonColor = colorResource(
+ getAttr(
+ iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ ),
),
),
+ searchBarVisible = true,
+ searchBarEnabled = false,
+ firstFrameDrawn = true,
+ setupChecklistState = null,
+ topSiteColors = TopSiteColors.colors(),
+ cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
+ buttonTextColor = WallpaperState.default.buttonTextColor,
+ buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
+ isSearchInProgress = false,
+ bottomPadding = 68,
),
- searchBarVisible = true,
- searchBarEnabled = false,
- firstFrameDrawn = true,
- setupChecklistState = null,
- topSiteColors = TopSiteColors.colors(),
- cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
- buttonTextColor = WallpaperState.default.buttonTextColor,
- buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
- isSearchInProgress = false,
- bottomPadding = 68,
- ),
- interactor = FakeHomepagePreview.homepageInteractor,
- onTopSitesItemBound = {},
- modifier = Modifier
- .fillMaxSize()
- .background(color = MaterialTheme.colorScheme.surface),
- )
+ interactor = FakeHomepagePreview.homepageInteractor,
+ onTopSitesItemBound = {},
+ modifier = Modifier.fillMaxSize(),
+ )
+ }
}
}
@@ -559,49 +559,49 @@ private fun HomepagePreviewCollections() {
@PreviewLightDark
private fun MinimalHomepagePreview() {
FirefoxTheme {
- Homepage(
- state = HomepageState.Normal(
- nimbusMessage = null,
- topSites = FakeHomepagePreview.topSites(),
- recentTabs = FakeHomepagePreview.recentTabs(),
- syncedTab = FakeHomepagePreview.recentSyncedTab(),
- bookmarks = FakeHomepagePreview.bookmarks(),
- recentlyVisited = FakeHomepagePreview.recentHistory(),
- collectionsState = FakeHomepagePreview.collectionState(),
- pocketState = FakeHomepagePreview.pocketState(),
- showTopSites = true,
- showRecentTabs = false,
- showRecentSyncedTab = false,
- showBookmarks = false,
- showRecentlyVisited = false,
- showPocketStories = true,
- showCollections = false,
- HeaderState(
- showHeader = false,
- wordmarkTextColor = null,
- privateBrowsingButtonColor = colorResource(
- getAttr(
- iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ Surface {
+ Homepage(
+ state = HomepageState.Normal(
+ nimbusMessage = null,
+ topSites = FakeHomepagePreview.topSites(),
+ recentTabs = FakeHomepagePreview.recentTabs(),
+ syncedTab = FakeHomepagePreview.recentSyncedTab(),
+ bookmarks = FakeHomepagePreview.bookmarks(),
+ recentlyVisited = FakeHomepagePreview.recentHistory(),
+ collectionsState = FakeHomepagePreview.collectionState(),
+ pocketState = FakeHomepagePreview.pocketState(),
+ showTopSites = true,
+ showRecentTabs = false,
+ showRecentSyncedTab = false,
+ showBookmarks = false,
+ showRecentlyVisited = false,
+ showPocketStories = true,
+ showCollections = false,
+ HeaderState(
+ showHeader = false,
+ wordmarkTextColor = null,
+ privateBrowsingButtonColor = colorResource(
+ getAttr(
+ iconsR.attr.mozac_ic_private_mode_circle_fill_icon_color,
+ ),
),
),
+ searchBarVisible = false,
+ searchBarEnabled = false,
+ firstFrameDrawn = true,
+ setupChecklistState = null,
+ topSiteColors = TopSiteColors.colors(),
+ cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
+ buttonTextColor = WallpaperState.default.buttonTextColor,
+ buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
+ isSearchInProgress = false,
+ bottomPadding = 68,
),
- searchBarVisible = false,
- searchBarEnabled = false,
- firstFrameDrawn = true,
- setupChecklistState = null,
- topSiteColors = TopSiteColors.colors(),
- cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
- buttonTextColor = WallpaperState.default.buttonTextColor,
- buttonBackgroundColor = WallpaperState.default.buttonBackgroundColor,
- isSearchInProgress = false,
- bottomPadding = 68,
- ),
- interactor = FakeHomepagePreview.homepageInteractor,
- onTopSitesItemBound = {},
- modifier = Modifier
- .fillMaxSize()
- .background(color = MaterialTheme.colorScheme.surface),
- )
+ interactor = FakeHomepagePreview.homepageInteractor,
+ onTopSitesItemBound = {},
+ modifier = Modifier.fillMaxSize(),
+ )
+ }
}
}
@@ -625,9 +625,7 @@ private fun PrivateHomepagePreview() {
),
interactor = FakeHomepagePreview.homepageInteractor,
onTopSitesItemBound = {},
- modifier = Modifier
- .fillMaxSize()
- .background(color = MaterialTheme.colorScheme.surface),
+ modifier = Modifier.fillMaxSize(),
)
}
}
