fix onboarding privacy shield and fire button highlights (#5963)

Task/Issue URL:
https://app.asana.com/1/137249556945/project/1208671518894266/task/1210067401123378

### Description

This PR fixes the position and clipping of the privacy shield highlight
(pulsating animation) during onboarding.

The class responsible for the animation (`PulseAnimation`) makes _a lot_
of assumptions about the target view hierarchy into which it injects an
animated image view. I made the simplest fix possible to adjust the
animated circle's position while fitting these assumptions but the
solution comes with some hardcoded values. We should separately consider
revisiting how the `PulseAnimation` class is built to allow more
flexibility.

Additionally, to fix the clipping I moved the animation outside of the
omnibar card. Even though the `PulseAnimation` forcefully disables
clipping for all parents within the view hierarchy (another assumption),
the `MaterialCardView` ignores these calls and will still clip the
views. This is justified in the impl by the fact that cards have
elevation, etc. I found some ways to disable clipping for the card:
```
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"
android:clipChildren="false"
android:clipToPadding="false"
android:outlineProvider="none"
```
but I don't like hacking around the card's functionality and relying on
some compat properties to maintain things like shadows.

Also in this PR I'm adding a pulse animation to the fire button found in
the bottom navigation bar.

Author: LukasPaczos

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

@@ -4111,6 +4111,7 @@ class BrowserTabFragment :
                 }
 
                 omnibar.renderBrowserViewState(viewState)
+                browserNavigationBarIntegration.configureFireButtonHighlight(highlighted = viewState.fireButton.isHighlighted())
                 if (omnibar.isPulseAnimationPlaying()) {
                     webView?.setBottomMatchingBehaviourEnabled(true) // only execute if animation is playing
                 }

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

@@ -80,6 +80,10 @@ class BrowserNavigationBarViewIntegration(
         navigationBarView.setViewMode(NewTab)
     }
 
+    fun configureFireButtonHighlight(highlighted: Boolean) {
+        navigationBarView.setFireButtonHighlight(highlighted)
+    }
+
     fun onDestroyView() {
         stateObserverJob?.cancel()
         onDisabled()

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

@@ -24,12 +24,15 @@ import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.coordinatorlayout.widget.CoordinatorLayout.AttachedBehavior
 import androidx.coordinatorlayout.widget.CoordinatorLayout.Behavior
 import androidx.core.view.doOnAttach
+import androidx.core.view.doOnLayout
 import androidx.core.view.isVisible
+import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.findViewTreeLifecycleOwner
 import androidx.lifecycle.findViewTreeViewModelStoreOwner
 import androidx.lifecycle.lifecycleScope
 import com.duckduckgo.anvil.annotations.InjectWith
+import com.duckduckgo.app.browser.PulseAnimation
 import com.duckduckgo.app.browser.databinding.ViewBrowserNavigationBarBinding
 import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarViewModel.Command
 import com.duckduckgo.app.browser.navigation.bar.view.BrowserNavigationBarViewModel.Command.NotifyAutofillButtonClicked
@@ -94,6 +97,14 @@ class BrowserNavigationBarView @JvmOverloads constructor(
     private var conflatedCommandsJob: ConflatedJob = ConflatedJob()
     private var conflatedStateJob: ConflatedJob = ConflatedJob()
 
+    private val lifecycleOwner: LifecycleOwner by lazy {
+        requireNotNull(findViewTreeLifecycleOwner())
+    }
+
+    private val pulseAnimation: PulseAnimation by lazy {
+        PulseAnimation(lifecycleOwner)
+    }
+
     val popupMenuAnchor: View = binding.menuButton
 
     var browserNavigationBarObserver: BrowserNavigationBarObserver? = null
@@ -110,6 +121,12 @@ class BrowserNavigationBarView @JvmOverloads constructor(
         }
     }
 
+    fun setFireButtonHighlight(highlighted: Boolean) {
+        doOnAttach {
+            viewModel.setFireButtonHighlight(highlighted)
+        }
+    }
+
     override fun onAttachedToWindow() {
         AndroidSupportInjection.inject(this)
         super.onAttachedToWindow()
@@ -175,6 +192,8 @@ class BrowserNavigationBarView @JvmOverloads constructor(
         binding.bookmarksButton.isVisible = viewState.bookmarksButtonVisible
         binding.fireButton.isVisible = viewState.fireButtonVisible
         binding.tabsButton.isVisible = viewState.tabsButtonVisible
+
+        renderFireButtonPulseAnimation(enabled = viewState.fireButtonHighlighted)
     }
 
     private fun processCommands(command: Command) {
@@ -192,6 +211,18 @@ class BrowserNavigationBarView @JvmOverloads constructor(
         }
     }
 
+    private fun renderFireButtonPulseAnimation(enabled: Boolean) {
+        if (enabled) {
+            if (!pulseAnimation.isActive) {
+                doOnLayout {
+                    pulseAnimation.playOn(binding.fireIconImageView, isExperimentAndShieldView = false)
+                }
+            }
+        } else {
+            pulseAnimation.stop()
+        }
+    }
+
     enum class ViewMode {
         NewTab,
         Browser,

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

@@ -130,6 +130,14 @@ class BrowserNavigationBarViewModel @Inject constructor(
         }
     }
 
+    fun setFireButtonHighlight(highlighted: Boolean) {
+        _viewState.update {
+            it.copy(
+                fireButtonHighlighted = highlighted,
+            )
+        }
+    }
+
     sealed class Command {
         data object NotifyFireButtonClicked : Command()
         data object NotifyTabsButtonClicked : Command()
@@ -149,6 +157,7 @@ class BrowserNavigationBarViewModel @Inject constructor(
         val autofillButtonVisible: Boolean = true,
         val bookmarksButtonVisible: Boolean = true,
         val fireButtonVisible: Boolean = true,
+        val fireButtonHighlighted: Boolean = false,
         val tabsButtonVisible: Boolean = true,
         val tabsCount: Int = 0,
         val shouldUpdateTabsCount: Boolean = false,

app/src/main/res/layout/view_fade_omnibar.xml

@@ -180,15 +180,6 @@
                                 <include layout="@layout/cookie_scene_1" />
                             </FrameLayout>
 
-                            <!-- Placeholder should have same size a sibling ImageViews. size = image_width + padding -->
-                            <View
-                                android:id="@+id/placeholder"
-                                android:layout_width="32dp"
-                                android:layout_height="32dp"
-                                android:layout_gravity="center"
-                                android:layout_marginEnd="@dimen/keyline_1"
-                                android:visibility="invisible" />
-
                         </FrameLayout>
 
                         <View
@@ -325,6 +316,31 @@
 
             </androidx.appcompat.widget.Toolbar>
 
+            <FrameLayout
+                android:layout_width="76dp"
+                android:layout_height="match_parent"
+                android:paddingTop="@dimen/experimentalOmnibarCardMarginTop"
+                android:paddingBottom="@dimen/experimentalOmnibarCardMarginBottom"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:documentation="The values of layout width and paddings is tweaked manually to position the pulsing circle
+                precisely on top of the lottie-animated shield, keeping in mind that the added animated ImageView will use Gravity.CENTER.">
+
+                <View
+                    android:id="@+id/placeholder"
+                    android:layout_width="28dp"
+                    android:layout_height="28dp"
+                    android:layout_gravity="center"
+                    android:visibility="invisible"
+                    tools:documentation="This view is a reference for the PulseAnimation.kt.
+                    PulseAnimation class will add a new ImageView to the parent layout, with a Gravity.CENTER, and size equal to the size of this view.
+                    However, the animator will scale the resulting ImageView from 0.95x to 2.0x size of this view.
+                    Keep this in mind when considering clipping - the PulseAnimation will try to disable clipping for all parents in the hierarchy,
+                    but you might start running against views that always have clipping enabled (like material cards), or system UI." />
+
+            </FrameLayout>
+
             <androidx.constraintlayout.widget.ConstraintLayout
                 android:id="@+id/customTabToolbarContainerWrapper"
                 android:layout_width="0dp"