jingram/cpm-stats-on-ntp-with-scroll (#2073)

* Update animation test cases

* Add messaging subscription to scroll to protections report

* Track last seen blocked values

* Fix initial tracker count TickPill display

Handle undefined trackingStatus when sites are first logged. The
component now provides a safe default and reactively updates when
tracking status data arrives, fixing the issue where "no trackers
blocked" was shown initially even when trackers were actually blocked.

* Update tracking status

Updated the component to use reactive computed signals. Changes:
  1. `trackingStatus` — computed signal tracking
activity.value.trackingStatus[id]
  2. `totalTrackersBlocked` — computed signal derived from
trackingStatus
  3. `totalTrackersPillText` — computed signal that updates when the
count changes
  4. `cookiePopUpBlocked` — kept as a computed signal (removed the
.value that read it once)

* Another attempt at updating tracking status

1. Added `useSignalEffect`: Tracks when computed signals
(totalTrackersPillText, totalTrackersBlocked, cookiePopUpBlocked)
change.
2. Used a ref to track previous values: prevValuesRef stores the last
values to avoid unnecessary re-renders.
3. State update on change: When computed values change, update state via
setRenderKey to trigger a re-render.
4. Conditional updates: Only update state when values actually change,
reducing unnecessary re-renders.

How it works:
• useSignalEffect runs whenever the computed signals change.
• It compares current values with previous values stored in the ref.
• If values changed, it updates the ref and calls setRenderKey to force
a re-render.
• The re-render causes TickPill to display the updated values.

* One more attempt

1. Created `activityData` computed: Tracks activity.value directly so
when normalizeData creates a new object (line 228 in
NormalizeDataProvider), this computed re-evaluates.
2. Updated all computed signals: They now depend on activityData.value
instead of activity.value directly, ensuring they re-evaluate when
activityData changes.
3. Added `useSignalEffect`: Tracks activityData changes and forces a
re-render via state update when activity.value changes.
4. Access computed values during render: Accessing .value during render
(not just in JSX) ensures Preact Signals tracks them for reactivity.

How it works:
• When trackingStatus data arrives via activity_onDataUpdate or
activity_onDataPatch, normalizeData runs
• normalizeData creates a new activity.value object (new reference)
• activityData computed detects the change and re-evaluates
• All dependent computed signals (trackingStatus, totalTrackersBlocked,
etc.) re-evaluate
• useSignalEffect runs and calls setRenderKey to force a re-render
• Component re-renders with updated TickPill values

* Address ship review UI comments

* Address linter issues

* Address linter issues

* Minor CSS tweak for tick pill (chip)

* Revert Activity.js changes

These changes are not needed until we decide if we will keep the blocked
counts aligned with native

* Revert hook edits unlrelated to the scroll feature

Part 2

* Address Cursor review

Bug: IntersectionObserver not set up due to ref timing

The useEffect that sets up the IntersectionObserver has [elementRef] as
its dependency, but ref objects maintain a stable identity - only
elementRef.current changes after the DOM renders. When the component
first mounts, elementRef.current is null, causing the effect to set
isInViewport(true) and return without creating the observer. Since
elementRef (the object itself) never changes, the effect won't re-run
after the DOM assigns ref.current. This defeats the viewport detection
feature, causing animations to always start immediately instead of
waiting for the element to be visible.

* Address Stale lastSeenValueRef causes visual regression on re-entry

When the targetValue changes while the element is out of viewport, the
else-if branch (lines 96-100) correctly snaps the display to the new
target but fails to clear lastSeenValueRef. This ref retains a stale
mid-animation value from when the element exited viewport. When the
element later re-enters viewport, the condition at line 88 evaluates
true (stale value differs from new target), causing the animation to
start from the old saved value instead of the current displayed value.
This produces a visible backward jump in the counter before it animates
forward.

* Convert "NEW" SVG to component to accept translations

* Address linter errors

More linter issues

* Uppercase new badge and edit tooltip text

* Add translations from Smartling

Author: jsoningram

special-pages/pages/new-tab/app/components/Icons.js

@@ -602,35 +602,6 @@ export function CloseSmallIcon(props) {
     );
 }
 
-/**
- * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
- */
-export function NewBadgeIcon(props) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="16" viewBox="0 0 42 16" fill="none" {...props}>
-            <path
-                d="M0 3.99792C0 1.78879 1.79086 -0.0020752 4 -0.0020752H38C40.2091 -0.0020752 42 1.78879 42 3.99792V11.9979C42 14.2071 40.2091 15.9979 38 15.9979H4C1.79086 15.9979 0 14.2071 0 11.9979V3.99792Z"
-                fill="#F9BE1A"
-            />
-            <path
-                d="M13.0913 9.1073H13.1812V3.94617H14.8032V12.0497H13.3999L9.64893 6.86707H9.55908V12.0497H7.93604V3.94617H9.35107L13.0913 9.1073Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-            <path
-                d="M22.144 5.3446H18.4722V7.29871H21.936V8.60144H18.4722V10.6512H22.144V12.0497H16.7759V3.94617H22.144V5.3446Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-            <path
-                d="M26.4663 9.73621H26.5562L28.0337 3.94617H29.4653L30.9702 9.73621H31.0601L32.312 3.94617H34.064L31.9136 12.0497H30.3247L28.7915 6.59167H28.7017L27.1851 12.0497H25.5854L23.4399 3.94617H25.2036L26.4663 9.73621Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-        </svg>
-    );
-}
-
 /**
  * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
  */

special-pages/pages/new-tab/app/components/NewBadge.js

@@ -0,0 +1,17 @@
+import { h } from 'preact';
+import styles from './NewBadge.module.css';
+
+/**
+ * Badge component that displays text in a yellow rounded rectangle.
+ *
+ * @param {object} props
+ * @param {string} props.text - The text to display in the badge
+ * @param {import('preact').ComponentProps<'span'>} [props.rest] - Additional HTML attributes
+ */
+export function NewBadge({ text, ...rest }) {
+    return (
+        <span class={styles.badge} {...rest}>
+            {text?.toUpperCase() || 'NEW'}
+        </span>
+    );
+}

special-pages/pages/new-tab/app/components/NewBadge.module.css

@@ -0,0 +1,16 @@
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: 16px;
+    padding: 0 8px;
+    background-color: #F9BE1A;
+    border-radius: 4px;
+    font-family: var(--theme-font-family, system-ui);
+    font-weight: 700;
+    font-size: 11px;
+    color: var(--color-black-at-96);
+    letter-spacing: -0.015em;
+    flex-shrink: 0;
+}

special-pages/pages/new-tab/app/components/TickPill/TickPill.module.css

@@ -1,9 +1,9 @@
 .tickPill {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 8px 10px;
-    border-radius: 100px;
+    gap: 4px;
+    padding: 8px 8px;
+    border-radius: 1000px;
     background-color: var(--color-white-at-3);
     border: 1px solid var(--color-white-at-12);
     height: 20px;
@@ -32,8 +32,8 @@
 
 /* Light mode styles */
 [data-theme="light"] .tickPill {
-    background-color: var(--color-black-at-4);
-    border: 1px solid var(--color-black-at-12);
+    background-color: var(--color-black-at-1);
+    border: 1px solid var(--color-black-at-9);
 }
 
 [data-theme="light"] .text {

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

@@ -39,6 +39,7 @@
     height: 16px;
     display: inline-block;
     vertical-align: middle;
+    margin-top: 2px;
 }
 
 .widgetExpander {

special-pages/pages/new-tab/app/privacy-stats/strings.json

@@ -56,7 +56,7 @@
     "note": "The heading indicating multiple cookie pop-ups were handled by the CPM"
   },
   "stats_protectionsReportInfo": {
-    "title": "Displays tracking attempts blocked in the last 7 days, and the number of cookie pop-ups blocked since you started using the browser. <span>You can reset these stats using the Fire Button.</span>",
+    "title": "Displays tracking attempts blocked in the last 7 days, and the number of cookie pop-ups blocked since you started using the browser.",
     "note": "Text explaining how to reset the protections stats"
   },
   "stats_feedCountBlockedSingular": {

special-pages/pages/new-tab/app/protections/components/Protections.module.css

@@ -44,7 +44,7 @@
 }
 
 .block {
-    margin-top: 32px;
+    margin-top: 16px;
 }
 
 /* @todo legacyProtections: Remove once all platforms support the new UI */

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

@@ -1,11 +1,13 @@
-import { useTypedTranslationWith } from '../../types.js';
+import { useTypedTranslationWith, useMessaging } from '../../types.js';
 import styles from '../../privacy-stats/components/PrivacyStats.module.css';
 import { ShowHideButtonCircle } from '../../components/ShowHideButton.jsx';
 import cn from 'classnames';
 import { h } from 'preact';
-import { InfoIcon, NewBadgeIcon } from '../../components/Icons.js';
+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 enStrings from "../strings.json"
@@ -29,6 +31,9 @@ export function ProtectionsHeading({
     totalCookiePopUpsBlockedSignal,
 }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const ntp = useMessaging();
+    const headingRef = useRef(/** @type {HTMLDivElement|null} */ (null));
+    const counterContainerRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const totalTrackersBlocked = blockedCountSignal.value;
     const totalCookiePopUpsBlockedValue = totalCookiePopUpsBlockedSignal.value;
 
@@ -38,9 +43,16 @@ export function ProtectionsHeading({
             ? Math.max(0, Math.floor(totalCookiePopUpsBlockedValue))
             : 0;
 
-    // Animate both tracker count and cookie pop-ups count
-    const animatedTrackersBlocked = useAnimatedCount(totalTrackersBlocked);
-    const animatedCookiePopUpsBlocked = useAnimatedCount(totalCookiePopUpsBlocked);
+    // Animate both tracker count and cookie pop-ups count when counterContainer is in viewport
+    const animatedTrackersBlocked = useAnimatedCount(totalTrackersBlocked, counterContainerRef);
+    const animatedCookiePopUpsBlocked = useAnimatedCount(totalCookiePopUpsBlocked, counterContainerRef);
+
+    // Subscribe to scroll message
+    useEffect(() => {
+        return ntp.messaging.subscribe('protections_scroll', () => {
+            headingRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        });
+    }, [ntp]);
 
     // Native does not tell the FE if cookie pop up protection is enabled but
     // we can derive this from the value of `totalCookiePopUpsBlocked` in the
@@ -54,7 +66,7 @@ export function ProtectionsHeading({
         animatedCookiePopUpsBlocked === 1 ? t('stats_totalCookiePopUpsBlockedSingular') : t('stats_totalCookiePopUpsBlockedPlural');
 
     return (
-        <div class={styles.heading} data-testid="ProtectionsHeading">
+        <div class={styles.heading} data-testid="ProtectionsHeading" ref={headingRef}>
             <div class={cn(styles.control, animatedTrackersBlocked === 0 && styles.noTrackers)}>
                 <span class={styles.headingIcon}>
                     <img src={'./icons/Shield-Check-Color-16.svg'} alt="Privacy Shield" />
@@ -79,7 +91,7 @@ export function ProtectionsHeading({
                     </span>
                 )}
             </div>
-            <div class={styles.counterContainer}>
+            <div class={styles.counterContainer} ref={counterContainerRef}>
                 {/* Total Trackers Blocked  */}
                 <div class={styles.counter}>
                     {animatedTrackersBlocked === 0 && <h3 class={styles.noRecentTitle}>{t('protections_noRecent')}</h3>}
@@ -99,9 +111,9 @@ export function ProtectionsHeading({
                         <h3 class={styles.title}>
                             {animatedCookiePopUpsBlocked} <span>{cookiePopUpsBlockedHeading}</span>
                         </h3>
-                        {/* @todo `NewBadgeIcon` will be manually removed in
+                        {/* @todo `NewBadge` will be manually removed in
                         a future iteration */}
-                        <NewBadgeIcon />
+                        <NewBadge text={t('protections_newBadge')} />
                     </div>
                 )}
             </div>

special-pages/pages/new-tab/app/protections/integrations-tests/protections.page.js

@@ -153,4 +153,24 @@ export class ProtectionsPage {
         await tooltipTrigger.press('Space');
         await expect(tooltip).toBeVisible();
     }
+
+    /**
+     * Triggers the scroll to protections heading via subscription message
+     */
+    async scrollsToProtectionsHeading() {
+        const heading = this.context().getByTestId('ProtectionsHeading');
+        await expect(heading).toBeVisible();
+
+        // Scroll away from the element first
+        await this.page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+
+        // Trigger the scroll message
+        await this.ntp.mocks.simulateSubscriptionMessage(named.subscription('protections_scroll'), {});
+
+        // Wait for smooth scroll animation to complete
+        await this.page.waitForTimeout(500);
+
+        // Verify the heading is now in viewport
+        await expect(heading).toBeInViewport();
+    }
 }

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

@@ -98,4 +98,14 @@ test.describe('protections report', () => {
         await protections.ready();
         await protections.hasInfoTooltip();
     });
+
+    test('scrolls to protections heading via subscription message', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { 'protections.feed': 'activity' } });
+
+        const protections = new ProtectionsPage(ntp);
+        await protections.ready();
+        await protections.scrollsToProtectionsHeading();
+    });
 });