diff --git a/app/build.gradle b/app/build.gradle
index 2f462c194..de18512c7 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -634,6 +634,7 @@ dependencies {
implementation ComponentsDependencies.androidx_fragment
implementation FenixDependencies.androidx_navigation_fragment
implementation FenixDependencies.androidx_navigation_ui
+ implementation ComponentsDependencies.androidx_compose_navigation
implementation ComponentsDependencies.androidx_recyclerview
implementation ComponentsDependencies.androidx_lifecycle_common
implementation ComponentsDependencies.androidx_lifecycle_livedata
diff --git a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt
index 4941edaa0..97aead2c2 100644
--- a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt
+++ b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugDrawer.kt
@@ -4,27 +4,126 @@
package org.mozilla.fenix.debugsettings.ui
+import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+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 org.mozilla.fenix.R
import org.mozilla.fenix.compose.annotation.LightDarkPreview
import org.mozilla.fenix.theme.FirefoxTheme
/**
* The debug drawer UI.
+ *
+ * @param navController [NavHostController] used to perform navigation actions on the [NavHost].
+ * @param onBackButtonClick Invoked when the user taps on the back button in the app bar.
*/
@Composable
-fun DebugDrawer() {
- DebugDrawerHome(
- menuItems = emptyList(),
- )
+fun DebugDrawer(
+ navController: NavHostController,
+ onBackButtonClick: () -> Unit,
+) {
+ var backButtonVisible by remember { mutableStateOf(false) }
+ var toolbarTitle by remember { mutableStateOf("") }
+
+ // This is temporary until https://bugzilla.mozilla.org/show_bug.cgi?id=1864076
+ val homeMenuItems = List(size = 5) {
+ DebugDrawerMenuItem(
+ label = "Screen $it",
+ onClick = {
+ navController.navigate("screen_$it")
+ },
+ )
+ }
+
+ Column(modifier = Modifier.fillMaxSize()) {
+ TopAppBar(
+ title = {
+ Text(
+ text = toolbarTitle,
+ color = FirefoxTheme.colors.textPrimary,
+ style = FirefoxTheme.typography.headline6,
+ )
+ },
+ navigationIcon = if (backButtonVisible) {
+ topBarBackButton(onClick = onBackButtonClick)
+ } else {
+ null
+ },
+ backgroundColor = FirefoxTheme.colors.layer1,
+ elevation = 5.dp,
+ )
+
+ NavHost(
+ navController = navController,
+ startDestination = "home",
+ modifier = Modifier.fillMaxSize(),
+ ) {
+ composable(route = "home") {
+ toolbarTitle = stringResource(id = R.string.debug_drawer_title)
+ backButtonVisible = false
+
+ DebugDrawerHome(menuItems = homeMenuItems)
+ }
+
+ homeMenuItems.forEachIndexed { index, item ->
+ composable(route = "screen_$index") {
+ toolbarTitle = item.label
+ backButtonVisible = true
+ Text(
+ text = "Screen $index",
+ color = FirefoxTheme.colors.textPrimary,
+ style = FirefoxTheme.typography.headline6,
+ )
+ }
+ }
+ }
+ }
+}
+
+@Composable
+private fun topBarBackButton(onClick: () -> Unit): @Composable () -> Unit = {
+ IconButton(
+ onClick = onClick,
+ ) {
+ Icon(
+ painter = painterResource(R.drawable.mozac_ic_back_24),
+ contentDescription = stringResource(R.string.debug_drawer_back_button_content_description),
+ tint = FirefoxTheme.colors.iconPrimary,
+ )
+ }
}
@Composable
@LightDarkPreview
private fun DebugDrawerPreview() {
+ val navController = rememberNavController()
+
FirefoxTheme {
- Box {
- DebugDrawer()
+ Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
+ DebugDrawer(
+ navController = navController,
+ onBackButtonClick = {
+ navController.popBackStack()
+ },
+ )
}
}
}
diff --git a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugOverlay.kt b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugOverlay.kt
index 779c0db67..af19b283d 100644
--- a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugOverlay.kt
+++ b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/DebugOverlay.kt
@@ -27,6 +27,8 @@ import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
import kotlinx.coroutines.flow.distinctUntilChanged
import kotlinx.coroutines.flow.filter
import org.mozilla.fenix.R
@@ -38,15 +40,19 @@ import org.mozilla.fenix.theme.FirefoxTheme
/**
* Overlay for presenting app-wide debugging content.
*
+ * @param navController [NavHostController] used to perform navigation actions.
* @param drawerStatus The [DrawerStatus] indicating the physical state of the drawer.
* @param onDrawerOpen Invoked when the drawer is opened.
* @param onDrawerClose Invoked when the drawer is closed.
+ * @param onBackButtonClick Invoked when the user taps on the back button in the app bar.
*/
@Composable
fun DebugOverlay(
+ navController: NavHostController,
drawerStatus: DrawerStatus,
onDrawerOpen: () -> Unit,
onDrawerClose: () -> Unit,
+ onBackButtonClick: () -> Unit,
) {
val snackbarState = remember { SnackbarHostState() }
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
@@ -95,7 +101,10 @@ fun DebugOverlay(
ModalDrawer(
drawerContent = {
CompositionLocalProvider(LocalLayoutDirection provides currentLayoutDirection) {
- DebugDrawer()
+ DebugDrawer(
+ navController = navController,
+ onBackButtonClick = onBackButtonClick,
+ )
}
},
drawerBackgroundColor = FirefoxTheme.colors.layer1,
@@ -121,10 +130,12 @@ fun DebugOverlay(
@Composable
@LightDarkPreview
private fun DebugOverlayPreview() {
+ val navController = rememberNavController()
var drawerStatus by remember { mutableStateOf(DrawerStatus.Closed) }
FirefoxTheme {
DebugOverlay(
+ navController = navController,
drawerStatus = drawerStatus,
onDrawerOpen = {
drawerStatus = DrawerStatus.Open
@@ -132,6 +143,9 @@ private fun DebugOverlayPreview() {
onDrawerClose = {
drawerStatus = DrawerStatus.Closed
},
+ onBackButtonClick = {
+ navController.popBackStack()
+ },
)
}
}
diff --git a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/FenixOverlay.kt b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/FenixOverlay.kt
index 2a4178367..ae4397b73 100644
--- a/app/src/main/java/org/mozilla/fenix/debugsettings/ui/FenixOverlay.kt
+++ b/app/src/main/java/org/mozilla/fenix/debugsettings/ui/FenixOverlay.kt
@@ -7,6 +7,7 @@ package org.mozilla.fenix.debugsettings.ui
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
+import androidx.navigation.compose.rememberNavController
import mozilla.components.lib.state.ext.observeAsState
import org.mozilla.fenix.compose.annotation.LightDarkPreview
import org.mozilla.fenix.debugsettings.store.DebugDrawerAction
@@ -20,6 +21,7 @@ import org.mozilla.fenix.theme.Theme
*/
@Composable
fun FenixOverlay() {
+ val navController = rememberNavController()
val debugDrawerStore = remember { DebugDrawerStore() }
val drawerStatus by debugDrawerStore.observeAsState(initialValue = DrawerStatus.Closed) { state ->
state.drawerStatus
@@ -27,6 +29,7 @@ fun FenixOverlay() {
FirefoxTheme(theme = Theme.getTheme(allowPrivateTheme = false)) {
DebugOverlay(
+ navController = navController,
drawerStatus = drawerStatus,
onDrawerOpen = {
debugDrawerStore.dispatch(DebugDrawerAction.DrawerOpened)
@@ -34,6 +37,7 @@ fun FenixOverlay() {
onDrawerClose = {
debugDrawerStore.dispatch(DebugDrawerAction.DrawerClosed)
},
+ onBackButtonClick = {},
)
}
}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index a7d72790d..d2e684269 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -2422,6 +2422,8 @@
Debug Tools
+
+ Navigate back
Tab Tools
diff --git a/plugins/fenixdependencies/src/main/java/FenixDependenciesPlugin.kt b/plugins/fenixdependencies/src/main/java/FenixDependenciesPlugin.kt
index 2a838a7c6..e4a769a07 100644
--- a/plugins/fenixdependencies/src/main/java/FenixDependenciesPlugin.kt
+++ b/plugins/fenixdependencies/src/main/java/FenixDependenciesPlugin.kt
@@ -60,7 +60,6 @@ object FenixDependencies {
const val androidx_navigation_ui = "androidx.navigation:navigation-ui:${FenixVersions.androidx_navigation}"
const val androidx_transition = "androidx.transition:transition:${FenixVersions.androidx_transition}"
const val androidx_datastore = "androidx.datastore:datastore:${FenixVersions.androidx_datastore}"
- const val androidx_compose_navigation = "androidx.navigation:navigation-compose:${FenixVersions.androidx_navigation}"
const val google_accompanist_drawablepainter = "com.google.accompanist:accompanist-drawablepainter:${FenixVersions.google_accompanist}"