Simplify a lot of code

apps/actors/lib/LinkHandlerParent.sys.mjs

@@ -8,14 +8,15 @@
 export class LinkHandlerParent extends JSWindowActorParent {
   /** @param {{ name: 'Link:SetIcon'; data: { iconURL: string } }} aMsg */
   receiveMessage(aMsg) {
+    /** @type {Window} */
     const win = this.browsingContext.topChromeWindow
 
     switch (aMsg.name) {
       case 'Link:SetIcon':
-        return win.windowApi.tabs.setIcon(
-          this.browsingContext.embedderElement,
-          aMsg.data.iconURL,
-        )
+        return win.eventBus.emit('iconUpdate', {
+          browserId: this.browsingContext.embedderElement.browserId,
+          iconUrl: aMsg.data.iconURL,
+        })
     }
   }
 }

apps/actors/lib/ThemeMetaChild.sys.mjs

@@ -0,0 +1,92 @@
+/* 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/. */
+
+// @ts-check
+/// <reference types="@browser/link" />
+
+/**
+ * @typedef {object} CurrentPageColors
+ * @property {string} [meta]
+ * @property {string} [body]
+ */
+
+export class ThemeMetaChild extends JSWindowActorChild {
+  /** @type {CurrentPageColors} */
+  currentColorOptions = {}
+
+  /**
+   * @param {DOMMetaAddedEvent|DOMMetaChangedEvent} event
+   */
+  handleMetaEvent(event) {
+    const { target } = event
+
+    if (target.name === 'theme-color') {
+      this.currentColorOptions.meta =
+        target.getAttribute('content') || undefined
+
+      this.sendUpdatedThemeColors()
+    }
+  }
+
+  /**
+   * @param {PageShowEvent} event
+   */
+  handlePageLoad(event) {
+    const document = event.target
+    this.currentColorOptions.body =
+      this.getHeaderColor(document.body, document.body) || undefined
+
+    this.sendUpdatedThemeColors()
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {HTMLElement} body
+   * @returns {string | null}
+   */
+  getHeaderColor(element, body) {
+    if (!element.getBoundingClientRect) {
+      return null
+    }
+
+    if (element != body && element.getBoundingClientRect().y != 0) {
+      return null
+    }
+
+    let elementColor = null
+
+    if (element.firstChild) {
+      elementColor = this.getHeaderColor(element.firstChild, body)
+    }
+
+    if (!elementColor) {
+      elementColor = this.contentWindow.getComputedStyle(element).background
+      if (
+        elementColor.toLowerCase() == 'none' ||
+        elementColor.toLowerCase() == 'transperent'
+      ) {
+        return null
+      }
+    }
+
+    return elementColor
+  }
+
+  sendUpdatedThemeColors() {
+    this.sendAsyncMessage('Theme:ColorsUpdated', this.currentColorOptions)
+  }
+
+  /**
+   * @param {PageShowEvent | DOMMetaAddedEvent | DOMMetaChangedEvent} event
+   */
+  handleEvent(event) {
+    switch (event.type) {
+      case 'DOMMetaAdded':
+      case 'DOMMetaChanged':
+        return this.handleMetaEvent(event)
+      case 'pageshow':
+        return this.handlePageLoad(event)
+    }
+  }
+}

apps/actors/lib/ThemeMetaParent.sys.mjs

@@ -0,0 +1,20 @@
+/* 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/. */
+
+// @ts-check
+/// <reference types="@browser/link" />
+
+export class ThemeMetaParent extends JSWindowActorParent {
+  receiveMessage(aMsg) {
+    /** @type {Window} */
+    const win = this.browsingContext.topChromeWindow
+
+    if (aMsg.name === 'Theme:ColorsUpdated') {
+      win.eventBus.emit('themeUpdate', {
+        ...aMsg.data,
+        browserId: this.browsingContext.embedderElement.browserId,
+      })
+    }
+  }
+}

apps/content/package.json

@@ -12,17 +12,17 @@
   "license": "ISC",
   "devDependencies": {
     "@browser/link": "workspace:*",
-    "@melt-ui/pp": "^0.3.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@tsconfig/svelte": "^5.0.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "gecko-types": "github:quark-platform/gecko-types",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.7.6",
     "postcss-loader": "^7.3.4",
     "style-loader": "^3.3.3",
-    "svelte": "^4.2.8",
-    "svelte-loader": "^3.1.9",
+    "svelte": "^4.2.12",
+    "svelte-loader": "^3.2.0",
     "svelte-preprocess": "^5.1.3",
     "svelte-sequential-preprocessor": "^2.0.1",
     "ts-loader": "^9.5.1",
@@ -33,14 +33,15 @@
     "webpack-license-plugin": "^4.4.2"
   },
   "dependencies": {
+    "@amadeus-it-group/tansu": "^1.0.0",
     "@catppuccin/palette": "^1.0.1",
-    "@experiment/shared": "workspace:*",
-    "@melt-ui/svelte": "^0.67.0",
+    "colorjs.io": "^0.5.0",
     "fnts": "^2.1.0",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.4",
     "remixicon": "^4.0.1",
     "snarkdown": "^2.0.0",
+    "svelte-remixicon": "^2.4.0",
     "zora": "^5.2.0"
   }
 }