commit 3ed6ded546f8635fe972cca25d24339554fb54bf
parent e52ddeb1c7ec05dea3e1596acab1494697ce1b17
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 09:03:41 +0000
Bug 1998073 - Part 2: Migrate LoginDetailsScreen to use M3 Acorn color tokens r=android-reviewers,007
Logins: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=972-28602&m=dev
Top App Bar: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=65138-3594&m=dev
Dialog: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63942-53817&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D271184
Diffstat:
1 file changed, 67 insertions(+), 61 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/LoginDetailsScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/LoginDetailsScreen.kt
@@ -5,7 +5,6 @@
package org.mozilla.fenix.settings.logins.ui
import android.os.Build
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
@@ -14,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.AlertDialog
@@ -24,9 +22,7 @@ import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -39,11 +35,14 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.button.IconButton
+import mozilla.components.compose.base.button.TextButton
import mozilla.components.compose.base.menu.DropdownMenu
import mozilla.components.compose.base.menu.MenuItem
import mozilla.components.compose.base.snackbar.Snackbar
@@ -51,10 +50,10 @@ import mozilla.components.compose.base.snackbar.displaySnackbar
import mozilla.components.compose.base.textfield.TextField
import mozilla.components.compose.base.textfield.TextFieldColors
import mozilla.components.compose.base.textfield.TextFieldStyle
-import mozilla.components.compose.base.theme.AcornTheme
import mozilla.components.lib.state.ext.observeAsState
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
@Composable
@@ -79,7 +78,6 @@ internal fun LoginDetailsScreen(store: LoginsStore) {
onBackClick = { store.dispatch(LoginsDetailBackClicked) },
)
},
- containerColor = FirefoxTheme.colors.layer1,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState,
@@ -123,7 +121,6 @@ private fun LoginDetailTopBar(
var showMenu by remember { mutableStateOf(false) }
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
windowInsets = WindowInsets(
top = 0.dp,
bottom = 0.dp,
@@ -131,18 +128,19 @@ private fun LoginDetailTopBar(
title = {
Text(
text = loginItem.getDomainName(),
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline6,
+ style = FirefoxTheme.typography.headline5,
)
},
navigationIcon = {
- androidx.compose.material3.IconButton(onClick = onBackClick) {
+ IconButton(
+ onClick = onBackClick,
+ contentDescription = stringResource(
+ R.string.login_details_navigate_back_button_content_description,
+ ),
+ ) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
- contentDescription = stringResource(
- R.string.login_details_navigate_back_button_content_description,
- ),
- tint = FirefoxTheme.colors.iconPrimary,
+ contentDescription = null,
)
}
},
@@ -153,13 +151,10 @@ private fun LoginDetailTopBar(
contentDescription = stringResource(
R.string.login_detail_menu_button_content_description,
),
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50),
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_ellipsis_vertical_24),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
)
}
@@ -230,18 +225,14 @@ private fun LoginDetailsUrl(store: LoginsStore, url: String) {
.width(FirefoxTheme.layout.size.containerMaxWidth),
trailingIcons = {
IconButton(
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50)
- .size(48.dp),
onClick = {
store.dispatch(DetailLoginAction.GoToSiteClicked(url))
},
contentDescription = stringResource(R.string.saved_login_open_site),
) {
Icon(
- painter = painterResource(R.drawable.ic_open_in_new),
+ painter = painterResource(iconsR.drawable.mozac_ic_external_link_24),
contentDescription = null,
- tint = AcornTheme.colors.textPrimary,
)
}
},
@@ -278,9 +269,6 @@ private fun LoginDetailsUsername(
.width(FirefoxTheme.layout.size.containerMaxWidth),
trailingIcons = {
IconButton(
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50)
- .size(48.dp),
onClick = {
store.dispatch(DetailLoginAction.CopyUsernameClicked(username))
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.S_V2) {
@@ -294,9 +282,8 @@ private fun LoginDetailsUsername(
contentDescription = stringResource(R.string.saved_login_copy_username),
) {
Icon(
- painter = painterResource(R.drawable.ic_copy),
+ painter = painterResource(iconsR.drawable.mozac_ic_copy_24),
contentDescription = null,
- tint = AcornTheme.colors.textPrimary,
)
}
},
@@ -321,6 +308,7 @@ private fun LoginDetailsPassword(
.padding(horizontal = FirefoxTheme.layout.space.static200)
.width(FirefoxTheme.layout.size.containerMaxWidth),
)
+
TextField(
value = password,
onValueChange = {},
@@ -336,10 +324,8 @@ private fun LoginDetailsPassword(
isPasswordVisible = isPasswordVisible,
onTrailingIconClick = { isPasswordVisible = !isPasswordVisible },
)
+
IconButton(
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50)
- .size(48.dp),
onClick = {
store.dispatch(DetailLoginAction.CopyPasswordClicked(password))
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.S_V2) {
@@ -353,9 +339,8 @@ private fun LoginDetailsPassword(
contentDescription = stringResource(R.string.saved_logins_copy_password),
) {
Icon(
- painter = painterResource(R.drawable.ic_copy),
+ painter = painterResource(iconsR.drawable.mozac_ic_copy_24),
contentDescription = null,
- tint = AcornTheme.colors.textPrimary,
)
}
},
@@ -373,31 +358,24 @@ private fun LoginDeletionDialog(
onDeleteTapped: () -> Unit,
) {
AlertDialog(
- title = {
+ onDismissRequest = onCancelTapped,
+ text = {
Text(
text = stringResource(R.string.login_deletion_confirmation_2),
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.body1,
+ style = FirefoxTheme.typography.body2,
)
},
- onDismissRequest = onCancelTapped,
confirmButton = {
TextButton(
+ text = stringResource(R.string.bookmark_menu_delete_button),
onClick = onDeleteTapped,
- ) {
- Text(
- text = stringResource(R.string.bookmark_menu_delete_button),
- )
- }
+ )
},
dismissButton = {
TextButton(
+ text = stringResource(R.string.bookmark_delete_negative),
onClick = onCancelTapped,
- ) {
- Text(
- text = stringResource(R.string.bookmark_delete_negative),
- )
- }
+ )
},
)
}
@@ -414,25 +392,53 @@ private fun showTextCopiedSnackbar(
}
}
+private fun createStore() = LoginsStore(
+ initialState = LoginsState.default.copy(
+ loginsLoginDetailState = LoginsLoginDetailState(
+ login = LoginItem(
+ guid = "123",
+ url = "https://www.justanothersite123.com",
+ username = "username 123",
+ password = "password 123",
+ ),
+ ),
+ ),
+)
+
@Composable
@FlexibleWindowLightDarkPreview
private fun LoginDetailsScreenPreview() {
- val store = LoginsStore(
- initialState = LoginsState.default.copy(
- loginsLoginDetailState = LoginsLoginDetailState(
- login = LoginItem(
- guid = "123",
- url = "https://www.justanothersite123.com",
- username = "username 123",
- password = "password 123",
- ),
- ),
- ),
- )
+ FirefoxTheme {
+ LoginDetailsScreen(store = createStore())
+ }
+}
+
+@Composable
+@Preview
+private fun LoginDetailsScreenPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ LoginDetailsScreen(store = createStore())
+ }
+}
+@Composable
+@PreviewLightDark
+private fun LoginDeletionDialogPreview() {
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- LoginDetailsScreen(store)
- }
+ LoginDeletionDialog(
+ onCancelTapped = {},
+ onDeleteTapped = {},
+ )
+ }
+}
+
+@Composable
+@Preview
+private fun LoginDeletionDialogPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ LoginDeletionDialog(
+ onCancelTapped = {},
+ onDeleteTapped = {},
+ )
}
}
