commit 3a7d4a46a71ec57d7f13139c8d979d2baf922ef6
parent 3398ca7b86c8d28ba1b62277b7d81e91df2f4143
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 05:25:58 +0000
Bug 1998021 - Part 3: Migrate Translation Settings to M3 Acorn color tokens r=android-reviewers,007
https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=991-21971&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D271168
Diffstat:
5 files changed, 163 insertions(+), 49 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/TranslationSettings.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/TranslationSettings.kt
@@ -4,8 +4,6 @@
package org.mozilla.fenix.translations
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
@@ -14,6 +12,7 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
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.ui.Alignment
@@ -21,6 +20,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.concept.engine.translate.TranslationError
@@ -30,6 +30,7 @@ import org.mozilla.fenix.compose.InfoType
import org.mozilla.fenix.compose.SwitchWithLabel
import org.mozilla.fenix.compose.list.TextListItem
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
/**
* Translation Settings Fragment.
@@ -56,12 +57,8 @@ fun TranslationSettings(
onDownloadLanguageClicked: () -> Unit,
) {
val showHeader = showAutomaticTranslations || showNeverTranslate || showDownloads
- Column(
- modifier = Modifier
- .background(
- color = FirefoxTheme.colors.layer1,
- ),
- ) {
+
+ Surface {
LazyColumn {
items(translationSwitchList) { item: TranslationSwitchItem ->
SwitchWithLabel(
@@ -96,7 +93,7 @@ fun TranslationSettings(
.fillMaxWidth()
.padding(start = 72.dp, end = 16.dp, bottom = 8.dp, top = 8.dp)
.semantics { heading() },
- color = MaterialTheme.colorScheme.tertiary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.headline8,
)
}
@@ -214,3 +211,19 @@ private fun TranslationSettingsPreview() {
)
}
}
+
+@Composable
+@Preview
+private fun TranslationSettingPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ TranslationSettings(
+ translationSwitchList = getTranslationSettingsSwitchList(),
+ showAutomaticTranslations = true,
+ showNeverTranslate = true,
+ showDownloads = true,
+ onAutomaticTranslationClicked = {},
+ onDownloadLanguageClicked = {},
+ onNeverTranslationClicked = {},
+ )
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/automatic/AutomaticTranslationOptionsPreference.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/automatic/AutomaticTranslationOptionsPreference.kt
@@ -4,21 +4,22 @@
package org.mozilla.fenix.translations.preferences.automatic
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import org.mozilla.fenix.compose.list.RadioButtonListItem
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
/**
* Firefox Automatic Translation Options preference screen.
@@ -37,12 +38,8 @@ fun AutomaticTranslationOptionsPreference(
AutomaticTranslationOptionPreference.NeverTranslate(),
)
val selected = remember { mutableStateOf(selectedOption) }
- Column(
- modifier = Modifier
- .background(
- color = FirefoxTheme.colors.layer1,
- ),
- ) {
+
+ Surface {
LazyColumn {
items(optionsList) { item: AutomaticTranslationOptionPreference ->
RadioButtonListItem(
@@ -76,3 +73,14 @@ private fun AutomaticTranslationOptionsPreview() {
)
}
}
+
+@Composable
+@Preview
+private fun AutomaticTranslationOptionsPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ AutomaticTranslationOptionsPreference(
+ selectedOption = AutomaticTranslationOptionPreference.AlwaysTranslate(),
+ onItemClick = {},
+ )
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/automatic/AutomaticTranslationPreference.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/automatic/AutomaticTranslationPreference.kt
@@ -4,20 +4,20 @@
package org.mozilla.fenix.translations.preferences.automatic
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.concept.engine.translate.Language
@@ -26,6 +26,7 @@ import org.mozilla.fenix.compose.InfoCard
import org.mozilla.fenix.compose.InfoType
import org.mozilla.fenix.compose.list.TextListItem
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import java.util.Locale
/**
@@ -41,12 +42,7 @@ fun AutomaticTranslationPreference(
hasLanguageError: Boolean = false,
onItemClick: (AutomaticTranslationItemPreference) -> Unit,
) {
- Column(
- modifier = Modifier
- .background(
- color = FirefoxTheme.colors.layer1,
- ),
- ) {
+ Surface {
LazyColumn {
item {
TextListItem(
@@ -75,6 +71,7 @@ fun AutomaticTranslationPreference(
) {
description = stringResource(item.automaticTranslationOptionPreference.titleId)
}
+
item.language.localizedDisplayName?.let {
TextListItem(
label = it,
@@ -150,3 +147,38 @@ private fun AutomaticTranslationPreferencePreview() {
)
}
}
+
+@Composable
+@PreviewLightDark
+private fun AutomaticTranslationPreferenceErrorPreview() {
+ FirefoxTheme {
+ AutomaticTranslationPreference(
+ automaticTranslationListPreferences = getAutomaticTranslationListPreferences(),
+ hasLanguageError = true,
+ onItemClick = {},
+ )
+ }
+}
+
+@Composable
+@Preview
+private fun AutomaticTranslationPreferencePrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ AutomaticTranslationPreference(
+ automaticTranslationListPreferences = getAutomaticTranslationListPreferences(),
+ onItemClick = {},
+ )
+ }
+}
+
+@Composable
+@Preview
+private fun AutomaticTranslationPreferenceErrorPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ AutomaticTranslationPreference(
+ automaticTranslationListPreferences = getAutomaticTranslationListPreferences(),
+ hasLanguageError = true,
+ onItemClick = {},
+ )
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/downloadlanguages/DownloadLanguagesPreference.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/downloadlanguages/DownloadLanguagesPreference.kt
@@ -5,11 +5,9 @@
package org.mozilla.fenix.translations.preferences.downloadlanguages
import androidx.compose.foundation.LocalIndication
-import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
@@ -24,6 +22,7 @@ import androidx.compose.material3.HorizontalDivider
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.remember
@@ -42,6 +41,7 @@ import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.concept.engine.translate.Language
@@ -56,6 +56,7 @@ import org.mozilla.fenix.compose.InfoType
import org.mozilla.fenix.compose.LinkText
import org.mozilla.fenix.compose.LinkTextState
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import org.mozilla.fenix.translations.DownloadIconIndicator
import org.mozilla.fenix.translations.DownloadInProgressIndicator
import java.util.Locale
@@ -133,11 +134,7 @@ fun DownloadLanguagesPreference(
}
}
- Column(
- modifier = Modifier.background(
- color = FirefoxTheme.colors.layer1,
- ),
- ) {
+ Surface {
LazyColumn {
item {
DownloadLanguagesHeaderPreference(
@@ -263,7 +260,7 @@ private fun DownloadLanguagesHeader(title: String) {
.semantics { heading() }
.defaultMinSize(minHeight = 36.dp)
.wrapContentHeight(),
- color = MaterialTheme.colorScheme.tertiary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.headline8,
)
}
@@ -377,8 +374,8 @@ private fun DownloadLanguagesHeaderPreference(
learnMoreText,
),
linkTextStates = listOf(learnMoreState),
- style = FirefoxTheme.typography.subtitle1.copy(
- color = FirefoxTheme.colors.textPrimary,
+ style = FirefoxTheme.typography.body1.copy(
+ color = MaterialTheme.colorScheme.onSurface,
),
linkTextDecoration = TextDecoration.Underline,
)
@@ -441,10 +438,10 @@ private fun IconDownloadLanguageItemPreference(
) {
Icon(
painter = painterResource(
- id = R.drawable.ic_delete,
+ id = iconsR.drawable.mozac_ic_delete_24,
),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
@@ -452,10 +449,10 @@ private fun IconDownloadLanguageItemPreference(
ModelState.NOT_DOWNLOADED, ModelState.ERROR_DOWNLOAD -> {
Icon(
painter = painterResource(
- id = R.drawable.ic_download,
+ id = iconsR.drawable.mozac_ic_download_24,
),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
+ tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
@@ -515,16 +512,17 @@ private fun TextListItemInlineDescription(
Text(
buildAnnotatedString {
- withStyle(style = SpanStyle(color = FirefoxTheme.colors.textPrimary)) {
+ withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.onSurface)) {
append(label)
}
- withStyle(style = SpanStyle(color = FirefoxTheme.colors.textSecondary)) {
+ withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.onSurfaceVariant)) {
append(text.substringAfter(label))
}
},
style = FirefoxTheme.typography.subtitle1,
)
}
+
IconButton(
onClick = { onClick.invoke() },
enabled = enabled,
@@ -591,6 +589,26 @@ internal fun getLanguageListPreference(): List<DownloadLanguageItemPreference> {
type = DownloadLanguageItemTypePreference.AllLanguages,
),
)
+ add(
+ DownloadLanguageItemPreference(
+ languageModel = LanguageModel(
+ language = Language(Locale.FRENCH.toLanguageTag(), Locale.FRENCH.displayName),
+ status = ModelState.ERROR_DELETION,
+ size = 10000L,
+ ),
+ type = DownloadLanguageItemTypePreference.PivotLanguage,
+ ),
+ )
+ add(
+ DownloadLanguageItemPreference(
+ languageModel = LanguageModel(
+ language = Language(Locale.CHINESE.toLanguageTag(), Locale.CHINESE.displayName),
+ status = ModelState.ERROR_DOWNLOAD,
+ size = 10000L,
+ ),
+ type = DownloadLanguageItemTypePreference.PivotLanguage,
+ ),
+ )
}
}
@@ -607,3 +625,17 @@ private fun DownloadLanguagesPreferencePreview() {
)
}
}
+
+@Composable
+@Preview
+private fun DownloadLanguagesPreferencePrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ DownloadLanguagesPreference(
+ downloadLanguageItemPreferences = getLanguageListPreference(),
+ learnMoreUrl = "https://www.mozilla.org",
+ fileSizeFormatter = DefaultFileSizeFormatter(LocalContext.current),
+ onLearnMoreClicked = {},
+ onItemClick = {},
+ )
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/nevertranslatesite/NeverTranslateSitesPreference.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/preferences/nevertranslatesite/NeverTranslateSitesPreference.kt
@@ -4,14 +4,13 @@
package org.mozilla.fenix.translations.preferences.nevertranslatesite
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@@ -23,6 +22,7 @@ import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import org.mozilla.fenix.R
@@ -30,6 +30,7 @@ import org.mozilla.fenix.compose.InfoCard
import org.mozilla.fenix.compose.InfoType
import org.mozilla.fenix.compose.list.TextListItem
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
/**
@@ -45,12 +46,7 @@ fun NeverTranslateSitesPreference(
hasNeverTranslateSitesError: Boolean,
onItemClick: (String) -> Unit,
) {
- Column(
- modifier = Modifier
- .background(
- color = FirefoxTheme.colors.layer1,
- ),
- ) {
+ Surface {
LazyColumn {
item {
TextListItem(
@@ -135,3 +131,36 @@ private fun NeverTranslateSitePreferencePreview() {
) {}
}
}
+
+@Composable
+@PreviewLightDark
+private fun NeverTranslateSitePreferenceErrorPreview() {
+ FirefoxTheme {
+ NeverTranslateSitesPreference(
+ neverTranslateSitesListPreferences = getNeverTranslateSitesList(),
+ hasNeverTranslateSitesError = true,
+ ) {}
+ }
+}
+
+@Composable
+@Preview
+private fun NeverTranslateSitePreferencePrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ NeverTranslateSitesPreference(
+ neverTranslateSitesListPreferences = getNeverTranslateSitesList(),
+ hasNeverTranslateSitesError = false,
+ ) {}
+ }
+}
+
+@Composable
+@Preview
+private fun NeverTranslateSitePreferenceErrorPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ NeverTranslateSitesPreference(
+ neverTranslateSitesListPreferences = getNeverTranslateSitesList(),
+ hasNeverTranslateSitesError = true,
+ ) {}
+ }
+}
