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