Merge pull request #11 from ameliasquires/master

add whitelist/blacklist for all styling

This is nice, previously we had to turn each feature off  to skip a website. There are some needed changes further but I will add them soon.

3 files changed, 100 insertions, 13 deletions

diff --git a/background.js b/background.js
index bc30678..99948ab 100644
--- a/background.js
+++ b/background.js
@@ -1,4 +1,5 @@
 let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
+let SKIP_THEMING_KEY = "skipThemingList";
 let logging = true; // Enable logging for debugging
 
 // Create a cache for pre-processed CSS to speed up repeated visits
@@ -231,8 +232,16 @@ async function applyCSSToTab(tab) {
     const globalSettings = settings.transparentZenSettings || {};
     console.log("DEBUG: Global settings:", JSON.stringify(globalSettings));
 
-    if (globalSettings.enableStyling === false) {
-      console.log("DEBUG: Styling is globally disabled, exiting early");
+    const skipStyleListData = await browser.storage.local.get(
+      SKIP_THEMING_KEY
+    );
+    const skipStyleList = skipStyleListData[SKIP_THEMING_KEY] || [];
+    const styleMode = globalSettings.whitelistStyleMode ?? true;
+
+    if (globalSettings.enableStyling === false || 
+      !styleMode && skipStyleList.includes(hostname) ||
+      styleMode && !skipStyleList.includes(hostname)) {
+      console.log("DEBUG: Styling is disabled, exiting early");
       return;
     }
 
diff --git a/popup/popup.html b/popup/popup.html
index 9d8d042..c4d96e4 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -26,13 +26,29 @@
     </header>
 
     <main class="app-content">
-      <div class="toggle-container features-container">
+      <div class="features-container">
+      <div class="toggle-container">
         <label class="toggle-switch">
           <input type="checkbox" id="enable-styling">
           <span class="slider round"></span>
         </label>
         <span class="toggle-label">Enable Styling</span>
       </div>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="whitelist-style-mode">
+            <span class="slider round"></span>
+          </label>
+          <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
+        </div>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="skip-theming">
+            <span class="slider round"></span>
+          </label>
+          <span id="site-style-toggle-label" class="toggle-label">Skip Styling for this Site</span>
+        </div>
+      </div>
 
       <!-- Current Site Features Section -->
       <div id="current-site-features" class="features-container">
@@ -110,4 +126,4 @@
   <script src="popup.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/popup/popup.js b/popup/popup.js
index c353182..9c546e8 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,5 +1,6 @@
 let logging = false;
 let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
+let SKIP_THEMING_KEY = "skipThemingList";
 
 // Helper function to normalize hostnames by removing www. prefix
 function normalizeHostname(hostname) {
@@ -11,6 +12,11 @@ new (class ExtensionPopup {
   globalSettings = {};
   siteSettings = {};
   enableStylingSwitch = document.getElementById("enable-styling");
+  whitelistStylingModeSwitch = document.getElementById("whitelist-style-mode");
+  whitelistStylingModeLabel = document.getElementById("whitelist-style-mode-label");
+  skipThemingSwitch = document.getElementById("skip-theming");
+  siteStyleToggleLabel = document.getElementById("site-style-toggle-label");
+  skipThemingList = [];
   refetchCSSButton = document.getElementById("refetch-css");
   websitesList = document.getElementById("websites-list");
   currentSiteFeatures = document.getElementById("current-site-toggles");
@@ -33,9 +39,11 @@ new (class ExtensionPopup {
     // Load settings and initialize the popup
     this.loadSettings().then(() => {
       this.loadSkipForceThemingList().then(() => {
-        this.getCurrentTabInfo().then(() => {
-          this.restoreSettings();
-          this.bindEvents();
+        this.loadSkipThemingList().then(() => {
+          this.getCurrentTabInfo().then(() => {
+            this.restoreSettings();
+            this.bindEvents();
+          });
         });
       });
     });
@@ -66,6 +74,11 @@ new (class ExtensionPopup {
       this.handleWhitelistModeChange.bind(this)
     );
 
+    this.whitelistStylingModeSwitch.addEventListener(
+      "change",
+      this.handleWhitelistStyleModeChange.bind(this)
+    );
+
     // Add event listener for the "What's New" button
     this.whatsNewButton.addEventListener("click", this.openWhatsNew.bind(this));
 
@@ -128,6 +141,10 @@ new (class ExtensionPopup {
       this.saveSkipForceThemingList();
     });
 
+    this.skipThemingSwitch.addEventListener("change", () => {
+      this.saveSkipThemingList();
+    });
+
     this.reloadButton.addEventListener("click", this.reloadPage.bind(this));
   }
 
@@ -140,15 +157,20 @@ new (class ExtensionPopup {
     this.forceStylingSwitch.checked = this.globalSettings.forceStyling ?? false;
     this.whitelistModeSwitch.checked =
       this.globalSettings.whitelistMode ?? false;
+    this.whitelistStylingModeSwitch.checked =
+      this.globalSettings.whitelistStyleMode ?? false;
 
     this.updateModeLabels();
 
     // In whitelist mode, checked means "include this site"
-    // In blacklist mode, checked means "skip this site"
-    const isInList = this.skipForceThemingList.includes(
-      this.currentSiteHostname
+    // In blacklist mode, checked means "skip this site" 
+    this.skipForceThemingSwitch.checked = this.skipForceThemingList.includes(
+      normalizeHostname(this.currentSiteHostname)
+    );
+
+    this.skipThemingSwitch.checked = this.skipThemingList.includes(
+      normalizeHostname(this.currentSiteHostname)
     );
-    this.skipForceThemingSwitch.checked = isInList;
 
     this.loadCurrentSiteFeatures();
   }
@@ -204,6 +226,7 @@ new (class ExtensionPopup {
     this.globalSettings.autoUpdate = this.autoUpdateSwitch.checked;
     this.globalSettings.forceStyling = this.forceStylingSwitch.checked;
     this.globalSettings.whitelistMode = this.whitelistModeSwitch.checked;
+    this.globalSettings.whitelistStyleMode = this.whitelistStylingModeSwitch.checked;
 
     browser.storage.local
       .set({
@@ -250,13 +273,18 @@ new (class ExtensionPopup {
     this.skipForceThemingList = data[SKIP_FORCE_THEMING_KEY] || [];
   }
 
+  async loadSkipThemingList() {
+    const data = await browser.storage.local.get(SKIP_THEMING_KEY);
+    this.skipThemingList = data[SKIP_THEMING_KEY] || [];
+  }
+
   saveSkipForceThemingList() {
     const isChecked = this.skipForceThemingSwitch.checked;
-    const index = this.skipForceThemingList.indexOf(this.currentSiteHostname);
+    const index = this.skipForceThemingList.indexOf(normalizeHostname(this.currentSiteHostname));
 
     if (isChecked && index === -1) {
       // Add to the list (whitelist: include, blacklist: skip)
-      this.skipForceThemingList.push(this.currentSiteHostname);
+      this.skipForceThemingList.push(normalizeHostname(this.currentSiteHostname));
     } else if (!isChecked && index !== -1) {
       // Remove from the list (whitelist: exclude, blacklist: include)
       this.skipForceThemingList.splice(index, 1);
@@ -271,6 +299,27 @@ new (class ExtensionPopup {
       });
   }
 
+  saveSkipThemingList() {
+    const isChecked = this.skipThemingSwitch.checked;
+    const index = this.skipThemingList.indexOf(normalizeHostname(this.currentSiteHostname));
+
+    if (isChecked && index === -1) {
+      // Add to the list (whitelist: include, blacklist: skip)
+      this.skipThemingList.push(normalizeHostname(this.currentSiteHostname));
+    } else if (!isChecked && index !== -1) {
+      // Remove from the list (whitelist: exclude, blacklist: include)
+      this.skipThemingList.splice(index, 1);
+    }
+
+    browser.storage.local
+      .set({
+        [SKIP_THEMING_KEY]: this.skipThemingList,
+      })
+      .then(() => {
+        this.updateActiveTabStyling();
+      });
+  }
+
   async loadCurrentSiteFeatures() {
     if (logging) console.log("loadCurrentSiteFeatures called");
     try {
@@ -786,6 +835,11 @@ new (class ExtensionPopup {
     this.saveSettings();
   }
 
+  handleWhitelistStyleModeChange() {
+    this.updateModeLabels();
+    this.saveSettings();
+  }
+
   updateModeIndicator() {
     if (this.whitelistModeSwitch.checked) {
       this.modeIndicator.textContent =
@@ -813,6 +867,14 @@ new (class ExtensionPopup {
       this.whitelistModeLabel.textContent = "Blacklist Mode";
       this.siteToggleLabel.textContent = "Skip Forcing for this Site";
     }
+
+    if (this.whitelistStylingModeSwitch.checked) {
+      this.whitelistStylingModeLabel.textContent = "Whitelist Mode";
+      this.siteStyleToggleLabel.textContent = "Enable for this Site";
+    } else {
+      this.whitelistStylingModeLabel.textContent = "Blacklist Mode";
+      this.siteStyleToggleLabel.textContent = "Skip Styling for this Site";
+    }
   }
 
   // Open the What's New page