transparency global toggle and more logging

5 files changed, 159 insertions, 43 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.");
 
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index e52b830..55f9121 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -60,7 +60,7 @@
                     </button>
                 </div>
             </div>
-            
+
             <div class="data-section">
                 <h2 class="section-title">Websites and CSS</h2>
                 <div id="combined-websites-data" class="data-container"></div>
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index d14a6c6..d38f53f 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -10,7 +10,9 @@ document.addEventListener("DOMContentLoaded", function () {
   const backButton = document.getElementById("back-button");
   const deleteAllButton = document.getElementById("delete-all-data");
   const versionElement = document.getElementById("addon-version");
-  const disableTransparencyToggle = document.getElementById("disable-transparency");
+  const disableTransparencyToggle = document.getElementById(
+    "disable-transparency"
+  );
 
   // Load and display the data
   loadAllData();
@@ -24,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   // Event listener for disable transparency toggle
-  disableTransparencyToggle.addEventListener("change", function() {
+  disableTransparencyToggle.addEventListener("change", function () {
     saveTransparencySettings(this.checked);
   });
 
@@ -61,15 +63,22 @@ document.addEventListener("DOMContentLoaded", function () {
     try {
       const data = await browser.storage.local.get(BROWSER_STORAGE_KEY);
       const settings = data[BROWSER_STORAGE_KEY] || {};
-      
+
       // Update the disableTransparency setting
       settings.disableTransparency = isDisabled;
-      
+
       await browser.storage.local.set({ [BROWSER_STORAGE_KEY]: settings });
-      alert(`Transparency has been ${isDisabled ? 'disabled' : 'enabled'} globally. This will affect all websites.`);
+      alert(
+        `Transparency has been ${
+          isDisabled ? "disabled" : "enabled"
+        } globally. This will affect all websites.`
+      );
     } catch (error) {
       console.error("Error saving transparency settings:", error);
-      alert("An error occurred while saving the transparency setting: " + error.message);
+      alert(
+        "An error occurred while saving the transparency setting: " +
+          error.message
+      );
     }
   }
 
@@ -86,9 +95,10 @@ document.addEventListener("DOMContentLoaded", function () {
       // Display global settings
       const globalSettings = data[BROWSER_STORAGE_KEY] || {};
       displayGlobalSettings(globalSettings);
-      
+
       // Set the disable transparency toggle state
-      disableTransparencyToggle.checked = globalSettings.disableTransparency || false;
+      disableTransparencyToggle.checked =
+        globalSettings.disableTransparency || false;
 
       // Display skip/enable list
       const skipList = data[SKIP_FORCE_THEMING_KEY] || [];
diff --git a/inject-css.js b/inject-css.js
index 2fe96c0..27b4ecc 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -51,7 +51,9 @@ function applyStyles(css) {
   try {
     // For immediate application, directly set textContent
     // as this is more reliably applied in early document stages
-    styleElement.textContent = css.trim() + `
+    styleElement.textContent =
+      css.trim() +
+      `
 /* Remove FOUC prevention once styles are loaded */
 body { opacity: 1 !important; }`;
 
@@ -197,11 +199,14 @@ async function injectCSS(hostname, features) {
   let combinedCSS = "";
   for (const [feature, css] of Object.entries(features)) {
     // Skip any transparency feature if disableTransparency is enabled globally
-    if (globalSettings.disableTransparency && feature.toLowerCase().includes("transparency")) {
+    if (
+      globalSettings.disableTransparency &&
+      feature.toLowerCase().includes("transparency")
+    ) {
       if (logging) console.log(`Skipping transparency feature: ${feature}`);
       continue;
     }
-    
+
     // Apply the feature if it's not explicitly disabled
     if (featureSettings[feature] !== false) {
       combinedCSS += css + "\n";
diff --git a/popup/popup.js b/popup/popup.js
index 6448194..37d1ab2 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -278,35 +278,42 @@ new (class ExtensionPopup {
 
         this.currentSiteFeatures.appendChild(skipForceThemingToggle);
       }
-      
+
       // Check if transparency is globally disabled
-      const isTransparencyDisabled = this.globalSettings.disableTransparency === true;
-      
+      const isTransparencyDisabled =
+        this.globalSettings.disableTransparency === true;
+
       for (const [feature, css] of Object.entries(features)) {
         const displayFeatureName = feature.includes("-")
           ? feature.split("-")[1]
           : feature;
 
         const isChecked = this.siteSettings[feature] ?? true;
-        const isTransparencyFeature = feature.toLowerCase().includes("transparency");
+        const isTransparencyFeature = feature
+          .toLowerCase()
+          .includes("transparency");
         const isOverridden = isTransparencyDisabled && isTransparencyFeature;
 
         const featureToggle = document.createElement("div");
         featureToggle.className = "feature-toggle";
-        
+
         // Create the base toggle HTML
         let toggleHTML = `
-          <span class="feature-name">${displayFeatureName}${isOverridden ? ' <span class="overridden-label">[overridden]</span>' : ''}</span>
-          <label class="toggle-switch ${isOverridden ? 'disabled-toggle' : ''}">
+          <span class="feature-name">${displayFeatureName}${
+          isOverridden
+            ? ' <span class="overridden-label">[overridden]</span>'
+            : ""
+        }</span>
+          <label class="toggle-switch ${isOverridden ? "disabled-toggle" : ""}">
             <input type="checkbox" name="${currentSiteKey}|${feature}" ${
           isChecked ? "checked" : ""
         } ${isOverridden ? "disabled" : ""}>
             <span class="slider round"></span>
           </label>
         `;
-        
+
         featureToggle.innerHTML = toggleHTML;
-        
+
         // If this is a transparency feature and it's disabled globally, add a class
         if (isOverridden) {
           featureToggle.classList.add("overridden-feature");