commit d16a985becdad4daf5ed629e710df31c0c4f9654
parent c7fc2ad61028412cb7a22933812e989c2910e922
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 23 Oct 2025 21:00:38 +0000
Bug 1993831 - Migrate Protection Panel to use M3 color tokens r=android-reviewers,007
Figma:
https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64192-20726&m=dev
https://www.figma.com/design/WwaPyCTuAcweodyCjL789k/Protection-Panel?node-id=16136-4563&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268429
Diffstat:
5 files changed, 77 insertions(+), 85 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/TrustPanelFragment.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/TrustPanelFragment.kt
@@ -259,11 +259,11 @@ class TrustPanelFragment : BottomSheetDialogFragment() {
when (route) {
Route.ProtectionPanel -> {
ProtectionPanel(
+ websiteInfoState = store.state.websiteInfoState,
icon = sessionState?.content?.icon,
isTrackingProtectionEnabled = isTrackingProtectionEnabled,
isLocalPdf = args.isLocalPdf,
numberOfTrackersBlocked = numberOfTrackersBlocked,
- websiteInfoState = store.state.websiteInfoState,
websitePermissions = websitePermissions.filter { it.isVisible },
onTrackerBlockedMenuClick = {
contentState = Route.TrackersPanel
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/ProtectionPanel.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/ProtectionPanel.kt
@@ -21,8 +21,11 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
@@ -47,6 +50,7 @@ import mozilla.components.compose.base.menu.DropdownMenu
import mozilla.components.compose.base.menu.MenuItem.CheckableItem
import mozilla.components.compose.base.text.Text
import mozilla.components.compose.base.text.value
+import mozilla.components.compose.base.theme.surfaceDimVariant
import org.mozilla.fenix.R
import org.mozilla.fenix.components.menu.compose.MenuBadgeItem
import org.mozilla.fenix.components.menu.compose.MenuGroup
@@ -71,11 +75,11 @@ private const val DROPDOWN_TEXT_WIDTH_FRACTION = 0.5f
@Suppress("LongParameterList", "LongMethod")
@Composable
internal fun ProtectionPanel(
+ websiteInfoState: WebsiteInfoState,
icon: Bitmap?,
isTrackingProtectionEnabled: Boolean,
isLocalPdf: Boolean,
numberOfTrackersBlocked: Int,
- websiteInfoState: WebsiteInfoState,
websitePermissions: List<WebsitePermission>,
onTrackerBlockedMenuClick: () -> Unit,
onTrackingProtectionToggleClick: () -> Unit,
@@ -87,8 +91,8 @@ internal fun ProtectionPanel(
MenuScaffold(
header = {
ProtectionPanelHeader(
- icon = icon,
websiteInfoState = websiteInfoState,
+ icon = icon,
)
},
) {
@@ -191,7 +195,7 @@ internal fun ProtectionPanel(
onClick = { onPrivacySecuritySettingsClick() },
),
),
- linkTextColor = FirefoxTheme.colors.textAccent,
+ linkTextColor = MaterialTheme.colorScheme.tertiary,
linkTextDecoration = TextDecoration.Underline,
)
}
@@ -202,7 +206,7 @@ private fun ProtectionPanelBanner(
isSecured: Boolean,
isTrackingProtectionEnabled: Boolean,
) {
- var backgroundColor: Color = FirefoxTheme.colors.layer3
+ var backgroundColor: Color = MaterialTheme.colorScheme.surfaceDimVariant
val imageId: Int
val title: String
val description: String
@@ -212,7 +216,7 @@ private fun ProtectionPanelBanner(
title = stringResource(id = R.string.protection_panel_banner_not_secure_title)
description = stringResource(id = R.string.protection_panel_banner_not_secure_description)
} else if (!isTrackingProtectionEnabled) {
- backgroundColor = FirefoxTheme.colors.layerSearch
+ backgroundColor = MaterialTheme.colorScheme.surfaceContainerHighest
imageId = R.drawable.protection_panel_not_protected
title = stringResource(id = R.string.protection_panel_banner_not_protected_title)
description = stringResource(
@@ -251,17 +255,17 @@ private fun ProtectionPanelBanner(
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
- Text(
- text = title,
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline7,
- )
+ CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
+ Text(
+ text = title,
+ style = FirefoxTheme.typography.headline7,
+ )
- Text(
- text = description,
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.body2,
- )
+ Text(
+ text = description,
+ style = FirefoxTheme.typography.body2,
+ )
+ }
}
}
}
@@ -275,12 +279,13 @@ private fun WebsitePermissionsMenuGroup(
) {
Column {
Row(
- modifier = Modifier.fillMaxWidth()
+ modifier = Modifier
+ .fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 8.dp),
) {
Text(
text = stringResource(id = R.string.protection_panel_permissions_title),
- color = FirefoxTheme.colors.textAccent,
+ color = MaterialTheme.colorScheme.tertiary,
style = FirefoxTheme.typography.headline8,
)
}
@@ -346,7 +351,7 @@ private fun WebsitePermissionToggle(
Text(
text = toggleLabel,
modifier = Modifier.fillMaxWidth(DROPDOWN_TEXT_WIDTH_FRACTION),
- color = FirefoxTheme.colors.textAccent,
+ color = MaterialTheme.colorScheme.tertiary,
textAlign = TextAlign.End,
maxLines = 2,
style = FirefoxTheme.typography.body1,
@@ -384,7 +389,7 @@ private fun AutoplayDropdownMenu(
Text(
text = placeholderText,
modifier = Modifier.fillMaxWidth(DROPDOWN_TEXT_WIDTH_FRACTION),
- color = FirefoxTheme.colors.textAccent,
+ color = MaterialTheme.colorScheme.tertiary,
textAlign = TextAlign.End,
maxLines = 2,
style = FirefoxTheme.typography.body1,
@@ -396,7 +401,7 @@ private fun AutoplayDropdownMenu(
Icon(
painter = painterResource(id = iconsR.drawable.mozac_ic_dropdown_arrow),
contentDescription = null,
- tint = FirefoxTheme.colors.iconAccentViolet,
+ tint = MaterialTheme.colorScheme.tertiary,
)
if (expanded) {
@@ -423,16 +428,16 @@ private fun ProtectionPanelPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
ProtectionPanel(
- icon = null,
websiteInfoState = WebsiteInfoState(
isSecured = true,
websiteUrl = "https://www.mozilla.org",
websiteTitle = "Mozilla",
certificateName = "",
),
+ icon = null,
isTrackingProtectionEnabled = true,
isLocalPdf = false,
numberOfTrackersBlocked = 5,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/ProtectionPanelHeader.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/ProtectionPanelHeader.kt
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -37,11 +38,12 @@ private val INNER_ICON_SHAPE = RoundedCornerShape(0.dp)
@Composable
internal fun ProtectionPanelHeader(
- icon: Bitmap?,
websiteInfoState: WebsiteInfoState,
+ icon: Bitmap?,
+ modifier: Modifier = Modifier,
) {
Row(
- modifier = Modifier
+ modifier = modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 6.dp),
verticalAlignment = Alignment.CenterVertically,
@@ -51,14 +53,13 @@ internal fun ProtectionPanelHeader(
Spacer(modifier = Modifier.width(16.dp))
Column(
- modifier = Modifier
- .weight(1f),
+ modifier = Modifier.weight(1f),
) {
Text(
text = websiteInfoState.websiteTitle.ifEmpty {
websiteInfoState.websiteUrl.tryGetHostFromUrl()
},
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurface,
maxLines = 1,
style = FirefoxTheme.typography.headline7,
overflow = TextOverflow.Ellipsis,
@@ -67,7 +68,7 @@ internal fun ProtectionPanelHeader(
if (websiteInfoState.websiteTitle.isNotEmpty()) {
Text(
text = websiteInfoState.websiteUrl.tryGetHostFromUrl(),
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.body2,
)
}
@@ -86,7 +87,7 @@ private fun ProtectionPanelIcon(
contentDescription = null,
modifier = Modifier
.background(
- color = FirefoxTheme.colors.layer2,
+ color = MaterialTheme.colorScheme.surfaceContainerLowest,
shape = OUTER_ICON_SHAPE,
)
.padding(all = ICON_PADDING)
@@ -97,7 +98,7 @@ private fun ProtectionPanelIcon(
url = url,
modifier = Modifier
.background(
- color = FirefoxTheme.colors.layer2,
+ color = MaterialTheme.colorScheme.surfaceContainerLowest,
shape = OUTER_ICON_SHAPE,
)
.padding(all = ICON_PADDING),
@@ -111,20 +112,16 @@ private fun ProtectionPanelIcon(
@Composable
private fun ProtectionPanelHeaderPreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1),
- ) {
- ProtectionPanelHeader(
- icon = null,
- websiteInfoState = WebsiteInfoState(
- isSecured = true,
- websiteUrl = "https://www.mozilla.org",
- websiteTitle = "Mozilla",
- certificateName = "",
- ),
- )
- }
+ ProtectionPanelHeader(
+ websiteInfoState = WebsiteInfoState(
+ isSecured = true,
+ websiteUrl = "https://www.mozilla.org",
+ websiteTitle = "Mozilla",
+ certificateName = "",
+ ),
+ icon = null,
+ modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
+ )
}
}
@@ -132,20 +129,16 @@ private fun ProtectionPanelHeaderPreview() {
@Composable
private fun ProtectionPanelHeaderUrlAsTitlePreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1),
- ) {
- ProtectionPanelHeader(
- icon = null,
- websiteInfoState = WebsiteInfoState(
- isSecured = true,
- websiteUrl = "https://www.mozilla.org",
- websiteTitle = "",
- certificateName = "",
- ),
- )
- }
+ ProtectionPanelHeader(
+ websiteInfoState = WebsiteInfoState(
+ isSecured = true,
+ websiteUrl = "https://www.mozilla.org",
+ websiteTitle = "",
+ certificateName = "",
+ ),
+ icon = null,
+ modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
+ )
}
}
@@ -153,19 +146,15 @@ private fun ProtectionPanelHeaderUrlAsTitlePreview() {
@Composable
private fun ProtectionPanelHeaderPrivatePreview() {
FirefoxTheme(theme = Theme.Private) {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
- ) {
- ProtectionPanelHeader(
- icon = null,
- websiteInfoState = WebsiteInfoState(
- isSecured = false,
- websiteUrl = "https://www.mozilla.org",
- websiteTitle = "Mozilla",
- certificateName = "",
- ),
- )
- }
+ ProtectionPanelHeader(
+ websiteInfoState = WebsiteInfoState(
+ isSecured = false,
+ websiteUrl = "https://www.mozilla.org",
+ websiteTitle = "Mozilla",
+ certificateName = "",
+ ),
+ icon = null,
+ modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
+ )
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/TrackerCategoryDetailsPanel.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/TrackerCategoryDetailsPanel.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@@ -24,8 +25,6 @@ import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.trackingprotection.TrackerBuckets
import org.mozilla.fenix.trackingprotection.TrackingProtectionCategory
-internal const val TRACKER_CATEGORY_DETAILS_PANEL_ROUTE = "tracker_category_details_panel"
-
@Composable
internal fun TrackerCategoryDetailsPanel(
title: String,
@@ -65,7 +64,7 @@ internal fun TrackerCategoryDetailsPanel(
Text(
text = trackerCategoryTitle,
- color = FirefoxTheme.colors.textAccent,
+ color = MaterialTheme.colorScheme.tertiary,
style = FirefoxTheme.typography.headline8,
)
@@ -73,7 +72,7 @@ internal fun TrackerCategoryDetailsPanel(
Text(
text = trackerCategoryDescription,
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.body2,
)
@@ -81,7 +80,7 @@ internal fun TrackerCategoryDetailsPanel(
Text(
text = stringResource(id = R.string.enhanced_tracking_protection_blocked),
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.headline8,
)
@@ -91,7 +90,7 @@ internal fun TrackerCategoryDetailsPanel(
bucketedTrackers.get(detailedTrackerCategory, true).forEach {
Text(
text = it.url.tryGetHostFromUrl(),
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurface,
style = FirefoxTheme.typography.body2,
)
}
@@ -106,7 +105,7 @@ private fun TrackersBlockedPanelPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
TrackerCategoryDetailsPanel(
title = "Mozilla",
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/TrackersBlockedPanel.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/trustpanel/ui/TrackersBlockedPanel.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -29,8 +30,6 @@ import org.mozilla.fenix.theme.FirefoxTheme
import org.mozilla.fenix.trackingprotection.TrackerBuckets
import org.mozilla.fenix.trackingprotection.TrackingProtectionCategory
-internal const val TRACKERS_PANEL_ROUTE = "trackers_panel"
-
@Composable
internal fun TrackersBlockedPanel(
title: String,
@@ -60,7 +59,7 @@ internal fun TrackersBlockedPanel(
numberOfTrackersBlocked,
),
modifier = Modifier.weight(1f),
- color = FirefoxTheme.colors.textAccent,
+ color = MaterialTheme.colorScheme.tertiary,
style = FirefoxTheme.typography.headline8,
)
}
@@ -71,7 +70,7 @@ internal fun TrackersBlockedPanel(
TrackingProtectionCategory.entries
.filter { bucketedTrackers.get(it, true).isNotEmpty() }
.forEachIndexed { index, trackingProtectionCategory ->
- if (index != 0) { HorizontalDivider(color = FirefoxTheme.colors.borderSecondary) }
+ if (index != 0) { HorizontalDivider() }
MenuItem(
label = stringResource(
@@ -94,7 +93,7 @@ private fun TrackersBlockedPanelPreview() {
FirefoxTheme {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer3),
+ .background(color = MaterialTheme.colorScheme.surface),
) {
TrackersBlockedPanel(
title = "Mozilla",
