Update zen-components subproject commit

src/browser/base/content/zen-styles/zen-sidebar.css

@@ -205,6 +205,7 @@
 @media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
   #navigator-toolbox {
     width: 0;
+    padding-right: 2px;
   }
 
   #zen-sidebar-splitter {

src/browser/base/content/zenThemeModifier.js

@@ -80,6 +80,9 @@ var ZenThemeModifier = {
   },
 
   _updateZenAvatar() {
+    if (typeof ProfileService === "undefined") {
+      return;
+    }
     const mainWindowEl = document.documentElement;
     // Dont override the sync avatar if it's already set
     if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {

src/browser/components/preferences/zen-settings.js

@@ -15,11 +15,134 @@ const kZenColors = [
   "#d4bbff",
 ];
 
+var gZenMarketplaceManager = {  
+  init() {
+    this._buildThemesList();
+    Services.prefs.addObserver(this.updatePref, this._buildThemesList.bind(this));
+  },
+
+  get updatePref() {
+    return "zen.themes.updated-value-observer";
+  },
+
+  triggerThemeUpdate() {
+    Services.prefs.setBoolPref(this.updatePref, !Services.prefs.getBoolPref(this.updatePref));
+  },
+
+  get themesList() {
+    return document.getElementById("zenThemeMarketplaceList");
+  },
+
+  get themesDataFile() {
+    return PathUtils.join(
+      PathUtils.profileDir,
+      "zen-themes.json"
+    );
+  },
+
+  get themesRootPath() {
+    return PathUtils.join(
+      PathUtils.profileDir,
+      "chrome",
+      "zen-themes"
+    );
+  },
+
+  async removeTheme(themeId) {
+    const themePath = PathUtils.join(this.themesRootPath, themeId);
+    console.info("ZenThemeMarketplaceParent(settings): Removing theme ", themePath);
+    await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
+
+    let themes = await this._getThemes();
+    delete themes[themeId];
+    await IOUtils.writeJSON(this.themesDataFile, themes);
+
+    this.triggerThemeUpdate();
+  },
+
+  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 {};
+    }
+    return await IOUtils.readJSON(themePath);
+  },
+
+  async _buildThemesList() {
+    let themes = await this._getThemes();
+    this.themesList.innerHTML = "";
+    for (let theme of Object.values(themes)) {
+      const fragment = window.MozXULElement.parseXULToFragment(`
+        <hbox class="zenThemeMarketplaceItem">
+          <vbox class="zenThemeMarketplaceItemContent">
+            <label><h3 class="zenThemeMarketplaceItemTitle"></h3></label>
+            <description class="description-deemphasized zenThemeMarketplaceItemDescription"></description>
+          </vbox>
+          <button class="zenThemeMarketplaceItemUninstallButton" data-l10n-id="zen-theme-marketplace-remove-button" zen-theme-id="${theme.id}"></button>
+        </hbox>
+      `);
+      fragment.querySelector(".zenThemeMarketplaceItemTitle").textContent = theme.name;
+      fragment.querySelector(".zenThemeMarketplaceItemDescription").textContent = theme.description;
+      fragment.querySelector(".zenThemeMarketplaceItemUninstallButton").addEventListener("click", async (event) => {
+        const target = event.target;
+        const themeId = target.getAttribute("zen-theme-id");
+        await this.removeTheme(themeId);
+      });
+      this.themesList.appendChild(fragment);
+      const preferences = await this._getThemePreferences(theme);
+      if (Object.keys(preferences).length > 0) {
+        let preferencesWrapper = document.createXULElement("vbox");
+        preferencesWrapper.classList.add("indent");
+        preferencesWrapper.classList.add("zenThemeMarketplaceItemPreferences");
+        for (let [key, value] of Object.entries(preferences)) {
+          const fragment = window.MozXULElement.parseXULToFragment(`
+            <hbox class="zenThemeMarketplaceItemPreference">
+              <checkbox class="zenThemeMarketplaceItemPreferenceCheckbox" zen-pref="${key}"></checkbox>
+              <vbox class="zenThemeMarketplaceItemPreferenceData">
+                <label class="zenThemeMarketplaceItemPreferenceLabel">${key}</label>
+                <description class="description-deemphasized zenThemeMarketplaceItemPreferenceValue">${value}</description>
+              </vbox>
+            </hbox>
+          `);
+          // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
+          if (Services.prefs.getBoolPref(key, false)) {
+            fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").setAttribute("checked", "true");
+          }
+          fragment.querySelector(".zenThemeMarketplaceItemPreferenceCheckbox").addEventListener("click", (event) => {
+            let target = event.target;
+            let key = target.getAttribute("zen-pref");
+            let checked = target.hasAttribute("checked");
+            if (checked) {
+              target.removeAttribute("checked");
+            } else {
+              target.setAttribute("checked", "true");
+            }
+            Services.prefs.setBoolPref(key, !checked);
+          });
+          preferencesWrapper.appendChild(fragment);
+        }
+        this.themesList.appendChild(preferencesWrapper);
+      }
+    }
+  }
+};
+
 var gZenLooksAndFeel = {
   init() {
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
     gZenThemeBuilder.init();
+    gZenMarketplaceManager.init();
   },
 
   _initializeColorPicker(accentColor) {

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -34,6 +34,33 @@
       </vbox>
 </groupbox>
 
+<hbox id="zenThemeCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+<html:h1 data-l10n-id="pane-zen-theme-title"/>
+</hbox>
+
+<groupbox id="zenThemeGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-theme-marketplace-header"/></label>
+            <description class="description-deemphasized" data-l10n-id="zen-theme-marketplace-description" />
+      <hbox class="indent">
+            <html:a id="zenThemeMarketplaceLink" href="https://zen-browser.app/themes" target="_blank" data-l10n-id="zen-theme-marketplace-link" />
+      </hbox>
+
+      <vbox id="zenThemeMarketplaceList"></vbox>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
+
+      <checkbox id="zenLooksAndFeelPilledButtons"
+            data-l10n-id="zen-look-and-feel-pilled-buttons"
+            preference="zen.theme.pill-button"/>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
+</groupbox>
+
 <hbox id="zenSidePanelsCategory"
       class="subcategory"
       hidden="true"
@@ -74,23 +101,4 @@
             preference="zen.view.sidebar-expanded"/>
 </groupbox>
 
-<hbox id="zenThemeCategory"
-      class="subcategory"
-      hidden="true"
-      data-category="paneZenLooks">
-<html:h1 data-l10n-id="pane-zen-theme-title"/>
-</hbox>
-
-<groupbox id="zenThemeGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
-      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
-
-      <checkbox id="zenLooksAndFeelPilledButtons"
-            data-l10n-id="zen-look-and-feel-pilled-buttons"
-            preference="zen.theme.pill-button"/>
-
-      <label><html:h2 data-l10n-id="zen-look-and-feel-urlbar-header"/></label>
-      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-urlbar-description" />
-</groupbox>
-
 </html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -57,6 +57,12 @@ zen-vertical-tabs-show-expand-button =
 zen-vertical-tabs-expand-tabs-by-default = 
     .label = Expand Tabs by Default
 
+zen-theme-marketplace-header = Theme Marketplace
+zen-theme-marketplace-description = Find and install themes from the marketplace.
+zen-theme-marketplace-remove-button = 
+    .label = Remove Theme
+
+zen-theme-marketplace-link = Visit Marketplace
 
 pane-zen-CKS-title = Keyboard Shortcuts
 category-zen-CKS =

src/browser/themes/shared/preferences/zen-preferences.css

@@ -298,3 +298,33 @@ groupbox h2 {
   transform: translate(-50%, -50%);
 }
 
+
+/* THemes marketplace */
+
+.zenThemeMarketplaceItem {
+  width: 100%;
+
+  &:not(:first-of-type) {
+    margin-top: 15px;
+  }
+}
+
+.zenThemeMarketplaceItemPreferenceCheckbox {
+  margin-right: 10px;
+}
+
+.zenThemeMarketplaceItemPreference:not(:last-of-type) {
+  margin-bottom: 10px;
+}
+
+.zenThemeMarketplaceItemPreferenceData > * {
+  margin: 0;
+}
+
+#zenThemeMarketplaceList:has(> *) {
+  margin: 15px 0;
+}
+
+.zenThemeMarketplaceItemUninstallButton {
+  margin-left: auto;
+}