[MPP-1714] Popup Refactor - Stats Panel

[maxxcrawford]

Summary

Links:

• Jira Ticket: https://mozilla-hub.atlassian.net/browse/MPP-1715
• Blocked by #457
• L10N PR: https://github.com/mozilla-l10n/fx-private-relay-add-on-l10n/pull/44
• Epic PR #456

TODO:

• [x] Add web page specific stats, logic to compute
• [x] Add logic to handle if there are no webpage specific stats
• [x] Remove "Trackers Blocked" stats
• [x] Add logic to also grab custom masks if premium

Testing

Testing Note: I ran npm run config:prod to get access to sites with actual blocked/forwarded data to test.

1. Confirm global stats

   • Run add-on
   • Log in
   • Make note of global stats when logged in
   • Open popup, click Stats icon
   • Expected: Stats should match global totals from dashboard
   • If on website with known data, there should be a second dashboard with totals.

2. Confirm website stats

   • Run add-on
   • Log in
   • Make note of global stats when logged in
   • Go to any website with login (Imgur, Facebook, etc)
   • Use add-on to generate random mask
   • Open popup click Stats icon
   • (while active tab is the same site you created generate mask)
   • Expected: Stats should have TWO stat blocks. One for global, one for website where mask was created
   • If on website with known data, there should be a second dashboard with totals.

Screenshots

If site has no associated masks:

If site has associated masks:

[maxxcrawford]

@codemist Thanks for the review!