2010369 - Create privacy metrics card Lit component

Status: RESOLVED FIXED

(Firefox :: Protections UI, enhancement)

Description

[James Han]

Build a user-facing widget that displays tracking protection statistics:

• privacy-metrics-card Lit component following Firefox design system
• Display blocked count with breakdown by category
• "View Full Report" link to about:protections
• Localization strings (FTL) for all user-facing text
• Basic rendering tests
• Wire up to PrivacyMetricsService via actor messages

Comment 1

[James Han]

Attachment: Bug 2010369 - Add privacy-metrics-card Lit component to about:protections. r?emz

Adds a reusable privacy-metrics-card web component that displays weekly
tracking protection statistics. The component:

• Fetches stats via PrivacyMetrics JSWindowActor
• Shows total blocked count and top 3 categories with icons
• Handles loading, error, and private browsing states

Integrates the component into about:newtab with responsive positioning:

• Full card on large screens (>1600px)
• Shield icon button on smaller screens

Comment 2

[James Han]

Attachment: Component

Comment 3

[James Han]

Attachment: Bug 2010369 - Add privacy-metrics-card Lit component for newtab. r?emz

Adds a reusable privacy-metrics-card web component that displays weekly
tracking protection statistics. The component:

• Fetches stats directly via PrivacyMetrics JSWindowActor
• Shows total blocked count and top 3 categories with icons
• Handles loading and error states

Integrates the component into about:newtab with responsive positioning:

• Full card on large screens (>1600px)
• Shield icon button on smaller screens

Comment 4

[James Han]

Attachment: WIP: Bug 2010369 - Remove tracking cookies category from privacy metrics display.

Since tracking cookies are no longer actively blocked, remove the category
from the privacy metrics card display while TrackingDBService still records
those events for historical data.

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/24199d8ccf40
https://hg.mozilla.org/integration/autoland/rev/5912b9438e3b
Add privacy-metrics-card Lit component to about:protections. r=emz,fluent-reviewers,flod

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1f7620aefea2
https://hg.mozilla.org/integration/autoland/rev/388f7862a41f
Revert "Bug 2010369, Bug 2010368 - Add privacy-metrics-card Lit component to about:protections. r=emz,fluent-reviewers,flod" for causing linting failures on privacy-metrics-card.css.

Comment 7

[Iulian Moraru]

Revert for causing linting failures on privacy-metrics-card.css.
This is also causing bc failures like these: https://treeherder.mozilla.org/logviewer?job_id=553536646&repo=autoland&task=Gld_H9muSZSdgOcdNRGAHQ.0&lineNumber=2935

• Push with failures

• Failure log

• Backout link

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ad0e9c71c983
https://hg.mozilla.org/integration/autoland/rev/ad0f00f25d96
Add privacy-metrics-card Lit component to about:protections. r=emz,fluent-reviewers,desktop-theme-reviewers,flod,jules

Comment 9

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/ad0f00f25d96