use data feed for trackers blocked

Author: shakyShane

special-pages/pages/new-tab/app/activity/ActivityProvider.js

@@ -89,15 +89,12 @@ export function ActivityProvider(props) {
  * @property {Record<string, TrackingStatus>} trackingStatus
  * @property {Record<string, boolean>} favorites
  * @property {string[]} urls
- */
-
-/**
- * @typedef {{ activity: DomainActivity[], urls: string[] }} Incoming
+ * @property {number} totalTrackers
  */
 
 /**
  * @param {NormalizedActivity} prev
- * @param {Incoming} incoming
+ * @param {import("./batched-activity.service.js").Incoming} incoming
  * @return {NormalizedActivity}
  */
 function normalizeItems(prev, incoming) {
@@ -108,6 +105,7 @@ function normalizeItems(prev, incoming) {
         history: {},
         trackingStatus: {},
         urls: [],
+        totalTrackers: incoming.totalTrackers,
     };
 
     if (shallowDiffers(prev.urls, incoming.urls)) {
@@ -248,8 +246,9 @@ export function SignalStateProvider({ children }) {
                 trackingStatus: {},
                 favorites: {},
                 urls: [],
+                totalTrackers: 0,
             },
-            { activity: state.data.activity, urls: state.data.urls },
+            { activity: state.data.activity, urls: state.data.urls, totalTrackers: state.data.totalTrackers },
         ),
     );
 
@@ -282,7 +281,11 @@ export function SignalStateProvider({ children }) {
         const src = /** @type {BatchedActivityService} */ (service);
         const unsub = src.onData((evt) => {
             batch(() => {
-                activity.value = normalizeItems(activity.value, { activity: evt.data.activity, urls: evt.data.urls });
+                activity.value = normalizeItems(activity.value, {
+                    activity: evt.data.activity,
+                    urls: evt.data.urls,
+                    totalTrackers: evt.data.totalTrackers,
+                });
                 const visible = keys.value;
                 const all = activity.value.urls;
                 const nextVisibleRange = all.slice(0, Math.max(service.INITIAL, Math.max(service.INITIAL, visible.length)));

special-pages/pages/new-tab/app/activity/batched-activity.service.js

@@ -9,7 +9,7 @@
 import { Service } from '../service.js';
 
 /**
- * @typedef {{ activity: DomainActivity[], urls: string[] }} Incoming
+ * @typedef {{ activity: DomainActivity[], urls: string[], totalTrackers: number }} Incoming
  */
 
 export class BatchedActivityService {
@@ -33,28 +33,41 @@ export class BatchedActivityService {
                         const data = await this.ntp.messaging.request('activity_getDataForUrls', {
                             urls: params.urls,
                         });
-                        return { activity: data.activity, urls: this.dataService.data.urls };
+                        return {
+                            activity: data.activity,
+                            totalTrackers: this.dataService.data.totalTrackers,
+                            urls: this.dataService.data.urls,
+                        };
                     } else {
                         const urlsResponse = await this.ntp.messaging.request('activity_getUrls');
                         const data = await this.ntp.messaging.request('activity_getDataForUrls', {
                             urls: urlsResponse.urls.slice(0, this.INITIAL),
                         });
-                        return { activity: data.activity, urls: urlsResponse.urls };
+                        return { activity: data.activity, urls: urlsResponse.urls, totalTrackers: urlsResponse.totalTrackersBlocked };
                     }
                 } else {
                     const data = await this.ntp.messaging.request('activity_getData');
-                    return { activity: data.activity, urls: data.activity.map((x) => x.url) };
+                    return {
+                        activity: data.activity,
+                        urls: data.activity.map((x) => x.url),
+                        totalTrackers: data.activity.reduce((acc, item) => acc + item.trackingStatus.totalCount, 0),
+                    };
                 }
             },
             subscribe: (cb) => {
                 const sub1 = ntp.messaging.subscribe('activity_onDataUpdate', (params) => {
-                    cb({ activity: params.activity, urls: params.activity.map((x) => x.url) });
+                    cb({
+                        activity: params.activity,
+                        urls: params.activity.map((x) => x.url),
+                        totalTrackers: params.activity.reduce((acc, item) => acc + item.trackingStatus.totalCount, 0),
+                    });
                 });
                 const sub2 = ntp.messaging.subscribe('activity_onDataPatch', (params) => {
+                    const totalTrackers = params.totalTrackersBlocked;
                     if ('patch' in params && params.patch !== null) {
-                        cb({ activity: [/** @type {DomainActivity} */ (params.patch)], urls: params.urls });
+                        cb({ activity: [/** @type {DomainActivity} */ (params.patch)], urls: params.urls, totalTrackers });
                     } else {
-                        cb({ activity: [], urls: params.urls });
+                        cb({ activity: [], urls: params.urls, totalTrackers });
                     }
                 });
                 return () => {
@@ -67,7 +80,11 @@ export class BatchedActivityService {
                 return next;
             }
             if (this.batched) {
-                return { activity: old.activity.concat(next.activity), urls: next.urls };
+                return {
+                    activity: old.activity.concat(next.activity),
+                    urls: next.urls,
+                    totalTrackers: next.totalTrackers,
+                };
             }
             return next;
         });

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

@@ -1,7 +1,6 @@
 import { h } from 'preact';
 import { ActivityMockProvider } from '../mocks/ActivityMockProvider.js';
 import { ActivityConsumer } from './Activity.js';
-import { activityMocks } from '../mocks/activity.mocks.js';
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 

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

@@ -41,11 +41,11 @@ function ActivityConfigured({ expansion, toggle }) {
     const expanded = expansion === 'expanded';
     const { activity } = useContext(SignalStateContext);
     const { didClick } = useContext(ActivityApiContext);
+
     const count = useComputed(() => {
-        return Object.values(activity.value.trackingStatus).reduce((acc, item) => {
-            return acc + item.totalCount;
-        }, 0);
+        return activity.value.totalTrackers;
     });
+
     const itemCount = useComputed(() => {
         return Object.keys(activity.value.items).length;
     });

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

@@ -139,6 +139,16 @@ test.describe('activity widget', () => {
         await ntp.mocks.waitForCallCount({ method: 'activity_getData', count: 2 });
     });
     test.describe('batched API', () => {
+        test('batched API reads tracker count total from urls api', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const widget = new ActivityPage(page, ntp).withEntries(6);
+            const batching = new BatchingPage(page, ntp, widget);
+            await ntp.reducedMotion();
+            await ntp.openPage({
+                additional: { feed: 'activity', 'activity.api': 'batched', platform: 'windows', activity: widget.entries },
+            });
+            await batching.displaysTrackerCount();
+        });
         test('control: un-batched fetches all', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);
             const ap = new ActivityPage(page, ntp);

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

@@ -186,6 +186,15 @@ export class BatchingPage {
             - link "4 EVm3Kbs9Qh"
         `);
     }
+
+    async displaysTrackerCount() {
+        if (this.ap.entries !== 6) throw new Error('this scenario expects 6 initial items');
+
+        const { totalTrackersBlocked } = toPatch(generateSampleData(this.ap.entries));
+
+        // ensure the total is shown, even though some item will not have been fetched
+        await expect(this.ap.context().getByRole('heading')).toContainText(`${totalTrackersBlocked} tracking attempts blocked`);
+    }
 }
 
 /**

special-pages/pages/new-tab/app/activity/mocks/ActivityMockProvider.js

@@ -25,7 +25,11 @@ import { reducer } from '../../service.hooks.js';
  *
  */
 export function ActivityMockProvider({
-    data = { activity: activityMocks.few.activity, urls: activityMocks.few.activity.map((x) => x.url) },
+    data = {
+        activity: activityMocks.few.activity,
+        urls: activityMocks.few.activity.map((x) => x.url),
+        totalTrackers: activityMocks.few.activity.reduce((acc, item) => acc + item.trackingStatus.totalCount, 0),
+    },
     config = { expansion: 'expanded', animation: { kind: 'auto-animate' } },
     children,
 }) {