Adapt Activity & Privacy Stats widgets for ads and trackers (#1621)

* Adapt Activity widget for ads and trackers

- Updates UI text, icons, and styles based on whether the browser blocks just trackers or ads and trackers.
- Introduces a `trackerType` config option ('trackersOnly' or 'adsAndTrackers') to control the display.
- Adds new translation strings and a green shield icon for the ads and trackers variant.
- Updates tests and mock data accordingly.

* Empty Netlify build cache

* Revert "Empty Netlify build cache"

This reverts commit 0049864.

* Update 'no recent history' placeholder copy

* Adapt Privacy Stats widget for ads and trackers

* Add new tab URL test parameters documentation

* Tweak subtitle styling to be consistent with Next Steps widget

* Fix references to 'onboarding' in param docs

Author: noisysocks

special-pages/pages/new-tab/app/activity/components/Activity.js

@@ -7,7 +7,7 @@ import { useTypedTranslationWith } from '../../types.js';
 import { useVisibility } from '../../widget-list/widget-config.provider.js';
 import { useOnMiddleClick } from '../../utils.js';
 import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
-import { useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
+import { useAdBlocking, useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
 import { CompanyIcon } from '../../components/CompanyIcon.js';
 import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
 import { ActivityItem } from './ActivityItem.js';
@@ -194,6 +194,7 @@ function TrackerStatus({ id, trackersFound }) {
     const status = useComputed(() => activity.value.trackingStatus[id]);
     const other = status.value.trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
     const companyIconsMax = other.length === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
+    const adBlocking = useAdBlocking();
 
     const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, _index) => {
         return <CompanyIcon displayName={item.displayName} key={item} />;
@@ -210,10 +211,12 @@ function TrackerStatus({ id, trackersFound }) {
     }
 
     if (status.value.totalCount === 0) {
-        // prettier-ignore
-        const text = trackersFound
-            ? t('activity_no_trackers_blocked')
-            : t('activity_no_trackers')
+        let text;
+        if (trackersFound) {
+            text = adBlocking ? t('activity_no_adsAndTrackers_blocked') : t('activity_no_trackers_blocked');
+        } else {
+            text = adBlocking ? t('activity_no_adsAndTrackers') : t('activity_no_trackers');
+        }
         return (
             <p class={styles.companiesIconRow} data-testid="TrackerStatus">
                 {text}
@@ -228,7 +231,11 @@ function TrackerStatus({ id, trackersFound }) {
                 {otherIcon}
             </div>
             <div class={styles.companiesText}>
-                <Trans str={t('activity_countBlockedPlural', { count: String(status.value.totalCount) })} values={{}} />
+                {adBlocking ? (
+                    <Trans str={t('activity_countBlockedAdsAndTrackersPlural', { count: String(status.value.totalCount) })} values={{}} />
+                ) : (
+                    <Trans str={t('activity_countBlockedPlural', { count: String(status.value.totalCount) })} values={{}} />
+                )}
             </div>
         </div>
     );

special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js

@@ -293,7 +293,24 @@ export class ActivityPage {
         await page.pause();
     }
 
-    async showsEmptyTrackerState() {
+    async showsTrackersOnlyTrackerStates() {
+        await expect(this.context().getByTestId('ActivityItem').nth(0)).toMatchAriaSnapshot(`
+          - listitem:
+            - link "example.com"
+            - button "Add example.com to favorites":
+              - img
+            - button "Clear browsing history and data for example.com":
+              - img
+            - text: +1 56 tracking attempts blocked
+            - list:
+              - listitem:
+                - link "/bathrooms/toilets"
+                - text: Just now
+              - listitem:
+                - link "/kitchen/sinks"
+                - text: 50 mins ago
+        `);
+
         await expect(this.context().getByTestId('ActivityItem').nth(3)).toMatchAriaSnapshot(`
           - listitem:
             - link "twitter.com"
@@ -305,32 +322,90 @@ export class ActivityPage {
             - list:
               - listitem:
                 - link "Trending Topics"
-                - text: 2 days ago`);
+                - text: 2 days ago
+          `);
 
         await expect(this.context().getByTestId('ActivityItem').nth(4)).toMatchAriaSnapshot(`
-            - listitem:
-              - link "app.linkedin.com"
-              - button "Add app.linkedin.com to favorites":
-                - img
-              - button "Clear browsing history and data for app.linkedin.com":
-                - img
-              - paragraph: No trackers found
-              - list:
-                - listitem:
-                  - link "Profile Page"
-                  - text: 2 hrs ago
+          - listitem:
+            - link "app.linkedin.com"
+            - button "Add app.linkedin.com to favorites":
+              - img
+            - button "Clear browsing history and data for app.linkedin.com":
+              - img
+            - paragraph: No trackers found
+            - list:
+              - listitem:
+                - link "Profile Page"
+                - text: 2 hrs ago
+          `);
+    }
+
+    async showsAdsAndTrackersTrackerStates() {
+        await expect(this.context().getByTestId('ActivityItem').nth(0)).toMatchAriaSnapshot(`
+          - listitem:
+            - link "example.com"
+            - button "Add example.com to favorites":
+              - img
+            - button "Clear browsing history and data for example.com":
+              - img
+            - text: +1 56 ads + Tracking attempts blocked
+            - list:
+              - listitem:
+                - link "/bathrooms/toilets"
+                - text: Just now
+              - listitem:
+                - link "/kitchen/sinks"
+                - text: 50 mins ago
         `);
+
+        await expect(this.context().getByTestId('ActivityItem').nth(3)).toMatchAriaSnapshot(`
+          - listitem:
+            - link "twitter.com"
+            - button "Add twitter.com to favorites":
+              - img
+            - button "Clear browsing history and data for twitter.com":
+              - img
+            - paragraph: No ads + Tracking attempts blocked
+            - list:
+              - listitem:
+                - link "Trending Topics"
+                - text: 2 days ago
+        `);
+
+        await expect(this.context().getByTestId('ActivityItem').nth(4)).toMatchAriaSnapshot(`
+          - listitem:
+            - link "app.linkedin.com"
+            - button "Add app.linkedin.com to favorites":
+              - img
+            - button "Clear browsing history and data for app.linkedin.com":
+              - img
+            - paragraph: No ads + Tracking attempts found
+            - list:
+              - listitem:
+                - link "Profile Page"
+                - text: 2 hrs ago
+          `);
     }
 
-    async hasEmptyTitle() {
+    async hasEmptyTrackersOnlyTitle() {
         const { page } = this;
         await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
             - img "Privacy Shield"
             - heading "No recent browsing activity" [level=2]
             - paragraph: Recently visited sites will appear here. Keep browsing to see how many trackers we block.
         `);
     }
-    async hasPopuplatedTitle() {
+
+    async hasEmptyAdsAndTrackersTitle() {
+        const { page } = this;
+        await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
+            - img "Privacy Shield"
+            - heading "No recent browsing activity" [level=2]
+            - paragraph: Recently visited sites will appear here. Keep browsing to see how many ads and trackers we block.
+        `);
+    }
+
+    async hasPopulatedTrackersOnlyTitle() {
         const { page } = this;
         await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
             - img "Privacy Shield"
@@ -340,4 +415,15 @@ export class ActivityPage {
             - paragraph: Past 7 days
         `);
     }
+
+    async hasPopulatedAdsAndTrackersTitle() {
+        const { page } = this;
+        await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
+            - img "Privacy Shield"
+            - heading "Total of 0 ads & tracking attempts blocked" [level=2]
+            - button "Hide recent activity" [expanded] [pressed]:
+              - img
+            - paragraph: Past 7 days
+        `);
+    }
 }

special-pages/pages/new-tab/app/activity/integration-tests/activity.spec.js

@@ -59,9 +59,13 @@ test.describe('activity widget', () => {
         const ap = new ActivityPage(page, ntp);
         await ntp.reducedMotion();
         await ntp.openPage({ additional: { feed: 'activity', activity: 'empty' } });
-        await ap.hasEmptyTitle();
+        await ap.hasEmptyTrackersOnlyTitle();
         await ntp.openPage({ additional: { feed: 'activity', activity: 'onlyTopLevel' } });
-        await ap.hasPopuplatedTitle();
+        await ap.hasPopulatedTrackersOnlyTitle();
+        await ntp.openPage({ additional: { feed: 'activity', activity: 'empty', adBlocking: 'enabled' } });
+        await ap.hasEmptyAdsAndTrackersTitle();
+        await ntp.openPage({ additional: { feed: 'activity', activity: 'onlyTopLevel', adBlocking: 'enabled' } });
+        await ap.hasPopulatedAdsAndTrackersTitle();
     });
     test('favorite item', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
@@ -119,13 +123,16 @@ test.describe('activity widget', () => {
         await ap.didRender();
         await ap.listsAtMost3TrackerCompanies();
     });
-    test('supported empty trackers states', async ({ page }, workerInfo) => {
+    test('tracker states', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const ap = new ActivityPage(page, ntp);
         await ntp.reducedMotion();
         await ntp.openPage({ additional: { feed: 'activity' } });
         await ap.didRender();
-        await ap.showsEmptyTrackerState();
+        await ap.showsTrackersOnlyTrackerStates();
+        await ntp.openPage({ additional: { feed: 'activity', adBlocking: 'enabled' } });
+        await ap.didRender();
+        await ap.showsAdsAndTrackersTrackerStates();
     });
     test('after rendering and navigating to a new tab, data is re-requested on return', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);

special-pages/pages/new-tab/app/activity/strings.json

@@ -19,6 +19,22 @@
     "title": "<b>{count}</b> tracking attempts blocked",
     "note": "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
   },
+  "activity_noRecentAdsAndTrackers_subtitle": {
+    "title": "Recently visited sites will appear here. Keep browsing to see how many ads and trackers we block.",
+    "note": "Shown in the place a list of browsing history entries will be displayed."
+  },
+  "activity_no_adsAndTrackers": {
+    "title": "No ads + Tracking attempts found",
+    "note": "Placeholder message indicating that no ads and trackers are detected"
+  },
+  "activity_no_adsAndTrackers_blocked": {
+    "title": "No ads + Tracking attempts blocked",
+    "note": "Placeholder message indicating that no ads and trackers are blocked"
+  },
+  "activity_countBlockedAdsAndTrackersPlural": {
+    "title": "<b>{count}</b> ads + Tracking attempts blocked",
+    "note": "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 ads + Tracking attempts blocked'"
+  },
   "activity_favoriteAdd": {
     "title": "Add {domain} to favorites",
     "note": "Button label, allows the user to add the specified domain to their favorites"

special-pages/pages/new-tab/app/index.js

@@ -59,7 +59,8 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
         .withPlatformName(baseEnvironment.injectName)
         .withPlatformName(init.platform?.name)
         .withPlatformName(baseEnvironment.urlParams.get('platform'))
-        .withFeatureState('customizerDrawer', init.settings?.customizerDrawer);
+        .withFeatureState('customizerDrawer', init.settings?.customizerDrawer)
+        .withFeatureState('adBlocking', init.settings?.adBlocking);
 
     if (!window.__playwright_01) {
         console.log('environment:', environment);

special-pages/pages/new-tab/app/mock-transport.js

@@ -518,6 +518,7 @@ export function mockTransport() {
 
                     /** @type {import('../types/new-tab').NewTabPageSettings} */
                     const settings = {};
+
                     if (url.searchParams.get('customizerDrawer') === 'enabled') {
                         settings.customizerDrawer = { state: 'enabled' };
                         if (url.searchParams.get('autoOpen') === 'true') {
@@ -527,6 +528,10 @@ export function mockTransport() {
                         initial.customizer = customizerData();
                     }
 
+                    if (url.searchParams.get('adBlocking') === 'enabled') {
+                        settings.adBlocking = { state: 'enabled' };
+                    }
+
                     // feature flags
                     initial.settings = settings;
 

special-pages/pages/new-tab/app/privacy-stats/components/ActivityHeading.js

@@ -4,6 +4,8 @@ import styles from './PrivacyStats.module.css';
 import { ShowHideButtonCircle } from '../../components/ShowHideButton.jsx';
 import cn from 'classnames';
 import { h } from 'preact';
+import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
+import { useAdBlocking } from '../../settings.provider.js';
 
 /**
  * @import enStrings from "../strings.json"
@@ -20,20 +22,35 @@ import { h } from 'preact';
 export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount, onToggle, buttonAttrs = {} }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const [formatter] = useState(() => new Intl.NumberFormat());
+    const adBlocking = useAdBlocking();
 
     const none = itemCount === 0;
     const someItems = itemCount > 0;
     const trackerCountFormatted = formatter.format(trackerCount);
-    const allTimeString =
-        trackerCount === 1 ? t('stats_countBlockedSingular') : t('stats_countBlockedPlural', { count: trackerCountFormatted });
+
+    let allTimeString;
+    if (trackerCount === 1) {
+        allTimeString = adBlocking ? t('stats_countBlockedAdsAndTrackersSingular') : t('stats_countBlockedSingular');
+    } else {
+        allTimeString = adBlocking
+            ? t('stats_countBlockedAdsAndTrackersPlural', { count: trackerCountFormatted })
+            : t('stats_countBlockedPlural', { count: trackerCountFormatted });
+    }
 
     return (
-        <div className={cn(styles.heading, styles.activityVariant)} data-testid={'ActivityHeading'}>
+        <div
+            className={cn(styles.heading, styles.activityVariant, { [styles.adsAndTrackersVariant]: adBlocking })}
+            data-testid={'ActivityHeading'}
+        >
             <span className={styles.headingIcon}>
-                <img src="./icons/shield.svg" alt="Privacy Shield" />
+                <img src={adBlocking ? './icons/shield-green.svg' : './icons/shield.svg'} alt="Privacy Shield" />
             </span>
             {none && <h2 className={styles.title}>{t('activity_noRecent_title')}</h2>}
-            {someItems && <h2 className={styles.title}>{allTimeString}</h2>}
+            {someItems && (
+                <h2 className={styles.title}>
+                    <Trans str={allTimeString} values={{ count: trackerCountFormatted }} />
+                </h2>
+            )}
             {canExpand && (
                 <span className={styles.widgetExpander}>
                     <ShowHideButtonCircle
@@ -47,8 +64,16 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
                     />
                 </span>
             )}
-            {itemCount === 0 && <p className={styles.subtitle}>{t('activity_noRecent_subtitle')}</p>}
-            {itemCount > 0 && <p className={cn(styles.subtitle, styles.uppercase)}>{t('stats_feedCountBlockedPeriod')}</p>}
+            {itemCount === 0 && (
+                <p className={cn(styles.subtitle, { [styles.indented]: !adBlocking })}>
+                    {adBlocking ? t('activity_noRecentAdsAndTrackers_subtitle') : t('activity_noRecent_subtitle')}
+                </p>
+            )}
+            {itemCount > 0 && (
+                <p className={cn(styles.subtitle, styles.indented, { [styles.uppercase]: !adBlocking })}>
+                    {t('stats_feedCountBlockedPeriod')}
+                </p>
+            )}
         </div>
     );
 }