commit 8fe34ccdcd91786074f3da375024470c0effa510
parent 9f1b12ff622d0ccd3b67863ec031f54fe0e23675
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 05:44:31 +0000
Bug 1993368 - Part 21: Migrate Profiler Composables to use M3 Acorn color tokens r=android-reviewers,007
- Aligned with Dialog M3 specs: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63942-53809&m=dev
- Migrated ProfilerLabeledRadioButton to use RadioButtonListItem
Differential Revision: https://phabricator.services.mozilla.com/D273045
Diffstat:
2 files changed, 87 insertions(+), 75 deletions(-)
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
@@ -5,8 +5,6 @@
package org.mozilla.fenix.perf
import androidx.annotation.StringRes
-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.ColumnScope
@@ -22,7 +20,6 @@ import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
@@ -30,11 +27,14 @@ import androidx.compose.ui.Alignment
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.unit.dp
import androidx.compose.ui.unit.sp
-import org.mozilla.fenix.compose.button.RadioButton
+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
/**
* Top-level card container for profiler dialogs
@@ -42,15 +42,13 @@ import org.mozilla.fenix.theme.FirefoxTheme
* @param content The composable content to be displayed inside the card
*/
@Composable
-fun ProfilerDialogueCard(content: @Composable () -> Unit) {
- FirefoxTheme {
- Card(
- colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer2),
- elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
- shape = RoundedCornerShape(12.dp),
- ) {
- content()
- }
+private fun ProfilerDialogueCard(content: @Composable () -> Unit) {
+ Card(
+ colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh),
+ elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
+ shape = RoundedCornerShape(12.dp),
+ ) {
+ content()
}
}
@@ -69,28 +67,13 @@ fun ProfilerLabeledRadioButton(
selected: Boolean = false,
onClick: () -> Unit,
) {
- Row(
- modifier = Modifier.clickable { onClick() },
- ) {
- RadioButton(
- selected = selected,
- onClick = {},
- enabled = true,
- )
- Column(
- modifier = Modifier.padding(horizontal = 8.dp),
- ) {
- Text(
- text = text,
- color = FirefoxTheme.colors.textPrimary,
- )
- Text(
- text = subText,
- color = FirefoxTheme.colors.textPrimary,
- fontWeight = FontWeight.ExtraLight,
- )
- }
- }
+ RadioButtonListItem(
+ label = text,
+ selected = selected,
+ description = subText,
+ maxDescriptionLines = Int.MAX_VALUE,
+ onClick = onClick,
+ )
}
/**
@@ -111,39 +94,13 @@ fun WaitForProfilerDialog(
Text(
text = stringResource(message),
fontWeight = FontWeight.Bold,
- color = FirefoxTheme.colors.textPrimary,
fontSize = 15.sp,
modifier = Modifier.padding(8.dp),
)
- Spacer(modifier = Modifier.height(2.dp))
- CircularProgressIndicator()
- }
- }
-}
-/**
- * Preview example of [ProfilerLabeledRadioButton].
- */
-@Composable
-@PreviewLightDark
-private fun ProfilerLabeledRadioButtonPreview() {
- val radioOptions = listOf("Firefox", "Graphics", "Media", "Networking")
- val selectedOption = remember { mutableStateOf("Firefox") }
+ Spacer(modifier = Modifier.height(2.dp))
- FirefoxTheme {
- Column(
- modifier = Modifier.background(FirefoxTheme.colors.layer1),
- ) {
- radioOptions.forEach { text ->
- ProfilerLabeledRadioButton(
- text = text,
- subText = "Sub",
- selected = selectedOption.value == text,
- onClick = {
- selectedOption.value = text
- },
- )
- }
+ CircularProgressIndicator()
}
}
}
@@ -176,23 +133,29 @@ fun BaseProfilerDialogContent(
Text(
text = titleText,
fontWeight = FontWeight.ExtraBold,
- color = FirefoxTheme.colors.textPrimary,
fontSize = 20.sp,
modifier = Modifier.padding(bottom = 16.dp),
)
+
content() // Unique content slot
+
Spacer(modifier = Modifier.height(16.dp))
+
Row(
horizontalArrangement = Arrangement.End,
modifier = Modifier.fillMaxWidth(),
) {
- TextButton(onClick = onNegativeAction) {
- Text(negativeActionText, color = MaterialTheme.colorScheme.tertiary)
- }
+ TextButton(
+ text = negativeActionText,
+ onClick = onNegativeAction,
+ )
+
Spacer(modifier = Modifier.width(8.dp))
- TextButton(onClick = onPositiveAction) {
- Text(positiveActionText, color = MaterialTheme.colorScheme.tertiary)
- }
+
+ TextButton(
+ text = positiveActionText,
+ onClick = onPositiveAction,
+ )
}
}
}
@@ -220,11 +183,56 @@ fun ProfilerErrorDialog(
text = errorMessage,
fontWeight = FontWeight.Bold,
fontSize = 16.sp,
- color = FirefoxTheme.colors.textPrimary,
modifier = Modifier.padding(bottom = 16.dp),
)
- TextButton(onClick = onDismiss) {
- Text(dismissButtonText, color = MaterialTheme.colorScheme.tertiary)
+
+ TextButton(
+ text = dismissButtonText,
+ onClick = onDismiss,
+ )
+ }
+ }
+}
+
+@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() {
+ val radioOptions = listOf("Firefox", "Graphics", "Media", "Networking")
+ val selectedOption = remember { mutableStateOf("Firefox") }
+
+ FirefoxTheme(theme = Theme.Private) {
+ ProfilerDialogueCard {
+ radioOptions.forEach { text ->
+ ProfilerLabeledRadioButton(
+ text = text,
+ subText = "Sub",
+ selected = selectedOption.value == text,
+ onClick = {
+ selectedOption.value = text
+ },
+ )
}
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/perf/ProfilerStartDialogFragment.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/perf/ProfilerStartDialogFragment.kt
@@ -47,7 +47,9 @@ class ProfilerStartDialogFragment : AppCompatDialogFragment() {
container: ViewGroup?,
savedInstanceState: Bundle?,
) = content {
- StartProfilerScreen(viewModel = profilerViewModel)
+ FirefoxTheme {
+ StartProfilerScreen(viewModel = profilerViewModel)
+ }
}
override fun onDismiss(dialog: DialogInterface) {
@@ -130,10 +132,11 @@ class ProfilerStartDialogFragment : AppCompatDialogFragment() {
text = stringResource(R.string.profiler_settings_title),
fontWeight = FontWeight.Bold,
fontSize = 16.sp,
- color = FirefoxTheme.colors.textPrimary,
modifier = Modifier.padding(bottom = 8.dp),
)
+
Spacer(modifier = Modifier.height(8.dp))
+
ProfilerSettings.entries.forEach { setting ->
val settingName = when (setting) {
ProfilerSettings.Firefox -> stringResource(R.string.profiler_filter_firefox)
@@ -158,6 +161,7 @@ class ProfilerStartDialogFragment : AppCompatDialogFragment() {
selected = selectedSetting == setting,
onClick = { selectedSetting = setting },
)
+
Spacer(modifier = Modifier.height(8.dp))
}
}
