feat(whotracksme): WhoTracks.Me report page (WIP)

package.json

@@ -53,6 +53,7 @@
     "hybrids": "^9.1.15",
     "idb": "^8.0.2",
     "jwt-decode": "^4.0.0",
+    "plotly.js-basic-dist": "^3.0.1",
     "tldts-experimental": "^6.1.82"
   },
   "engineStrict": true,

scripts/build.js

@@ -32,6 +32,7 @@ const options = {
   srcDir: resolve(pwd, 'src'),
   outDir: resolve(pwd, 'dist'),
   assets: ['_locales', 'icons', 'static_pages'],
+  pages: ['logger', 'onboarding', 'whotracksme'],
 };
 
 // Generate arguments from command line
@@ -307,7 +308,7 @@ if (manifest.declarative_net_request?.rule_resources) {
 
 // --- Generate entry points ---
 
-const source = ['pages/onboarding/index.html', 'pages/logger/index.html'];
+const source = options.pages.map((page) => `pages/${page}/index.html`);
 const content_scripts = [];
 
 if (manifest.action?.default_popup) {

src/background/external.js

@@ -12,7 +12,6 @@
 import { store } from 'hybrids';
 
 import Session from '/store/session.js';
-import { MergedStats } from '/store/daily-stats.js';
 
 if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
   // Listen for messages from Ghostery Search extension
@@ -23,8 +22,6 @@ if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
     'search@ghostery.com', // Firefox
   ];
 
-  const GHOSTERY_NEW_TAB_EXTENSION_IDS = ['newtab@ghostery.com'];
-
   chrome.runtime.onMessageExternal.addListener(
     (message, sender, sendResponse) => {
       // Refresh session support for Ghostery Search extension
@@ -43,37 +40,6 @@ if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
         }
       }
 
-      // Send historical stats to Ghostery New Tab extension
-      if (GHOSTERY_NEW_TAB_EXTENSION_IDS.includes(sender.id)) {
-        switch (message?.name) {
-          case 'getDashboardStats': {
-            (async () => {
-              const stats = await store.resolve(MergedStats);
-
-              // Firefox does not serialize correctly objects with getters
-              sendResponse(JSON.parse(JSON.stringify(stats)));
-            })();
-
-            return true;
-          }
-          case 'getUser': {
-            (async () => {
-              const session = await store.resolve(Session);
-
-              // Firefox does not serialize correctly objects with getters
-              sendResponse(session.user && JSON.parse(JSON.stringify(session)));
-            })();
-
-            return true;
-          }
-          default:
-            console.error(
-              `[external] Unknown message type from "${sender.id}"`,
-              message,
-            );
-        }
-      }
-
       return false;
     },
   );

src/pages/panel/components/menu-item.js

@@ -16,7 +16,7 @@ import { openTabWithUrl } from '/utils/tabs.js';
 export default {
   href: '',
   icon: '',
-  suffixIcon: 'arrow-right',
+  suffixIcon: 'chevron-right',
   internal: false,
   render: ({ href, icon, suffixIcon, internal }) => html`
     <template layout="block">

src/pages/panel/components/pause.js

@@ -117,7 +117,7 @@ export default {
                     ${PAUSE_TYPES.find(({ value }) => value === pauseType)
                       .label}
                   </ui-text>
-                  <ui-icon name="arrow-down"></ui-icon>
+                  <ui-icon name="chevron-down"></ui-icon>
                 `}
           </div>
         </button>

src/pages/panel/views/main.js

@@ -139,7 +139,7 @@ export default {
                         >
                         ${!options.managed &&
                         html`<ui-icon
-                          name="arrow-down"
+                          name="chevron-down"
                           layout="size:1.5"
                           color="secondary"
                         ></ui-icon>`}
@@ -210,7 +210,7 @@ export default {
                         >
                           Report a broken page
                           <ui-icon
-                            name="arrow-right"
+                            name="chevron-right"
                             layout="size:1.5"
                           ></ui-icon>
                         </ui-text>

src/pages/settings/components/layout.js

@@ -154,12 +154,17 @@ export default {
         display: block;
         position: absolute;
         top: 0;
-        left: -80px;
+        left: -40px;
         bottom: 0;
-        width: 80px;
-        box-shadow: 0px 0px 80px var(--shadow-dialog);
+        width: 40px;
+        box-shadow: 0px 0px 60px var(--shadow-dialog);
         pointer-events: none;
       }
+
+      main ::slotted(*) {
+        position: relative;
+        z-index: 1;
+      }
     }
   `,
 };

src/pages/settings/components/trackers-list.js

@@ -32,7 +32,7 @@ export default {
           >
             <ui-icon
               id="arrow"
-              name="arrow-down"
+              name="chevron-down"
               layout="size:3"
               color="secondary"
             ></ui-icon>

src/pages/settings/components/wtm-link.js

@@ -16,7 +16,7 @@ export default {
     <template layout="row items:center gap:2 padding:1.5:2">
       <ui-icon name="wtm-logo" color=""></ui-icon>
       <ui-text type="label-m" layout="grow"><slot></slot></ui-text>
-      <ui-icon name="arrow-right" color="primary"></ui-icon>
+      <ui-icon name="chevron-right" color="primary"></ui-icon>
     </template>
   `.css`
     :host {

src/pages/settings/views/custom-filters.js

@@ -68,7 +68,7 @@ export default {
                     layout="row gap:0.5"
                   >
                     Learn more on supported syntax
-                    <ui-icon name="arrow-right-s"></ui-icon>
+                    <ui-icon name="chevron-right-s"></ui-icon>
                   </a>
                 </ui-text>
               </div>

src/pages/settings/views/privacy.js

@@ -210,7 +210,7 @@ export default {
                     >
                       Regional Filters
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -241,7 +241,7 @@ export default {
                     >
                       Search Engine Redirect Protection
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -272,7 +272,7 @@ export default {
                     >
                       Experimental Filters
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -306,7 +306,7 @@ export default {
                       >
                         Custom Filters
                         <ui-icon
-                          name="arrow-right"
+                          name="chevron-right"
                           color="inherit"
                           layout="size:2"
                         ></ui-icon

src/pages/settings/views/whotracksme.js

@@ -171,6 +171,24 @@ export default {
                 </div>
               </ui-toggle>
             `}
+
+            <ui-line></ui-line>
+            <div layout="row padding:left:15">
+              <ui-action>
+                <ui-text type="headline-xs">
+                  <a
+                    href="${chrome.runtime.getURL(
+                      '/pages/whotracksme/index.html',
+                    )}"
+                    target="_blank"
+                    layout="row items:center gap:0.5"
+                  >
+                    WhoTracks.Me Raport
+                    <ui-icon name="chevron-right" layout="size:2"></ui-icon>
+                  </a>
+                </ui-text>
+              </ui-action>
+            </div>
           </section>
         `}
       </settings-page-layout>

src/pages/whotracksme/components/button.js

@@ -0,0 +1,45 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html } from 'hybrids';
+
+export default {
+  active: { value: false, reflect: true },
+  render: () => html`
+    <template layout="contents">
+      <ui-button>
+        <button layout="column center gap:0"><slot></slot></button>
+      </ui-button>
+    </template>
+  `.css`
+    ui-button {
+      box-shadow: none;
+      border-radius: 0px;
+      height: 50px;
+      background: var(--background-secondary);
+      border-color: var(--border-primary);
+    }
+
+    :host(:first-child) ui-button {
+      border-radius: 8px 0 0 8px;
+      border-right: none;
+    }
+
+    :host(:last-child) ui-button {
+      border-radius: 0 8px 8px 0;
+      border-left: none;
+    }
+
+    :host([active]) ui-button {
+      background: var(--background-primary);
+    }
+  `,
+};