ntp: privacy stats component

.eslintignore

@@ -9,6 +9,7 @@ script-overload-snapshots/
 packages/special-pages/playwright-report/
 packages/special-pages/test-results/
 packages/special-pages/types/
+packages/special-pages/messages/
 /playwright-report
 /test-results
 src/types

.gitignore

@@ -10,6 +10,7 @@ test-results/
 playwright-report/
 Sources/ContentScopeScripts/dist/
 test-results
+!Sources/ContentScopeScripts/dist/pages/.gitignore
 
 # Local Netlify folder
 .netlify

Sources/ContentScopeScripts/dist/pages/.gitignore

@@ -0,0 +1 @@
+*

integration-test/playwright/page-objects/duckplayer-overlays.js

@@ -450,7 +450,12 @@ export class DuckplayerOverlays {
     async duckPlayerLoadedTimes (times = 0) {
         /** @type {UnstableMockCall[]} */
         const calls = await this.page.evaluate(readOutgoingMessages)
-        const opened = calls.filter(call => call.payload.method === 'openDuckPlayer')
+        const opened = calls.filter(call => {
+            if ('method' in call.payload) {
+                return call.payload.method === 'openDuckPlayer'
+            }
+            return false
+        })
         expect(opened.length).toBe(times)
     }
 

packages/messaging/lib/messaging.types.d.ts

@@ -8,7 +8,10 @@ interface UnstableWebkit {
 }
 
 interface UnstableMockCall {
-  payload: import('../index.js').RequestMessage;
+  payload:
+    | import('../index.js').RequestMessage
+    | import('../index.js').NotificationMessage
+    | import('../index.js').Subscription;
   response?: Record<string, unknown>;
 }
 

packages/messaging/lib/test-utils.mjs

@@ -237,7 +237,12 @@ export function mockResponses(params) {
  */
 export function waitForCallCount(params) {
     const outgoing = window.__playwright_01.mocks.outgoing
-    const filtered = outgoing.filter(({ payload }) => params.method === payload.method)
+    const filtered = outgoing.filter(({ payload }) => {
+        if ('method' in payload) {
+            return params.method === payload.method;
+        }
+        return false
+    })
     return filtered.length >= params.count
 }
 

packages/special-pages/messages/new-tab/examples/stats.js

@@ -0,0 +1,21 @@
+/**
+ * @type {import("../../../types/new-tab").PrivacyStatsData}
+ */
+const privacyStatsData = {
+    "totalCount": 12345,
+    "trackerCompanies": [
+        { "displayName": "Tracker Co. A", "count": 1234 },
+        { "displayName": "Tracker Co. B", "count": 5678 },
+        { "displayName": "Tracker Co. C", "count": 91011 }
+    ]
+}
+
+/**
+ * @type {import("../../../types/new-tab").StatsConfig}
+ */
+const statsConfig = {
+    expansion: "expanded"
+}
+
+export {}
+

packages/special-pages/messages/new-tab/examples/widgets.js

@@ -0,0 +1,49 @@
+/**
+ * @type {import("../../../types/new-tab").Widgets}
+ */
+const widgets = [
+    { "id": "weatherWidget" },
+    { "id": "newsWidget" }
+]
+
+/**
+ * @type {import("../../../types/new-tab").WidgetListItem}
+ */
+const widget = { "id": "newsWidget" }
+
+/**
+ * @type {import("../../../types/new-tab").WidgetConfigs}
+ */
+const widgetConfigs = [
+    { "id": "weatherWidget", "visibility": "visible" },
+    { "id": "newsWidget", "visibility": "visible" }
+]
+
+/**
+ * @type {import("../../../types/new-tab").WidgetConfigItem}
+ */
+const widgetConfig = {
+    "id": "weatherWidget",
+    "visibility": "visible"
+}
+
+/**
+ * Widgets + WidgetConfigs when delivered in first payload...
+ *
+ * @type {import("../../../types/new-tab").InitialSetupResponse}
+ */
+const initialSetupResponse = {
+    widgets: [
+        { "id": "weatherWidget" },
+        { "id": "newsWidget" }
+    ],
+    widgetConfigs: [
+        { "id": "weatherWidget", "visibility": "visible" },
+        { "id": "newsWidget", "visibility": "visible" }
+    ],
+    env: 'production',
+    locale: 'en',
+    platform: {name: 'windows'}
+}
+
+export {}

packages/special-pages/messages/new-tab/initialSetup.response.json

@@ -1,13 +1,13 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
-  "required": ["widgets", "widgetConfig", "locale", "env", "platform"],
+  "required": ["widgets", "widgetConfigs", "locale", "env", "platform"],
   "properties": {
     "widgets": {
       "$ref": "./types/widget-list.json"
     },
-    "widgetConfig": {
-      "$ref": "./types/widget-config.json"
+    "widgetConfigs": {
+      "$ref": "types/widget-configs.json"
     },
     "locale": {
       "type": "string"
@@ -22,7 +22,7 @@
       "properties": {
         "name": {
           "type": "string",
-          "enum": ["macos", "windows", "android", "ios"]
+          "enum": ["macos", "windows", "android", "ios", "integration"]
         }
       }
     }

packages/special-pages/messages/new-tab/stats_getConfig.request.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/messages/new-tab/stats_getConfig.response.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/stats-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/stats_getData.request.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/special-pages/messages/new-tab/stats_getData.response.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/privacy-stats.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/stats_onConfigUpdate.subscribe.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/stats-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/stats_onDataUpdate.subscribe.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/privacy-stats.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/stats_setConfig.notify.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "./types/stats-config.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/types/expansion.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Expansion",
+  "type": "string",
+  "description": "Represents the expansion state of a widget",
+  "enum": ["expanded", "collapsed"]
+}

packages/special-pages/messages/new-tab/types/privacy-stats.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Privacy Stats Data",
+  "description": "",
+  "type": "object",
+  "required": [
+    "totalCount",
+    "trackerCompanies"
+  ],
+  "properties": {
+    "totalCount": {
+      "description": "Total number of trackers blocked since install",
+      "type": "number"
+    },
+    "trackerCompanies": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "title": "TrackerCompany",
+        "required": ["displayName", "count"],
+        "properties": {
+          "displayName": {
+            "type": "string"
+          },
+          "count": {
+            "type": "number"
+          }
+        }
+      }
+    }
+  }
+}

packages/special-pages/messages/new-tab/types/stats-config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "StatsConfig",
+  "type": "object",
+  "required": ["expansion"],
+  "properties": {
+    "expansion": {"$ref":  "./expansion.json"}
+  }
+}

packages/special-pages/messages/new-tab/types/widget-config.json → packages/special-pages/messages/new-tab/types/widget-configs.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "array",
-  "title": "Widget Config",
+  "title": "Widget Configs",
   "description": "Configuration settings for widgets",
   "items": {
     "type": "object",

packages/special-pages/messages/new-tab/types/widget-list.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "array",
-  "title": "Widget List",
+  "title": "Widgets",
   "description": "An ordered list of supported Widgets. Use this to communicate what's supported",
   "items": {
     "type": "object",

packages/special-pages/messages/new-tab/widgets_onConfigUpdated.subscribe.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/widget-configs.json"
+    }
+  ]
+}

packages/special-pages/messages/new-tab/widgets_setConfig.notify.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "$ref": "types/widget-configs.json"
+    }
+  ]
+}

packages/special-pages/pages/new-tab/app/components/App.js

@@ -1,11 +1,19 @@
 import { h } from 'preact'
 import styles from './App.module.css'
 import { usePlatformName } from '../settings.provider.js'
+import { WidgetList } from '../widget-list/WidgetList.js'
 
+/**
+ * Renders the App component.
+ *
+ * @param {Object} props - The properties of the component.
+ * @param {import("preact").ComponentChild} [props.children] - The child components to be rendered within the App component.
+ */
 export function App ({ children }) {
     const platformName = usePlatformName()
     return (
         <div className={styles.layout} data-platform={platformName}>
+            <WidgetList />
             {children}
         </div>
     )

packages/special-pages/pages/new-tab/app/components/Components.jsx

@@ -1,13 +1,35 @@
 import { Fragment, h } from "preact";
 import styles from "./Components.module.css";
+import { Body, Heading, PrivacyStatsConsumer } from "../privacy-stats/PrivacyStats.js";
+
+import { PrivacyStatsMockProvider } from "../privacy-stats/mocks/PrivacyStatsMockProvider.js";
+import { stats } from "../privacy-stats/mocks/stats.js";
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 const examples = {
-    'first': {
-        factory: () => <p>First</p>
+    'stats.few': {
+        factory: () => <PrivacyStatsMockProvider ticker={true}><PrivacyStatsConsumer /></PrivacyStatsMockProvider>
+    },
+    'stats.few.collapsed': {
+        factory: () => <PrivacyStatsMockProvider config={{expansion: "collapsed"}}><PrivacyStatsConsumer /></PrivacyStatsMockProvider>
+    },
+    'stats.single': {
+        factory: () => <PrivacyStatsMockProvider data={stats.single}><PrivacyStatsConsumer /></PrivacyStatsMockProvider>
+    },
+    'stats.none': {
+        factory: () => <PrivacyStatsMockProvider data={stats.none}><PrivacyStatsConsumer /></PrivacyStatsMockProvider>
+    },
+    'stats.norecent': {
+        factory: () => <PrivacyStatsMockProvider data={stats.norecent}><PrivacyStatsConsumer /></PrivacyStatsMockProvider>
+    },
+    'stats.list': {
+        factory: () => <Body trackerCompanies={stats.few.trackerCompanies} />
+    },
+    'stats.heading': {
+        factory: () => <Heading trackerCompanies={stats.few.trackerCompanies} totalCount={stats.few.totalCount} />
     },
-    'second': {
-        factory: () => <p>Second</p>
+    'stats.heading.none': {
+        factory: () => <Heading trackerCompanies={stats.none.trackerCompanies} totalCount={stats.none.totalCount} />
     },
 }
 

packages/special-pages/pages/new-tab/app/components/Components.module.css

@@ -14,7 +14,7 @@
 
     display: grid;
     grid-template-columns: auto;
-    grid-row-gap: 1rem;
+    grid-row-gap: 2rem;
 }
 
 .debugBar {