commit 70159186c21a3c0cfed2087e17bd64713a3b6e23
parent 5ea5cc47902db6174ec850e7f5e3984879bf45e6
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 1 Oct 2025 22:02:46 +0000
Bug 1978605 - Part 2: Add the homepage private browsing mode redesign behind the feature flag r=android-reviewers,android-l10n-reviewers,flod,devota
- Updates the homepage private mode to align with the new designs.
- Background colors will not be addressed in this patch.
Figma: https://www.figma.com/design/NSjxxopvFmRFu0m61T1N4E/HNT-Android-2025?node-id=16639-55642&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D266291
Diffstat:
4 files changed, 96 insertions(+), 6 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/store/HomepageState.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/store/HomepageState.kt
@@ -54,11 +54,13 @@ internal sealed class HomepageState {
* @property showHeader Whether to show the homepage header.
* @property firstFrameDrawn Flag indicating whether the first frame of the homescreen has been drawn.
* @property isSearchInProgress Whether search is currently active on the homepage.
+ * @property privateModeRedesignEnabled Whether private browsing mode redesign is enabled.
*/
internal data class Private(
override val showHeader: Boolean,
override val firstFrameDrawn: Boolean = false,
override val isSearchInProgress: Boolean,
+ val privateModeRedesignEnabled: Boolean,
) : HomepageState()
/**
@@ -145,6 +147,7 @@ internal sealed class HomepageState {
showHeader = settings.showHomepageHeader,
firstFrameDrawn = firstFrameDrawn,
isSearchInProgress = searchState.isSearchActive,
+ privateModeRedesignEnabled = settings.enablePrivateBrowsingModeRedesign,
)
} else {
Normal(
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/Homepage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/Homepage.kt
@@ -118,10 +118,16 @@ internal fun Homepage(
with(state) {
when (this) {
is HomepageState.Private -> {
- Box(modifier = Modifier.padding(horizontal = horizontalMargin)) {
- PrivateBrowsingDescription(
+ if (privateModeRedesignEnabled) {
+ PrivateBrowsingDescription2(
onLearnMoreClick = interactor::onLearnMoreClicked,
)
+ } else {
+ Box(modifier = Modifier.padding(horizontal = horizontalMargin)) {
+ PrivateBrowsingDescription(
+ onLearnMoreClick = interactor::onLearnMoreClicked,
+ )
+ }
}
}
@@ -532,6 +538,7 @@ private fun PrivateHomepagePreview() {
showHeader = false,
firstFrameDrawn = true,
isSearchInProgress = false,
+ privateModeRedesignEnabled = false,
),
interactor = FakeHomepagePreview.homepageInteractor,
onTopSitesItemBound = {},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/PrivateBrowsingDescription.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/ui/PrivateBrowsingDescription.kt
@@ -5,6 +5,7 @@
package org.mozilla.fenix.home.ui
import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
@@ -16,6 +17,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
@@ -23,14 +25,17 @@ 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.unit.dp
+import mozilla.components.ui.colors.PhotonColors
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.LinkText
import org.mozilla.fenix.compose.LinkTextState
import org.mozilla.fenix.home.ui.HomepageTestTag.HOMEPAGE_PRIVATE_BROWSING_LEARN_MORE_LINK
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
/**
* Total Private Browsing Mode homepage informational card.
@@ -90,13 +95,69 @@ fun PrivateBrowsingDescription(
}
}
+/**
+ * Private Browsing Mode description.
+ *
+ * @param onLearnMoreClick Invoked when the user clicks on the learn more link.
+ */
+@Composable
+fun PrivateBrowsingDescription2(
+ onLearnMoreClick: () -> Unit,
+) {
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 24.dp),
+ verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
+ horizontalAlignment = Alignment.CenterHorizontally,
+ ) {
+ Text(
+ text = stringResource(id = R.string.felt_privacy_desc_card_title),
+ color = PhotonColors.White,
+ textAlign = TextAlign.Center,
+ style = FirefoxTheme.typography.headline5,
+ )
+
+ Text(
+ text = stringResource(
+ id = R.string.felt_privacy_info_card_subtitle_3,
+ stringResource(id = R.string.app_name),
+ ),
+ color = PhotonColors.White,
+ textAlign = TextAlign.Center,
+ style = FirefoxTheme.typography.subtitle1,
+ )
+
+ Box(
+ modifier = Modifier.semantics {
+ testTagsAsResourceId = true
+ testTag = HOMEPAGE_PRIVATE_BROWSING_LEARN_MORE_LINK
+ },
+ ) {
+ LinkText(
+ text = stringResource(id = R.string.felt_privacy_info_card_subtitle_link_text),
+ linkTextStates = listOf(
+ LinkTextState(
+ text = stringResource(id = R.string.felt_privacy_info_card_subtitle_link_text),
+ url = "",
+ onClick = { onLearnMoreClick() },
+ ),
+ ),
+ style = FirefoxTheme.typography.subtitle1,
+ linkTextColor = PhotonColors.White,
+ linkTextDecoration = TextDecoration.Underline,
+ textAlign = TextAlign.Center,
+ )
+ }
+ }
+}
+
@Composable
@Preview
-private fun FeltPrivacyModeDescriptionPreview() {
- FirefoxTheme {
+private fun PrivacyBrowsingDescriptionPreview() {
+ FirefoxTheme(theme = Theme.Private) {
Column(
- modifier = Modifier.background(FirefoxTheme.colors.layer1)
- .fillMaxSize(),
+ modifier = Modifier.padding(horizontal = horizontalMargin),
) {
PrivateBrowsingDescription(
onLearnMoreClick = {},
@@ -104,3 +165,19 @@ private fun FeltPrivacyModeDescriptionPreview() {
}
}
}
+
+@Composable
+@Preview
+private fun PrivacyBrowsingDescription2Preview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Column(
+ modifier = Modifier
+ .background(FirefoxTheme.colors.layer1)
+ .fillMaxSize(),
+ ) {
+ PrivateBrowsingDescription2(
+ onLearnMoreClick = {},
+ )
+ }
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/res/values/strings.xml b/mobile/android/fenix/app/src/main/res/values/strings.xml
@@ -81,6 +81,9 @@
%1$s is the name of the app (for example "Firefox").
%2$s is a link using felt_privacy_info_card_subtitle_link_text as text -->
<string name="felt_privacy_info_card_subtitle_2">%1$s deletes your cookies, history, and site data when you close all your private tabs. %2$s</string>
+ <!-- Description of private browsing mode displayed to users on the homepage when they enable private mode.
+ %1$s is the name of the app (for example "Firefox"). -->
+ <string name="felt_privacy_info_card_subtitle_3">%1$s deletes your cookies, history, and site data when you close all your private tabs.</string>
<!-- Clickable portion of the explanation for private browsing that links the user to our
about privacy page.
This string is used in felt_privacy_info_card_subtitle as the text for the link. -->
