Bug 1868262 - Add a menu button to navigation bar

app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt

@@ -44,6 +44,7 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import mozilla.appservices.places.BookmarkRoot
 import mozilla.appservices.places.uniffi.PlacesApiException
+import mozilla.components.browser.menu.view.MenuButton
 import mozilla.components.browser.state.action.ContentAction
 import mozilla.components.browser.state.selector.findCustomTab
 import mozilla.components.browser.state.selector.findCustomTabOrSelectedTab
@@ -58,6 +59,7 @@ import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.browser.state.state.content.DownloadState
 import mozilla.components.browser.state.store.BrowserStore
 import mozilla.components.browser.thumbnails.BrowserThumbnails
+import mozilla.components.browser.toolbar.BrowserToolbar
 import mozilla.components.concept.base.crash.Breadcrumb
 import mozilla.components.concept.engine.permission.SitePermissions
 import mozilla.components.concept.engine.prompt.ShareData
@@ -91,6 +93,7 @@ import mozilla.components.feature.session.ScreenOrientationFeature
 import mozilla.components.feature.session.SessionFeature
 import mozilla.components.feature.session.SwipeRefreshFeature
 import mozilla.components.feature.sitepermissions.SitePermissionsFeature
+import mozilla.components.feature.session.behavior.EngineViewBrowserToolbarBehavior
 import mozilla.components.feature.webauthn.WebAuthnFeature
 import mozilla.components.lib.state.ext.consumeFlow
 import mozilla.components.lib.state.ext.flowScoped
@@ -465,6 +468,9 @@ abstract class BaseBrowserFragment :
                 context = context,
                 container = binding.browserLayout,
                 androidToolbarView = toolbarView,
+                menuButton = MenuButton(requireContext()).apply {
+                    menuBuilder = browserToolbarView.menuToolbar.menuBuilder
+                },
             )
         }
 

app/src/main/java/org/mozilla/fenix/components/toolbar/BottomToolbarContainerView.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import mozilla.components.browser.menu.view.MenuButton
 import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.theme.FirefoxTheme
 
@@ -22,6 +23,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
  * @param container The ViewGroup into which the NavigationBar composable will be added.
  * @param navigationItems A list of [ActionItem] objects representing the items to be displayed in the navigation bar.
  * @param androidToolbarView An option toolbar view that will be added atop of the navigation bar.
+ * @param menuButton A [MenuButton] to be used for [ItemType.MENU]
+ *
  * Defaults to [NavigationItems.defaultItems] which provides a standard set of navigation items.
  */
 class BottomToolbarContainerView(
@@ -29,6 +32,7 @@ class BottomToolbarContainerView(
     container: ViewGroup,
     navigationItems: List<ActionItem> = NavigationItems.defaultItems,
     androidToolbarView: View? = null,
+    menuButton: MenuButton
 ) {
 
     init {
@@ -42,7 +46,10 @@ class BottomToolbarContainerView(
                             Divider()
                         }
 
-                        NavigationBar(actionItems = navigationItems)
+                        NavigationBar(
+                            actionItems = navigationItems,
+                            menuButton = menuButton,
+                        )
                     }
                 }
             }

app/src/main/java/org/mozilla/fenix/components/toolbar/BrowserToolbarView.kt

@@ -57,6 +57,7 @@ class BrowserToolbarView(
         .findViewById(R.id.toolbar)
 
     val toolbarIntegration: ToolbarIntegration
+    val menuToolbar: ToolbarMenu
 
     @VisibleForTesting
     internal val isPwaTabOrTwaTab: Boolean
@@ -129,7 +130,6 @@ class BrowserToolbarView(
                 display.hint = context.getString(R.string.search_hint)
             }
 
-            val menuToolbar: ToolbarMenu
             if (isCustomTabSession) {
                 menuToolbar = CustomTabToolbarMenu(
                     context = this,

app/src/main/java/org/mozilla/fenix/components/toolbar/NavigationBar.kt

@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
@@ -24,6 +25,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import mozilla.components.browser.menu.view.MenuButton
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -33,9 +36,13 @@ import org.mozilla.fenix.theme.Theme
  * Top-level UI for displaying the navigation bar.
  *
  * @param actionItems A list of [ActionItem] used to populate the bar.
+ * @param menuButton A [MenuButton] to be used for [ItemType.MENU]
  */
 @Composable
-fun NavigationBar(actionItems: List<ActionItem>) {
+fun NavigationBar(
+    actionItems: List<ActionItem>,
+    menuButton: MenuButton? = null
+) {
     Box(
         modifier = Modifier
             .background(FirefoxTheme.colors.layer1)
@@ -65,6 +72,28 @@ fun NavigationBar(actionItems: List<ActionItem>) {
                             TabsIcon(item = it, tabsCount = 0)
                         }
                     }
+
+                    ItemType.MENU -> {
+                        // Probably, [ActionItem] will be refactored in future to incorporate
+                        // the [MenuButton] as well, so this check won't be necessary;
+                        // will revisit it when doing tab counter and navigation buttons.
+                        if (menuButton != null) {
+                            AndroidView(
+                                modifier = Modifier.height(48.dp).width(48.dp),
+                                factory = { _ ->
+                                    menuButton
+                                },
+                            )
+                        } else {
+                            IconButton(onClick = {}) {
+                                Icon(
+                                    painter = painterResource(it.iconId),
+                                    stringResource(id = it.descriptionResourceId),
+                                    tint = FirefoxTheme.colors.iconPrimary,
+                                )
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -110,7 +139,7 @@ data class ActionItem(
  * [TAB_COUNTER] - Represents a specialized item used to display a count, such as the number of open tabs in a browser.
  */
 enum class ItemType {
-    STANDARD, TAB_COUNTER
+    STANDARD, TAB_COUNTER, MENU
 }
 
 /**
@@ -122,9 +151,10 @@ object NavigationItems {
         descriptionResourceId = R.string.browser_toolbar_home,
     )
 
-    val settings = ActionItem(
+    val menu = ActionItem(
         iconId = R.drawable.mozac_ic_ellipsis_vertical_24,
         descriptionResourceId = R.string.mozac_browser_menu_button,
+        type = ItemType.MENU,
     )
 
     val back = ActionItem(
@@ -143,7 +173,7 @@ object NavigationItems {
         type = ItemType.TAB_COUNTER,
     )
 
-    val defaultItems = listOf(back, forward, home, tabs, settings)
+    val defaultItems = listOf(back, forward, home, tabs, menu)
 }
 
 @LightDarkPreview

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -54,6 +54,7 @@ import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
+import mozilla.components.browser.menu.view.MenuButton
 import mozilla.components.browser.state.selector.findTab
 import mozilla.components.browser.state.selector.normalTabs
 import mozilla.components.browser.state.selector.privateTabs
@@ -444,10 +445,21 @@ class HomeFragment : Fragment() {
                 null
             }
 
+            val menuButton = MenuButton(requireContext())
+            HomeMenuView(
+                view = binding.root,
+                context = requireContext(),
+                lifecycleOwner = viewLifecycleOwner,
+                homeActivity = activity,
+                navController = findNavController(),
+                menuButton = WeakReference(menuButton),
+            ).also { it.build() }
+
             BottomToolbarContainerView(
                 context = requireContext(),
                 container = binding.homeLayout,
                 androidToolbarView = toolbarView,
+                menuButton = menuButton,
             )
         }