[Web Tracking Protection] Add staggered grid of web protections (#6759)

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

### Description
Adds a staggered grid of protections that are always on to Web Tracking
Protection screen.

_**Note:** this is the main feature branch where two previous PRs were
merged to (#6708 and #6723). All the code has already been reviewed and
approved._

### Steps to test this PR

- [x] Go to Settings -> Web Tracking Protection
- [x] Verify the description under the "Web Tracking Protection" title
matches [copy
spec](https://app.asana.com/1/137249556945/project/38424471409662/task/1210874321016131?focus=true)
- [x] Verify you see the grid of new protection cards/items
- [x] Verify that the design (margins, paddings, text styles, icons)
matches
[Figma](https://www.figma.com/design/ir88vAgIL2Mz87BBFiTAQB/O-E-Protections-List?node-id=245-5321&m=dev)
- [x] Verify the copies matches [copy
spec](https://app.asana.com/1/137249556945/project/38424471409662/task/1210874321016131?focus=true)
- [x] Rotate device to landscape and verify that layout and paddings are
still correct
- [x] Go to Settings -> Appearance and change theme (light/dark) to
opposite of what you had now
- [x] Verify the designs match in both themes
[Figma](https://www.figma.com/design/ir88vAgIL2Mz87BBFiTAQB/O-E-Protections-List?node-id=245-5321&m=dev)

### UI changes
| Before  | After (light) | After (dark) |
| - | - | - | 
| <img
src="https://github.com/user-attachments/assets/732ffe21-a203-434c-9b97-f43a9c17f42e"
/> | <img
src="https://github.com/user-attachments/assets/0cf46ead-ba45-445f-8a3c-d7d2406f6b16"
/> | <img
src="https://github.com/user-attachments/assets/7a128369-a016-47e0-9dc9-4b1c085ee297"
/> |

---------

Co-authored-by: Dax The Translator <[email protected]>

Author: landomen

app/src/main/java/com/duckduckgo/app/webtrackingprotection/WebTrackingProtectionActivity.kt

@@ -16,7 +16,6 @@
 
 package com.duckduckgo.app.webtrackingprotection
 
-import android.R.attr.text
 import android.app.ActivityOptions
 import android.os.Bundle
 import android.text.SpannableStringBuilder
@@ -25,16 +24,21 @@ import android.text.method.LinkMovementMethod
 import android.text.style.ClickableSpan
 import android.text.style.URLSpan
 import android.view.View
+import androidx.annotation.StringRes
+import androidx.core.view.isVisible
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.recyclerview.widget.StaggeredGridLayoutManager
 import com.duckduckgo.anvil.annotations.ContributeToActivityStarter
 import com.duckduckgo.anvil.annotations.InjectWith
 import com.duckduckgo.app.browser.R
 import com.duckduckgo.app.browser.databinding.ActivityWebTrackingProtectionBinding
 import com.duckduckgo.app.globalprivacycontrol.ui.GlobalPrivacyControlActivity
 import com.duckduckgo.app.privacy.ui.AllowListActivity
 import com.duckduckgo.app.webtrackingprotection.WebTrackingProtectionViewModel.Command
+import com.duckduckgo.app.webtrackingprotection.list.FeatureGridAdapter
+import com.duckduckgo.app.webtrackingprotection.list.FeatureGridItem
 import com.duckduckgo.browser.api.ui.BrowserScreens.WebViewActivityWithParams
 import com.duckduckgo.common.ui.DuckDuckGoActivity
 import com.duckduckgo.common.ui.view.getColorFromAttr
@@ -54,8 +58,12 @@ class WebTrackingProtectionActivity : DuckDuckGoActivity() {
     @Inject
     lateinit var globalActivityStarter: GlobalActivityStarter
 
+    @Inject
+    lateinit var webTrackingProtectionsGridFeature: WebTrackingProtectionsGridFeature
+
     private val viewModel: WebTrackingProtectionViewModel by bindViewModel()
     private val binding: ActivityWebTrackingProtectionBinding by viewBinding()
+    private lateinit var gridAdapter: FeatureGridAdapter
 
     // TODO eligible for extraction and use in AutoConsent as well when removing old settings
     private val clickableSpan = object : ClickableSpan() {
@@ -78,6 +86,7 @@ class WebTrackingProtectionActivity : DuckDuckGoActivity() {
 
         configureUiEventHandlers()
         configureClickableLink()
+        configureGridList()
         observeViewModel()
     }
 
@@ -87,9 +96,13 @@ class WebTrackingProtectionActivity : DuckDuckGoActivity() {
     }
 
     private fun configureClickableLink() {
-        val htmlGPCText = getString(
-            R.string.webTrackingProtectionDescriptionNew,
-        ).html(this)
+        @StringRes val descriptionStringRes = if (webTrackingProtectionsGridFeature.self().isEnabled()) {
+            R.string.webTrackingProtectionExplanationDescription
+        } else {
+            R.string.webTrackingProtectionDescriptionNew
+        }
+
+        val htmlGPCText = getString(descriptionStringRes).html(this)
         val gpcSpannableString = SpannableStringBuilder(htmlGPCText)
         val urlSpans = htmlGPCText.getSpans(0, htmlGPCText.length, URLSpan::class.java)
         urlSpans?.forEach {
@@ -111,11 +124,28 @@ class WebTrackingProtectionActivity : DuckDuckGoActivity() {
         }
     }
 
+    private fun configureGridList() {
+        if (!webTrackingProtectionsGridFeature.self().isEnabled()) {
+            return
+        }
+
+        binding.protectionsListDivider.isVisible = true
+        binding.protectionsTitle.isVisible = true
+        binding.protectionsList.isVisible = true
+
+        val columnCount = resources.getInteger(R.integer.web_tracking_protection_grid_column_count)
+        val layoutManager = StaggeredGridLayoutManager(columnCount, StaggeredGridLayoutManager.VERTICAL)
+        binding.protectionsList.layoutManager = layoutManager
+        gridAdapter = FeatureGridAdapter()
+        binding.protectionsList.adapter = gridAdapter
+    }
+
     private fun observeViewModel() {
         viewModel.viewState()
             .flowWithLifecycle(lifecycle, Lifecycle.State.RESUMED)
             .onEach { viewState ->
                 setGlobalPrivacyControlSetting(viewState.globalPrivacyControlEnabled)
+                updateProtectionsGridList(viewState.protectionItems)
             }.launchIn(lifecycleScope)
 
         viewModel.commands()
@@ -160,4 +190,12 @@ class WebTrackingProtectionActivity : DuckDuckGoActivity() {
         val options = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
         startActivity(GlobalPrivacyControlActivity.intent(this), options)
     }
+
+    private fun updateProtectionsGridList(protectionItems: List<FeatureGridItem>) {
+        if (!webTrackingProtectionsGridFeature.self().isEnabled()) {
+            return
+        }
+
+        gridAdapter.submitList(protectionItems)
+    }
 }

app/src/main/java/com/duckduckgo/app/webtrackingprotection/WebTrackingProtectionViewModel.kt

@@ -19,8 +19,10 @@ package com.duckduckgo.app.webtrackingprotection
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.duckduckgo.anvil.annotations.ContributesViewModel
+import com.duckduckgo.app.browser.R
 import com.duckduckgo.app.pixels.AppPixelName
 import com.duckduckgo.app.statistics.pixels.Pixel
+import com.duckduckgo.app.webtrackingprotection.list.FeatureGridItem
 import com.duckduckgo.di.scopes.ActivityScope
 import com.duckduckgo.feature.toggles.api.FeatureToggle
 import com.duckduckgo.privacy.config.api.Gpc
@@ -39,10 +41,12 @@ class WebTrackingProtectionViewModel @Inject constructor(
     private val gpc: Gpc,
     private val featureToggle: FeatureToggle,
     private val pixel: Pixel,
+    private val webTrackingProtectionsGridFeature: WebTrackingProtectionsGridFeature,
 ) : ViewModel() {
 
     data class ViewState(
         val globalPrivacyControlEnabled: Boolean = false,
+        val protectionItems: List<FeatureGridItem> = emptyList(),
     )
 
     sealed class Command {
@@ -59,6 +63,7 @@ class WebTrackingProtectionViewModel @Inject constructor(
             viewState.emit(
                 ViewState(
                     globalPrivacyControlEnabled = gpc.isEnabled() && featureToggle.isFeatureEnabled(PrivacyFeatureName.GpcFeatureName.value),
+                    protectionItems = getProtectionItems(),
                 ),
             )
         }
@@ -82,6 +87,60 @@ class WebTrackingProtectionViewModel @Inject constructor(
         pixel.fire(AppPixelName.SETTINGS_MANAGE_ALLOWLIST)
     }
 
+    private fun getProtectionItems(): List<FeatureGridItem> {
+        if (!webTrackingProtectionsGridFeature.self().isEnabled()) {
+            return emptyList()
+        }
+
+        return listOf(
+            FeatureGridItem(
+                iconRes = R.drawable.ic_shield_protection,
+                titleRes = R.string.webTrackingProtectionThirdPartyTrackersTitle,
+                descriptionRes = R.string.webTrackingProtectionThirdPartyTrackersDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_ads_tracking_blocked,
+                titleRes = R.string.webTrackingProtectionTargetedAdsTitle,
+                descriptionRes = R.string.webTrackingProtectionTargetedAdsDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_fingerprint,
+                titleRes = R.string.webTrackingProtectionFingerprintTrackingTitle,
+                descriptionRes = R.string.webTrackingProtectionFingerprintTrackingDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_link_blocked,
+                titleRes = R.string.webTrackingProtectionLinkTrackingTitle,
+                descriptionRes = R.string.webTrackingProtectionLinkTrackingDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_profile_secure,
+                titleRes = R.string.webTrackingProtectionReferrerTrackingTitle,
+                descriptionRes = R.string.webTrackingProtectionReferrerTrackingDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_cookie_blocked,
+                titleRes = R.string.webTrackingProtectionFirstPartyCookiesTitle,
+                descriptionRes = R.string.webTrackingProtectionFirstPartyCookiesDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_device_laptop_secure,
+                titleRes = R.string.webTrackingProtectionDnsCnameCloakingTitle,
+                descriptionRes = R.string.webTrackingProtectionDnsCnameCloakingDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_eye_blocked,
+                titleRes = R.string.webTrackingProtectionGoogleAmpTrackingTitle,
+                descriptionRes = R.string.webTrackingProtectionGoogleAmpTrackingDescription,
+            ),
+            FeatureGridItem(
+                iconRes = R.drawable.ic_popup_blocked,
+                titleRes = R.string.webTrackingProtectionGoogleSigninPopupsTitle,
+                descriptionRes = R.string.webTrackingProtectionGoogleSigninPopupsDescription,
+            ),
+        )
+    }
+
     companion object {
         const val LEARN_MORE_URL = "https://help.duckduckgo.com/duckduckgo-help-pages/privacy/web-tracking-protections/"
     }

app/src/main/java/com/duckduckgo/app/webtrackingprotection/WebTrackingProtectionsGridFeature.kt

@@ -0,0 +1,31 @@
+/*
+ * 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.webtrackingprotection
+
+import com.duckduckgo.anvil.annotations.ContributesRemoteFeature
+import com.duckduckgo.di.scopes.AppScope
+import com.duckduckgo.feature.toggles.api.Toggle
+import com.duckduckgo.feature.toggles.api.Toggle.DefaultFeatureValue
+
+@ContributesRemoteFeature(
+    scope = AppScope::class,
+    featureName = "webTrackingProtectionsGrid",
+)
+interface WebTrackingProtectionsGridFeature {
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
+    fun self(): Toggle
+}

app/src/main/java/com/duckduckgo/app/webtrackingprotection/list/FeatureGridAdapter.kt

@@ -0,0 +1,73 @@
+/*
+ * 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.webtrackingprotection.list
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.duckduckgo.app.browser.databinding.ItemFeatureGridBinding
+import com.duckduckgo.app.webtrackingprotection.list.FeatureGridAdapter.GridItemViewHolder
+
+class FeatureGridAdapter : ListAdapter<FeatureGridItem, GridItemViewHolder>(FeatureGridItemDiffCallback()) {
+
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int,
+    ): GridItemViewHolder {
+        val inflater = LayoutInflater.from(parent.context)
+        return GridItemViewHolder(ItemFeatureGridBinding.inflate(inflater, parent, false))
+    }
+
+    override fun onBindViewHolder(
+        holder: GridItemViewHolder,
+        position: Int,
+    ) {
+        holder.bind(getItem(position))
+    }
+
+    class GridItemViewHolder(private val binding: ItemFeatureGridBinding) : RecyclerView.ViewHolder(binding.root) {
+
+        fun bind(item: FeatureGridItem) {
+            binding.icon.setImageResource(item.iconRes)
+            binding.title.setText(item.titleRes)
+            binding.description.setText(item.descriptionRes)
+        }
+    }
+
+    private class FeatureGridItemDiffCallback : DiffUtil.ItemCallback<FeatureGridItem>() {
+
+        override fun areItemsTheSame(
+            oldItem: FeatureGridItem,
+            newItem: FeatureGridItem,
+        ): Boolean = oldItem == newItem
+
+        override fun areContentsTheSame(
+            oldItem: FeatureGridItem,
+            newItem: FeatureGridItem,
+        ): Boolean = oldItem == newItem
+    }
+}
+
+data class FeatureGridItem(
+    @DrawableRes val iconRes: Int,
+    @StringRes val titleRes: Int,
+    @StringRes val descriptionRes: Int,
+)

app/src/main/res/drawable/background_feature_grid_item_icon.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ 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.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <stroke
+        android:width="@dimen/horizontalDividerHeight"
+        android:color="?attr/daxColorContainer" />
+
+    <solid android:color="?attr/daxColorSurface" />
+</shape>

app/src/main/res/drawable/ic_ads_tracking_blocked.xml

@@ -0,0 +1,25 @@
+<!--
+  ~ 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.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M12.5,9a3.5,3.5 0,1 1,0 7,3.5 3.5,0 0,1 0,-7ZM12,1a4,4 0,0 1,4 4v2.697c0,0.565 -0.753,0.887 -1.25,0.619L14.75,5A2.75,2.75 0,0 0,12 2.25L4,2.25A2.75,2.75 0,0 0,1.25 5v6A2.75,2.75 0,0 0,4 13.75h3.917c0.156,0.576 -0.228,1.25 -0.824,1.25L4,15a4,4 0,0 1,-4 -4L0,5a4,4 0,0 1,4 -4h8ZM10.375,11.875a0.5,0.5 0,0 0,-0.5 0.5v0.25a0.5,0.5 0,0 0,0.5 0.5h4.25a0.5,0.5 0,0 0,0.5 -0.5v-0.25a0.5,0.5 0,0 0,-0.5 -0.5h-4.25ZM7.348,5.075a4.085,4.085 0,0 1,2.614 0.36c0.85,0.42 1.65,1.153 2.37,2.246l0.046,0.07a4.74,4.74 0,0 0,-1.359 0.235c-0.4,-0.535 -0.803,-0.919 -1.197,-1.187a1.997,1.997 0,0 1,-0.105 1.851c-0.307,0.223 -0.586,0.48 -0.832,0.769a2,2 0,0 1,-2.76 -2.49c-0.605,0.41 -1.12,0.96 -1.468,1.524a0.625,0.625 0,1 1,-1.064 -0.656c0.736,-1.193 2.115,-2.413 3.755,-2.723Z"
+      android:fillColor="?attr/daxColorPrimaryIcon"/>
+</vector>

app/src/main/res/drawable/ic_cookie_blocked.xml

@@ -0,0 +1,29 @@
+<!--
+  ~ 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.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <group>
+    <clip-path
+        android:pathData="M0,0h16v16H0z"/>
+    <path
+        android:pathData="M8.294,0.006c0.492,0.018 0.831,0.43 0.831,0.869a6,6 0,0 0,6 6c0.425,0 0.826,0.318 0.867,0.785 0.004,0.113 0.008,0.227 0.008,0.34 0,0.491 -0.604,0.704 -1.023,0.447a4.708,4.708 0,0 0,-0.235 -0.135c0.003,-0.066 0.006,-0.131 0.007,-0.197a7.291,7.291 0,0 1,-0.538 -0.048,4.725 4.725,0 0,0 -1.353,-0.303A7.255,7.255 0,0 1,7.885 1.25a6.75,6.75 0,1 0,0.427 13.492c0.042,0.08 0.088,0.158 0.135,0.234C8.704,15.397 8.491,16 8,16A8,8 0,1 1,8.294 0.006ZM12.5,9a3.5,3.5 0,1 1,0 7,3.5 3.5,0 0,1 0,-7ZM10.375,11.875a0.5,0.5 0,0 0,-0.5 0.5v0.25a0.5,0.5 0,0 0,0.5 0.5h4.25a0.5,0.5 0,0 0,0.5 -0.5v-0.25a0.5,0.5 0,0 0,-0.5 -0.5h-4.25ZM6.75,11a0.75,0.75 0,1 1,0 1.5,0.75 0.75,0 0,1 0,-1.5ZM3.75,8a0.75,0.75 0,1 1,0 1.5,0.75 0.75,0 0,1 0,-1.5ZM7.75,7a0.75,0.75 0,1 1,0 1.5,0.75 0.75,0 0,1 0,-1.5ZM5.75,4a0.75,0.75 0,1 1,0 1.5,0.75 0.75,0 0,1 0,-1.5Z"
+        android:fillColor="?attr/daxColorPrimaryIcon"/>
+  </group>
+</vector>