Add Tracking Protection Panel to the toolbar

app/build.gradle

@@ -425,6 +425,8 @@ dependencies {
 
     implementation Deps.autodispose
 
+    implementation Deps.lottie
+
     implementation Deps.adjust
     implementation Deps.installreferrer // Required by Adjust
 

app/src/main/java/org/mozilla/fenix/BrowserDirection.kt

@@ -21,5 +21,6 @@ enum class BrowserDirection(@IdRes val fragmentId: Int) {
     FromBookmarks(R.id.bookmarkFragment),
     FromHistory(R.id.historyFragment),
     FromExceptions(R.id.exceptionsFragment),
-    FromAbout(R.id.aboutFragment)
+    FromAbout(R.id.aboutFragment),
+    FromTrackingProtection(R.id.trackingProtectionFragment)
 }

app/src/main/java/org/mozilla/fenix/FeatureFlags.kt

@@ -37,6 +37,11 @@ object FeatureFlags {
      */
     const val mediaIntegration = true
 
+    /**
+     * Displays the categories blocked by ETP in a panel in the toolbar
+     */
+    val etpCategories = nightly or debug
+
     /**
      * Granular data deletion provides additional choices on the Delete Browsing Data
      * setting screen for cookies, cached images and files, and site permissions.

app/src/main/java/org/mozilla/fenix/HomeActivity.kt

@@ -56,6 +56,7 @@ import org.mozilla.fenix.library.history.HistoryFragmentDirections
 import org.mozilla.fenix.search.SearchFragmentDirections
 import org.mozilla.fenix.settings.AboutFragmentDirections
 import org.mozilla.fenix.settings.SettingsFragmentDirections
+import org.mozilla.fenix.settings.TrackingProtectionFragmentDirections
 import org.mozilla.fenix.share.ShareFragment
 import org.mozilla.fenix.theme.DefaultThemeManager
 import org.mozilla.fenix.theme.ThemeManager
@@ -236,6 +237,10 @@ open class HomeActivity : AppCompatActivity(), ShareFragment.TabsSharedCallback
             )
         BrowserDirection.FromAbout ->
             AboutFragmentDirections.actionAboutFragmentToBrowserFragment(customTabSessionId)
+        BrowserDirection.FromTrackingProtection ->
+            TrackingProtectionFragmentDirections.actionTrackingProtectionFragmentToBrowserFragment(
+            customTabSessionId
+        )
     }
 
     private fun load(

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

@@ -207,6 +207,10 @@ abstract class BaseBrowserFragment : Fragment(), BackHandler, SessionManager.Obs
                 showQuickSettingsDialog()
             }
 
+            browserToolbarView.view.setOnTrackingProtectionClickedListener {
+                showTrackingProtectionPanel()
+            }
+
             contextMenuFeature.set(
                 feature = ContextMenuFeature(
                     requireFragmentManager(),
@@ -487,6 +491,8 @@ abstract class BaseBrowserFragment : Fragment(), BackHandler, SessionManager.Obs
 
     protected abstract fun navToQuickSettingsSheet(session: Session, sitePermissions: SitePermissions?)
 
+    protected abstract fun navToTrackingProtectionPanel(session: Session)
+
     /**
      * Returns the top and bottom margins.
      */
@@ -530,6 +536,13 @@ abstract class BaseBrowserFragment : Fragment(), BackHandler, SessionManager.Obs
         }
     }
 
+    private fun showTrackingProtectionPanel() {
+        val session = getSessionById() ?: return
+        view?.let {
+            navToTrackingProtectionPanel(session)
+        }
+    }
+
     /**
      * Returns the current session.
      */

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

@@ -4,12 +4,17 @@
 
 package org.mozilla.fenix.browser
 
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
 import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.PopupWindow
 import android.widget.RadioButton
 import androidx.core.content.ContextCompat
 import androidx.lifecycle.Observer
@@ -18,6 +23,7 @@ import androidx.navigation.fragment.findNavController
 import androidx.transition.TransitionInflater
 import com.google.android.material.snackbar.Snackbar
 import kotlinx.android.synthetic.main.fragment_browser.view.*
+import kotlinx.android.synthetic.main.tracking_protection_onboarding_popup.view.*
 import kotlinx.coroutines.Dispatchers.IO
 import kotlinx.coroutines.Dispatchers.Main
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -31,6 +37,8 @@ import mozilla.components.feature.sitepermissions.SitePermissions
 import mozilla.components.lib.state.ext.consumeFrom
 import mozilla.components.support.base.feature.BackHandler
 import mozilla.components.support.base.feature.ViewBoundFeatureWrapper
+import mozilla.components.support.ktx.android.util.dpToPx
+import org.mozilla.fenix.FeatureFlags
 import org.mozilla.fenix.HomeActivity
 import org.mozilla.fenix.R
 import org.mozilla.fenix.browser.readermode.DefaultReaderModeController
@@ -42,8 +50,10 @@ import org.mozilla.fenix.components.toolbar.BrowserToolbarController
 import org.mozilla.fenix.components.toolbar.BrowserToolbarViewInteractor
 import org.mozilla.fenix.components.toolbar.QuickActionSheetAction
 import org.mozilla.fenix.ext.components
+import org.mozilla.fenix.ext.increaseTapArea
 import org.mozilla.fenix.ext.nav
 import org.mozilla.fenix.ext.requireComponents
+import org.mozilla.fenix.ext.settings
 import org.mozilla.fenix.home.sessioncontrol.SessionControlChange
 import org.mozilla.fenix.home.sessioncontrol.TabCollection
 import org.mozilla.fenix.mvi.getManagedEmitter
@@ -139,6 +149,18 @@ class BrowserFragment : BaseBrowserFragment(), BackHandler {
         ).also { observer ->
             getSessionById()?.register(observer, this, autoPause = true)
         }
+        getSessionById()?.register(toolbarSessionObserver, this, autoPause = true)
+    }
+
+    private val toolbarSessionObserver = object : Session.Observer {
+        override fun onLoadingStateChanged(session: Session, loading: Boolean) {
+            if (!loading &&
+                context!!.settings.shouldShowTrackingProtectionOnboarding &&
+                session.trackerBlockingEnabled
+            ) {
+                showTrackingProtectionOnboarding()
+            }
+        }
     }
 
     override fun onResume() {
@@ -181,14 +203,26 @@ class BrowserFragment : BaseBrowserFragment(), BackHandler {
     }
 
     override fun navToQuickSettingsSheet(session: Session, sitePermissions: SitePermissions?) {
-        val directions = BrowserFragmentDirections.actionBrowserFragmentToQuickSettingsSheetDialogFragment(
-            sessionId = session.id,
-            url = session.url,
-            isSecured = session.securityInfo.secure,
-            isTrackingProtectionOn = session.trackerBlockingEnabled,
-            sitePermissions = sitePermissions,
-            gravity = getAppropriateLayoutGravity()
-        )
+        val directions =
+            BrowserFragmentDirections.actionBrowserFragmentToQuickSettingsSheetDialogFragment(
+                sessionId = session.id,
+                url = session.url,
+                isSecured = session.securityInfo.secure,
+                isTrackingProtectionOn = session.trackerBlockingEnabled,
+                sitePermissions = sitePermissions,
+                gravity = getAppropriateLayoutGravity()
+            )
+        nav(R.id.browserFragment, directions)
+    }
+
+    override fun navToTrackingProtectionPanel(session: Session) {
+        val directions =
+            BrowserFragmentDirections.actionBrowserFragmentToTrackingProtectionPanelDialogFragment(
+                sessionId = session.id,
+                url = session.url,
+                trackingProtectionEnabled = session.trackerBlockingEnabled,
+                gravity = getAppropriateLayoutGravity()
+            )
         nav(R.id.browserFragment, directions)
     }
 
@@ -309,8 +343,44 @@ class BrowserFragment : BaseBrowserFragment(), BackHandler {
         }
     }
 
+    private fun showTrackingProtectionOnboarding() {
+        if (!FeatureFlags.etpCategories) {
+            return
+        }
+        context?.let {
+            it.settings.incrementTrackingProtectionOnboardingCount()
+            val layout = LayoutInflater.from(it)
+                .inflate(R.layout.tracking_protection_onboarding_popup, null)
+            layout.onboarding_message.text =
+                it.getString(R.string.etp_onboarding_message, getString(R.string.app_name))
+            val trackingOnboarding =
+                PopupWindow(
+                    layout,
+                    TP_ONBOARDING_WIDTH.dpToPx(resources.displayMetrics),
+                    LinearLayout.LayoutParams.WRAP_CONTENT,
+                    true
+                )
+            val closeButton = layout.findViewById<ImageView>(R.id.close_onboarding)
+            closeButton.increaseTapArea(BUTTON_INCREASE_DPS)
+            closeButton.setOnClickListener {
+                trackingOnboarding.dismiss()
+            }
+            trackingOnboarding.isOutsideTouchable = true
+            trackingOnboarding.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+            trackingOnboarding.showAtLocation(
+                browserToolbarView.view,
+                Gravity.BOTTOM or Gravity.START,
+                TP_ONBOARDING_X_OFFSET.dpToPx(resources.displayMetrics),
+                browserToolbarView.view.height
+            )
+        }
+    }
+
     companion object {
+        private const val BUTTON_INCREASE_DPS = 12
+        private const val TP_ONBOARDING_X_OFFSET = 4
         private const val SHARED_TRANSITION_MS = 200L
+        private const val TP_ONBOARDING_WIDTH = 256
         private const val TAB_ITEM_TRANSITION_NAME = "tab_item"
         const val REPORT_SITE_ISSUE_URL =
             "https://webcompat.com/issues/new?url=%s&label=browser-fenix"

app/src/main/java/org/mozilla/fenix/components/Core.kt

@@ -98,7 +98,10 @@ class Core(private val context: Context) {
                 withContext(Dispatchers.IO) {
                     sessionStorage.restore()
                 }?.let { snapshot ->
-                    sessionManager.restore(snapshot, updateSelection = (sessionManager.selectedSession == null))
+                    sessionManager.restore(
+                        snapshot,
+                        updateSelection = (sessionManager.selectedSession == null)
+                    )
                 }
 
                 // Now that we have restored our previous state (if there's one) let's setup auto saving the state while
@@ -151,7 +154,9 @@ class Core(private val context: Context) {
         normalMode: Boolean = context.settings.shouldUseTrackingProtection,
         privateMode: Boolean = true
     ): TrackingProtectionPolicy {
-        val trackingProtectionPolicy = TrackingProtectionPolicy.recommended()
+        val trackingProtectionPolicy =
+            if (context.settings.useStrictTrackingProtection) TrackingProtectionPolicy.strict() else
+                TrackingProtectionPolicy.recommended()
 
         return when {
             normalMode && privateMode -> trackingProtectionPolicy

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

@@ -8,6 +8,8 @@ import android.content.Context
 import android.view.ViewGroup
 import androidx.navigation.NavOptions
 import androidx.navigation.Navigation
+import com.airbnb.lottie.LottieCompositionFactory
+import com.airbnb.lottie.LottieDrawable
 import androidx.navigation.fragment.FragmentNavigator
 import mozilla.components.browser.domains.autocomplete.DomainAutocompleteProvider
 import mozilla.components.browser.session.SessionManager
@@ -20,6 +22,7 @@ import mozilla.components.feature.toolbar.ToolbarPresenter
 import mozilla.components.lib.publicsuffixlist.PublicSuffixList
 import mozilla.components.support.base.feature.LifecycleAwareFeature
 import mozilla.components.support.ktx.android.view.hideKeyboard
+import org.mozilla.fenix.FeatureFlags
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.nav
@@ -53,6 +56,26 @@ class ToolbarIntegration(
                     return@run
                 }
 
+                val task = LottieCompositionFactory
+                    .fromRawRes(
+                        context,
+                        ThemeManager.resolveAttribute(R.attr.shieldLottieFile, context)
+                    )
+                task.addListener { result ->
+                    val lottieDrawable = LottieDrawable()
+                    lottieDrawable.composition = result
+                    toolbar.displayTrackingProtectionIcon =
+                        context.settings.shouldUseTrackingProtection && FeatureFlags.etpCategories
+                    toolbar.displaySeparatorView =
+                        context.settings.shouldUseTrackingProtection && FeatureFlags.etpCategories
+
+                    toolbar.setTrackingProtectionIcons(
+                        iconOnNoTrackersBlocked = context.getDrawable(R.drawable.ic_tracking_protection_enabled)!!,
+                        iconOnTrackersBlocked = lottieDrawable,
+                        iconDisabledForSite = context.getDrawable(R.drawable.ic_tracking_protection_disabled)!!
+                    )
+                }
+
                 val tabsAction = TabCounterToolbarButton(
                     sessionManager,
                     {

app/src/main/java/org/mozilla/fenix/customtabs/CustomTabsIntegration.kt

@@ -10,13 +10,18 @@ import android.view.Gravity
 import android.view.View
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.widget.NestedScrollView
+import com.airbnb.lottie.LottieCompositionFactory
+import com.airbnb.lottie.LottieDrawable
 import mozilla.components.browser.session.SessionManager
 import mozilla.components.browser.toolbar.BrowserToolbar
 import mozilla.components.feature.customtabs.CustomTabsToolbarFeature
 import mozilla.components.support.base.feature.BackHandler
 import mozilla.components.support.base.feature.LifecycleAwareFeature
+import org.mozilla.fenix.FeatureFlags
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.toolbar.ToolbarMenu
+import org.mozilla.fenix.ext.settings
+import org.mozilla.fenix.theme.ThemeManager
 
 class CustomTabsIntegration(
     context: Context,
@@ -50,6 +55,25 @@ class CustomTabsIntegration(
 
         // Hide the Quick Action Bar.
         quickActionbar.visibility = View.GONE
+
+        val task = LottieCompositionFactory
+            .fromRawRes(
+                context,
+                ThemeManager.resolveAttribute(R.attr.shieldLottieFile, context)
+            )
+        task.addListener { result ->
+            val lottieDrawable = LottieDrawable()
+            lottieDrawable.composition = result
+            toolbar.displayTrackingProtectionIcon =
+                context.settings.shouldUseTrackingProtection && FeatureFlags.etpCategories
+            toolbar.displaySeparatorView = false
+
+            toolbar.setTrackingProtectionIcons(
+                iconOnNoTrackersBlocked = context.getDrawable(R.drawable.ic_tracking_protection_enabled)!!,
+                iconOnTrackersBlocked = lottieDrawable,
+                iconDisabledForSite = context.getDrawable(R.drawable.ic_tracking_protection_disabled)!!
+            )
+        }
     }
 
     private val customTabToolbarMenu by lazy {

app/src/main/java/org/mozilla/fenix/customtabs/ExternalAppBrowserFragment.kt

@@ -78,6 +78,18 @@ class ExternalAppBrowserFragment : BaseBrowserFragment(), BackHandler {
         nav(R.id.externalAppBrowserFragment, directions)
     }
 
+    override fun navToTrackingProtectionPanel(session: Session) {
+        val directions =
+            ExternalAppBrowserFragmentDirections
+                .actionExternalAppBrowserFragmentToTrackingProtectionPanelDialogFragment(
+                sessionId = session.id,
+                url = session.url,
+                trackingProtectionEnabled = session.trackerBlockingEnabled,
+                gravity = getAppropriateLayoutGravity()
+            )
+        nav(R.id.externalAppBrowserFragment, directions)
+    }
+
     override fun getEngineMargins(): Pair<Int, Int> {
         val toolbarSize = resources.getDimensionPixelSize(R.dimen.browser_toolbar_height)
         return toolbarSize to 0