From e178b09a35d72a277608a5cad713090b57a1c669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bryan=20Gald=C3=A1mez?= <josuegalre@gmail.com>
Date: Thu, 12 Sep 2024 21:26:51 -0600
Subject: [PATCH 1/2] feature(zenThemesImporter): write saved preferences to
 dom on startup

---
 src/ZenThemesImporter.mjs | 49 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/ZenThemesImporter.mjs b/src/ZenThemesImporter.mjs
index 257e2b1..a5fbe63 100644
--- a/src/ZenThemesImporter.mjs
+++ b/src/ZenThemesImporter.mjs
@@ -36,8 +36,9 @@ var gZenThemeImporter = new (class {
   constructor() {
     console.info('ZenThemeImporter: Initiating Zen theme importer');
     try {
-      window.SessionStore.promiseInitialized.then(() => {
+      window.SessionStore.promiseInitialized.then(async () => {
         this.insertStylesheet();
+        await this.writeToDom();
       });
       console.info('ZenThemeImporter: Zen theme imported');
     } catch (e) {
@@ -108,9 +109,55 @@ var gZenThemeImporter = new (class {
   async updateStylesheet() {
     this.removeStylesheet();
     await this.writeStylesheet();
+    await this.writeToDom();
     this.insertStylesheet();
   }
 
+  _getBrowser() {
+    if (!this.__browser) {
+      this.__browser = Services.wm.getMostRecentWindow("navigator:browser")
+    }
+
+    return this.__browser
+  }
+
+  async _getThemePreferences(theme) {
+    const themePath = PathUtils.join(this.getThemeFolder(theme), 'preferences.json');
+
+    if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
+      return [];
+    }
+
+    return IOUtils.readJSON(themePath);
+  }
+
+  async writeToDom() {
+    const browser = this._getBrowser()
+
+    for (const theme of Object.values(await this.getThemes())) {
+      const themePreferences = (await this._getThemePreferences(theme)).filter(({ type }) => type === "dropdown")
+
+      for (const { property } of themePreferences) {
+        const value = Services.prefs.getStringPref(property, "")
+
+        if (value !== "") {
+          let element = browser.document.getElementById(theme.name)
+
+          if (!element) {
+            element = browser.document.createElement("div")
+
+            element.style.display = "none"
+            element.setAttribute("id", theme.name)
+
+            browser.document.body.appendChild(element)
+          }
+
+          element.setAttribute(property, value)
+        }
+      }
+    }
+  }
+
   async writeStylesheet() {
     const themes = [];
     this._themes = null;

From c5619a7dc93d5db06cdc20a83343c03e4289a0fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bryan=20Gald=C3=A1mez?= <josuegalre@gmail.com>
Date: Sat, 14 Sep 2024 03:07:44 -0600
Subject: [PATCH 2/2] feature(zenThemesImporter): add compatibility mode with
 legacy preferences

---
 src/ZenThemesImporter.mjs | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/ZenThemesImporter.mjs b/src/ZenThemesImporter.mjs
index a5fbe63..7b1d957 100644
--- a/src/ZenThemesImporter.mjs
+++ b/src/ZenThemesImporter.mjs
@@ -125,17 +125,30 @@ var gZenThemeImporter = new (class {
     const themePath = PathUtils.join(this.getThemeFolder(theme), 'preferences.json');
 
     if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
-      return [];
+      return { preferences: [], isLegacyMode: false };
     }
 
-    return IOUtils.readJSON(themePath);
+    let preferences = await IOUtils.readJSON(themePath);
+
+    // skip transformation, we won't be writing old preferences to dom, all of them can only be checkboxes
+    if (typeof preferences === "object" && !Array.isArray(preferences)) {
+      return { preferences: [], areOldPreferences: true };
+    }
+
+    return { preferences, areOldPreferences: false };
   }
 
   async writeToDom() {
     const browser = this._getBrowser()
 
     for (const theme of Object.values(await this.getThemes())) {
-      const themePreferences = (await this._getThemePreferences(theme)).filter(({ type }) => type === "dropdown")
+      const { preferences, areOldPreferences } = await this._getThemePreferences(theme);
+
+      if (areOldPreferences) {
+        continue;
+      }
+
+      const themePreferences = preferences.filter(({ type }) => type === "dropdown")
 
       for (const { property } of themePreferences) {
         const value = Services.prefs.getStringPref(property, "")