commit 9d14c5e45630dd4f4708f2b567adf790b47eeb5d parent 4c3d4a1337d9633a495f2a16e558807ecf0568b9 Author: John Oberhauser <j.git-global@obez.io> Date: Fri, 9 Jan 2026 19:33:50 +0000 Bug 2009058 - Part 5: Refactoring compose previews to use @PreviewParameter for private mode themed previews r=android-reviewers,007 Differential Revision: https://phabricator.services.mozilla.com/D278390 Diffstat:
22 files changed, 232 insertions(+), 599 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/ManagePrivacyPreferencesDialog.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/ManagePrivacyPreferencesDialog.kt @@ -22,11 +22,11 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.TextButton import mozilla.components.lib.state.ext.observeAsState import org.mozilla.fenix.R @@ -37,6 +37,7 @@ import org.mozilla.fenix.onboarding.store.PrivacyPreferencesAction import org.mozilla.fenix.onboarding.store.PrivacyPreferencesStore import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider /** * Dialog to manage privacy preferences during onboarding. @@ -185,18 +186,12 @@ private fun PositiveButton(onDismissRequest: () -> Unit) { } } -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun ManagePrivacyPreferencesDialogPreview() { - FirefoxTheme { - ManagePrivacyPreferencesDialog(PrivacyPreferencesStore(), {}, {}, {}) - } -} - -@Preview -@Composable -private fun ManagePrivacyPreferencesDialogPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun ManagePrivacyPreferencesDialogPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { ManagePrivacyPreferencesDialog(PrivacyPreferencesStore(), {}, {}, {}) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/pbmlock/UnlockPrivateTabsScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/pbmlock/UnlockPrivateTabsScreen.kt @@ -4,7 +4,6 @@ package org.mozilla.fenix.pbmlock -import android.content.res.Configuration import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -24,8 +23,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.button.TextButton import mozilla.components.compose.base.utils.getResolvedAttrResId @@ -33,13 +33,10 @@ import org.mozilla.fenix.R import org.mozilla.fenix.ext.isLargeWindow import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider private const val FILL_WIDTH_LARGE_WINDOW = 0.5f private const val FILL_WIDTH_DEFAULT = 1.0f -private const val PHONE_WIDTH = 400 -private const val PHONE_HEIGHT = 640 -private const val TABLET_WIDTH = 700 -private const val TABLET_HEIGHT = 1280 /** * A screen allowing users to unlock their private tabs. @@ -143,32 +140,11 @@ private fun Footer(onUnlockClicked: () -> Unit, onLeaveClicked: () -> Unit, show } } -@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, widthDp = PHONE_WIDTH, heightDp = PHONE_HEIGHT) +@FlexibleWindowPreview @Composable -private fun ScreenPreviewLightPhone() = ScreenPreview(Theme.Light) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = PHONE_WIDTH, heightDp = PHONE_HEIGHT) -@Composable -private fun ScreenPreviewDarkPhone() = ScreenPreview(Theme.Dark) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = PHONE_WIDTH, heightDp = PHONE_HEIGHT) -@Composable -private fun ScreenPreviewPrivatePhone() = ScreenPreview(Theme.Private) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, widthDp = TABLET_WIDTH, heightDp = TABLET_HEIGHT) -@Composable -private fun ScreenPreviewLightTablet() = ScreenPreview(Theme.Light) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = TABLET_WIDTH, heightDp = TABLET_HEIGHT) -@Composable -private fun ScreenPreviewDarkTablet() = ScreenPreview(Theme.Dark) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = TABLET_WIDTH, heightDp = TABLET_HEIGHT) -@Composable -private fun ScreenPreviewPrivateTablet() = ScreenPreview(Theme.Private) - -@Composable -private fun ScreenPreview(theme: Theme) { +private fun ScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { FirefoxTheme(theme) { UnlockPrivateTabsScreen( onUnlockClicked = {}, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/perf/ProfilerReusableComposable.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/perf/ProfilerReusableComposable.kt @@ -28,13 +28,14 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import mozilla.components.compose.base.button.TextButton import org.mozilla.fenix.compose.list.RadioButtonListItem import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider /** * Top-level card container for profiler dialogs @@ -194,35 +195,15 @@ fun ProfilerErrorDialog( } } -@Composable -@PreviewLightDark -private fun ProfilerDialogueCardPreview() { - val radioOptions = listOf("Firefox", "Graphics", "Media", "Networking") - val selectedOption = remember { mutableStateOf("Firefox") } - - FirefoxTheme { - ProfilerDialogueCard { - radioOptions.forEach { text -> - ProfilerLabeledRadioButton( - text = text, - subText = "Sub", - selected = selectedOption.value == text, - onClick = { - selectedOption.value = text - }, - ) - } - } - } -} - -@Composable @Preview -private fun ProfilerDialogueCardPrivatePreview() { +@Composable +private fun ProfilerDialogueCardPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val radioOptions = listOf("Firefox", "Graphics", "Media", "Networking") val selectedOption = remember { mutableStateOf("Firefox") } - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { ProfilerDialogueCard { radioOptions.forEach { text -> ProfilerLabeledRadioButton( diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/reviewprompt/ui/CustomReviewPrompt.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/reviewprompt/ui/CustomReviewPrompt.kt @@ -36,9 +36,9 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.theme.surfaceDimVariant import mozilla.components.lib.state.ext.observeAsState @@ -51,6 +51,7 @@ import org.mozilla.fenix.reviewprompt.CustomReviewPromptState.Rate import org.mozilla.fenix.reviewprompt.CustomReviewPromptStore import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider /** * Prompt that can show either: @@ -263,12 +264,14 @@ private fun FeedbackStep(onLeaveFeedbackButtonClick: () -> Unit, modifier: Modif // *** Code below used for previews only *** // @OptIn(ExperimentalMaterial3Api::class) -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun BottomSheetPreview() { +private fun BottomSheetPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - FirefoxTheme { + FirefoxTheme(theme) { BottomSheet( sheetState = sheetState, customReviewPromptState = PrePrompt, @@ -282,12 +285,14 @@ private fun BottomSheetPreview() { } @OptIn(ExperimentalMaterial3Api::class) -@PreviewLightDark +@Preview @Composable -private fun PrePromptPreview() { +private fun PrePromptPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - FirefoxTheme { + FirefoxTheme(theme) { BottomSheet( sheetState = sheetState, customReviewPromptState = PrePrompt, @@ -301,12 +306,14 @@ private fun PrePromptPreview() { } @OptIn(ExperimentalMaterial3Api::class) -@PreviewLightDark +@Preview @Composable -private fun RatePromptPreview() { +private fun RatePromptPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - FirefoxTheme { + FirefoxTheme(theme) { BottomSheet( sheetState = sheetState, customReviewPromptState = Rate, @@ -320,31 +327,14 @@ private fun RatePromptPreview() { } @OptIn(ExperimentalMaterial3Api::class) -@PreviewLightDark -@Composable -private fun FeedbackPromptPreview() { - val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - - FirefoxTheme { - BottomSheet( - sheetState = sheetState, - customReviewPromptState = Feedback, - onDismissRequest = {}, - onNegativePrePromptButtonClick = {}, - onPositivePrePromptButtonClick = {}, - onRateButtonClick = {}, - onLeaveFeedbackButtonClick = {}, - ) - } -} - -@OptIn(ExperimentalMaterial3Api::class) @Preview @Composable -private fun FeedbackPromptPrivatePreview() { +private fun FeedbackPromptPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { BottomSheet( sheetState = sheetState, customReviewPromptState = Feedback, @@ -357,27 +347,12 @@ private fun FeedbackPromptPrivatePreview() { } } -@PreviewLightDark -@Composable -private fun FoxEmojiButtonPreview() { - FirefoxTheme { - Surface { - FoxEmojiButton( - emoji = painterResource(R.drawable.review_prompt_positive_button), - label = "It’s great!", - onClick = {}, - modifier = Modifier - .padding(16.dp) - .width(176.dp), - ) - } - } -} - @Preview @Composable -private fun FoxEmojiButtonPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun FoxEmojiButtonPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { Surface { FoxEmojiButton( emoji = painterResource(R.drawable.review_prompt_positive_button), @@ -392,45 +367,17 @@ private fun FoxEmojiButtonPrivatePreview() { } @OptIn(ExperimentalMaterial3Api::class) -@PreviewLightDark -@Composable -private fun InteractiveBottomSheetPreview() { - val store = CustomReviewPromptStore(PrePrompt) - val promptState by store.observeAsState(PrePrompt) { it } - - val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - - FirefoxTheme { - BottomSheet( - sheetState = sheetState, - customReviewPromptState = promptState, - onDismissRequest = {}, - onNegativePrePromptButtonClick = { - store.dispatch(CustomReviewPromptAction.PositivePrePromptButtonClicked) - }, - onPositivePrePromptButtonClick = { - store.dispatch(CustomReviewPromptAction.NegativePrePromptButtonClicked) - }, - onRateButtonClick = { - store.dispatch(CustomReviewPromptAction.RateButtonClicked) - }, - onLeaveFeedbackButtonClick = { - store.dispatch(CustomReviewPromptAction.LeaveFeedbackButtonClicked) - }, - ) - } -} - -@OptIn(ExperimentalMaterial3Api::class) @Preview @Composable -private fun InteractiveBottomSheetPrivatePreview() { +private fun InteractiveBottomSheetPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = CustomReviewPromptStore(PrePrompt) val promptState by store.observeAsState(PrePrompt) { it } val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { BottomSheet( sheetState = sheetState, customReviewPromptState = promptState, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/search/awesomebar/ClipboardSuggestionBar.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/search/awesomebar/ClipboardSuggestionBar.kt @@ -22,11 +22,12 @@ 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.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import org.mozilla.fenix.R import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -75,21 +76,12 @@ fun ClipboardSuggestionBar( } } -@PreviewLightDark -@Composable -private fun ClipboardBarPreview() { - FirefoxTheme { - ClipboardSuggestionBar( - shouldUseBottomToolbar = false, - onClick = {}, - ) - } -} - @Preview @Composable -private fun ClipboardBarPreviewPreview() { - FirefoxTheme(theme = Theme.Private) { +private fun ClipboardBarPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { ClipboardSuggestionBar( shouldUseBottomToolbar = false, onClick = {}, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/FontSizeSlider.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/FontSizeSlider.kt @@ -35,12 +35,13 @@ import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.mozilla.fenix.R import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import kotlin.math.roundToInt private const val HALF_ALPHA = 0.5F @@ -254,25 +255,12 @@ private fun FilledTrack(fraction: Float, isEnabled: Boolean) { ) {} } -@PreviewLightDark -@Composable -private fun FontSizePreferencePreview() { - FirefoxTheme { - FontSizePreference( - isEnabled = true, - value = 100f, - onValueChange = {}, - onValueChangeFinished = {}, - ) - } -} - @Preview @Composable -private fun PrivateFontSizePreferencePreview() { - FirefoxTheme( - theme = Theme.Private, - ) { +private fun FontSizePreferencePreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { FontSizePreference( isEnabled = true, value = 100f, @@ -282,25 +270,12 @@ private fun PrivateFontSizePreferencePreview() { } } -@PreviewLightDark -@Composable -private fun FontSizePreferenceDisabledPreview() { - FirefoxTheme { - FontSizePreference( - isEnabled = false, - value = 200f, - onValueChange = {}, - onValueChangeFinished = {}, - ) - } -} - @Preview @Composable -private fun PrivateFontSizePreferenceDisabledPreview() { - FirefoxTheme( - theme = Theme.Private, - ) { +private fun FontSizePreferenceDisabledPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { FontSizePreference( isEnabled = false, value = 200f, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/DeleteAddressDialog.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/DeleteAddressDialog.kt @@ -13,7 +13,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import mozilla.components.compose.base.button.TextButton import mozilla.components.lib.state.ext.observeAsState import org.mozilla.fenix.R @@ -24,6 +24,7 @@ import org.mozilla.fenix.settings.address.store.DialogState import org.mozilla.fenix.settings.address.store.ViewAppeared import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider /** * Dialog that is presented when deleting an address. @@ -61,30 +62,17 @@ internal fun DeleteAddressDialog(store: AddressStore) { } } -@PreviewLightDark -@Composable -private fun DeleteAddressDialogPreview() { - val store = AddressStore( - AddressState.initial().copy(deleteDialog = DialogState.Presenting), - listOf(), - ).also { it.dispatch(ViewAppeared) } - - FirefoxTheme { - Surface { - DeleteAddressDialog(store) - } - } -} - @Preview @Composable -private fun DeleteAddressDialogPrivatePreview() { +private fun DeleteAddressDialogPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = AddressStore( AddressState.initial().copy(deleteDialog = DialogState.Presenting), listOf(), ).also { it.dispatch(ViewAppeared) } - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { Surface { DeleteAddressDialog(store) } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/EditAddressScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/EditAddressScreen.kt @@ -30,11 +30,11 @@ import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import mozilla.components.browser.state.search.RegionState import mozilla.components.compose.base.Dropdown -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.DestructiveButton import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.button.OutlinedButton @@ -58,6 +58,7 @@ import org.mozilla.fenix.settings.address.store.isEditing import org.mozilla.fenix.settings.address.utils.generateAddress import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.compose.base.text.Text as DropdownText /** @@ -318,46 +319,28 @@ private fun createStore( listOf(), ).also { it.dispatch(ViewAppeared) } -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun AddAddressPreview() { - val store = createStore() - - FirefoxTheme { - EditAddressScreen(store) - } -} - -@Preview -@Composable -private fun AddAddressPrivatePreview() { +private fun AddAddressPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = createStore() - FirefoxTheme(theme = Theme.Private) { - EditAddressScreen(store) - } -} - -@FlexibleWindowLightDarkPreview -@Composable -private fun EditAddressPreview() { - val store = createStore( - address = generateAddress(), - ) - - FirefoxTheme { + FirefoxTheme(theme) { EditAddressScreen(store) } } -@Preview +@FlexibleWindowPreview @Composable -private fun EditAddressPrivatePreview() { +private fun EditAddressPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = createStore( address = generateAddress(), ) - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { EditAddressScreen(store) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/EditAddressTopBar.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/edit/EditAddressTopBar.kt @@ -18,7 +18,7 @@ import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import mozilla.components.compose.base.button.IconButton import mozilla.components.concept.storage.Address @@ -31,6 +31,7 @@ import org.mozilla.fenix.settings.address.store.SaveTapped import org.mozilla.fenix.settings.address.store.isEditing import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -101,44 +102,27 @@ private val AddressState.titleId: Int R.string.addresses_add_address } -@PreviewLightDark -@Composable -private fun AddTopBarPreview() { - val store = AddressStore(AddressState.initial(), listOf()) - - FirefoxTheme { - EditAddressTopBar(store) - } -} - @Preview @Composable -private fun AddTopBarPrivatePreview() { +private fun AddTopBarPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = AddressStore(AddressState.initial(), listOf()) - FirefoxTheme(theme = Theme.Private) { - EditAddressTopBar(store) - } -} - -@PreviewLightDark -@Composable -private fun EditTopBarPreview() { - val address = Address("BEEF", "Work", "Mozilla", "", "", "", "", "", "", "", "") - val store = AddressStore(AddressState.initial(address = address), listOf()) - - FirefoxTheme { + FirefoxTheme(theme) { EditAddressTopBar(store) } } @Preview @Composable -private fun EditTopBarPrivatePreview() { +private fun EditTopBarPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val address = Address("BEEF", "Work", "Mozilla", "", "", "", "", "", "", "", "") val store = AddressStore(AddressState.initial(address = address), listOf()) - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { EditAddressTopBar(store) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/list/AddressList.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/address/ui/list/AddressList.kt @@ -12,9 +12,9 @@ import androidx.compose.runtime.Composable 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.concept.storage.Address import org.mozilla.fenix.R import org.mozilla.fenix.compose.list.IconListItem @@ -22,6 +22,7 @@ import org.mozilla.fenix.compose.list.TextListItem import org.mozilla.fenix.settings.address.ext.getAddressLabel import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -78,24 +79,12 @@ private val addresses = listOf( ), ) -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun AddressListPreview() { - FirefoxTheme { - Surface { - AddressList( - addresses = addresses, - onAddressClick = {}, - onAddAddressButtonClick = {}, - ) - } - } -} - -@Preview -@Composable -private fun AddressListPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun AddressListPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { Surface { AddressList( addresses = addresses, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/biometric/ui/UnlockScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/biometric/ui/UnlockScreen.kt @@ -4,7 +4,6 @@ package org.mozilla.fenix.settings.biometric.ui -import android.content.res.Configuration import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -23,9 +22,9 @@ import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.button.TextButton import mozilla.components.compose.base.utils.getResolvedAttrResId @@ -33,13 +32,10 @@ import org.mozilla.fenix.R import org.mozilla.fenix.ext.isLargeWindow import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider private const val FILL_WIDTH_LARGE_WINDOW = 0.5f private const val FILL_WIDTH_DEFAULT = 1.0f -private const val PHONE_WIDTH = 400 -private const val PHONE_HEIGHT = 640 -private const val TABLET_WIDTH = 700 -private const val TABLET_HEIGHT = 1280 /** * A screen allowing users to unlock their logins. @@ -141,20 +137,11 @@ private fun Footer(onUnlockClicked: () -> Unit, onLeaveClicked: () -> Unit) { } } -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun UnlockLoginsScreenPreview() = UnlockLoginsScreenContent(Theme.getTheme()) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = PHONE_WIDTH, heightDp = PHONE_HEIGHT) -@Composable -private fun UnlockLoginsScreenPreviewPrivatePhone() = UnlockLoginsScreenContent(Theme.Private) - -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, widthDp = TABLET_WIDTH, heightDp = TABLET_HEIGHT) -@Composable -private fun UnlockLoginsScreenPreviewPrivateTablet() = UnlockLoginsScreenContent(Theme.Private) - -@Composable -private fun UnlockLoginsScreenContent(theme: Theme) { +private fun UnlockLoginsScreenContent( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { FirefoxTheme(theme) { UnlockScreen( title = "Unlock to view your secure feature", 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 @@ -26,9 +26,9 @@ import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.lib.crash.store.CrashReportOption import mozilla.components.lib.state.ext.observeAsComposableState import org.mozilla.fenix.R @@ -40,6 +40,7 @@ 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 +import org.mozilla.fenix.theme.ThemeProvider /** * Composable function that renders the Data Choices settings screen. @@ -333,10 +334,12 @@ private fun LearnMoreLink(onLearnMoreClicked: () -> Unit, learnMoreText: String) } } -@FlexibleWindowLightDarkPreview +@FlexibleWindowPreview @Composable -private fun DataChoicesPreview() { - FirefoxTheme { +private fun DataChoicesPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { DataChoicesScreen( store = DataChoicesStore( initialState = DataChoicesState(), @@ -347,20 +350,10 @@ private fun DataChoicesPreview() { @Preview @Composable -private fun DataChoicesPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - DataChoicesScreen( - store = DataChoicesStore( - initialState = DataChoicesState(), - ), - ) - } -} - -@PreviewLightDark -@Composable -private fun DataChoicesTelemetryDisabledPreview() { - FirefoxTheme { +private fun DataChoicesTelemetryDisabledPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { DataChoicesScreen( store = DataChoicesStore( initialState = DataChoicesState( @@ -374,23 +367,10 @@ private fun DataChoicesTelemetryDisabledPreview() { @Preview @Composable -private fun DataChoicesTelemetryDisabledPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - DataChoicesScreen( - store = DataChoicesStore( - initialState = DataChoicesState( - studiesEnabled = false, - telemetryEnabled = false, - ), - ), - ) - } -} - -@PreviewLightDark -@Composable -private fun DataChoicesMarketingSectionDisabledPreview() { - FirefoxTheme { +private fun DataChoicesMarketingSectionDisabledPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { DataChoicesScreen( store = DataChoicesStore( initialState = DataChoicesState( 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 @@ -18,9 +18,9 @@ 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.textfield.TextField import org.mozilla.fenix.R @@ -28,6 +28,7 @@ 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 org.mozilla.fenix.theme.ThemeProvider /** * Composable function that displays the exceptions list screen of DoH settings. @@ -73,32 +74,12 @@ internal fun AddExceptionScreen( } } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun AddExceptionScreenPreview() { - FirefoxTheme { - AddExceptionScreen( - state = DohSettingsState( - allProtectionLevels = listOf( - ProtectionLevel.Default, - ProtectionLevel.Increased, - ProtectionLevel.Max, - ProtectionLevel.Off, - ), - selectedProtectionLevel = ProtectionLevel.Off, - providers = emptyList(), - selectedProvider = null, - exceptionsList = emptyList(), - isUserExceptionValid = false, - ), - ) - } -} - -@Composable -@Preview -private fun AddExceptionScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun AddExceptionScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { AddExceptionScreen( state = DohSettingsState( allProtectionLevels = listOf( 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 @@ -19,9 +19,9 @@ import androidx.compose.runtime.Composable 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.DestructiveButton import org.mozilla.fenix.R import org.mozilla.fenix.compose.list.FaviconListItem @@ -30,6 +30,7 @@ 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 org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -115,20 +116,12 @@ private fun createState() = DohSettingsState( isUserExceptionValid = true, ) +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun ExceptionsListScreenPreview() { - FirefoxTheme { - ExceptionsListScreen( - state = createState(), - ) - } -} - -@Composable -@Preview -private fun ExceptionsListScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun ExceptionsListScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { ExceptionsListScreen( state = createState(), ) 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 @@ -20,15 +20,16 @@ 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import org.mozilla.fenix.R 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 +import org.mozilla.fenix.theme.ThemeProvider /** * Composable function that displays the info screen of DoH settings. @@ -207,20 +208,12 @@ internal enum class InfoScreenTopic( ), } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun InfoScreenPreview() { - FirefoxTheme { - InfoScreen( - infoScreenTopic = InfoScreenTopic.DEFAULT, - ) - } -} - -@Composable -@Preview -private fun InfoScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun InfoScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { 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 @@ -35,10 +35,10 @@ 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import mozilla.components.compose.base.Dropdown -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.button.TextButton import mozilla.components.compose.base.menu.MenuItem @@ -56,6 +56,7 @@ 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 org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -529,10 +530,12 @@ private fun ExceptionsRow(onExceptionsClicked: () -> Unit) { ) } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun DohScreenDefaultProviderPreview() { - FirefoxTheme { +private fun DohScreenDefaultProviderPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { val provider = Provider.BuiltIn( url = "https://mozilla.cloudflare-dns.com/dns-query", name = "Cloudflare", @@ -558,10 +561,12 @@ private fun DohScreenDefaultProviderPreview() { } } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun DohScreenCustomProviderPreview() { - FirefoxTheme { +private fun DohScreenCustomProviderPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { val provider = Provider.Custom(url = "") DohSettingsScreen( state = DohSettingsState( @@ -583,64 +588,12 @@ 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 { +private fun AlertDialogAddCustomProviderPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { AlertDialogAddCustomProvider( customProviderUrl = "https://mozilla.cloudflare-dns.com/dns-query", customProviderErrorState = CustomProviderErrorState.Valid, @@ -650,10 +603,12 @@ private fun AlertDialogAddCustomProviderPreview() { } } -@Composable @Preview -private fun AlertDialogAddCustomProviderPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +@Composable +private fun AlertDialogAddCustomProviderErrorPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { AlertDialogAddCustomProvider( customProviderUrl = "https://mozilla.cloudflare-dns.com/dns-query", customProviderErrorState = CustomProviderErrorState.Invalid, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/labs/ui/FirefoxLabsScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/labs/ui/FirefoxLabsScreen.kt @@ -30,7 +30,6 @@ 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.tooling.preview.PreviewLightDark import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameterProvider import androidx.compose.ui.unit.dp @@ -50,6 +49,7 @@ import org.mozilla.fenix.settings.labs.store.LabsState import org.mozilla.fenix.settings.labs.store.LabsStore import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -358,10 +358,12 @@ private fun FirefoxLabsScreenPrivatePreview( } } +@Preview @Composable -@PreviewLightDark -private fun ToggleFeatureDialogPreview() { - FirefoxTheme { +private fun ToggleFeatureDialogPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { ToggleFeatureDialog( featureEnabled = true, onConfirm = {}, @@ -370,10 +372,12 @@ private fun ToggleFeatureDialogPreview() { } } +@Preview @Composable -@PreviewLightDark -private fun RestoreDefaultsDialogPreview() { - FirefoxTheme { +private fun RestoreDefaultsDialogPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { RestoreDefaultsDialog( onConfirm = {}, onDismiss = {}, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/AddLoginScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/AddLoginScreen.kt @@ -33,9 +33,9 @@ import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.text.Text import mozilla.components.compose.base.textfield.TextField @@ -45,6 +45,7 @@ import mozilla.components.support.ktx.util.URLStringUtils.isValidHost import org.mozilla.fenix.R import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR @Composable @@ -250,24 +251,15 @@ private fun AddLoginPassword(store: LoginsStore) { ) } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun AddLoginScreenPreview() { +private fun AddLoginScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { val store = LoginsStore( initialState = LoginsState.default, ) - FirefoxTheme { - AddLoginScreen(store) - } -} - -@Composable -@Preview -private fun AddLoginScreenPrivatePreview() { - val store = LoginsStore( - initialState = LoginsState.default, - ) - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { AddLoginScreen(store) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/EditLoginScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/EditLoginScreen.kt @@ -34,9 +34,9 @@ import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId 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.PreviewParameter import androidx.compose.ui.unit.dp -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.text.Text import mozilla.components.compose.base.textfield.TextField @@ -44,6 +44,7 @@ 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 org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR @Composable @@ -270,20 +271,12 @@ private fun createStore() = LoginsStore( ), ) +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun EditLoginScreenPreview() { - FirefoxTheme { - Surface { - EditLoginScreen(store = createStore()) - } - } -} - -@Composable -@Preview -private fun EditLoginScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun EditLoginScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { Surface { EditLoginScreen(store = createStore()) } 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 @@ -39,11 +39,11 @@ import androidx.compose.ui.semantics.testTagsAsResourceId 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.tooling.preview.PreviewParameter 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.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.button.TextButton import mozilla.components.compose.base.menu.DropdownMenu @@ -56,6 +56,7 @@ 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 org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR @Composable @@ -394,37 +395,22 @@ private fun createStore() = LoginsStore( ), ) +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun LoginDetailsScreenPreview() { - FirefoxTheme { +private fun LoginDetailsScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { LoginDetailsScreen(store = createStore()) } } -@Composable @Preview -private fun LoginDetailsScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - LoginDetailsScreen(store = createStore()) - } -} - -@Composable -@PreviewLightDark -private fun LoginDeletionDialogPreview() { - FirefoxTheme { - LoginDeletionDialog( - onCancelTapped = {}, - onDeleteTapped = {}, - ) - } -} - @Composable -@Preview -private fun LoginDeletionDialogPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun LoginDeletionDialogPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { LoginDeletionDialog( onCancelTapped = {}, onDeleteTapped = {}, diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/SavedLoginsScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/SavedLoginsScreen.kt @@ -43,13 +43,13 @@ import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.testTag import androidx.compose.ui.semantics.testTagsAsResourceId import androidx.compose.ui.text.style.TextDecoration -import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController -import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview +import mozilla.components.compose.base.annotation.FlexibleWindowPreview import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.menu.DropdownMenu import mozilla.components.compose.base.menu.MenuItem @@ -65,6 +65,7 @@ import org.mozilla.fenix.settings.biometric.ui.SecureScreen import org.mozilla.fenix.settings.logins.ui.LoginsSortOrder.Alphabetical.isGuidToDelete import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -425,34 +426,22 @@ private fun createStore() = LoginsStore( ), ) +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun LoginsListScreenPreview() { - FirefoxTheme { - LoginsList(store = createStore()) - } -} - -@Composable -@Preview -private fun LoginsListScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun LoginsListScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { LoginsList(store = createStore()) } } +@FlexibleWindowPreview @Composable -@FlexibleWindowLightDarkPreview -private fun EmptyLoginsListScreenPreview() { - FirefoxTheme { - LoginsList(store = LoginsStore()) - } -} - -@Composable -@Preview -private fun EmptyLoginsListScreenPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { +private fun EmptyLoginsListScreenPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { + FirefoxTheme(theme) { LoginsList(store = LoginsStore()) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/TrailingIcons.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/TrailingIcons.kt @@ -18,7 +18,7 @@ import androidx.compose.ui.res.painterResource 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.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.text.Text @@ -26,6 +26,7 @@ import mozilla.components.compose.base.text.value import mozilla.components.compose.base.textfield.TextField import org.mozilla.fenix.theme.FirefoxTheme import org.mozilla.fenix.theme.Theme +import org.mozilla.fenix.theme.ThemeProvider import mozilla.components.ui.icons.R as iconsR /** @@ -55,45 +56,14 @@ fun EyePasswordIconButton( } } -@PreviewLightDark -@Composable -private fun EyePasswordIconButtonPreview() { - var isPasswordVisible by remember { mutableStateOf(false) } - - FirefoxTheme { - Surface { - TextField( - value = "password", - onValueChange = {}, - isEnabled = true, - placeholder = "", - errorText = "", - modifier = Modifier - .fillMaxWidth() - .padding(8.dp), - label = "", - trailingIcon = { - EyePasswordIconButton( - isPasswordVisible = isPasswordVisible, - onTrailingIconClick = { isPasswordVisible = !isPasswordVisible }, - ) - }, - visualTransformation = if (isPasswordVisible) { - VisualTransformation.None - } else { - PasswordVisualTransformation() - }, - ) - } - } -} - @Preview @Composable -private fun EyePasswordIconButtonPrivatePreview() { +private fun EyePasswordIconButtonPreview( + @PreviewParameter(ThemeProvider::class) theme: Theme, +) { var isPasswordVisible by remember { mutableStateOf(false) } - FirefoxTheme(theme = Theme.Private) { + FirefoxTheme(theme) { Surface { TextField( value = "password",