2027870 - Update Privacy Metrics Widget Styling to Nova Design

Status: NEW

(Core :: Preferences: Backend, task, P2)

Description

[James Han]

The privacy metrics widget (Bug 2010369) currently lives on about:protections. To surface tracker-blocking stats where users actually see them, we move the widget to the new tab page and update the visual design to match the Nova spec.

Figma: https://www.figma.com/design/i8wWurQ8yn9y5hCjnf8BYu/HNT---Nova?node-id=5151-14116&p=f&t=0E7sOVBdqKBDiCvO-0

The widget should be configurable via prefs so product can test different insight messages and mascot variants without code changes. Integration uses the External Component Registry (same pattern as the search handoff bar) since this is the supported path for non-React components on the new tab.

Comment 1

[James Han]

Attachment: Bug 2027870 - Add Privacy Metrics Widget with Nova design and new tab integration

Implements a configurable tracker-blocking stats widget showing daily
protection counts with pref-driven insight messages and mascot variants.
The card is a pure prop-based Lit component rendered on both about:protections
(demo grid) and the new tab page (via External Component Registry).

Display logic lives in PrivacyMetricsService.getDisplayState() which
combines TrackingDBService data with insight/mascot prefs. A Redux feed
dispatches the state to the new tab, and ExternalComponentWrapper mounts
the web component with props flowing down.

Includes xpcshell tests for all display state branches and browser tests
for all card rendering variants.

Comment 2

[James Han]

Attachment: Bug 2027870 - Remove internal docs and demo script from tree

Comment 3

[James Han]

Attachment: WIP: Bug 2027870 - Add Privacy Metrics Widget with Nova design and new tab integration