Bug 1864078 - Create debug drawer navigation UI

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

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() {
+fun DebugDrawer(
-    DebugDrawerHome(
+    navController: NavHostController,
-        menuItems = emptyList(),
+    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 {
+        Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
-            DebugDrawer()
+            DebugDrawer(
+                navController = navController,
+                onBackButtonClick = {
+                    navController.popBackStack()
+                },
+            )
         }
     }
 }

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()
+            },
         )
     }
 }

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 = {},
         )
     }
 }

app/src/main/res/values/strings.xml

@@ -2422,6 +2422,8 @@
     <!-- Debug drawer -->
     <!-- The user-facing title of the Debug Drawer feature. -->
     <string name="debug_drawer_title">Debug Tools</string>
+    <!-- Content description (not visible, for screen readers etc.): Navigate back within the debug drawer. -->
+    <string name="debug_drawer_back_button_content_description">Navigate back</string>
     <!-- The title of the Tab Tools feature in the Debug Drawer. -->
     <string name="debug_drawer_tab_tools_title">Tab Tools</string>
     <!-- The title of the tab count section in Tab Tools. -->

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}"