Fixed theme preferences page not updating

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

@@ -23,16 +23,20 @@ const kZenOSToSmallName = {
 
 var gZenMarketplaceManager = {  
   init() {
-    Services.prefs.addObserver(this.updatePref, this._buildThemesList.bind(this));
+    const checkForUpdates = document.getElementById("zenThemeMarketplaceCheckForUpdates");
+    if (!checkForUpdates) return; // We havent entered the settings page yet.
+    if (this.__hasInitializedEvents) return;
     this._buildThemesList();
-    document.getElementById("zenThemeMarketplaceCheckForUpdates").addEventListener("click", (event) => {
+    this.__hasInitializedEvents = true;
-      if (event.target === document.getElementById("zenThemeMarketplaceCheckForUpdates")) {
+    Services.prefs.addObserver(this.updatePref, this);
+    checkForUpdates.addEventListener("click", (event) => {
+      if (event.target === checkForUpdates) {
         event.preventDefault();
         this._checkForThemeUpdates(event);
       }
     });
     document.addEventListener("ZenThemeMarketplace:CheckForUpdatesFinished", (event) => {
-      document.getElementById("zenThemeMarketplaceCheckForUpdates").disabled = false;
+      checkForUpdates.disabled = false;
       const updates = event.detail.updates;
       const success = document.getElementById("zenThemeMarketplaceUpdatesSuccess");
       const error = document.getElementById("zenThemeMarketplaceUpdatesFailure");
@@ -44,6 +48,16 @@ var gZenMarketplaceManager = {
         error.hidden = false;
       }
     });
+    window.addEventListener("unload", this.uninit.bind(this));
+  },
+
+  uninit() {
+    Services.prefs.removeObserver(this.updatePref, this);
+  },
+
+  async observe() {
+    this._themes = null;
+    await this._buildThemesList();
   },
 
   _checkForThemeUpdates(event) {
@@ -144,8 +158,8 @@ var gZenMarketplaceManager = {
   },
 
   async _buildThemesList() {
-    if (this.__alreadyBuilding) return;
+    if (!this.themesList) return;
-    this.__alreadyBuilding = true;
+    console.log("ZenThemeMarketplaceParent(settings): Building themes list");
     let themes = await this._getThemes();
     this.themesList.innerHTML = "";
     for (let theme of Object.values(themes)) {
@@ -204,7 +218,6 @@ var gZenMarketplaceManager = {
         this.themesList.appendChild(preferencesWrapper);
       }
     }
-    this.__alreadyBuilding = false;
   }
 };
 
@@ -290,10 +303,17 @@ var gZenCKSSettings = {
     this._initializeEvents();
     this._initializeCKS();
     this._addPrefObservers();
+    window.addEventListener("unload", () => {
+      Services.prefs.removeObserver("zen.keyboard.shortcuts.disable-firefox", this);
+    });
   },
 
   _addPrefObservers() {
-    Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this.onDisableFirefoxShortcutsChange.bind(this));
+    Services.prefs.addObserver("zen.keyboard.shortcuts.disable-firefox", this);
+  },
+
+  observe(subject, topic, data) {
+    this.onDisableFirefoxShortcutsChange();
   },
 
   async onDisableFirefoxShortcutsChange(event) {

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

@@ -27,6 +27,9 @@ groupbox {
   padding: 20px 30px !important;
   margin-bottom: 0 !important;
   position: relative;
+
+  /* add shadow just to the sides */
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
 .subcategory + groupbox,
@@ -42,6 +45,8 @@ groupbox:last-of-type,
 groupbox:has(+ .subcategory) {
   border-bottom-left-radius: 5px !important;
   border-bottom-right-radius: 5px !important;
+  /* add shadow just to bottom */
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 }
 
 .sticky-inner-container{