chore: Update Zen theme CSS to use CSS variables for element separation

src/browser/base/content/ZenStartup.mjs

@@ -27,6 +27,7 @@ var ZenStartup = {
     document.getElementById("zen-appcontent-navbar-container")
       .appendChild(document.getElementById("tab-notification-deck-template"));
 
+    gZenThemeMarketplace.init();
     gZenVerticalTabsManager.init();
     gZenCompactModeManager.init();
     gZenKeyboardShortcuts.init();

src/browser/base/content/zen-assets.inc.xhtml

@@ -27,6 +27,7 @@
 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", async () => {
   Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs");
+  Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemeMarketplace.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs");
   Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs");

src/browser/base/content/zen-assets.jar.inc.mn

@@ -9,6 +9,7 @@
         content/browser/zen-components/ZenProfileDialogUI.mjs   (content/zen-components/src/ZenProfileDialogUI.mjs)
         content/browser/zen-components/ZenKeyboardShortcuts.mjs (content/zen-components/src/ZenKeyboardShortcuts.mjs)
         content/browser/zen-components/ZenThemeBuilder.mjs      (content/zen-components/src/ZenThemeBuilder.mjs)
+        content/browser/zen-components/ZenThemeMarketplace.mjs  (content/zen-components/src/ZenThemeMarketplace.mjs)
 
         content/browser/zen-styles/zen-theme.css                (content/zen-styles/zen-theme.css)
         content/browser/zen-styles/zen-buttons.css              (content/zen-styles/zen-buttons.css)
@@ -36,3 +37,5 @@
 
         content/browser/zen-styles/zen-compact-mode.css         (content/zen-styles/zen-compact-mode.css)
 
+        # Other
+        content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (content/zen-components/src/actors/ZenThemeMarketplaceChild.sys.mjs)

src/toolkit/modules/ActorManagerParent-sys-mjs.patch

@@ -0,0 +1,24 @@
+diff --git a/toolkit/modules/ActorManagerParent.sys.mjs b/toolkit/modules/ActorManagerParent.sys.mjs
+index 71409e58271802fc506999712519df63eff3b1a6..72b51d849bcbf7f1c0a7418da545bbbfb2b55d15 100644
+--- a/toolkit/modules/ActorManagerParent.sys.mjs
++++ b/toolkit/modules/ActorManagerParent.sys.mjs
+@@ -666,6 +666,19 @@ if (!Services.prefs.getBoolPref("browser.pagedata.enabled", false)) {
+   };
+ }
+ 
++JSWINDOWACTORS.ZenThemeMarketplace = {
++  parent: {
++    esModuleURI: "chrome://browser/content/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs",
++  },
++  child: {
++    esModuleURI: "chrome://browser/content/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs",
++    events: {
++      DOMContentLoaded: {},
++    },
++  },
++  matches: ["https://*.zen-browser.app/*"],
++};
++
+ if (AppConstants.platform != "android") {
+   // Note that GeckoView has another implementation in mobile/android/actors.
+   JSWINDOWACTORS.Select = {