fixed themes applying upon fetching

4 files changed, 78 insertions, 14 deletions

diff --git a/background.js b/background.js
index 179fc23..95daea2 100644
--- a/background.js
+++ b/background.js
@@ -321,6 +321,10 @@ browser.runtime.onMessage.addListener(async (message, sender) => {
   } else if (message.action === "disableAutoUpdate") {
     stopAutoUpdate();
     return true;
+  } else if (message.action === "reapplyStylesAfterFetch") {
+    // Triggered after fetching new styles from popup
+    await reapplyStylesToAllTabs();
+    return true;
   }
 
   // Update the icon when the content script reports ready
@@ -875,19 +879,53 @@ async function refetchCSS() {
       });
       console.info("Initialized default settings during first fetch");
     } else {
-      // Just update the lastFetchedTime
-      await browser.storage.local.set({ lastFetchedTime: Date.now() });
+      // Just update the lastFetchedTime while preserving other settings
+      const updatedSettings = {
+        ...settingsData[BROWSER_STORAGE_KEY],
+        lastFetchedTime: Date.now(),
+      };
+      await browser.storage.local.set({
+        [BROWSER_STORAGE_KEY]: updatedSettings,
+      });
     }
 
     console.info(`All styles refetched and updated from ${repositoryUrl}`);
 
-    // Preload the new styles
-    preloadStyles();
+    // Clear CSS cache to ensure we use fresh styles
+    cssCache.clear();
+
+    // Preload the new styles while keeping site-specific settings
+    await preloadStyles();
+
+    // Reapply CSS to all active tabs
+    await reapplyStylesToAllTabs();
   } catch (error) {
     console.error("Error refetching styles:", error);
   }
 }
 
+// New function to reapply styles to all active tabs
+async function reapplyStylesToAllTabs() {
+  try {
+    // Clear styling state cache to ensure fresh evaluation
+    stylingStateCache.clear();
+
+    // Get all active tabs
+    const tabs = await browser.tabs.query({});
+
+    // Reapply CSS to each tab
+    for (const tab of tabs) {
+      if (tab.url && tab.url.startsWith("http")) {
+        applyCSSToTab(tab);
+      }
+    }
+
+    if (logging) console.log("Reapplied styles to all active tabs after fetch");
+  } catch (error) {
+    console.error("Error reapplying styles to tabs:", error);
+  }
+}
+
 // Create a directory to store CSS files
 async function initializeExtension() {
   // Check and initialize default settings
diff --git a/content-script.js b/content-script.js
index 4e99e29..82fd3a1 100644
--- a/content-script.js
+++ b/content-script.js
@@ -16,8 +16,13 @@
   // Update our stylesheet content
   function updateStyles(css) {
     const stylesheet = getStylesheet();
-    stylesheet.textContent = css || "";
-    console.log("ZenInternet: Styles were " + (css ? "updated" : "removed"));
+    // Only update if content has changed to avoid unnecessary reflows
+    if (stylesheet.textContent !== css) {
+      stylesheet.textContent = css || "";
+      console.log("ZenInternet: Styles were " + (css ? "updated" : "removed"));
+    } else {
+      console.log("ZenInternet: Styles unchanged, skipping update");
+    }
   }
 
   // Announce content script is ready and provide current hostname
diff --git a/manifest.json b/manifest.json
index 13c96b7..0107af7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Zen Internet",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Make the internet feel native and elegant. Zen Internet is a browser extension that enhances your browsing experience by providing a clean and minimalistic interface with transparency and a focus on content. Customize the features in the addon popup.",
   "browser_specific_settings": {
     "gecko": {
@@ -17,9 +17,7 @@
     "storage",
     "tabs",
     "<all_urls>",
-    "webNavigation",
-    "webRequest",
-    "webRequestBlocking"
+    "webNavigation"
   ],
   "browser_action": {
     "default_popup": "popup/popup.html",
diff --git a/popup/popup.js b/popup/popup.js
index 9b2cd29..a35a8cd 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -687,6 +687,17 @@ new (class ExtensionPopup {
 
       console.log("Fetching styles from:", repositoryUrl);
 
+      // Store existing site-specific settings before fetching new styles
+      const allStorageData = await browser.storage.local.get(null);
+      const existingSiteSettings = {};
+
+      // Identify and keep all site-specific settings
+      for (const [key, value] of Object.entries(allStorageData)) {
+        if (key.startsWith(this.BROWSER_STORAGE_KEY + ".")) {
+          existingSiteSettings[key] = value;
+        }
+      }
+
       const response = await fetch(repositoryUrl, {
         headers: {
           "Cache-Control": "no-cache",
@@ -731,12 +742,24 @@ new (class ExtensionPopup {
         // Update labels
         this.updateModeLabels();
       } else {
-        // Just update the lastFetchedTime
-        await browser.storage.local.set({ lastFetchedTime: Date.now() });
+        // Just update the lastFetchedTime while preserving other settings
+        const updatedSettings = {
+          ...settingsData[this.BROWSER_STORAGE_KEY],
+          lastFetchedTime: Date.now(),
+        };
+        await browser.storage.local.set({
+          [this.BROWSER_STORAGE_KEY]: updatedSettings,
+        });
       }
 
-      this.loadCurrentSiteFeatures();
-      this.updateActiveTabStyling();
+      // Reload the current site features
+      await this.loadCurrentSiteFeatures();
+
+      // Notify background script to immediately reapply CSS to active tabs
+      browser.runtime.sendMessage({
+        action: "reapplyStylesAfterFetch",
+        preserveSettings: true,
+      });
 
       this.refetchCSSButton.textContent = "Done!";
       setTimeout(() => {