Visual update: Apply new design to the exisiting omnibar (#6283)

Task/Issue URL:
https://app.asana.com/1/137249556945/project/1207418217763355/task/1210552742244184?focus=true

### Description

This PR uses the new UI design theme and applies it to the existing
omnibar layout.

### Steps to test this PR

_Input box animation_
- [x] Go to dev settings and enable the
`visualUpdatesWithoutBottomBarFeature` feature flag
- [x] Make sure the "Enable new UI with the navigation bar" in the
Experimental UI settings is disabled, as that takes precedence
- [x] Go to the browser
- [x] Verify the new UI design theme is shown with the original omnibar
layout (no bottom bar, toobar buttons next to the input box)
- [x] Tap on the input box to add focus
- [x] Notice the input box expands, hiding the toolbar button
- [x] Tap on the back arrow
- [x] Notice the input box contracts
- [x] Go to the menu and select Find in Page
- [x] Notice the input box expands and it becomes a search box
- [x] Tap on the X to close it
- [x] Notice the input box returns to the contracted state

_Bottom potision smoke test_
- [x] Switch the omnibar to the bottom position in the Appearance
settings
- [x] Verify the omnibar looks and behaves as expected

_Browser smoke testing_
- [x] Smoke test searching and website navigation


---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210662924836033

---------

Co-authored-by: Josh Leibstein <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

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

@@ -220,7 +220,7 @@ import com.duckduckgo.browser.api.autocomplete.AutoCompleteSettings
 import com.duckduckgo.browser.api.brokensite.BrokenSiteContext
 import com.duckduckgo.common.test.CoroutineTestRule
 import com.duckduckgo.common.test.InstantSchedulersRule
-import com.duckduckgo.common.ui.experiments.visual.store.VisualDesignExperimentDataStore
+import com.duckduckgo.common.ui.experiments.visual.store.ExperimentalThemingDataStore
 import com.duckduckgo.common.ui.tabs.SwipingTabsFeature
 import com.duckduckgo.common.ui.tabs.SwipingTabsFeatureProvider
 import com.duckduckgo.common.utils.DispatcherProvider
@@ -557,7 +557,7 @@ class BrowserTabViewModelTest {
     private val mockDefaultBrowserPromptsExperiment: DefaultBrowserPromptsExperiment = mock()
     val mockStack: WebBackForwardList = mock()
 
-    private val mockVisualDesignExperimentDataStore: VisualDesignExperimentDataStore = mock()
+    private val mockExperimentalThemingDataStore: ExperimentalThemingDataStore = mock()
     private val defaultVisualExperimentStateFlow = MutableStateFlow(false)
 
     private val mockSiteErrorHandlerKillSwitch: SiteErrorHandlerKillSwitch = mock()
@@ -709,9 +709,6 @@ class BrowserTabViewModelTest {
         whenever(mockDefaultBrowserPromptsExperiment.showSetAsDefaultPopupMenuItem).thenReturn(
             defaultBrowserPromptsExperimentShowPopupMenuItemFlow,
         )
-        whenever(mockVisualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
-            defaultVisualExperimentStateFlow,
-        )
 
         whenever(mockSiteErrorHandlerKillSwitch.self()).thenReturn(mockSiteErrorHandlerKillSwitchToggle)
 
@@ -790,7 +787,7 @@ class BrowserTabViewModelTest {
             tabStatsBucketing = mockTabStatsBucketing,
             defaultBrowserPromptsExperiment = mockDefaultBrowserPromptsExperiment,
             swipingTabsFeature = swipingTabsFeatureProvider,
-            visualDesignExperimentDataStore = mockVisualDesignExperimentDataStore,
+            experimentalThemingDataStore = mockExperimentalThemingDataStore,
             siteErrorHandlerKillSwitch = mockSiteErrorHandlerKillSwitch,
             siteErrorHandler = mockSiteErrorHandler,
             siteHttpErrorHandler = mockSiteHttpErrorHandler,

app/src/androidTest/java/com/duckduckgo/app/browser/omnibar/animations/LottiePrivacyShieldAnimationHelperTest.kt

@@ -23,7 +23,7 @@ import com.duckduckgo.app.browser.senseofprotection.SenseOfProtectionExperiment
 import com.duckduckgo.app.global.model.PrivacyShield.MALICIOUS
 import com.duckduckgo.app.global.model.PrivacyShield.PROTECTED
 import com.duckduckgo.app.global.model.PrivacyShield.UNPROTECTED
-import com.duckduckgo.common.ui.experiments.visual.store.VisualDesignExperimentDataStore
+import com.duckduckgo.common.ui.experiments.visual.store.ExperimentalThemingDataStore
 import com.duckduckgo.common.ui.store.AppTheme
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.test.runTest
@@ -36,13 +36,13 @@ import org.mockito.kotlin.whenever
 class LottiePrivacyShieldAnimationHelperTest {
 
     private val senseOfProtectionExperiment: SenseOfProtectionExperiment = mock()
-    private val visualDesignExperimentDataStore: VisualDesignExperimentDataStore = mock()
+    private val experimentalThemingDataStore: ExperimentalThemingDataStore = mock()
     private val enabledVisualExperimentStateFlow = MutableStateFlow(true)
     private val disabledVisualExperimentStateFlow = MutableStateFlow(false)
 
     @Before
     fun setup() {
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
+        whenever(experimentalThemingDataStore.isSingleOmnibarEnabled).thenReturn(
             disabledVisualExperimentStateFlow,
         )
     }
@@ -54,7 +54,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
@@ -68,7 +68,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
@@ -82,7 +82,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
@@ -97,7 +97,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
@@ -112,7 +112,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, MALICIOUS)
 
@@ -127,7 +127,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, MALICIOUS)
 
@@ -144,7 +144,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
@@ -160,7 +160,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
@@ -176,7 +176,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
@@ -192,7 +192,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
@@ -209,7 +209,7 @@ class LottiePrivacyShieldAnimationHelperTest {
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
@@ -218,36 +218,36 @@ class LottiePrivacyShieldAnimationHelperTest {
 
     @SuppressLint("DenyListedApi")
     @Test
-    fun whenLightModeAndProtectedAndSelfEnabledAndShouldShowNewVisualDesignShieldThenUseExperimentAssets() = runTest {
+    fun whenLightModeAndProtectedAndNewSignleOmnibarDesignEnabledShowCheckmarkAssets() = runTest {
         whenever(senseOfProtectionExperiment.shouldShowNewPrivacyShield()).thenReturn(false)
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
+        whenever(experimentalThemingDataStore.isSingleOmnibarEnabled).thenReturn(
             enabledVisualExperimentStateFlow,
         )
 
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
-        verify(holder).setAnimation(R.raw.protected_shield_visual_updates)
+        verify(holder).setAnimation(R.raw.protected_shield_new_design)
     }
 
     @SuppressLint("DenyListedApi")
     @Test
-    fun whenLightModeAndUnprotectedAndSelfEnabledAndShouldShowNewVisualDesignShieldThenUseExperimentAssets() = runTest {
+    fun whenLightModeAndUnprotectedAndNewSignleOmnibarDesignEnabledThenUseExperimentAssets() = runTest {
         whenever(senseOfProtectionExperiment.shouldShowNewPrivacyShield()).thenReturn(false)
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
+        whenever(experimentalThemingDataStore.isSingleOmnibarEnabled).thenReturn(
             enabledVisualExperimentStateFlow,
         )
 
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(true)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
@@ -256,59 +256,39 @@ class LottiePrivacyShieldAnimationHelperTest {
 
     @SuppressLint("DenyListedApi")
     @Test
-    fun whenDarkModeAndProtectedAndSelfEnabledAndShouldShowNewVisualDesignShieldThenUseExperimentAssets() = runTest {
+    fun whenDarkModeAndProtectedAndNewSignleOmnibarDesignEnabledShowCheckmarkAssets() = runTest {
         whenever(senseOfProtectionExperiment.shouldShowNewPrivacyShield()).thenReturn(false)
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
+        whenever(experimentalThemingDataStore.isSingleOmnibarEnabled).thenReturn(
             enabledVisualExperimentStateFlow,
         )
 
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, PROTECTED)
 
-        verify(holder).setAnimation(R.raw.dark_protected_shield_visual_updates)
+        verify(holder).setAnimation(R.raw.dark_protected_shield_new_design)
     }
 
     @SuppressLint("DenyListedApi")
     @Test
-    fun whenDarkModeAndUnprotectedAndSelfEnabledAndShouldShowNewVisualDesignShieldThenUseExperimentAssets() = runTest {
+    fun whenDarkModeAndUnprotectedAndNewSignleOmnibarDesignEnabledThenUseExperimentAssets() = runTest {
         whenever(senseOfProtectionExperiment.shouldShowNewPrivacyShield()).thenReturn(false)
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
+        whenever(experimentalThemingDataStore.isSingleOmnibarEnabled).thenReturn(
             enabledVisualExperimentStateFlow,
         )
 
         val holder: LottieAnimationView = mock()
         val appTheme: AppTheme = mock()
         whenever(appTheme.isLightModeEnabled()).thenReturn(false)
 
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
+        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, experimentalThemingDataStore)
 
         testee.setAnimationView(holder, UNPROTECTED)
 
         verify(holder).setAnimation(R.raw.dark_unprotected_shield_visual_updates)
     }
-
-    @SuppressLint("DenyListedApi")
-    @Test
-    fun whenLightModeAndProtectedAndSelfEnabledAndShouldShowNotNewVisualDesignShieldThenUseNonExperimentAssets() = runTest {
-        whenever(senseOfProtectionExperiment.shouldShowNewPrivacyShield()).thenReturn(false)
-        whenever(senseOfProtectionExperiment.isUserEnrolledInAVariantAndExperimentEnabled()).thenReturn(false)
-        whenever(visualDesignExperimentDataStore.isExperimentEnabled).thenReturn(
-            disabledVisualExperimentStateFlow,
-        )
-
-        val holder: LottieAnimationView = mock()
-        val appTheme: AppTheme = mock()
-        whenever(appTheme.isLightModeEnabled()).thenReturn(true)
-
-        val testee = LottiePrivacyShieldAnimationHelper(appTheme, senseOfProtectionExperiment, visualDesignExperimentDataStore)
-
-        testee.setAnimationView(holder, PROTECTED)
-
-        verify(holder).setAnimation(R.raw.protected_shield)
-    }
 }

app/src/androidTest/java/com/duckduckgo/espresso/BasicJourneyTest.kt

@@ -24,6 +24,7 @@ import androidx.test.ext.junit.rules.activityScenarioRule
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import com.duckduckgo.app.browser.BrowserActivity
 import com.duckduckgo.app.browser.R
+import org.hamcrest.Matchers.allOf
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -45,7 +46,7 @@ class BasicJourneyTest {
         onView(isRoot()).perform(waitForView(withId(R.id.browserMenu)))
 
         // tap on PopupMenu
-        onView(withId(R.id.browserMenu)).perform(click())
+        onView(allOf(withId(R.id.browserMenu), isClickable())).perform(click())
 
         // check that the forward arrow is visible
         onView(withId(R.id.forwardMenuItem)).check(matches(isDisplayed()))

app/src/androidTest/java/com/duckduckgo/espresso/DaxDialogsJourneyTest.kt

@@ -27,6 +27,7 @@ import androidx.test.filters.FlakyTest
 import androidx.test.filters.SdkSuppress
 import com.duckduckgo.app.browser.R
 import com.duckduckgo.app.onboarding.ui.OnboardingActivity
+import org.hamcrest.Matchers.allOf
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -54,7 +55,7 @@ class DaxDialogsJourneyTest {
         onView(withId(R.id.continueButton)).perform(click())
 
         onView(isRoot()).perform(waitForView(withId(R.id.browserMenu)))
-        onView(withId(R.id.browserMenu)).perform(click())
+        onView(allOf(withId(R.id.browserMenu), isClickable())).perform(click())
 
         onView(withId(R.id.forwardMenuItem)).check(matches(isDisplayed()))
     }

app/src/androidTest/java/com/duckduckgo/espresso/privacy/RequestBlockingTest.kt

@@ -34,6 +34,7 @@ import com.duckduckgo.espresso.*
 import com.duckduckgo.privacy.config.impl.network.JSONObjectAdapter
 import com.squareup.moshi.JsonAdapter
 import com.squareup.moshi.Moshi
+import org.hamcrest.Matchers.allOf
 import org.junit.Assert.assertEquals
 import org.junit.Assert.assertTrue
 import org.junit.Rule
@@ -86,7 +87,7 @@ class RequestBlockingTest {
         val idlingResourceForDisableProtections = WebViewIdlingResource(webView!!)
         IdlingRegistry.getInstance().register(idlingResourceForDisableProtections)
 
-        onView(withId(R.id.browserMenu)).perform(click())
+        onView(allOf(withId(R.id.browserMenu), isClickable())).perform(click())
         onView(isRoot()).perform(waitForView(withId(R.id.privacyProtectionMenuItem)))
         onView(withId(R.id.privacyProtectionMenuItem)).perform(click())
 

app/src/androidTest/java/com/duckduckgo/espresso/privacy/SurrogatesTest.kt

@@ -32,6 +32,7 @@ import com.duckduckgo.espresso.*
 import com.duckduckgo.privacy.config.impl.network.JSONObjectAdapter
 import com.squareup.moshi.JsonAdapter
 import com.squareup.moshi.Moshi
+import org.hamcrest.Matchers.allOf
 import org.junit.Assert.assertFalse
 import org.junit.Assert.assertTrue
 import org.junit.Rule
@@ -93,7 +94,7 @@ class SurrogatesTest {
         val idlingResourceForDisableProtections = WebViewIdlingResource(webView!!)
         IdlingRegistry.getInstance().register(idlingResourceForDisableProtections)
 
-        onView(withId(R.id.browserMenu)).perform(ViewActions.click())
+        onView(allOf(withId(R.id.browserMenu), isClickable())).perform(ViewActions.click())
         onView(isRoot()).perform(waitForView(withId(R.id.privacyProtectionMenuItem)))
         onView(withId(R.id.privacyProtectionMenuItem)).perform(ViewActions.click())