tor-browser

commit 0451dbd5dd9de15f69072b9ebcfa3ef2e8965e03
parent bd361c6603e26a7f3b1229dc6136046034a614b5
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date:   Thu,  4 Dec 2025 06:14:43 +0000

Bug 1993368 - Part 34: Migrate WebCompatReporterPreviewSheet to M3 specs r=android-reviewers,007

- Migrates WebCompatReporterPreviewSheet to use M3 color tokens and align with the M3 updates
- M3 Updates: https://www.figma.com/design/tYyVZRriXDqKGd0NcfNjWY/Report-Broken-Site?node-id=915-5246&m=dev

Differential Revision: https://phabricator.services.mozilla.com/D274537

Diffstat:
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/webcompat/ui/WebCompatReporterPreviewSheet.kt
 | 
72
++++++++++++++++++++++++++++++++++--------------------------------------

1 file changed, 34 insertions(+), 38 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/webcompat/ui/WebCompatReporterPreviewSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/webcompat/ui/WebCompatReporterPreviewSheet.kt
@@ -4,7 +4,6 @@
 
 package org.mozilla.fenix.webcompat.ui
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
@@ -19,6 +18,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -28,14 +28,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.traversalIndex
+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.button.FilledButton
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.BottomSheetHandle
 import org.mozilla.fenix.theme.FirefoxTheme
-
-private val BottomSheetHandleVerticalPadding = 16.dp
+import org.mozilla.fenix.theme.Theme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -54,22 +54,21 @@ internal fun WebCompatReporterPreviewSheet(
                 contentDescription = stringResource(R.string.a11y_action_label_collapse),
                 modifier = Modifier
                     .width(32.dp)
-                    .padding(vertical = BottomSheetHandleVerticalPadding)
+                    .padding(vertical = FirefoxTheme.layout.space.static200)
                     .semantics { traversalIndex = -1f },
-                color = FirefoxTheme.colors.borderInverted,
             )
         },
-        containerColor = FirefoxTheme.colors.layer2,
+        containerColor = MaterialTheme.colorScheme.surface,
         modifier = Modifier.padding(top = 72.dp),
         contentWindowInsets = { WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom) },
     ) {
-            PreviewSheetContent(
-                isSendButtonEnabled = isSendButtonEnabled,
-                previewJSON = previewJSON,
-                onSendClick = onSendClick,
-            )
-        }
+        PreviewSheetContent(
+            isSendButtonEnabled = isSendButtonEnabled,
+            previewJSON = previewJSON,
+            onSendClick = onSendClick,
+        )
     }
+}
 
 @Composable
 private fun PreviewSheetContent(
@@ -80,66 +79,63 @@ private fun PreviewSheetContent(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(
-                color = FirefoxTheme.colors.layer2,
-            ),
+            .padding(horizontal = FirefoxTheme.layout.space.dynamic200),
         horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(FirefoxTheme.layout.space.static150))
 
-        ) {
         Text(
             text = stringResource(id = R.string.webcompat_reporter_preview_bottom_sheet_header),
-            color = FirefoxTheme.colors.textPrimary,
             style = FirefoxTheme.typography.headline7,
         )
 
-        Spacer(modifier = Modifier.height(16.dp))
+        Spacer(modifier = Modifier.height(FirefoxTheme.layout.space.static200))
 
         Column(
             modifier = Modifier
                 .weight(1f)
-                .verticalScroll(rememberScrollState())
-                .padding(horizontal = 16.dp),
+                .verticalScroll(rememberScrollState()),
         ) {
             Text(
                 text = previewJSON,
-                color = FirefoxTheme.colors.textPrimary,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
                 style = FirefoxTheme.typography.body2,
             )
         }
+
         FilledButton(
             text = stringResource(id = R.string.webcompat_reporter_preview_bottom_sheet_send),
             onClick = onSendClick,
             modifier = Modifier
                 .fillMaxWidth()
-                .background(color = FirefoxTheme.colors.layer1)
-                .padding(all = 16.dp),
+                .padding(vertical = FirefoxTheme.layout.space.static200),
             enabled = isSendButtonEnabled,
         )
     }
 }
 
-// Note: run the interactive preview for this composable to see the bottom sheet behaviour of the report preview.
+@Composable
+private fun WebCompatReporterPreviewSheetContent() {
+    WebCompatReporterPreviewSheet(
+        isSendButtonEnabled = true,
+        previewJSON = WebCompatReporterPreviewSampleJsonData.SAMPLE_WEBCOMPAT_JSON_DATA,
+        onDismissRequest = {},
+        onSendClick = {},
+    )
+}
+
 @Composable
 @PreviewLightDark
 private fun WebCompatReporterSheetPreview() {
     FirefoxTheme {
-        WebCompatReporterPreviewSheet(
-            isSendButtonEnabled = true,
-            previewJSON = WebCompatReporterPreviewSampleJsonData.SAMPLE_WEBCOMPAT_JSON_DATA,
-            onDismissRequest = {},
-            onSendClick = {},
-        )
+        WebCompatReporterPreviewSheetContent()
     }
 }
 
 @Composable
-@PreviewLightDark
-private fun SheetContentPreview() {
-    FirefoxTheme {
-        PreviewSheetContent(
-            previewJSON = WebCompatReporterPreviewSampleJsonData.SAMPLE_WEBCOMPAT_JSON_DATA,
-            onSendClick = {},
-            isSendButtonEnabled = true,
-        )
+@Preview
+private fun WebCompatReporterSheetPrivatePreview() {
+    FirefoxTheme(theme = Theme.Private) {
+        WebCompatReporterPreviewSheetContent()
     }
 }