commit 6356d659e481289ec28192ba8deda38acb163aa1
parent eb3b190e4721a3bc65ad36e79b3e8d87361561f6
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 23:02:15 +0000
Bug 1998092 - Part 6: Migrate ExceptionsListScreen to M3 Acorn specs r=android-reviewers,007
- No proper Figma for DNS over HTTPs.
- Emulated M3 specs from the Exception Settings screens https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=989-27404&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D272012
Diffstat:
1 file changed, 70 insertions(+), 71 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/exceptionslist/ExceptionsListScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/exceptionslist/ExceptionsListScreen.kt
@@ -4,30 +4,32 @@
package org.mozilla.fenix.settings.doh.exceptionslist
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
-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
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
-import mozilla.components.compose.base.button.OutlinedButton
+import mozilla.components.compose.base.button.DestructiveButton
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.list.FaviconListItem
+import org.mozilla.fenix.compose.list.IconListItem
import org.mozilla.fenix.settings.doh.DohSettingsState
import org.mozilla.fenix.settings.doh.ProtectionLevel
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
/**
@@ -45,93 +47,90 @@ internal fun ExceptionsListScreen(
onRemoveClicked: (String) -> Unit = {},
onRemoveAllClicked: () -> Unit = {},
) {
- Column(
- modifier = Modifier
- .fillMaxSize()
- .background(FirefoxTheme.colors.layer1)
- .verticalScroll(rememberScrollState()),
- ) {
- Row(
+ Surface {
+ Column(
modifier = Modifier
- .padding(horizontal = 16.dp, vertical = 6.dp),
+ .fillMaxSize()
+ .verticalScroll(rememberScrollState()),
) {
+ Spacer(modifier = Modifier.height(8.dp))
+
Text(
text = stringResource(
R.string.preference_doh_exceptions_summary,
stringResource(id = R.string.app_name),
),
- color = FirefoxTheme.colors.textSecondary,
- style = FirefoxTheme.typography.body2,
+ modifier = Modifier.padding(horizontal = 16.dp),
+ color = MaterialTheme.colorScheme.onSurface,
+ style = FirefoxTheme.typography.body1,
)
- }
- state.exceptionsList.forEach { exception ->
- FaviconListItem(
- label = exception,
- url = exception,
- iconPainter = painterResource(R.drawable.ic_close),
- onIconClick = { onRemoveClicked(exception) },
- )
- }
+ Spacer(modifier = Modifier.height(16.dp))
- Row(
- modifier = Modifier
- .fillMaxWidth()
- .padding(horizontal = 16.dp, vertical = 6.dp)
- .clickable { onAddExceptionsClicked() },
- verticalAlignment = Alignment.CenterVertically,
- ) {
- Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_plus_24),
- contentDescription = stringResource(R.string.preference_doh_add_site_description),
- tint = FirefoxTheme.colors.iconPrimary,
- modifier = Modifier.padding(16.dp),
+ state.exceptionsList.forEach { exception ->
+ FaviconListItem(
+ label = exception,
+ url = exception,
+ iconPainter = painterResource(iconsR.drawable.mozac_ic_cross_24),
+ onIconClick = { onRemoveClicked(exception) },
+ )
+ }
+
+ IconListItem(
+ label = stringResource(R.string.preference_doh_exceptions_add),
+ onClick = onAddExceptionsClicked,
+ beforeIconPainter = painterResource(iconsR.drawable.mozac_ic_plus_24),
+ beforeIconDescription = stringResource(R.string.preference_doh_add_site_description),
)
- Text(
- text = stringResource(R.string.preference_doh_exceptions_add),
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.subtitle1,
+ DestructiveButton(
+ text = stringResource(R.string.preference_doh_exceptions_remove_all_exceptions),
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(
+ vertical = 12.dp,
+ horizontal = 16.dp,
+ ),
+ onClick = onRemoveAllClicked,
)
}
-
- OutlinedButton(
- text = stringResource(R.string.preference_doh_exceptions_remove_all_exceptions),
- modifier = Modifier
- .fillMaxWidth()
- .padding(
- vertical = 12.dp,
- horizontal = 16.dp,
- ),
- contentColor = FirefoxTheme.colors.textActionTertiary,
- containerColor = FirefoxTheme.colors.actionTertiary,
- onClick = onRemoveAllClicked,
- )
}
}
+private fun createState() = DohSettingsState(
+ allProtectionLevels = listOf(
+ ProtectionLevel.Default,
+ ProtectionLevel.Increased,
+ ProtectionLevel.Max,
+ ProtectionLevel.Off,
+ ),
+ selectedProtectionLevel = ProtectionLevel.Off,
+ providers = emptyList(),
+ selectedProvider = null,
+ exceptionsList = listOf(
+ "example1.com",
+ "example2.com",
+ "example3.com",
+ ),
+ isUserExceptionValid = true,
+)
+
@Composable
@FlexibleWindowLightDarkPreview
private fun ExceptionsListScreenPreview() {
FirefoxTheme {
ExceptionsListScreen(
- state = DohSettingsState(
- allProtectionLevels = listOf(
- ProtectionLevel.Default,
- ProtectionLevel.Increased,
- ProtectionLevel.Max,
- ProtectionLevel.Off,
- ),
- selectedProtectionLevel = ProtectionLevel.Off,
- providers = emptyList(),
- selectedProvider = null,
- exceptionsList = listOf(
- "example1.com",
- "example2.com",
- "example3.com",
- ),
- isUserExceptionValid = true,
- ),
+ state = createState(),
+ )
+ }
+}
+
+@Composable
+@Preview
+private fun ExceptionsListScreenPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ ExceptionsListScreen(
+ state = createState(),
)
}
}
