Merge branch 'main' of https://github.com/zen-browser/components

src/ZenThemesCommon.mjs

@@ -0,0 +1,97 @@
+var ZenThemesCommon = {
+  kZenOSToSmallName: {
+    WINNT: 'windows',
+    Darwin: 'macos',
+    Linux: 'linux',
+  },
+
+  kZenColors: ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', '#dec1b1', '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff'],
+
+  get currentOperatingSystem() {
+    let os = Services.appinfo.OS;
+    return this.kZenOSToSmallName[os];
+  },
+
+  get themesRootPath() {
+    return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
+  },
+
+  get themesDataFile() {
+    return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
+  },
+
+  getThemeFolder(themeId) {
+    return PathUtils.join(this.themesRootPath, themeId);
+  },
+
+  getBrowser() {
+    if (!this.__browser) {
+      this.__browser = Services.wm.getMostRecentWindow('navigator:browser');
+    }
+
+    return this.__browser;
+  },
+
+  async getThemes() {
+    if (!this._themes) {
+      if (!(await IOUtils.exists(this.themesDataFile))) {
+        await IOUtils.writeJSON(this.themesDataFile, {});
+      }
+      this._themes = await IOUtils.readJSON(this.themesDataFile);
+    }
+    return this._themes;
+  },
+
+  async getThemePreferences(theme) {
+    const themePath = PathUtils.join(this.themesRootPath, theme.id, 'preferences.json');
+    if (!(await IOUtils.exists(themePath)) || !theme.preferences) {
+      return [];
+    }
+
+    const preferences = await IOUtils.readJSON(themePath);
+
+    // compat mode for old preferences, all of them can only be checkboxes
+    if (typeof preferences === 'object' && !Array.isArray(preferences)) {
+      console.warn(
+        `[ZenThemes]: Warning, ${theme.name} uses legacy preferences, please migrate them to the new preferences style, as legacy preferences might be removed at a future release. More information at: https://docs.zen-browser.app/themes-store/themes-marketplace-preferences`
+      );
+      const newThemePreferences = [];
+
+      for (let [entry, label] of Object.entries(preferences)) {
+        const [_, negation = '', os = '', property] = /(!?)(?:(macos|windows|linux):)?([A-z0-9-_.]+)/g.exec(entry);
+        const isNegation = negation === '!';
+
+        if (
+          (isNegation && os === this.currentOperatingSystem) ||
+          (os !== '' && os !== this.currentOperatingSystem && !isNegation)
+        ) {
+          continue;
+        }
+
+        newThemePreferences.push({
+          property,
+          label,
+          type: 'checkbox',
+          disabledOn: os !== '' ? [os] : [],
+        });
+      }
+
+      return newThemePreferences;
+    }
+
+    return preferences.filter(({ disabledOn = [] }) => !disabledOn.includes(this.currentOperatingSystem));
+  },
+
+  throttle(mainFunction, delay) {
+    let timerFlag = null;
+
+    return (...args) => {
+      if (timerFlag === null) {
+        mainFunction(...args);
+        timerFlag = setTimeout(() => {
+          timerFlag = null;
+        }, delay);
+      }
+    };
+  },
+};

src/ZenThemesImporter.mjs

@@ -8,11 +8,12 @@ const kZenStylesheetThemeHeader = `
 const kenStylesheetFooter = `
 /* End of Zen Themes */
 `;
+
 var gZenStylesheetManager = {
   async writeStylesheet(path, themes) {
     let content = kZenStylesheetThemeHeader;
     for (let theme of themes) {
-      if (!theme.enabled) {
+      if (theme.enabled !== undefined && !theme.enabled) {
         continue;
       }
       content += this.getThemeCSS(theme);
@@ -41,7 +42,20 @@ var gZenThemeImporter = new (class {
     try {
       window.SessionStore.promiseInitialized.then(async () => {
         this.insertStylesheet();
-        await this.writeToDom();
+
+        const themesWithPreferences = await Promise.all(
+          Object.values(await ZenThemesCommon.getThemes()).map(async (theme) => {
+            const preferences = await ZenThemesCommon.getThemePreferences(theme);
+
+            return {
+              name: theme.name,
+              enabled: theme.enabled,
+              preferences,
+            };
+          })
+        );
+
+        this.writeToDom(themesWithPreferences);
       });
       console.info('ZenThemeImporter: Zen theme imported');
     } catch (e) {
@@ -61,28 +75,6 @@ var gZenThemeImporter = new (class {
     return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes.css');
   }
 
-  get themesRootPath() {
-    return PathUtils.join(PathUtils.profileDir, 'chrome', 'zen-themes');
-  }
-
-  get themesDataFile() {
-    return PathUtils.join(PathUtils.profileDir, 'zen-themes.json');
-  }
-
-  getThemeFolder(theme) {
-    return PathUtils.join(this.themesRootPath, theme.id);
-  }
-
-  async getThemes() {
-    if (!this._themes) {
-      if (!(await IOUtils.exists(this.themesDataFile))) {
-        await IOUtils.writeJSON(this.themesDataFile, {});
-      }
-      this._themes = await IOUtils.readJSON(this.themesDataFile);
-    }
-    return this._themes;
-  }
-
   async rebuildThemeStylesheet() {
     this._themes = null;
     await this.updateStylesheet();
@@ -96,7 +88,7 @@ var gZenThemeImporter = new (class {
   }
 
   getStylesheetURIForTheme(theme) {
-    return Services.io.newFileURI(new FileUtils.File(PathUtils.join(this.getThemeFolder(theme), 'chrome.css')));
+    return Services.io.newFileURI(new FileUtils.File(PathUtils.join(ZenThemesCommon.getThemeFolder(theme.id), 'chrome.css')));
   }
 
   async insertStylesheet() {
@@ -111,57 +103,84 @@ var gZenThemeImporter = new (class {
 
   async updateStylesheet() {
     await this.removeStylesheet();
-    await this.writeStylesheet();
-    await this.writeToDom();
+
+    const themes = Object.values(await ZenThemesCommon.getThemes());
+    await this.writeStylesheet(themes);
+
+    const themesWithPreferences = await Promise.all(
+      themes.map(async (theme) => {
+        const preferences = await ZenThemesCommon.getThemePreferences(theme);
+
+        return {
+          name: theme.name,
+          enabled: theme.enabled,
+          preferences,
+        };
+      })
+    );
+
+    this.setDefaults(themesWithPreferences);
+    this.writeToDom(themesWithPreferences);
+
     await 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 { preferences: [], isLegacyMode: false };
-    }
-
-    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 { preferences, areOldPreferences } = await this._getThemePreferences(theme);
-
-      if (areOldPreferences) {
+  setDefaults(themesWithPreferences) {
+    for (const { preferences, enabled } of themesWithPreferences) {
+      if (enabled !== undefined && !enabled) {
         continue;
       }
 
-      const filteredPreferences = preferences.filter(({ type }) => type !== 'checkbox');
-      const sanitizedName = `theme-${theme.name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
+      for (const { type, property, defaultValue } of preferences) {
+        if (defaultValue === undefined) {
+          continue;
+        }
 
-      if (!theme.enabled) {
+        switch (type) {
+          case 'checkbox': {
+            const value = Services.prefs.getBoolPref(property, false);
+            if (typeof defaultValue !== 'boolean') {
+              console.log(`[ZenThemesImporter]: Warning, invalid data type received for expected type boolean, skipping.`);
+              continue;
+            }
+
+            if (!value) {
+              Services.prefs.setBoolPref(property, defaultValue);
+            }
+            break;
+          }
+
+          default: {
+            const value = Services.prefs.getStringPref(property, 'zen-property-no-saved');
+
+            if (typeof defaultValue !== 'string' && typeof defaultValue !== 'number') {
+              console.log(`[ZenThemesImporter]: Warning, invalid data type received (${typeof defaultValue}), skipping.`);
+              continue;
+            }
+
+            if (value === 'zen-property-no-saved') {
+              Services.prefs.setStringPref(property, defaultValue.toString());
+            }
+          }
+        }
+      }
+    }
+  }
+
+  writeToDom(themesWithPreferences) {
+    const browser = ZenThemesCommon.getBrowser();
+
+    for (const { enabled, preferences, name } of themesWithPreferences) {
+      const sanitizedName = `theme-${name?.replaceAll(/\s/g, '-')?.replaceAll(/[^A-z_-]+/g, '')}`;
+
+      if (enabled !== undefined && !enabled) {
         const element = browser.document.getElementById(sanitizedName);
 
         if (element) {
           element.remove();
         }
 
-        for (const { property } of filteredPreferences) {
+        for (const { property } of preferences.filter(({ type }) => type !== 'checkbox')) {
           const sanitizedProperty = property?.replaceAll(/\./g, '-');
 
           if (document.querySelector(':root').style.hasProperty(`--${sanitizedProperty}`)) {
@@ -211,13 +230,15 @@ var gZenThemeImporter = new (class {
     }
   }
 
-  async writeStylesheet() {
+  async writeStylesheet(themeList) {
     const themes = [];
     this._themes = null;
-    for (let theme of Object.values(await this.getThemes())) {
+
+    for (let theme of themeList) {
       theme._chromeURL = this.getStylesheetURIForTheme(theme).spec;
       themes.push(theme);
     }
+
     await gZenStylesheetManager.writeStylesheet(this.styleSheetPath, themes);
   }
 })();