[fenix] For https://github.com/mozilla-mobile/fenix/issues/28419 ~ Replace RadioButton

app/src/main/java/org/mozilla/fenix/perf/ProfilerReusableComposable.kt

@@ -5,6 +5,7 @@
 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
@@ -15,19 +16,22 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.RadioButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 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.unit.dp
 import androidx.compose.ui.unit.sp
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.compose.button.RadioButton
+import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
- * Dialogue top level card for the profiler
+ * Dialogue top level card for the profiler.
  */
 @Composable
 fun ProfilerDialogueCard(content: @Composable () -> Unit) {
@@ -40,42 +44,42 @@ fun ProfilerDialogueCard(content: @Composable () -> Unit) {
 }
 
 /**
- * Top level radio button for the profiler dialogue
+ * Top level radio button for the profiler dialogue.
+ *
+ * @param text The main text to be displayed.
+ * @param subText The subtext to be displayed.
+ * @param selected [Boolean] that indicates whether the radio button is currently selected.
+ * @param onClick Invoked when the radio button is clicked.
  */
 @Composable
 fun ProfilerLabeledRadioButton(
     text: String,
     subText: String,
-    state: MutableState<String>,
+    selected: Boolean = false,
+    onClick: () -> Unit,
 ) {
-    Row {
+    Row(
+        modifier = Modifier.clickable { onClick() },
+    ) {
         RadioButton(
-            selected = state.value == text,
-            onClick = { state.value = text },
+            selected = selected,
+            onClick = {},
             enabled = true,
         )
-        Column {
-            Text(
-                text = text,
-                modifier = Modifier
-                    .padding(start = 8.dp)
-                    .clickable {
-                        state.value = text
-                    },
-            )
+        Column(
+            modifier = Modifier.padding(horizontal = 8.dp),
+        ) {
+            Text(text = text)
             Text(
                 text = subText,
                 fontWeight = FontWeight.ExtraLight,
-                modifier = Modifier
-                    .padding(start = 8.dp)
-                    .clickable { state.value = text },
             )
         }
     }
 }
 
 /**
- * Profiler Dialogue to display circular spinner when waiting
+ * Profiler Dialogue to display circular spinner when waiting.
  */
 @Composable
 fun WaitForProfilerDialog(
@@ -98,3 +102,30 @@ fun WaitForProfilerDialog(
         }
     }
 }
+
+/**
+ * Preview example of [ProfilerLabeledRadioButton].
+ */
+@Composable
+@LightDarkPreview
+private fun ProfilerLabeledRadioButtonPreview() {
+    val radioOptions = listOf("Firefox", "Graphics", "Media", "Networking")
+    val selectedOption = remember { mutableStateOf("Firefox") }
+
+    FirefoxTheme {
+        Column(
+            modifier = Modifier.background(FirefoxTheme.colors.layer1),
+        ) {
+            radioOptions.forEach { text ->
+                ProfilerLabeledRadioButton(
+                    text = text,
+                    subText = "Sub",
+                    selected = selectedOption.value == text,
+                    onClick = {
+                        selectedOption.value = text
+                    },
+                )
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/perf/ProfilerStartDialogFragment.kt

@@ -100,6 +100,7 @@ class ProfilerStartDialogFragment : AppCompatDialogFragment() {
         }
     }
 
+    @SuppressWarnings("LongMethod")
     @Composable
     private fun StartCard(
         viewStateObserver: MutableState<CardState>,
@@ -126,25 +127,37 @@ class ProfilerStartDialogFragment : AppCompatDialogFragment() {
                 ProfilerLabeledRadioButton(
                     text = stringResource(R.string.profiler_filter_firefox),
                     subText = stringResource(R.string.profiler_filter_firefox_explain),
-                    state = featureAndThreadsObserver,
+                    selected = featureAndThreadsObserver.value == stringResource(R.string.profiler_filter_firefox),
+                    onClick = {
+                        featureAndThreadsObserver.value = getString(R.string.profiler_filter_firefox)
+                    },
                 )
 
                 ProfilerLabeledRadioButton(
                     text = stringResource(R.string.profiler_filter_graphics),
                     subText = stringResource(R.string.profiler_filter_graphics_explain),
-                    state = featureAndThreadsObserver,
+                    selected = featureAndThreadsObserver.value == stringResource(R.string.profiler_filter_graphics),
+                    onClick = {
+                        featureAndThreadsObserver.value = getString(R.string.profiler_filter_graphics)
+                    },
                 )
 
                 ProfilerLabeledRadioButton(
                     text = stringResource(R.string.profiler_filter_media),
                     subText = stringResource(R.string.profiler_filter_media_explain),
-                    state = featureAndThreadsObserver,
+                    selected = featureAndThreadsObserver.value == stringResource(R.string.profiler_filter_media),
+                    onClick = {
+                        featureAndThreadsObserver.value = getString(R.string.profiler_filter_media)
+                    },
                 )
 
                 ProfilerLabeledRadioButton(
                     text = stringResource(R.string.profiler_filter_networking),
                     subText = stringResource(R.string.profiler_filter_networking_explain),
-                    state = featureAndThreadsObserver,
+                    selected = featureAndThreadsObserver.value == stringResource(R.string.profiler_filter_networking),
+                    onClick = {
+                        featureAndThreadsObserver.value = getString(R.string.profiler_filter_networking)
+                    },
                 )
                 Spacer(modifier = Modifier.height(8.dp))
                 Row(