commit 01836d285af78804dd7e3b8a538419937fed43f7
parent 335833e832091c76922f61f9dd89d2efb5e006ea
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 19 Nov 2025 02:24:20 +0000
Bug 1996444 - Part 1: Migrate Bookmarks Screen to use M3 Acorn color tokens r=android-reviewers,007
Top App Bar: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63923-29115&m=dev
Bookmarks: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=623-21952&m=dev
Empty State: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64640-18543&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270331
Diffstat:
1 file changed, 67 insertions(+), 83 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/bookmarks/BookmarksScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/bookmarks/BookmarksScreen.kt
@@ -41,6 +41,7 @@ import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
@@ -49,6 +50,7 @@ import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
@@ -104,7 +106,6 @@ import mozilla.components.compose.base.snackbar.displaySnackbar
import mozilla.components.compose.base.text.Text
import mozilla.components.compose.base.textfield.TextField
import mozilla.components.compose.base.textfield.TextFieldColors
-import mozilla.components.compose.base.theme.AcornTheme
import mozilla.components.compose.base.utils.BackInvokedHandler
import mozilla.components.compose.browser.awesomebar.AwesomeBar
import mozilla.components.compose.browser.awesomebar.AwesomeBarDefaults
@@ -247,7 +248,7 @@ private fun BookmarksList(
) {
val state by store.observeAsState(store.state) { it }
val searchState = searchStore.observeAsComposableState { it }.value
- val awesomebarBackground = AcornTheme.colors.layer1
+ val awesomebarBackground = MaterialTheme.colorScheme.surface
val awesomebarScrim by remember(searchState.query) {
derivedStateOf {
when (searchState.query.isNotEmpty()) {
@@ -367,7 +368,7 @@ private fun BookmarksList(
BookmarksListTopBar(store = store)
}
},
- containerColor = FirefoxTheme.colors.layer1,
+ containerColor = MaterialTheme.colorScheme.surface,
) { paddingValues ->
if (state.isLoading) {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
@@ -375,11 +376,13 @@ private fun BookmarksList(
}
return@Scaffold
}
+
val emptyListState = state.emptyListState()
if (emptyListState != null) {
EmptyList(state = emptyListState, dispatcher = store::dispatch)
return@Scaffold
}
+
saveableStateHolder.SaveableStateProvider(state.currentFolder.guid) {
LazyColumn(
modifier = Modifier
@@ -459,7 +462,6 @@ private fun BookmarksList(
R.string.bookmark_item_menu_button_content_description,
item.title,
),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
@@ -517,7 +519,6 @@ private fun BookmarksList(
R.string.bookmark_item_menu_button_content_description,
item.title,
),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
@@ -839,7 +840,7 @@ private fun BookmarksListTopBarActionsNoSelection(
contentDescription = stringResource(
R.string.bookmark_close_button_content_description,
),
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
}
@@ -925,7 +926,7 @@ private fun SelectFolderScreen(
topBar = {
SelectFolderTopBar(store = store)
},
- containerColor = FirefoxTheme.colors.layer1,
+ containerColor = MaterialTheme.colorScheme.surface,
) { paddingValues ->
LazyColumn(
modifier = Modifier
@@ -1006,11 +1007,9 @@ private fun SelectFolderTopBar(store: BookmarksStore) {
{ store.dispatch(AddFolderClicked) }
}
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
title = {
Text(
text = stringResource(R.string.bookmark_select_folder_fragment_label),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
},
@@ -1019,7 +1018,6 @@ private fun SelectFolderTopBar(store: BookmarksStore) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
contentDescription = stringResource(R.string.bookmark_navigate_back_button_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
},
@@ -1033,11 +1031,13 @@ private fun SelectFolderTopBar(store: BookmarksStore) {
contentDescription = stringResource(
R.string.bookmark_sort_menu_content_desc,
),
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
SelectFolderSortOverflowMenu(store = store)
}
+
if (onNewFolderClick != null) {
IconButton(onClick = { onNewFolderClick() }) {
Icon(
@@ -1045,7 +1045,7 @@ private fun SelectFolderTopBar(store: BookmarksStore) {
contentDescription = stringResource(
R.string.bookmark_add_new_folder_button_content_description,
),
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
}
@@ -1150,17 +1150,20 @@ private fun EmptyList(
painter = painterResource(state.drawableId()),
contentDescription = null,
)
+
Text(
text = stringResource(R.string.bookmark_empty_list_title),
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.headline7,
- color = FirefoxTheme.colors.textPrimary,
)
+
Text(
text = stringResource(state.descriptionId()),
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.body2,
- color = FirefoxTheme.colors.textPrimary,
textAlign = TextAlign.Center,
)
+
if (state is EmptyListState.NotAuthenticated) {
FilledButton(
text = stringResource(R.string.bookmark_empty_list_guest_cta),
@@ -1382,7 +1385,7 @@ private fun EditFolderScreen(
onDeleteClick = { store.dispatch(EditFolderAction.DeleteClicked) },
)
},
- containerColor = FirefoxTheme.colors.layer1,
+ containerColor = MaterialTheme.colorScheme.surface,
) { paddingValues ->
Box(
modifier = Modifier
@@ -1412,7 +1415,7 @@ private fun EditFolderScreen(
Text(
stringResource(R.string.bookmark_save_in_label),
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.body2,
modifier = Modifier.padding(start = 16.dp),
)
@@ -1433,11 +1436,9 @@ private fun EditFolderTopBar(
onDeleteClick: () -> Unit,
) {
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
title = {
Text(
text = stringResource(R.string.edit_bookmark_folder_fragment_title),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
},
@@ -1446,7 +1447,6 @@ private fun EditFolderTopBar(
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
contentDescription = stringResource(R.string.bookmark_navigate_back_button_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
},
@@ -1455,7 +1455,7 @@ private fun EditFolderTopBar(
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_delete_24),
contentDescription = stringResource(R.string.bookmark_delete_folder_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
},
@@ -1473,7 +1473,7 @@ private fun AddFolderScreen(
val state by store.observeAsState(store.state.bookmarksAddFolderState) { it.bookmarksAddFolderState }
Scaffold(
topBar = { AddFolderTopBar(onBackClick = { store.dispatch(BackClicked) }) },
- containerColor = FirefoxTheme.colors.layer1,
+ containerColor = MaterialTheme.colorScheme.surface,
) { paddingValues ->
Box(
modifier = Modifier
@@ -1505,8 +1505,8 @@ private fun AddFolderScreen(
Spacer(modifier = Modifier.height(24.dp))
Text(
- stringResource(R.string.bookmark_save_in_label),
- color = FirefoxTheme.colors.textPrimary,
+ text = stringResource(R.string.bookmark_save_in_label),
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.body2,
modifier = Modifier.padding(start = 16.dp),
)
@@ -1524,11 +1524,9 @@ private fun AddFolderScreen(
@Composable
private fun AddFolderTopBar(onBackClick: () -> Unit) {
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
title = {
Text(
text = stringResource(R.string.bookmark_add_folder),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
},
@@ -1537,7 +1535,6 @@ private fun AddFolderTopBar(onBackClick: () -> Unit) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
contentDescription = stringResource(R.string.bookmark_navigate_back_button_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
},
@@ -1564,7 +1561,7 @@ private fun EditBookmarkScreen(
onDeleteClicked = { store.dispatch(EditBookmarkAction.DeleteClicked) },
)
},
- containerColor = FirefoxTheme.colors.layer1,
+ containerColor = MaterialTheme.colorScheme.surface,
) { paddingValues ->
Box(
modifier = Modifier
@@ -1647,30 +1644,30 @@ private fun FolderInfo(
onFolderClicked: () -> Unit,
) {
Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
- Text(
- text = stringResource(R.string.bookmark_save_in_label),
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.body2,
- )
-
- Row(
- horizontalArrangement = Arrangement.spacedBy(16.dp),
- verticalAlignment = Alignment.CenterVertically,
- modifier = Modifier
- .height(40.dp)
- .fillMaxWidth()
- .clickable { onFolderClicked() },
- ) {
- Icon(
- painter = painterResource(id = iconsR.drawable.mozac_ic_folder_24),
- contentDescription = "",
- tint = FirefoxTheme.colors.textPrimary,
- )
+ CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Text(
- text = folderTitle,
- color = FirefoxTheme.colors.textPrimary,
+ text = stringResource(R.string.bookmark_save_in_label),
style = FirefoxTheme.typography.body2,
)
+
+ Row(
+ horizontalArrangement = Arrangement.spacedBy(16.dp),
+ verticalAlignment = Alignment.CenterVertically,
+ modifier = Modifier
+ .height(40.dp)
+ .fillMaxWidth()
+ .clickable { onFolderClicked() },
+ ) {
+ Icon(
+ painter = painterResource(id = iconsR.drawable.mozac_ic_folder_24),
+ contentDescription = "",
+ )
+
+ Text(
+ text = folderTitle,
+ style = FirefoxTheme.typography.body2,
+ )
+ }
}
}
}
@@ -1700,7 +1697,7 @@ private fun ClearableTextField(
}
},
colors = TextFieldColors.default(
- placeholderColor = FirefoxTheme.colors.textPrimary,
+ placeholderColor = MaterialTheme.colorScheme.onSurface,
),
)
}
@@ -1711,11 +1708,9 @@ private fun EditBookmarkTopBar(
onDeleteClicked: () -> Unit,
) {
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
title = {
Text(
text = stringResource(R.string.edit_bookmark_fragment_title),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
},
@@ -1724,7 +1719,6 @@ private fun EditBookmarkTopBar(
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
contentDescription = stringResource(R.string.bookmark_navigate_back_button_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
},
@@ -1733,7 +1727,7 @@ private fun EditBookmarkTopBar(
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_delete_24),
contentDescription = stringResource(R.string.bookmark_delete_bookmark_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurface,
)
}
},
@@ -1784,9 +1778,7 @@ private fun EditBookmarkScreenPreview() {
)
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- EditBookmarkScreen(store = store)
- }
+ EditBookmarkScreen(store = store)
}
}
@@ -1892,17 +1884,15 @@ private fun BookmarksScreenPreview() {
}
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- BookmarksScreen(
- buildStore = store,
- appStore = AppStore(),
- browserStore = BrowserStore(),
- toolbarStore = BrowserToolbarStore(),
- searchStore = SearchFragmentStore(SearchFragmentState.EMPTY),
- bookmarksSearchEngine = null,
- profiler = null,
- )
- }
+ BookmarksScreen(
+ buildStore = store,
+ appStore = AppStore(),
+ browserStore = BrowserStore(),
+ toolbarStore = BrowserToolbarStore(),
+ searchStore = SearchFragmentStore(SearchFragmentState.EMPTY),
+ bookmarksSearchEngine = null,
+ profiler = null,
+ )
}
}
@@ -1939,17 +1929,15 @@ private fun EmptyBookmarksScreenPreview() {
}
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- BookmarksScreen(
- buildStore = store,
- appStore = AppStore(),
- browserStore = BrowserStore(),
- toolbarStore = BrowserToolbarStore(),
- searchStore = SearchFragmentStore(SearchFragmentState.EMPTY),
- bookmarksSearchEngine = null,
- profiler = null,
- )
- }
+ BookmarksScreen(
+ buildStore = store,
+ appStore = AppStore(),
+ browserStore = BrowserStore(),
+ toolbarStore = BrowserToolbarStore(),
+ searchStore = SearchFragmentStore(SearchFragmentState.EMPTY),
+ bookmarksSearchEngine = null,
+ profiler = null,
+ )
}
}
@@ -1992,9 +1980,7 @@ private fun AddFolderPreview() {
),
)
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- AddFolderScreen(store)
- }
+ AddFolderScreen(store)
}
}
@@ -2094,8 +2080,6 @@ private fun SelectFolderPreview() {
),
)
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- SelectFolderScreen(store)
- }
+ SelectFolderScreen(store)
}
}
