commit a708e41272514f3cbbf9cb4e2d417dabdcac3f95
parent 4c3f085cf338be513ac07a55a3d03bdfc59fbeaa
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 18 Nov 2025 21:46:23 +0000
Bug 2000090 - Part 7: Migrate DebugDrawer and DebugerDrawerHome to use M3 color tokens r=android-reviewers,007
Differential Revision: https://phabricator.services.mozilla.com/D272577
Diffstat:
2 files changed, 116 insertions(+), 57 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt
@@ -4,18 +4,14 @@
package org.mozilla.fenix.debugsettings.ui
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -25,15 +21,18 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
+import mozilla.components.compose.base.button.IconButton
import org.mozilla.fenix.R
import org.mozilla.fenix.debugsettings.navigation.DebugDrawerDestination
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
/**
@@ -61,8 +60,7 @@ fun DebugDrawer(
title = {
Text(
text = toolbarTitle,
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline6,
+ style = FirefoxTheme.typography.headline5,
)
},
modifier = Modifier.shadow(elevation = 5.dp),
@@ -70,13 +68,13 @@ fun DebugDrawer(
if (backButtonVisible) {
IconButton(
onClick = onBackButtonClick,
+ contentDescription = stringResource(
+ id = R.string.debug_drawer_back_button_content_description,
+ ),
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
- contentDescription = stringResource(
- id = R.string.debug_drawer_back_button_content_description,
- ),
- tint = FirefoxTheme.colors.iconPrimary,
+ contentDescription = null,
)
}
}
@@ -85,10 +83,8 @@ fun DebugDrawer(
top = 0.dp,
bottom = 0.dp,
),
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
)
},
- containerColor = FirefoxTheme.colors.layer1,
) { paddingValues ->
NavHost(
navController = navController,
@@ -130,7 +126,6 @@ private fun DebugDrawerPreview() {
content = {
Text(
text = "Tool $index",
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
},
@@ -139,14 +134,45 @@ private fun DebugDrawerPreview() {
}
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- DebugDrawer(
- navController = navController,
- destinations = destinations,
- onBackButtonClick = {
- navController.popBackStack()
+ DebugDrawer(
+ navController = navController,
+ destinations = destinations,
+ onBackButtonClick = {
+ navController.popBackStack()
+ },
+ )
+ }
+}
+
+@Composable
+@Preview
+private fun DebugDrawerPrivatePreview() {
+ val navController = rememberNavController()
+ val destinations = remember {
+ List(size = 15) { index ->
+ DebugDrawerDestination(
+ route = "screen_$index",
+ title = R.string.debug_drawer_title,
+ onClick = {
+ navController.navigate(route = "screen_$index")
+ },
+ content = {
+ Text(
+ text = "Tool $index",
+ style = FirefoxTheme.typography.headline6,
+ )
},
)
}
}
+
+ FirefoxTheme(theme = Theme.Private) {
+ DebugDrawer(
+ navController = navController,
+ destinations = destinations,
+ onBackButtonClick = {
+ navController.popBackStack()
+ },
+ )
+ }
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawerHome.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawerHome.kt
@@ -4,7 +4,6 @@
package org.mozilla.fenix.debugsettings.ui
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
@@ -15,8 +14,10 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@@ -25,6 +26,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
@@ -37,6 +39,7 @@ import org.mozilla.fenix.R
import org.mozilla.fenix.compose.list.TextListItem
import org.mozilla.fenix.debugsettings.navigation.DebugDrawerDestination
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
/**
* The navigation route for [DebugDrawerHome].
@@ -64,47 +67,46 @@ fun DebugDrawerHome(
appVersion = LocalContext.current.appVersionName
}
- LazyColumn(
- modifier = Modifier
- .fillMaxSize()
- .background(color = FirefoxTheme.colors.layer1),
- state = lazyListState,
- ) {
- item(key = "home_header") {
- Row(
- modifier = Modifier
- .padding(all = 16.dp)
- .fillMaxWidth(),
- horizontalArrangement = Arrangement.SpaceBetween,
- ) {
- Text(
- text = appName,
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline5,
- )
+ Surface {
+ LazyColumn(
+ modifier = Modifier.fillMaxSize(),
+ state = lazyListState,
+ ) {
+ item(key = "home_header") {
+ Row(
+ modifier = Modifier
+ .padding(all = 16.dp)
+ .fillMaxWidth(),
+ horizontalArrangement = Arrangement.SpaceBetween,
+ ) {
+ Text(
+ text = appName,
+ style = FirefoxTheme.typography.headline5,
+ )
- Text(
- text = appVersion,
- color = FirefoxTheme.colors.textSecondary,
- style = FirefoxTheme.typography.headline5,
- )
- }
+ Text(
+ text = appVersion,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
+ style = FirefoxTheme.typography.headline5,
+ )
+ }
- HorizontalDivider()
- }
+ HorizontalDivider()
+ }
- items(
- items = destinations,
- key = { destination ->
- destination.route
- },
- ) { destination ->
- TextListItem(
- label = stringResource(id = destination.title),
- onClick = destination.onClick,
- )
+ items(
+ items = destinations,
+ key = { destination ->
+ destination.route
+ },
+ ) { destination ->
+ TextListItem(
+ label = stringResource(id = destination.title),
+ onClick = destination.onClick,
+ )
- HorizontalDivider()
+ HorizontalDivider()
+ }
}
}
}
@@ -141,3 +143,34 @@ private fun DebugDrawerHomePreview() {
}
}
}
+
+@Composable
+@Preview
+private fun DebugDrawerHomePrivatePreview() {
+ val scope = rememberCoroutineScope()
+ val snackbarState = remember { SnackbarHostState() }
+
+ FirefoxTheme(theme = Theme.Private) {
+ Box {
+ DebugDrawerHome(
+ destinations = List(size = 30) {
+ DebugDrawerDestination(
+ route = "screen_$it",
+ title = R.string.debug_drawer_title,
+ onClick = {
+ scope.launch {
+ snackbarState.displaySnackbar(message = "item $it clicked")
+ }
+ },
+ content = {},
+ )
+ },
+ )
+
+ SnackbarHost(
+ hostState = snackbarState,
+ modifier = Modifier.align(Alignment.BottomCenter),
+ )
+ }
+ }
+}
