transparency global toggle and more logging

1 files changed, 116 insertions, 22 deletions

diff --git a/background.js b/background.js
index 45be234..a3f6e43 100644
--- a/background.js
+++ b/background.js
@@ -1,5 +1,5 @@
 let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
-let logging = false;
+let logging = true; // Enable logging for debugging
 
 // Create a cache for pre-processed CSS to speed up repeated visits
 const cssCache = new Map();
@@ -162,22 +162,37 @@ async function prepareStylesForUrl(hostname, tabId) {
 }
 
 async function applyCSSToTab(tab) {
-  if (logging) console.log("applyCSSToTab called with", tab);
+  console.log("DEBUG: applyCSSToTab called for tab", tab.id, "URL:", tab.url);
 
   try {
     const url = new URL(tab.url);
     const hostname = url.hostname;
+    console.log("DEBUG: Processing hostname:", hostname);
 
     const settings = await browser.storage.local.get("transparentZenSettings");
     const globalSettings = settings.transparentZenSettings || {};
-    if (globalSettings.enableStyling === false) return;
+    console.log("DEBUG: Global settings:", JSON.stringify(globalSettings));
+
+    if (globalSettings.enableStyling === false) {
+      console.log("DEBUG: Styling is globally disabled, exiting early");
+      return;
+    }
 
     const data = await browser.storage.local.get("styles");
+    console.log(
+      "DEBUG: Loaded styles count:",
+      Object.keys(data.styles?.website || {}).length
+    );
+
     const skipListData = await browser.storage.local.get(
       SKIP_FORCE_THEMING_KEY
     );
     const siteList = skipListData[SKIP_FORCE_THEMING_KEY] || [];
+    console.log("DEBUG: Skip/Whitelist contains", siteList.length, "sites");
+    console.log("DEBUG: Current site in list:", siteList.includes(hostname));
+
     const isWhitelistMode = globalSettings.whitelistMode || false;
+    console.log("DEBUG: Using whitelist mode:", isWhitelistMode);
 
     // Find the best matching CSS file
     let bestMatch = null;
@@ -193,10 +208,17 @@ async function applyCSSToTab(tab) {
         ) {
           bestMatch = key;
           bestMatchLength = baseSiteName.length;
+          console.log(
+            "DEBUG: Found wildcard match:",
+            key,
+            "with length",
+            baseSiteName.length
+          );
         }
       } else if (hostname === siteName || hostname === `www.${siteName}`) {
         // Exact match has priority
         bestMatch = key;
+        console.log("DEBUG: Found exact match:", key);
         break;
       } else if (
         hostname.endsWith(siteName) &&
@@ -204,74 +226,147 @@ async function applyCSSToTab(tab) {
       ) {
         bestMatch = key;
         bestMatchLength = siteName.length;
+        console.log(
+          "DEBUG: Found domain suffix match:",
+          key,
+          "with length",
+          siteName.length
+        );
       }
     }
 
     // If we found a direct match, use it
     if (bestMatch) {
+      console.log("DEBUG: Using direct match:", bestMatch);
       await applyCSS(tab.id, hostname, data.styles.website[bestMatch]);
       return;
+    } else {
+      console.log("DEBUG: No direct style match found for:", hostname);
     }
 
     // Otherwise, check if we should apply forced styling
+    console.log("DEBUG: Force styling enabled:", globalSettings.forceStyling);
     if (globalSettings.forceStyling) {
       const siteInList = siteList.includes(hostname);
+      console.log("DEBUG: Site in list:", siteInList);
 
       // In whitelist mode: apply only if site is in the list
       // In blacklist mode: apply only if site is NOT in the list
-      if (
-        (isWhitelistMode && siteInList) ||
-        (!isWhitelistMode && !siteInList)
-      ) {
-        await applyCSS(
-          tab.id,
-          hostname,
-          data.styles.website["example.com.css"]
-        );
+      const shouldApplyForcedStyling =
+        (isWhitelistMode && siteInList) || (!isWhitelistMode && !siteInList);
+      console.log(
+        "DEBUG: Should apply forced styling:",
+        shouldApplyForcedStyling,
+        "(Whitelist mode:",
+        isWhitelistMode,
+        ", Site in list:",
+        siteInList,
+        ")"
+      );
+
+      if (shouldApplyForcedStyling) {
+        if (data.styles.website["example.com.css"]) {
+          console.log("DEBUG: Applying forced styling with example.com.css");
+          await applyCSS(
+            tab.id,
+            hostname,
+            data.styles.website["example.com.css"]
+          );
+        } else {
+          console.log("DEBUG: example.com.css not found in styles");
+        }
+      } else {
+        console.log("DEBUG: Skipping forced styling due to site list rules");
       }
+    } else {
+      console.log("DEBUG: Force styling is disabled, no styles applied");
     }
   } catch (error) {
-    console.error(`Error applying CSS:`, error);
+    console.error(`DEBUG ERROR: Error applying CSS:`, error);
   }
 }
 
 async function applyCSS(tabId, hostname, features) {
-  if (!features) return;
+  console.log("DEBUG: applyCSS called for tab", tabId, "hostname", hostname);
 
-  const settingsData = await browser.storage.local.get("transparentZenSettings");
+  if (!features) {
+    console.log("DEBUG: No features to apply, exiting early");
+    return;
+  }
+
+  console.log("DEBUG: Features count:", Object.keys(features).length);
+
+  const settingsData = await browser.storage.local.get(
+    "transparentZenSettings"
+  );
   const globalSettings = settingsData.transparentZenSettings || {};
+  console.log(
+    "DEBUG: Global settings in applyCSS:",
+    JSON.stringify(globalSettings)
+  );
+
   const siteKey = `transparentZenSettings.${hostname}`;
   const siteData = await browser.storage.local.get(siteKey);
   const featureSettings = siteData[siteKey] || {};
+  console.log(
+    "DEBUG: Site-specific settings:",
+    JSON.stringify(featureSettings)
+  );
 
   let combinedCSS = "";
+  let includedFeatures = 0;
+  let skippedTransparencyFeatures = 0;
+  let skippedDisabledFeatures = 0;
+
   for (const [feature, css] of Object.entries(features)) {
+    const isTransparencyFeature = feature
+      .toLowerCase()
+      .includes("transparency");
     // Skip any transparency feature if disableTransparency is enabled globally
-    if (globalSettings.disableTransparency && feature.toLowerCase().includes("transparency")) {
-      if (logging) console.log(`Skipping transparency feature: ${feature}`);
+    if (globalSettings.disableTransparency && isTransparencyFeature) {
+      console.log(`DEBUG: Skipping transparency feature: ${feature}`);
+      skippedTransparencyFeatures++;
       continue;
     }
-    
-    if (featureSettings[feature] !== false) {
+
+    const isFeatureEnabled = featureSettings[feature] !== false;
+    if (isFeatureEnabled) {
       combinedCSS += css + "\n";
+      includedFeatures++;
+      console.log(`DEBUG: Including feature: ${feature}`);
+    } else {
+      console.log(`DEBUG: Feature disabled in site settings: ${feature}`);
+      skippedDisabledFeatures++;
     }
   }
 
+  console.log(
+    `DEBUG: CSS Summary - included: ${includedFeatures}, skipped transparency: ${skippedTransparencyFeatures}, skipped disabled: ${skippedDisabledFeatures}`
+  );
+
   if (combinedCSS) {
     try {
       // Try to send via messaging (most reliable for instant application)
+      console.log(
+        `DEBUG: Sending styles to tab ${tabId} via messaging (${combinedCSS.length} bytes)`
+      );
       await browser.tabs.sendMessage(tabId, {
         action: "applyStyles",
         css: combinedCSS,
       });
     } catch (e) {
       // Fallback to insertCSS if messaging fails
+      console.log(
+        `DEBUG: Messaging failed, falling back to insertCSS: ${e.message}`
+      );
       await browser.tabs.insertCSS(tabId, {
         code: combinedCSS,
         runAt: "document_start",
       });
     }
-    console.log(`Injected custom CSS for ${hostname}`);
+    console.log(`DEBUG: Successfully injected custom CSS for ${hostname}`);
+  } else {
+    console.log(`DEBUG: No CSS to inject after filtering features`);
   }
 }
 
@@ -296,8 +391,7 @@ async function refetchCSS() {
       { headers: { "Cache-Control": "no-cache" } }
     );
     if (!response.ok) throw new Error("Failed to fetch styles.json");
-    const styles = await response.json();
-    await browser.storage.local.set({ styles });
+    const styles = await browser.storage.local.set({ styles });
     await browser.storage.local.set({ lastFetchedTime: Date.now() });
     console.info("All styles refetched and updated from GitHub.");