Increase tracker and cookie pop-up counter capacity (#2083)

* Increase capacity of counter and localize result

* CSS changes to support max count

Author: jsoningram

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -65,14 +65,24 @@
 
 .counterContainer {
   display: flex;
-  gap: 24px;
+  gap: 12px;
 }
 
 .counter {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding-right: 38px;
+    width: 196px;
+    padding-right: 18px;
+    box-sizing: content-box;
+    
+    &:last-child {
+        padding-right: 0;
+    }
+}
+
+.cookiePopUpsCounter {
+    margin-left: 14px;
 }
 
 .title {
@@ -89,6 +99,8 @@
     line-height: 20px;
     padding-bottom: 4px;
     padding-top: 12px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 }
 

special-pages/pages/new-tab/app/protections/components/ProtectionsHeading.js

@@ -7,7 +7,9 @@ import { InfoIcon } from '../../components/Icons.js';
 import { NewBadge } from '../../components/NewBadge.js';
 import { Tooltip } from '../../components/Tooltip/Tooltip.js';
 import { useAnimatedCount } from '../utils/useAnimatedCount.js';
-import { useRef, useEffect } from 'preact/hooks';
+import { useRef, useEffect, useMemo } from 'preact/hooks';
+import { getLocalizedNumberFormatter } from '../../../../../shared/utils.js';
+import { useLocale } from '../../../../../shared/components/EnvironmentProvider.js';
 
 /**
  * @import enStrings from "../strings.json"
@@ -32,6 +34,8 @@ export function ProtectionsHeading({
 }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const ntp = useMessaging();
+    const locale = useLocale();
+    const formatter = useMemo(() => getLocalizedNumberFormatter(locale), [locale]);
     const headingRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const counterContainerRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const totalTrackersBlocked = blockedCountSignal.value;
@@ -97,7 +101,7 @@ export function ProtectionsHeading({
                     {animatedTrackersBlocked === 0 && <h3 class={styles.noRecentTitle}>{t('protections_noRecent')}</h3>}
                     {animatedTrackersBlocked > 0 && (
                         <h3 class={styles.title}>
-                            {animatedTrackersBlocked} <span>{trackersBlockedHeading}</span>
+                            {formatter.format(animatedTrackersBlocked)} <span>{trackersBlockedHeading}</span>
                         </h3>
                     )}
                 </div>
@@ -107,9 +111,9 @@ export function ProtectionsHeading({
                 enabled AND both `animatedTrackersBlocked` and
                 `totalCookiePopUpsBlocked` are at least 1 */}
                 {isCpmEnabled && animatedTrackersBlocked > 0 && totalCookiePopUpsBlocked > 0 && (
-                    <div class={styles.counter}>
+                    <div class={cn(styles.counter, styles.cookiePopUpsCounter)}>
                         <h3 class={styles.title}>
-                            {animatedCookiePopUpsBlocked} <span>{cookiePopUpsBlockedHeading}</span>
+                            {formatter.format(animatedCookiePopUpsBlocked)} <span>{cookiePopUpsBlockedHeading}</span>
                         </h3>
                         {/* @todo `NewBadge` will be manually removed in
                         a future iteration */}

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

@@ -1,5 +1,6 @@
 import { TestTransportConfig } from '@duckduckgo/messaging';
 import { protectionsMocks } from './protections.mocks.js';
+import { AnimationConstants } from '../utils/animateCount.js';
 
 const url = typeof window !== 'undefined' ? new URL(window.location.href) : new URL('https://example.com');
 
@@ -99,7 +100,12 @@ export function protectionsMockTransport() {
                     dataset.totalCookiePopUpsBlocked = undefined;
 
                     if (url.searchParams.get('cpm') === 'true') {
-                        dataset.totalCookiePopUpsBlocked = 1222;
+                        dataset.totalCookiePopUpsBlocked = AnimationConstants.MAX_DISPLAY_COUNT;
+                    }
+
+                    if (url.searchParams.get('cpm') === 'max') {
+                        dataset.totalCount = AnimationConstants.MAX_DISPLAY_COUNT;
+                        dataset.totalCookiePopUpsBlocked = AnimationConstants.MAX_DISPLAY_COUNT;
                     }
 
                     // CPM = 0 state

special-pages/pages/new-tab/app/protections/unit-tests/animateCount.spec.js

@@ -1,6 +1,6 @@
 import { equal, ok, deepEqual } from 'node:assert/strict';
 import { test } from 'node:test';
-import { animateCount } from '../utils/animateCount.js';
+import { animateCount, AnimationConstants } from '../utils/animateCount.js';
 
 /**
  * Focused test suite for animateCount utility function
@@ -140,6 +140,7 @@ class AnimationMocker {
 
 test.describe('animateCount - Core Algorithm', () => {
     test('should respect threshold boundaries and percentage-based start values', (t) => {
+        const { MAX_DISPLAY_COUNT } = AnimationConstants;
         const mocker = new AnimationMocker();
         mocker.setup();
         t.after(() => mocker.cleanup());
@@ -175,13 +176,13 @@ test.describe('animateCount - Core Algorithm', () => {
         equal(updates39[0], 29); // Math.floor(39 * 0.75) = 29
         equal(updates40[0], 34); // Math.floor(40 * 0.85) = 34
 
-        // Test capping at 9999
+        // Test capping at MAX_DISPLAY_COUNT
         const updatesCapped = [];
-        animateCount(15000, (v) => updatesCapped.push(v));
+        animateCount(MAX_DISPLAY_COUNT + 1, (v) => updatesCapped.push(v));
         mocker.tick(1);
-        equal(updatesCapped[0], 8499); // Math.floor(9999 * 0.85) = 8499
+        equal(updatesCapped[0], Math.floor(MAX_DISPLAY_COUNT * 0.85));
         mocker.runToCompletion(500, 10);
-        equal(updatesCapped[updatesCapped.length - 1], 9999);
+        equal(updatesCapped[updatesCapped.length - 1], MAX_DISPLAY_COUNT);
     });
 
     test('should handle incremental updates and edge cases', (t) => {

special-pages/pages/new-tab/app/protections/utils/animateCount.js

@@ -15,7 +15,7 @@ export const AnimationConstants = {
     UPPER_THRESHOLD: 40,
     LOWER_START_PERCENTAGE: 0.75,
     UPPER_START_PERCENTAGE: 0.85,
-    MAX_DISPLAY_COUNT: 9999,
+    MAX_DISPLAY_COUNT: 9999999,
 };
 
 /**
@@ -61,7 +61,7 @@ export function animateCount(targetValue, onUpdate, onComplete, fromValue = null
         MAX_DISPLAY_COUNT,
     } = AnimationConstants;
 
-    // Cap the target value at 9999
+    // Cap the target value at MAX_DISPLAY_COUNT
     const cappedTarget = Math.min(targetValue, MAX_DISPLAY_COUNT);
     const isInitialDisplay = fromValue === null || fromValue === 0;