fix: move packages/ui into the main source (#1897)

.github/workflows/test.yml

@@ -21,10 +21,6 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: UI
-        run: npm test
-        working-directory: packages/ui
-
       - name: Source
         working-directory: extension-manifest-v3
         run: npm test

extension-manifest-v3/package.json

@@ -40,7 +40,6 @@
     "@cliqz/adblocker-webextension": "^1.33.2",
     "@cliqz/adblocker-webextension-cosmetics": "^1.33.2",
     "@duckduckgo/autoconsent": "^10.15.0",
-    "@ghostery/ui": "^1.0.0",
     "@github/relative-time-element": "^4.3.0",
     "@sentry/browser": "^8.26.0",
     "@whotracksme/reporting": "^5.1.25",

extension-manifest-v3/src/background/stats.js

@@ -11,8 +11,8 @@
 
 import { store } from 'hybrids';
 
-import { getOffscreenImageData } from '@ghostery/ui/wheel';
-import { order } from '@ghostery/ui/categories';
+import { getOffscreenImageData } from '/ui/wheel.js';
+import { order } from '/ui/categories.js';
 
 import DailyStats from '/store/daily-stats.js';
 import Options, { isPaused, observe } from '/store/options.js';

extension-manifest-v3/src/content_scripts/trackers-preview.js

@@ -9,7 +9,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { drawWheel } from '@ghostery/ui/wheel';
+import { drawWheel } from '/ui/wheel.js';
 
 const WRAPPER_CLASS = 'wtm-popup-iframe-wrapper';
 

extension-manifest-v3/src/pages/notifications/opera-serp.js

@@ -11,11 +11,9 @@
 
 import { mount, html, store } from 'hybrids';
 
-import '@ghostery/ui/onboarding';
+import '/ui/index.js';
 
 import * as notifications from '/utils/notifications.js';
-import { openTabWithUrl } from '/utils/tabs.js';
-
 import Options from '/store/options.js';
 
 const close = notifications.setupNotificationPage(360);
@@ -31,33 +29,58 @@ async function updateOptions() {
   });
 }
 
-async function enable(host, event) {
+async function enable() {
   try {
-    openTabWithUrl(host, event);
-    await updateOptions();
+    await chrome.runtime.sendMessage({
+      action: 'openTabWithUrl',
+      url: 'https://www.ghostery.com/blog/block-search-engine-ads-on-opera-guide?utm_source=gbe&utm_campaign=opera_serp',
+    });
 
+    await updateOptions();
+  } finally {
     close();
-  } catch (e) {
-    document.body.outerHTML = '';
   }
 }
 
 async function ignore() {
   try {
     await updateOptions();
-
+  } finally {
     close();
-  } catch (e) {
-    document.body.outerHTML = '';
   }
 }
 
 mount(document.body, {
   render: () => html`
-    <ui-onboarding-serp
-      onenable="${enable}"
-      onignore="${ignore}"
-      href="https://www.ghostery.com/blog/block-search-engine-ads-on-opera-guide?utm_source=gbe&utm_campaign=opera_serp"
-    ></ui-onboarding-serp>
+    <template layout="block overflow">
+      <ui-card layout="padding:2">
+        <div layout="row items:start gap:2">
+          <div layout="relative">
+            <ui-icon name="ghosty" color="gray-300" layout="size:4"></ui-icon>
+            <ui-icon
+              name="alert"
+              color="danger-500"
+              layout="absolute bottom:-1 right:-1"
+            ></ui-icon>
+          </div>
+          <div layout="column gap:1.5">
+            <ui-text type="label-l" layout="margin:bottom:-1">
+              More ad blocking available
+            </ui-text>
+            <ui-text type="body-s" color="gray-600">
+              Expand Ghostery ad blocking to search engines in a few easy steps.
+            </ui-text>
+            <div layout="row:wrap gap">
+              <ui-button type="success">
+                <button onclick="${enable}">Enable now</button>
+              </ui-button>
+              <ui-button type="transparent">
+                <button onclick="${ignore}">Ignore</button>
+              </ui-button>
+            </div>
+          </div>
+        </div>
+      </ui-card>
+    </template>
   `,
 });

extension-manifest-v3/src/pages/notifications/youtube.js

@@ -10,7 +10,8 @@
  */
 
 import { mount, html } from 'hybrids';
-import '@ghostery/ui/onboarding';
+
+import '/ui/index.js';
 
 import * as notifications from '/utils/notifications.js';
 
@@ -41,19 +42,19 @@ function openPrivateWindow() {
 mount(document.body, {
   render: () => html`
     <template layout="block overflow">
-      <ui-onboarding-card layout="padding:2">
+      <ui-card layout="padding:2">
         <div layout="row items:start gap:2">
           <div layout="relative">
             <ui-icon name="ghosty" color="gray-300" layout="size:4"></ui-icon>
             <ui-icon
               name="alert"
-              color="error-500"
+              color="danger-500"
               layout="absolute bottom:-1 right:-1"
             ></ui-icon>
           </div>
           <div layout="column gap:1.5">
             <div layout="margin:bottom:-1 row">
-              <ui-text type="label-xl">
+              <ui-text type="label-l">
                 YouTube blocking you from watching ad-free videos?
               </ui-text>
               <ui-action>
@@ -72,19 +73,19 @@ mount(document.body, {
                 </button>
               </ui-action>
             </div>
-            <ui-text type="body-m">
+            <ui-text type="body-s">
               We know you rely on Ghostery for a smooth YouTube experience.
               Until a more refined solution emerges, here’s a temporary fix.
             </ui-text>
             <div layout="column gap">
               <div layout="row gap:0.5">
-                <ui-text type="label-s" translate="no">1.</ui-text>
-                <ui-text type="label-s">
-                  Allow Ghostery in private windows
+                <ui-text type="label-m">
+                  <span translate="no">1.</span> Allow Ghostery in private
+                  windows
                 </ui-text>
               </div>
               <div layout="row">
-                <ui-button type="outline" size="small">
+                <ui-button>
                   <button
                     onclick="${() =>
                       openBlog('enable-extensions-in-incognito')}"
@@ -96,41 +97,39 @@ mount(document.body, {
             </div>
             <div layout="column gap">
               <div layout="row gap:0.5">
-                <ui-text type="label-s" translate="no">2.</ui-text>
-                <ui-text type="label-s">
-                  Open YouTube in a private window
+                <ui-text type="label-m">
+                  <span translate="no">2.</span> Open YouTube in a private
+                  window
                 </ui-text>
               </div>
               <div layout="row">
-                <ui-button type="success" size="small">
+                <ui-button type="success">
                   <button onclick="${openPrivateWindow}">Open video</button>
                 </ui-button>
               </div>
             </div>
             <ui-line></ui-line>
-            <div layout="column gap:1">
-              <ui-text type="body-m">
+            <div layout="column gap:2">
+              <ui-text type="body-s">
                 Learn more about YouTube’s challenges to ad blockers
               </ui-text>
               <div layout="row:wrap gap">
-                <ui-button type="outline" size="small">
+                <ui-button>
                   <button
                     onclick="${() =>
                       openBlog('whats-happening-with-youtube-ads')}"
                   >
                     Visit our blog
                   </button>
                 </ui-button>
-                <ui-button type="transparent" size="small">
-                  <button onclick="${dontAsk}">
-                    <ui-text>Don't ask again</ui-text>
-                  </button>
+                <ui-button type="transparent">
+                  <button onclick="${dontAsk}">Don't ask again</button>
                 </ui-button>
               </div>
             </div>
           </div>
         </div>
-      </ui-onboarding-card>
+      </ui-card>
     </template>
   `,
 });

packages/ui/src/modules/onboarding/components/feature.js → extension-manifest-v3/src/pages/onboarding/components/feature.js

@@ -16,13 +16,13 @@ export default {
   render: ({ icon }) => html`
     <template layout="column items:center gap padding:2:0.5">
       <ui-icon name="${icon}" layout="size:4" color="primary-500"></ui-icon>
-      <ui-text type="label-xs" layout="block:center" color="gray-600">
+      <ui-text type="label-xs" layout="block:center">
         <slot></slot>
       </ui-text>
     </template>
   `.css`
     :host {
-      background: var(--ui-color-primary-100);
+      background: var(--ui-color-gray-100);
       border-radius: 16px;
     }
   `,

packages/ui/src/modules/onboarding/components/layout.js → extension-manifest-v3/src/pages/onboarding/components/layout.js

@@ -32,10 +32,6 @@ export default {
       </div>
     </template>
   `.css`
-    @media (prefers-color-scheme: dark) {
-      #bg { display: none }
-    }
-
     #bg { transform: translateX(-50%); }
 
     #c-1 {
@@ -51,5 +47,13 @@ export default {
     header {
       color: var(--ui-color-primary-500);
     }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        background: var(--ui-color-gray-100);
+      }
+
+      #bg { display: none; }
+    }
    `,
 };

extension-manifest-v3/src/pages/onboarding/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width" />
     <title>Welcome to Ghostery</title>
     <script src="./index.js" type="module" async></script>
-    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body></body>
 </html>

extension-manifest-v3/src/pages/onboarding/index.js

@@ -9,30 +9,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { mount, html, store } from 'hybrids';
-import '@ghostery/ui/onboarding';
+import { define, mount, html, store, router } from 'hybrids';
+
+import '/ui/index.js';
 
 import Options from '/store/options.js';
 import { getBrowserId } from '/utils/browser-info.js';
 
-async function updateOptions(host, event) {
-  const success = event.type === 'success';
-
-  await store.set(Options, {
-    terms: success,
-    onboarding: { done: true },
-  });
-}
+import Main from './views/main.js';
+import Success from './views/success.js';
 
-mount(document.body, {
-  render: () => html`
-    <ui-onboarding
-      platform="${getBrowserId()}"
-      onsuccess="${updateOptions}"
-      onskip="${updateOptions}"
-    ></ui-onboarding>
-  `,
-});
+// Components
+define.from(
+  import.meta.glob('./components/*.js', { eager: true, import: 'default' }),
+  { prefix: 'onboarding', root: 'components' },
+);
 
 store.resolve(Options).then(({ installDate, onboarding }) => {
   store.set(Options, {
@@ -43,3 +34,25 @@ store.resolve(Options).then(({ installDate, onboarding }) => {
     installDate,
   });
 });
+
+function updateOptions(host, event) {
+  store.set(Options, {
+    terms: event.detail.entry.id === Success.tag,
+    onboarding: { done: true },
+  });
+}
+
+mount(document.body, {
+  platform: getBrowserId,
+  stack: router([Main, Success], { params: ['platform'] }),
+  render: {
+    value: ({ stack }) => html`
+      <template layout="grid height::100%">
+        <onboarding-layout>${stack}</onboarding-layout>
+      </template>
+    `,
+    connect: (host) => {
+      host.addEventListener('navigate', updateOptions.bind(null, host));
+    },
+  },
+});