jingram/cpm-stats-on-ntp: Update Protections Report on NTP to include CPM stats #2039
Conversation
❌ Deploy Preview for content-scope-scripts failed.
|
Temporary Branch UpdateThe temporary branch has been updated with the latest changes. Below are the details:
Please use the above install command to update to the latest version. |
[Beta] Generated file diffTime updated: Thu, 30 Oct 2025 00:54:23 GMT Apple
File has changed Integration
File has changed Windows
File has changed |
|
@jsoningram amazing. This approach is really good because when both platforms support it, we can delete a bunch of code and we're not left with overly-configurable components. Excellent work - sorry it creates a much larger PR, but this will pay off for certain! |
jsoningram
force-pushed
the
jingram/cpm-stats-on-ntp
branch
from
fc51da1 to
c8ad930
Compare
jsoningram
requested review from
a team,
mgurgel and
shakyShane
as code owners
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Include missing styles for infoIcon
jsoningram
force-pushed
the
jingram/cpm-stats-on-ntp
branch
from
7ea3c94 to
e596630
Compare
| gap: 6px; | ||
| padding: 8px 10px; | ||
| border-radius: 100px; | ||
| background-color: rgba(255, 255, 255, 0.03); |
There was a problem hiding this comment.
This and most other color and spacing values are covered in https://github.com/duckduckgo/content-scope-scripts/blob/main/special-pages/shared/styles/variables.css which IIRC comes for free in new-tab components
The 84% black is particularly repetitive across our CSS. No actual harm in keeping them like this, but I'm seeing variables being consistently used in other new-tab styles.
| } | ||
|
|
||
| .text { | ||
| font-size: 11px; |
There was a problem hiding this comment.
I was going to flag this one too, but I'm seeing inconsistent implementations across new-tab:
ntp-theme.cssdefines--small-label-font-size: 11px;NextSteps.module.cssuses the patternfont-size: calc(11 * var(--px-in-rem));
@shakyShane might be able to tell which one is the official steer.
| faviconMax: item.favicon?.maxAvailableSize ?? DDG_DEFAULT_ICON_SIZE, | ||
| favoriteSrc: item.favicon?.src, | ||
| trackersFound: item.trackersFound, | ||
| // cookiePopUpBlocked: item.cookiePopUpBlocked, |
There was a problem hiding this comment.
Was this left here on purpose?
There was a problem hiding this comment.
Really good work @jsoningram! I like how you've made it really easy to delete legacy code in the future :)
Mostly minor issues to flag:
- Potentially blocking translation key mismatch (see Cursor's comment)
- Commented-out line that should either be removed or explained
- Couple questions about the use of CSS variables, but only for consistency - no visible impact
- A tiny lint error for an unused Fire icon that's breaking CI
3 participants
Asana Task/Github Issue: FE/XP: implement CPM stats in NTP
Figma: O-E CPM
Description
This PR introduces cookie pop-up blocking stats to the New Tab Page (NTP), along with a redesigned activity tracker details display. The changes include support for legacy platforms through derived feature flagging to ensure backwards compatibility during the rollout.
New UI Components
special-pages/pages/new-tab/app/components/TickPill/): A reusable pill component with optional checkmark icon for displaying status informationspecial-pages/pages/new-tab/app/components/Tooltip/): A tooltip component for displaying additional contextual informationLegacy Platform Support
To support platforms not yet ready for the new protections report, legacy versions of components were created:
ActivityItemLegacy: Legacy activity item componentTrackerStatusLegacy: Legacy tracker status display (icon-based)ProtectionsHeadingLegacy: Legacy protections headingActivityLegacy.module.css: Legacy styling for activity componentsPrivacyStatsLegacy.module.css: Legacy styling for privacy statsComponents now accept a
shouldDisplayLegacyActivityprop to toggle between new and legacy UI. This allows for gradual rollout across platforms. When all platforms are ready, we can remove the ‘legacy’ support files. Search for@todo legacyProtectionsto locate usage. NOTE Also see activity_ and stats_ translation strings for legacy supportTesting Steps
Append the following query parameters to the Base URL to simulate…
?cpm=none?stats=none(sets trackers blocked to 0, hiding summary and details)?cpm=undefinedChecklist
Please tick all that apply:
Note
Adds cookie pop-up blocking stats to the Protections Report and per-site indicators in Activity, with legacy UI fallback, new components, schemas/types, and tests.
totalCookiePopUpsBlockedwith new heading layout, info tooltip, and temporaryNewBadgeIcon.ProtectionsHeadingLegacywhen CPM data isundefined.PrivacyStats.module.css.cookiePopUpBlockedand render status pills using newTickPill.ActivityItem(new) vsActivityItemLegacy+TrackerStatusLegacycontrolled byshouldDisplayLegacyActivity.cookiePopUpBlocked.TickPill,Tooltip,InfoIcon,NewBadgeIcon,Check,FireIcon(and usage swap in controls).cookiePopUpBlockedandtotalCookiePopUpsBlocked.activity.mdandprotections.mdpayload examples to include new fields.Written by Cursor Bugbot for commit 02438b3. This will update automatically on new commits. Configure here.