commit e9ae12ff55fd2c356bc728d6eb5d7249b7e79dfc parent e12f6e82a50bc16fb40f51305532237dcd1c907f Author: Sandor Molnar <smolnar@mozilla.com> Date: Thu, 20 Nov 2025 23:54:08 +0200 Revert "Bug 1998092 - Part 10: Migrate DataChoicesScreen to M3 Acorn specs r=android-reviewers,007" for causing fenix ui failures This reverts commit 4482657f0815b712ed9b5db618d64ca16d842637. Revert "Bug 1998092 - Part 9: Extract a reusable Settings Section Header from DataChoicesScreen r=android-reviewers,007" This reverts commit b7e969f64f8c015d42582619d367e638758c6ced. Revert "Bug 1998092 - Part 8: Migrate InfoScreen to M3 Acorn specs r=android-reviewers,007" This reverts commit b6f028ef74091acc3e1938de4e6ec63f25c2033b. Revert "Bug 1998092 - Part 7: Migrate DohSettingsScreen to M3 Acorn specs r=android-reviewers,007" This reverts commit e939cbb6ebedcdc1599dab5b82ad5ae41b1c3b4f. Revert "Bug 1998092 - Part 6: Migrate ExceptionsListScreen to M3 Acorn specs r=android-reviewers,007" This reverts commit 5f4931fd2a8c5bce6b736dec23e4ad8e7e4eb12a. Revert "Bug 1998092 - Part 5: Migrate AddExceptionScreen to M3 Acorn specs r=android-reviewers,007" This reverts commit 60b6a4be0b6a0fe619c9461fb6e1c114373d4faa. Diffstat:
7 files changed, 378 insertions(+), 514 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt @@ -33,7 +33,6 @@ import androidx.compose.material3.ListItemColors import androidx.compose.material3.ListItemDefaults import androidx.compose.material3.LocalContentColor import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.material3.Switch import androidx.compose.material3.Text import androidx.compose.material3.VerticalDivider @@ -90,8 +89,6 @@ private val EmptyListItemSlot: @Composable RowScope.() -> Unit = {} * @param overline An optional text shown above the label. * @param description An optional description text below the label. * @param maxDescriptionLines An optional maximum number of lines for the description text to span. - * @param enabled Controls the enabled state of the list item. When `false`, the list item will not - * be clickable. * @param minHeight An optional minimum height for the list item. * @param onClick Called when the user clicks on the item. * @param onLongClick Called when the user long clicks on the item. @@ -109,7 +106,6 @@ fun TextListItem( overline: String? = null, description: String? = null, maxDescriptionLines: Int = 1, - enabled: Boolean = true, minHeight: Dp = LIST_ITEM_HEIGHT, onClick: (() -> Unit)? = null, onLongClick: (() -> Unit)? = null, @@ -125,7 +121,6 @@ fun TextListItem( overline = overline, description = description, maxDescriptionLines = maxDescriptionLines, - enabled = enabled, minHeight = minHeight, onClick = onClick, onLongClick = onLongClick, @@ -974,7 +969,7 @@ private fun ListItemContent( description?.let { Text( text = description, - color = if (enabled) colors.supportingTextColor else colors.disabledHeadlineColor, + color = colors.supportingTextColor, overflow = TextOverflow.Ellipsis, maxLines = maxDescriptionLines, style = FirefoxTheme.typography.body2, @@ -991,11 +986,6 @@ private fun TextListItemPreview() { FirefoxTheme { Box(Modifier.background(MaterialTheme.colorScheme.surface)) { TextListItem(label = "Label only") - - TextListItem( - label = "Label only - disabled", - enabled = false, - ) } } } @@ -1004,19 +994,11 @@ private fun TextListItemPreview() { @Preview(name = "TextListItem with a description", uiMode = Configuration.UI_MODE_NIGHT_YES) private fun TextListItemWithDescriptionPreview() { FirefoxTheme { - Surface { - Column { - TextListItem( - label = "Label + description", - description = "Description text", - ) - - TextListItem( - label = "Label + description - disabled", - description = "Description text", - enabled = false, - ) - } + Box(Modifier.background(MaterialTheme.colorScheme.surface)) { + TextListItem( + label = "Label + description", + description = "Description text", + ) } } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/settings/SettingsSectionHeader.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/settings/SettingsSectionHeader.kt @@ -1,51 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -package org.mozilla.fenix.compose.settings - -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark -import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme - -/** - * Settings section header. - * - * @param text The header string. - * @param modifier [Modifier] to be applied to the layout. - */ -@Composable -fun SettingsSectionHeader(text: String, modifier: Modifier = Modifier) { - Text( - text = text, - style = FirefoxTheme.typography.headline8, - color = MaterialTheme.colorScheme.onSurfaceVariant, - modifier = modifier, - ) -} - -@Composable -@PreviewLightDark -private fun SettingsSectionHeaderPreview() { - FirefoxTheme { - Surface { - SettingsSectionHeader("Settings") - } - } -} - -@Composable -@Preview -private fun SettingsSectionHeaderPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - Surface { - SettingsSectionHeader("Settings") - } - } -} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/datachoices/DataChoicesScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/datachoices/DataChoicesScreen.kt @@ -4,9 +4,11 @@ package org.mozilla.fenix.settings.datachoices +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement 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 @@ -15,18 +17,20 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Surface +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Switch +import androidx.compose.material3.SwitchDefaults import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview import mozilla.components.lib.crash.store.CrashReportOption @@ -35,11 +39,7 @@ import org.mozilla.fenix.R import org.mozilla.fenix.compose.LinkText import org.mozilla.fenix.compose.LinkTextState import org.mozilla.fenix.compose.list.RadioButtonListItem -import org.mozilla.fenix.compose.list.SwitchListItem -import org.mozilla.fenix.compose.list.TextListItem -import org.mozilla.fenix.compose.settings.SettingsSectionHeader import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme /** * Composable function that renders the Data Choices settings screen. @@ -65,21 +65,18 @@ internal fun DataChoicesScreen( val learnMoreDailyUsage: () -> Unit = { store.dispatch(LearnMore.UsagePingLearnMoreClicked) } val learnMoreCrashReport: () -> Unit = { store.dispatch(LearnMore.CrashLearnMoreClicked) } val learnMoreMarketingData: () -> Unit = { store.dispatch(LearnMore.MeasurementDataLearnMoreClicked) } - - Surface { - DataChoicesUi( - state = state, - onStudiesClick = onStudiesClick, - onTelemetryToggle = onTelemetryToggle, - onUsagePingToggle = onUsagePingToggle, - onMarketingDataToggled = onMarketingDataToggled, - onCrashOptionSelected = onCrashOptionSelected, - learnMoreTechnicalData = learnMoreTechnicalData, - learnMoreDailyUsage = learnMoreDailyUsage, - learnMoreCrashReport = learnMoreCrashReport, - learnMoreMarketingData = learnMoreMarketingData, - ) - } + DataChoicesUi( + state = state, + onStudiesClick = onStudiesClick, + onTelemetryToggle = onTelemetryToggle, + onUsagePingToggle = onUsagePingToggle, + onMarketingDataToggled = onMarketingDataToggled, + onCrashOptionSelected = onCrashOptionSelected, + learnMoreTechnicalData = learnMoreTechnicalData, + learnMoreDailyUsage = learnMoreDailyUsage, + learnMoreCrashReport = learnMoreCrashReport, + learnMoreMarketingData = learnMoreMarketingData, + ) } @Suppress("LongParameterList") @@ -99,8 +96,10 @@ internal fun DataChoicesUi( Column( modifier = Modifier .fillMaxSize() + .background(FirefoxTheme.colors.layer1) .verticalScroll(rememberScrollState()) - .padding(top = 8.dp, bottom = 38.dp), + .padding(top = 10.dp, bottom = 38.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), ) { // Technical Data Section TogglePreferenceSection( @@ -113,7 +112,7 @@ internal fun DataChoicesUi( onLearnMoreClicked = learnMoreTechnicalData, ) - HorizontalDivider(modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)) + HorizontalDivider() StudiesSection( studiesEnabled = state.studiesEnabled, @@ -121,7 +120,7 @@ internal fun DataChoicesUi( onClick = onStudiesClick, ) - HorizontalDivider(modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)) + HorizontalDivider() // Usage Data Section TogglePreferenceSection( @@ -134,7 +133,7 @@ internal fun DataChoicesUi( onLearnMoreClicked = learnMoreDailyUsage, ) - HorizontalDivider(modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)) + HorizontalDivider() // Crash reports section CrashReportsSection( @@ -144,7 +143,7 @@ internal fun DataChoicesUi( onLearnMoreClicked = learnMoreCrashReport, ) - HorizontalDivider(modifier = Modifier.padding(top = 16.dp, bottom = 24.dp)) + HorizontalDivider() // Campaign measurement Section TogglePreferenceSection( @@ -173,22 +172,23 @@ private fun CrashReportsSection( selectedOption: CrashReportOption = CrashReportOption.Ask, onOptionSelected: (CrashReportOption) -> Unit, onLearnMoreClicked: () -> Unit, -) { - Column { - SettingsSectionHeader( + ) { + Column( + verticalArrangement = Arrangement.spacedBy(16.dp), + modifier = Modifier + .fillMaxWidth(), + ) { + TitleText( text = stringResource(R.string.crash_reports_data_category), - modifier = Modifier.padding(horizontal = FirefoxTheme.layout.space.dynamic200), - ) - - Spacer(modifier = Modifier.height(16.dp)) - - Text( - text = stringResource(R.string.crash_reporting_description), - modifier = Modifier.padding(horizontal = FirefoxTheme.layout.space.dynamic200), - style = FirefoxTheme.typography.body2, - ) + modifier = Modifier + .padding(horizontal = 16.dp), + ) - Spacer(modifier = Modifier.height(16.dp)) + SectionBodyText( + stringResource(R.string.crash_reporting_description), + Modifier + .padding(horizontal = 16.dp), + ) Column( verticalArrangement = Arrangement.spacedBy(6.dp), @@ -203,18 +203,36 @@ private fun CrashReportsSection( testTagsAsResourceId = true }, maxLabelLines = 1, + description = null, maxDescriptionLines = 1, onClick = { onOptionSelected(crashReportOption) }, ) } } - - Spacer(modifier = Modifier.height(16.dp)) - LearnMoreLink(onLearnMoreClicked, learnMoreText) } } +@Composable +private fun TitleText(text: String, modifier: Modifier) { + Text( + text = text, + style = FirefoxTheme.typography.body2, + color = MaterialTheme.colorScheme.tertiary, + modifier = modifier, + ) +} + +@Composable +private fun SectionBodyText(text: String, modifier: Modifier = Modifier) { + Text( + text = text, + style = FirefoxTheme.typography.body2, + color = FirefoxTheme.colors.textSecondary, + modifier = modifier, + ) +} + /** * Composable section that displays a toggleable user preference with a title, summary, * and an optional "Learn More" link. @@ -238,27 +256,53 @@ private fun TogglePreferenceSection( onLearnMoreClicked: () -> Unit, ) { Column( - modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(16.dp), + modifier = Modifier + .fillMaxWidth() + .background(FirefoxTheme.colors.layer1), ) { - SettingsSectionHeader( - text = categoryTitle, - modifier = Modifier.padding(horizontal = FirefoxTheme.layout.space.dynamic200), - ) - - Spacer(modifier = Modifier.height(16.dp)) - - SwitchListItem( - label = preferenceTitle, - checked = isToggled, - maxLabelLines = Int.MAX_VALUE, - description = preferenceSummary, - maxDescriptionLines = Int.MAX_VALUE, - showSwitchAfter = true, - onClick = { onToggleChanged() }, - ) - - Spacer(modifier = Modifier.height(16.dp)) + TitleText(categoryTitle, Modifier.padding(horizontal = 16.dp)) + + // Section Body + Row( + horizontalArrangement = Arrangement.spacedBy(16.dp), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + .clickable( + onClick = { onToggleChanged() }, + ) + .padding(horizontal = 16.dp), + ) { + Column( + modifier = Modifier + .weight(1f), + ) { + Text( + text = preferenceTitle, + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, + ) + Spacer(modifier = Modifier.height(4.dp)) + SectionBodyText(preferenceSummary) + } + Switch( + checked = isToggled, + onCheckedChange = { onToggleChanged() }, + colors = SwitchDefaults.colors( + checkedThumbColor = FirefoxTheme.colors.formOn, + checkedTrackColor = FirefoxTheme.colors.formSurface, + uncheckedThumbColor = FirefoxTheme.colors.formOff, + uncheckedTrackColor = FirefoxTheme.colors.formSurface, + ), + modifier = Modifier + .semantics { + testTag = "data.collection.$preferenceTitle.toggle" + testTagsAsResourceId = true + }, + ) + } LearnMoreLink(onLearnMoreClicked, learnMoreText) } } @@ -281,19 +325,36 @@ private fun StudiesSection( ) { Column( verticalArrangement = Arrangement.spacedBy(16.dp), - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .background(FirefoxTheme.colors.layer1), ) { - SettingsSectionHeader( - text = stringResource(R.string.studies_data_category), - modifier = Modifier.padding(horizontal = FirefoxTheme.layout.space.dynamic200), + TitleText( + stringResource(R.string.studies_data_category), + Modifier.padding(horizontal = 16.dp), ) - TextListItem( - label = stringResource(R.string.studies_title), - description = stringResource(if (studiesEnabled) R.string.studies_on else R.string.studies_off), - enabled = sectionEnabled, - onClick = onClick, - ) + Column( + modifier = Modifier + .fillMaxWidth() + .then(if (sectionEnabled) Modifier.clickable(onClick = onClick) else Modifier) + .padding(horizontal = 16.dp), + ) { + Text( + text = stringResource(R.string.studies_title), + style = FirefoxTheme.typography.subtitle1, + color = if (sectionEnabled) { FirefoxTheme.colors.textPrimary } else { + FirefoxTheme.colors.textDisabled + }, + ) + Text( + text = stringResource(if (studiesEnabled) R.string.studies_on else R.string.studies_off), + style = FirefoxTheme.typography.body2, + color = if (sectionEnabled) { FirefoxTheme.colors.textSecondary } else { + FirefoxTheme.colors.textDisabled + }, + ) + } } } @@ -312,17 +373,24 @@ private fun LearnMoreLink(onLearnMoreClicked: () -> Unit, learnMoreText: String) onLearnMoreClicked() }, ) - Column( modifier = Modifier .clickable(onClick = { onLearnMoreClicked() }) .fillMaxWidth() - .padding(horizontal = FirefoxTheme.layout.space.dynamic200), + .padding(horizontal = 16.dp) + .padding(top = 16.dp), ) { LinkText( text = learnMoreText, linkTextStates = listOf(learnMoreState), + style = FirefoxTheme.typography.subtitle1.copy( + color = FirefoxTheme.colors.textPrimary, + textDecoration = TextDecoration.Underline, + ), + linkTextColor = FirefoxTheme.colors.textPrimary, linkTextDecoration = TextDecoration.Underline, + textAlign = TextAlign.Center, + shouldApplyAccessibleSize = false, ) } } @@ -338,45 +406,3 @@ private fun DataChoicesPreview() { ) } } - -@Preview -@Composable -private fun DataChoicesPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - DataChoicesScreen( - store = DataChoicesStore( - initialState = DataChoicesState(), - ), - ) - } -} - -@PreviewLightDark -@Composable -private fun DataChoicesTelemetryDisabledPreview() { - FirefoxTheme { - DataChoicesScreen( - store = DataChoicesStore( - initialState = DataChoicesState( - studiesEnabled = false, - telemetryEnabled = false, - ), - ), - ) - } -} - -@Preview -@Composable -private fun DataChoicesTelemetryDisabledPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - DataChoicesScreen( - store = DataChoicesStore( - initialState = DataChoicesState( - studiesEnabled = false, - telemetryEnabled = false, - ), - ), - ) - } -} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/addexception/AddExceptionScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/addexception/AddExceptionScreen.kt @@ -4,13 +4,11 @@ package org.mozilla.fenix.settings.doh.addexception +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column -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.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -18,7 +16,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier 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.FilledButton @@ -27,7 +24,6 @@ import org.mozilla.fenix.R 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 /** * Composable function that displays the exceptions list screen of DoH settings. @@ -41,35 +37,39 @@ internal fun AddExceptionScreen( onSaveClicked: (String) -> Unit = {}, ) { var urlInput by remember { mutableStateOf("") } - - Surface { - Column( + Column( + modifier = Modifier + .fillMaxSize() + .background(FirefoxTheme.colors.layer1), + ) { + TextField( + value = urlInput, + onValueChange = { + urlInput = it + }, + placeholder = stringResource(R.string.preference_doh_exceptions_add_placeholder), + errorText = stringResource(R.string.preference_doh_exceptions_add_error), + label = stringResource(R.string.preference_doh_exceptions_add_site), + isError = !state.isUserExceptionValid, + singleLine = true, modifier = Modifier - .fillMaxSize() - .padding(horizontal = 16.dp), - ) { - Spacer(modifier = Modifier.height(8.dp)) - - TextField( - value = urlInput, - onValueChange = { - urlInput = it - }, - placeholder = stringResource(R.string.preference_doh_exceptions_add_placeholder), - errorText = stringResource(R.string.preference_doh_exceptions_add_error), - label = stringResource(R.string.preference_doh_exceptions_add_site), - isError = !state.isUserExceptionValid, - singleLine = true, - ) - - Spacer(modifier = Modifier.height(24.dp)) + .fillMaxWidth() + .padding( + vertical = 12.dp, + horizontal = 16.dp, + ), + ) - FilledButton( - text = stringResource(R.string.preference_doh_exceptions_add_save), - modifier = Modifier.fillMaxWidth(), - onClick = { onSaveClicked(urlInput) }, - ) - } + FilledButton( + text = stringResource(R.string.preference_doh_exceptions_add_save), + modifier = Modifier + .fillMaxWidth() + .padding( + vertical = 12.dp, + horizontal = 16.dp, + ), + onClick = { onSaveClicked(urlInput) }, + ) } } @@ -94,25 +94,3 @@ private fun AddExceptionScreenPreview() { ) } } - -@Composable -@Preview -private fun AddExceptionScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - AddExceptionScreen( - state = DohSettingsState( - allProtectionLevels = listOf( - ProtectionLevel.Default, - ProtectionLevel.Increased, - ProtectionLevel.Max, - ProtectionLevel.Off, - ), - selectedProtectionLevel = ProtectionLevel.Off, - providers = emptyList(), - selectedProvider = null, - exceptionsList = emptyList(), - isUserExceptionValid = false, - ), - ) - } -} 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,32 +4,30 @@ 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.Spacer +import androidx.compose.foundation.layout.Row 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.MaterialTheme -import androidx.compose.material3.Surface +import androidx.compose.material3.Icon 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.DestructiveButton +import mozilla.components.compose.base.button.OutlinedButton 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 /** @@ -47,90 +45,93 @@ internal fun ExceptionsListScreen( onRemoveClicked: (String) -> Unit = {}, onRemoveAllClicked: () -> Unit = {}, ) { - Surface { - Column( + Column( + modifier = Modifier + .fillMaxSize() + .background(FirefoxTheme.colors.layer1) + .verticalScroll(rememberScrollState()), + ) { + Row( modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()), + .padding(horizontal = 16.dp, vertical = 6.dp), ) { - Spacer(modifier = Modifier.height(8.dp)) - Text( text = stringResource( R.string.preference_doh_exceptions_summary, stringResource(id = R.string.app_name), ), - modifier = Modifier.padding(horizontal = 16.dp), - color = MaterialTheme.colorScheme.onSurface, - style = FirefoxTheme.typography.body1, + color = FirefoxTheme.colors.textSecondary, + style = FirefoxTheme.typography.body2, ) + } - Spacer(modifier = Modifier.height(16.dp)) - - state.exceptionsList.forEach { exception -> - FaviconListItem( - label = exception, - url = exception, - iconPainter = painterResource(iconsR.drawable.mozac_ic_cross_24), - onIconClick = { onRemoveClicked(exception) }, - ) - } + state.exceptionsList.forEach { exception -> + FaviconListItem( + label = exception, + url = exception, + iconPainter = painterResource(R.drawable.ic_close), + 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), + 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), ) - DestructiveButton( - text = stringResource(R.string.preference_doh_exceptions_remove_all_exceptions), - modifier = Modifier - .fillMaxWidth() - .padding( - vertical = 12.dp, - horizontal = 16.dp, - ), - onClick = onRemoveAllClicked, + Text( + text = stringResource(R.string.preference_doh_exceptions_add), + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, ) } + + 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 = createState(), - ) - } -} - -@Composable -@Preview -private fun ExceptionsListScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - ExceptionsListScreen( - state = createState(), + 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, + ), ) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/info/InfoScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/info/InfoScreen.kt @@ -5,22 +5,19 @@ package org.mozilla.fenix.settings.doh.info import androidx.annotation.StringRes +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.material3.LocalContentColor import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextDecoration -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview import org.mozilla.fenix.R @@ -28,7 +25,6 @@ import org.mozilla.fenix.compose.LinkText import org.mozilla.fenix.compose.LinkTextState import org.mozilla.fenix.settings.SupportUtils import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme /** * Composable function that displays the info screen of DoH settings. @@ -59,24 +55,24 @@ internal fun InfoScreen( bulletText to sumoTopic } - Surface { - Column( - modifier = Modifier.fillMaxSize(), - ) { - Title( - title = title, - ) + Column( + modifier = Modifier + .fillMaxSize() + .background(FirefoxTheme.colors.layer1), + ) { + Title( + title = title, + ) - bulletPoints.forEach { (text, url) -> - val learnMoreUrl = url?.let { - SupportUtils.getGenericSumoURLForTopic(it) - } - BulletTextWithOptionalLink( - text = text, - learnMoreUrl = learnMoreUrl, - onLearnMoreClicked = onLearnMoreClicked, - ) + bulletPoints.forEach { (text, url) -> + val learnMoreUrl = url?.let { + SupportUtils.getGenericSumoURLForTopic(it) } + BulletTextWithOptionalLink( + text = text, + learnMoreUrl = learnMoreUrl, + onLearnMoreClicked = onLearnMoreClicked, + ) } } } @@ -96,7 +92,7 @@ private fun Title( ) { Text( text = title, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = MaterialTheme.colorScheme.tertiary, style = FirefoxTheme.typography.headline8, ) } @@ -108,8 +104,8 @@ private fun BulletTextWithOptionalLink( onLearnMoreClicked: (String) -> Unit, modifier: Modifier = Modifier, learnMoreUrl: String? = null, - color: Color = MaterialTheme.colorScheme.onSurfaceVariant, - style: TextStyle = FirefoxTheme.typography.body2, // Follows the same TextStyle of LinkText + color: Color = FirefoxTheme.colors.textPrimary, + style: TextStyle = FirefoxTheme.typography.subtitle1, ) { Row( modifier = modifier @@ -120,36 +116,47 @@ private fun BulletTextWithOptionalLink( bottom = 6.dp, ), ) { - CompositionLocalProvider(LocalContentColor provides color) { + Text( + text = "•", + modifier = Modifier.padding(end = 8.dp), + color = color, + ) + + if (learnMoreUrl == null) { Text( - text = "•", - modifier = Modifier.padding(end = 8.dp), + text = text, + color = color, style = style, ) - - if (learnMoreUrl == null) { - Text( - text = text, - style = style, - ) - } else { - LinkText( - text = text, - linkTextStates = listOf( - LinkTextState( - text = stringResource(R.string.preference_doh_learn_more), - url = learnMoreUrl, - onClick = { onLearnMoreClicked(it) }, - ), + } else { + LinkText( + text = text, + linkTextStates = listOf( + LinkTextState( + text = stringResource(R.string.preference_doh_learn_more), + url = learnMoreUrl, + onClick = { onLearnMoreClicked(it) }, ), - linkTextDecoration = TextDecoration.Underline, - style = style, - ) - } + ), + linkTextDecoration = TextDecoration.Underline, + style = style.copy( + color = color, + ), + ) } } } +@Composable +@FlexibleWindowLightDarkPreview +private fun InfoScreenPreview() { + FirefoxTheme { + InfoScreen( + infoScreenTopic = InfoScreenTopic.DEFAULT, + ) + } +} + /** * Holds the resource for each bullet line, plus any string resource IDs * that you want to use as placeholders. @@ -206,23 +213,3 @@ internal enum class InfoScreenTopic( ), ), } - -@Composable -@FlexibleWindowLightDarkPreview -private fun InfoScreenPreview() { - FirefoxTheme { - InfoScreen( - infoScreenTopic = InfoScreenTopic.DEFAULT, - ) - } -} - -@Composable -@Preview -private fun InfoScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - InfoScreen( - infoScreenTopic = InfoScreenTopic.DEFAULT, - ) - } -} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/root/DohSettingsScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/doh/root/DohSettingsScreen.kt @@ -4,6 +4,7 @@ package org.mozilla.fenix.settings.doh.root +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -19,8 +20,6 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material3.AlertDialog import androidx.compose.material3.HorizontalDivider 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.runtime.getValue @@ -34,12 +33,9 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextDecoration -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import mozilla.components.compose.base.Dropdown 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.MenuItem import mozilla.components.compose.base.text.Text @@ -48,14 +44,12 @@ import org.mozilla.fenix.R import org.mozilla.fenix.compose.LinkText import org.mozilla.fenix.compose.LinkTextState import org.mozilla.fenix.compose.button.RadioButton -import org.mozilla.fenix.compose.list.IconListItem import org.mozilla.fenix.settings.SupportUtils import org.mozilla.fenix.settings.doh.CustomProviderErrorState import org.mozilla.fenix.settings.doh.DohSettingsState import org.mozilla.fenix.settings.doh.ProtectionLevel import org.mozilla.fenix.settings.doh.Provider import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme import mozilla.components.ui.icons.R as iconsR /** @@ -85,33 +79,34 @@ internal fun DohSettingsScreen( onIncreasedInfoClicked: () -> Unit = {}, onMaxInfoClicked: () -> Unit = {}, ) { - Surface { - Column( - modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()), - ) { - DohSummary( - onLearnMoreClicked = onLearnMoreClicked, - ) + Column( + modifier = Modifier + .fillMaxSize() + .background(FirefoxTheme.colors.layer1) + .verticalScroll(rememberScrollState()), + ) { + DohSummary( + onLearnMoreClicked = onLearnMoreClicked, + ) - DohSelection( - state = state, - onDohOptionSelected = onDohOptionSelected, - onCustomClicked = onCustomClicked, - onCustomCancelClicked = onCustomCancelClicked, - onCustomAddClicked = onCustomAddClicked, - onDefaultInfoClicked = onDefaultInfoClicked, - onIncreasedInfoClicked = onIncreasedInfoClicked, - onMaxInfoClicked = onMaxInfoClicked, - ) + DohSelection( + state = state, + onDohOptionSelected = onDohOptionSelected, + onCustomClicked = onCustomClicked, + onCustomCancelClicked = onCustomCancelClicked, + onCustomAddClicked = onCustomAddClicked, + onDefaultInfoClicked = onDefaultInfoClicked, + onIncreasedInfoClicked = onIncreasedInfoClicked, + onMaxInfoClicked = onMaxInfoClicked, + ) - HorizontalDivider( - modifier = Modifier.padding(8.dp), - ) + HorizontalDivider( + modifier = Modifier + .fillMaxWidth() + .padding(8.dp), + ) - ExceptionsRow(onExceptionsClicked = onExceptionsClicked) - } + ExceptionsRow(onExceptionsClicked = onExceptionsClicked) } } @@ -135,10 +130,13 @@ private fun DohSummary( modifier = Modifier.weight(1f), ) { Text( - style = FirefoxTheme.typography.body1, + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, text = stringResource(R.string.preference_doh_title), ) + Spacer(modifier = Modifier.height(8.dp)) + LinkText( text = summary, linkTextStates = listOf( @@ -151,7 +149,10 @@ private fun DohSummary( ), ), linkTextDecoration = TextDecoration.Underline, - textAlign = TextAlign.Start, + style = FirefoxTheme.typography.body2.copy( + textAlign = TextAlign.Left, + color = FirefoxTheme.colors.textSecondary, + ), ) } } @@ -184,6 +185,7 @@ private fun DohProtectionLevel( RadioButton( selected = selected, onClick = onClick, + modifier = Modifier.align(Alignment.Top), ) Spacer(modifier = Modifier.width(8.dp)) @@ -200,15 +202,17 @@ private fun DohProtectionLevel( } if (showInfoIcon) { - IconButton( - onClick = onInfoClick, + Icon( + painter = painterResource(iconsR.drawable.mozac_ic_information_24), contentDescription = stringResource(R.string.preference_doh_info_description), - ) { - Icon( - painter = painterResource(iconsR.drawable.mozac_ic_information_24), - contentDescription = null, - ) - } + tint = FirefoxTheme.colors.iconPrimary, + modifier = Modifier + .padding(16.dp) + .align(Alignment.Top) + .clickable { + onInfoClick() + }, + ) } } } @@ -344,14 +348,17 @@ private fun ProviderSummary( summary: String, ) { Text( + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, text = label, - style = FirefoxTheme.typography.body1, ) + Spacer(modifier = Modifier.height(8.dp)) + Text( - text = summary, - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = FirefoxTheme.colors.textSecondary, style = FirefoxTheme.typography.body2, + text = summary, ) } @@ -451,7 +458,7 @@ private fun AlertDialogAddCustomProvider( title = { Text( text = stringResource(R.string.preference_doh_provider_custom_dialog_title), - style = FirefoxTheme.typography.headline5, + style = FirefoxTheme.typography.headline7, ) }, text = { @@ -493,7 +500,8 @@ private fun TextWithUnderline( text: String, modifier: Modifier = Modifier, showCustomProviderDialog: () -> Unit = {}, - underlineColor: Color = MaterialTheme.colorScheme.outline, + textColor: Color = FirefoxTheme.colors.textPrimary, + underlineColor: Color = FirefoxTheme.colors.formDefault, ) { Column( modifier = modifier, @@ -504,6 +512,7 @@ private fun TextWithUnderline( .clickable { showCustomProviderDialog() }, + color = textColor, style = FirefoxTheme.typography.body2, text = text, ) @@ -521,12 +530,24 @@ private fun TextWithUnderline( @Composable private fun ExceptionsRow(onExceptionsClicked: () -> Unit) { - IconListItem( - label = stringResource(R.string.preference_doh_exceptions), - onClick = onExceptionsClicked, - beforeIconPainter = painterResource(iconsR.drawable.mozac_ic_globe_24), - beforeIconDescription = stringResource(R.string.preference_doh_exceptions_description), - ) + Row( + modifier = Modifier + .fillMaxWidth() + .clickable { onExceptionsClicked() }, + verticalAlignment = Alignment.CenterVertically, + ) { + Icon( + painter = painterResource(R.drawable.ic_internet), + contentDescription = stringResource(R.string.preference_doh_exceptions_description), + tint = FirefoxTheme.colors.iconPrimary, + modifier = Modifier.padding(16.dp), + ) + Text( + text = stringResource(R.string.preference_doh_exceptions), + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, + ) + } } @Composable @@ -582,83 +603,3 @@ private fun DohScreenCustomProviderPreview() { ) } } - -@Composable -@Preview -private fun DohScreenDefaultProviderPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - val provider = Provider.BuiltIn( - url = "https://mozilla.cloudflare-dns.com/dns-query", - name = "Cloudflare", - default = true, - ) - DohSettingsScreen( - state = DohSettingsState( - allProtectionLevels = listOf( - ProtectionLevel.Default, - ProtectionLevel.Increased, - ProtectionLevel.Max, - ProtectionLevel.Off, - ), - selectedProtectionLevel = ProtectionLevel.Increased, - providers = listOf( - provider, - ), - selectedProvider = provider, - exceptionsList = emptyList(), - isUserExceptionValid = true, - ), - ) - } -} - -@Composable -@Preview -private fun DohScreenCustomProviderPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - val provider = Provider.Custom(url = "") - DohSettingsScreen( - state = DohSettingsState( - allProtectionLevels = listOf( - ProtectionLevel.Default, - ProtectionLevel.Increased, - ProtectionLevel.Max, - ProtectionLevel.Off, - ), - selectedProtectionLevel = ProtectionLevel.Increased, - providers = listOf( - provider, - ), - selectedProvider = provider, - exceptionsList = emptyList(), - isUserExceptionValid = true, - ), - ) - } -} - -@Composable -@PreviewLightDark -private fun AlertDialogAddCustomProviderPreview() { - FirefoxTheme { - AlertDialogAddCustomProvider( - customProviderUrl = "https://mozilla.cloudflare-dns.com/dns-query", - customProviderErrorState = CustomProviderErrorState.Valid, - onCustomCancelClicked = {}, - onCustomAddClicked = {}, - ) - } -} - -@Composable -@Preview -private fun AlertDialogAddCustomProviderPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - AlertDialogAddCustomProvider( - customProviderUrl = "https://mozilla.cloudflare-dns.com/dns-query", - customProviderErrorState = CustomProviderErrorState.Invalid, - onCustomCancelClicked = {}, - onCustomAddClicked = {}, - ) - } -}