Split Omnibar: Bottom navigation (#7032)

Task/Issue URL: https://app.asana.com/1/137249556945/project/1207418217763355/task/1210869932265904?focus=true ### Description This PR adds the bottom navigation bar view when selected in the Appearance settings. ### Steps to test this PR - [x] Go to Settings -> Appearance - [x] Select the Split omnibar option - [x] Go back to the browser - [x] Verify the bottom navigation bar is shown - [x] Load some site - [x] Scroll up to hide the omnibar and bottom navigation bar - [x] Scroll down to show the omnibar and navigation bar - [x] Try tapping on the button to verify they work - [x] Notice the first button is a + button that opens a NTP - [x] Open a NTP - [x] Notice the first button is the a key -> Tap on it - [x] Verify it opens the password manager - [x] Tap on the menu button - [x] Verify it opens the browser menu with the navigation buttons at the bottom --------- Co-authored-by: Łukasz Paczos <lpaczos@duckduckgo.com>

Author: 0nko

app/src/androidTest/java/com/duckduckgo/app/browser/BrowserTabViewModelTest.kt

@@ -114,6 +114,7 @@ import com.duckduckgo.app.browser.model.BasicAuthenticationRequest
 import com.duckduckgo.app.browser.model.LongPressTarget
 import com.duckduckgo.app.browser.newtab.FavoritesQuickAccessAdapter.QuickAccessFavorite
 import com.duckduckgo.app.browser.omnibar.OmnibarEntryConverter
+import com.duckduckgo.app.browser.omnibar.OmnibarFeatureRepository
 import com.duckduckgo.app.browser.omnibar.QueryOrigin.*
 import com.duckduckgo.app.browser.refreshpixels.RefreshPixelSender
 import com.duckduckgo.app.browser.remotemessage.RemoteMessagingModel
@@ -583,6 +584,7 @@ class BrowserTabViewModelTest {
  private val mockSubscriptionsJSHelper: SubscriptionsJSHelper = mock()
  private val mockOnboardingHomeScreenWidgetToggles: OnboardingHomeScreenWidgetToggles = mock()
  private val tabManager: TabManager = mock()
+ private val mockOmnibarFeatureRepository: OmnibarFeatureRepository = mock()
 
  private val mockAddressDisplayFormatter: AddressDisplayFormatter by lazy {
  mock {
@@ -846,6 +848,7 @@ class BrowserTabViewModelTest {
  webViewCompatWrapper = mockWebViewCompatWrapper,
  addressBarTrackersAnimationFeatureToggle = mockAddressBarTrackersAnimationFeatureToggle,
  autoconsentPixelManager = mockAutoconsentPixelManager,
+ omnibarFeatureRepository = mockOmnibarFeatureRepository,
  )
 
  testee.loadData("abc", null, false, false)

app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt

@@ -140,6 +140,7 @@ import com.duckduckgo.app.browser.menu.VpnMenuStore
 import com.duckduckgo.app.browser.model.BasicAuthenticationCredentials
 import com.duckduckgo.app.browser.model.BasicAuthenticationRequest
 import com.duckduckgo.app.browser.model.LongPressTarget
+import com.duckduckgo.app.browser.navigation.bar.BrowserNavigationBarViewIntegration
 import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarObserver
 import com.duckduckgo.app.browser.newtab.NewTabPageProvider
 import com.duckduckgo.app.browser.omnibar.Omnibar
@@ -644,6 +645,8 @@ class BrowserTabFragment :
 
  private val binding: FragmentBrowserTabBinding by viewBinding()
 
+ private lateinit var browserNavigationBarIntegration: BrowserNavigationBarViewIntegration
+
  private lateinit var omnibar: Omnibar
 
  private lateinit var webViewContainer: FrameLayout
@@ -924,7 +927,7 @@ class BrowserTabFragment :
  }
 
  InputScreenActivityResultCodes.MENU_REQUESTED -> {
- launchPopupMenu()
+ launchPopupMenu(omnibarFeatureRepository.isSplitOmnibarEnabled)
  }
 
  InputScreenActivityResultCodes.TAB_SWITCHER_REQUESTED -> {
@@ -1021,7 +1024,7 @@ class BrowserTabFragment :
  omnibar = Omnibar(
  omnibarType = settingsDataStore.omnibarType,
  binding = binding,
- isUnifiedOmnibarEnabled = omnibarFeatureRepository.isUnifiedOmnibarEnabled,
+ isUnifiedOmnibarEnabled = omnibarFeatureRepository.isUnifiedOmnibarFlagEnabled,
  )
 
  webViewContainer = binding.webViewContainer
@@ -1189,6 +1192,14 @@ class BrowserTabFragment :
  viewModel.onNavigationBarBookmarksButtonClicked()
  }
  }
+
+ browserNavigationBarIntegration = BrowserNavigationBarViewIntegration(
+ lifecycleScope = lifecycleScope,
+ browserTabFragmentBinding = binding,
+ isEnabled = omnibarFeatureRepository.isSplitOmnibarEnabled,
+ omnibar = omnibar,
+ browserNavigationBarObserver = observer,
+ )
  }
 
  private fun configureEditModeChangeDetection() {
@@ -1272,6 +1283,8 @@ class BrowserTabFragment :
  )
  requireActivity().window.navigationBarColor = customTabToolbarColor
  requireActivity().window.statusBarColor = customTabToolbarColor
+
+ browserNavigationBarIntegration.configureCustomTab()
  }
  }
 
@@ -1283,8 +1296,8 @@ class BrowserTabFragment :
  private fun createPopupMenu() {
  val popupMenuResourceType =
  when (omnibar.omnibarType) {
- OmnibarType.SINGLE_TOP, OmnibarType.SPLIT -> BrowserPopupMenu.ResourceType.TOP
- OmnibarType.SINGLE_BOTTOM -> BrowserPopupMenu.ResourceType.BOTTOM
+ OmnibarType.SINGLE_TOP -> BrowserPopupMenu.ResourceType.TOP
+ OmnibarType.SINGLE_BOTTOM, OmnibarType.SPLIT -> BrowserPopupMenu.ResourceType.BOTTOM
  }
 
  popupMenu =
@@ -1409,7 +1422,7 @@ class BrowserTabFragment :
  startActivity(intent)
  }
 
- private fun launchPopupMenu() {
+ private fun launchPopupMenu(anchorToNavigationBar: Boolean) {
  val isFocusedNtp = omnibar.viewMode == ViewMode.NewTab && omnibar.getText().isEmpty() && omnibar.omnibarTextInput.hasFocus()
 
  // small delay added to let keyboard disappear and avoid jarring transition
@@ -1424,7 +1437,12 @@ class BrowserTabFragment :
  }
  }
 
- popupMenu.show(binding.rootView, omnibar.toolbar)
+ if (anchorToNavigationBar) {
+ val anchorView = browserNavigationBarIntegration.navigationBarView.popupMenuAnchor
+ popupMenu.showAnchoredView(requireActivity(), binding.rootView, anchorView)
+ } else {
+ popupMenu.show(binding.rootView, omnibar.toolbar)
+ }
  viewModel.onPopupMenuLaunched()
  if (isActiveCustomTab()) {
  pixel.fire(CustomTabPixelNames.CUSTOM_TABS_MENU_OPENED)
@@ -1516,6 +1534,7 @@ class BrowserTabFragment :
  webView?.removeEnableSwipeRefreshCallback()
  webView?.stopNestedScroll()
  webView?.stopLoading()
+ browserNavigationBarIntegration.onDestroyView()
  super.onDestroyView()
  }
 
@@ -1697,6 +1716,8 @@ class BrowserTabFragment :
  errorView.errorLayout.gone()
  sslErrorView.gone()
  maliciousWarningView.gone()
+
+ browserNavigationBarIntegration.configureNewTabViewMode()
  }
 
  private fun showBrowser() {
@@ -1710,6 +1731,8 @@ class BrowserTabFragment :
  sslErrorView.gone()
  maliciousWarningView.gone()
  omnibar.setViewMode(ViewMode.Browser(viewModel.url))
+
+ browserNavigationBarIntegration.configureBrowserViewMode()
  }
 
  private fun showError(
@@ -1731,6 +1754,8 @@ class BrowserTabFragment :
  errorView.yetiIcon.setImageResource(com.duckduckgo.mobile.android.R.drawable.ic_yeti_dark)
  }
  errorView.errorLayout.show()
+
+ browserNavigationBarIntegration.configureBrowserViewMode()
  }
 
  private fun showMaliciousWarning(
@@ -1769,6 +1794,8 @@ class BrowserTabFragment :
  isMainframe = isMainframe,
  ),
  )
+
+ browserNavigationBarIntegration.configureBrowserViewMode()
  }
 
  private fun hideMaliciousWarning(canGoBack: Boolean) {
@@ -1843,6 +1870,8 @@ class BrowserTabFragment :
  viewModel.onSSLCertificateWarningAction(action, errorResponse.url)
  }
  sslErrorView.show()
+
+ browserNavigationBarIntegration.configureBrowserViewMode()
  }
 
  private fun hideSSLWarning() {
@@ -2284,7 +2313,7 @@ class BrowserTabFragment :
  is Command.ShowAutoconsentAnimation -> showAutoconsentAnimation(it.isCosmetic)
 
  is Command.LaunchPopupMenu -> {
- launchPopupMenu()
+ launchPopupMenu(it.anchorToNavigationBar)
  hideKeyboard()
  }
 
@@ -3894,7 +3923,6 @@ class BrowserTabFragment :
  logcat(VERBOSE) { "Keyboard now hiding" }
  hideKeyboard(omnibar.omnibarTextInput)
  binding.focusDummy.requestFocus()
- omnibar.showOutline(false)
  }
  }
 
@@ -3919,7 +3947,6 @@ class BrowserTabFragment :
  if (!isHidden) {
  logcat(VERBOSE) { "Keyboard now showing" }
  showKeyboard(omnibar.omnibarTextInput)
- omnibar.showOutline(true)
  }
  }
 
@@ -4538,6 +4565,8 @@ class BrowserTabFragment :
  webView?.setBottomMatchingBehaviourEnabled(true) // only execute if animation is playing
  }
 
+ browserNavigationBarIntegration.configureFireButtonHighlight(highlighted = viewState.fireButton.isHighlighted())
+
  popupMenu.renderState(browserShowing, viewState, tabDisplayedInCustomTabScreen)
 
  renderFullscreenMode(viewState)
@@ -4868,6 +4897,8 @@ class BrowserTabFragment :
  omnibar.setViewMode(ViewMode.NewTab)
  omnibar.isScrollingEnabled = false
 
+ browserNavigationBarIntegration.configureNewTabViewMode()
+
  viewModel.onNewTabShown()
  }
 

app/src/main/java/com/duckduckgo/app/browser/BrowserTabViewModel.kt

@@ -192,6 +192,7 @@ import com.duckduckgo.app.browser.model.BasicAuthenticationRequest
 import com.duckduckgo.app.browser.model.LongPressTarget
 import com.duckduckgo.app.browser.newtab.FavoritesQuickAccessAdapter
 import com.duckduckgo.app.browser.omnibar.OmnibarEntryConverter
+import com.duckduckgo.app.browser.omnibar.OmnibarFeatureRepository
 import com.duckduckgo.app.browser.omnibar.QueryOrigin
 import com.duckduckgo.app.browser.omnibar.QueryOrigin.FromAutocomplete
 import com.duckduckgo.app.browser.refreshpixels.RefreshPixelSender
@@ -488,6 +489,7 @@ class BrowserTabViewModel @Inject constructor(
  private val webViewCompatWrapper: WebViewCompatWrapper,
  private val addressBarTrackersAnimationFeatureToggle: AddressBarTrackersAnimationFeatureToggle,
  private val autoconsentPixelManager: AutoconsentPixelManager,
+ private val omnibarFeatureRepository: OmnibarFeatureRepository,
 ) : ViewModel(),
  WebViewClientListener,
  EditSavedSiteListener,
@@ -2891,7 +2893,7 @@ class BrowserTabViewModel @Inject constructor(
  showMenuButton = HighlightableButton.Visible(highlighted = false),
  )
  }
- command.value = LaunchPopupMenu
+ command.value = LaunchPopupMenu(anchorToNavigationBar = !isCustomTab && omnibarFeatureRepository.isSplitOmnibarEnabled)
  }
 
  fun onPopupMenuLaunched() {

app/src/main/java/com/duckduckgo/app/browser/commands/Command.kt

@@ -479,7 +479,7 @@ sealed class Command {
 
  data object CloseCustomTab : Command()
 
- data object LaunchPopupMenu : Command()
+ data class LaunchPopupMenu(val anchorToNavigationBar: Boolean) : Command()
 
  data class ShowAutoconsentAnimation(
  val isCosmetic: Boolean,

app/src/main/java/com/duckduckgo/app/browser/navigation/bar/BrowserNavigationBarViewIntegration.kt

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2025 DuckDuckGo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.duckduckgo.app.browser.navigation.bar
+
+import com.duckduckgo.app.browser.BrowserTabFragment
+import com.duckduckgo.app.browser.databinding.FragmentBrowserTabBinding
+import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarObserver
+import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarView
+import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarView.ViewMode.Browser
+import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarView.ViewMode.NewTab
+import com.duckduckgo.app.browser.omnibar.Omnibar
+import com.duckduckgo.common.ui.view.gone
+import com.duckduckgo.common.ui.view.show
+import com.duckduckgo.common.utils.keyboardVisibilityFlow
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.launch
+
+/**
+ * Helper class that extracts business logic that manages the [BrowserNavigationBarView] from the [BrowserTabFragment].
+ *
+ * The class needs to be instantiated strictly after the fragment's view has been created,
+ * and [onDestroyView] has to be called when the the fragment's view is destroyed.
+ * After the view is destroyed, the class becomes no-op and needs to be re-instantiated with a valid view binding.
+ */
+class BrowserNavigationBarViewIntegration(
+ private val lifecycleScope: CoroutineScope,
+ browserTabFragmentBinding: FragmentBrowserTabBinding,
+ isEnabled: Boolean,
+ private val omnibar: Omnibar,
+ browserNavigationBarObserver: BrowserNavigationBarObserver,
+) {
+ val navigationBarView: BrowserNavigationBarView = browserTabFragmentBinding.navigationBar
+
+ private var keyboardVisibilityObserverJob: Job? = null
+ private var navigationBarVisibilityChangeJob: Job? = null
+
+ init {
+ if (isEnabled) {
+ onEnabled()
+ } else {
+ onDisabled()
+ }
+ navigationBarView.browserNavigationBarObserver = browserNavigationBarObserver
+ }
+
+ fun configureCustomTab() {
+ navigationBarView.setCustomTab(isCustomTab = true)
+ }
+
+ fun configureBrowserViewMode() {
+ navigationBarView.setViewMode(Browser)
+ }
+
+ fun configureNewTabViewMode() {
+ navigationBarView.setViewMode(NewTab)
+ }
+
+ fun configureFireButtonHighlight(highlighted: Boolean) {
+ navigationBarView.setFireButtonHighlight(highlighted)
+ }
+
+ fun onDestroyView() {
+ onDisabled()
+ }
+
+ private fun onEnabled() {
+ navigationBarView.show()
+ // we're hiding the navigation bar when keyboard is shown,
+ // to prevent it from being "pushed up" within the coordinator layout
+ keyboardVisibilityObserverJob = lifecycleScope.launch {
+ omnibar.textInputRootView.keyboardVisibilityFlow().distinctUntilChanged().collect { keyboardVisible ->
+ navigationBarVisibilityChangeJob?.cancel()
+ if (keyboardVisible) {
+ navigationBarView.gone()
+ } else {
+ navigationBarVisibilityChangeJob = launch {
+ delay(BrowserTabFragment.KEYBOARD_DELAY)
+ navigationBarView.show()
+ }
+ }
+ }
+ }
+ }
+
+ private fun onDisabled() {
+ navigationBarView.gone()
+ keyboardVisibilityObserverJob?.cancel()
+ }
+}