website specific blacklisting

5 files changed, 356 insertions, 86 deletions

diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index fd5c3e7..508d34f 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -346,18 +346,7 @@ body {
 
 /* Clear list button styling */
 .clear-list-button {
-  margin-top: 8px;
-  margin-bottom: 16px;
-  background-color: var(--secondary-bg);
-  border-color: var(--border-color);
-  font-size: 12px;
-  padding: 6px 12px;
-}
-
-.clear-list-button:hover {
-  background-color: rgba(220, 53, 69, 0.1);
-  border-color: var(--danger-color);
-  color: var(--danger-color);
+  margin-bottom: 20px;
 }
 
 /* Null and object value styling */
@@ -446,3 +435,77 @@ body {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
 }
+
+/* Styling for the website lists section */
+.tables-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 16px;
+}
+
+.list-title-section {
+  margin-bottom: 16px;
+}
+
+.list-title-section h3 {
+  margin-top: 0;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+  font-size: 18px;
+}
+
+.list-section {
+  background-color: var(--bg-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+}
+
+.list-section h4 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: var(--accent-color);
+}
+
+.list-description {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.remove-site-button {
+  background-color: var(--danger-color);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.remove-site-button:hover {
+  background-color: var(--danger-hover-color);
+  transform: scale(1.1);
+}
+
+.remove-site-button i {
+  font-size: 12px;
+}
+
+.clear-list-button {
+  margin-bottom: 20px;
+}
+
+/* Responsive handling for mobile */
+@media (max-width: 768px) {
+  .tables-container {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index f6dd566..c006f09 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -1,6 +1,7 @@
 document.addEventListener("DOMContentLoaded", function () {
   const BROWSER_STORAGE_KEY = "transparentZenSettings";
   const SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
+  const SKIP_THEMING_KEY = "skipThemingList";
 
   const globalSettingsElement = document.getElementById("global-settings-data");
   const skipListElement = document.getElementById("skip-list-data");
@@ -100,9 +101,15 @@ document.addEventListener("DOMContentLoaded", function () {
       disableTransparencyToggle.checked =
         globalSettings.disableTransparency || false;
 
-      // Display skip/enable list
-      const skipList = data[SKIP_FORCE_THEMING_KEY] || [];
-      displaySkipList(skipList, globalSettings.whitelistMode);
+      // Display skip/enable lists for both forced and non-forced websites
+      const skipForceList = data[SKIP_FORCE_THEMING_KEY] || [];
+      const skipThemingList = data[SKIP_THEMING_KEY] || [];
+      displayCombinedSkipLists(
+        skipForceList,
+        skipThemingList,
+        globalSettings.whitelistMode,
+        globalSettings.whitelistStyleMode
+      );
 
       // Display combined websites and settings
       displayCombinedWebsiteData(data);
@@ -155,46 +162,117 @@ document.addEventListener("DOMContentLoaded", function () {
     globalSettingsElement.appendChild(table);
   }
 
-  function displaySkipList(skipList, isWhitelistMode) {
+  function displayCombinedSkipLists(
+    skipForceList,
+    skipThemingList,
+    isWhitelistMode,
+    isWhitelistStyleMode
+  ) {
     skipListElement.innerHTML = "";
 
-    const modeType = isWhitelistMode ? "Whitelist" : "Blacklist";
-    const actionType = isWhitelistMode ? "Enabled" : "Skipped";
+    // Create title and description section
+    const titleSection = document.createElement("div");
+    titleSection.className = "list-title-section";
 
-    const modeInfo = document.createElement("div");
-    modeInfo.classList.add("mode-info");
-    modeInfo.innerHTML = `<strong>Current Mode:</strong> ${modeType} Mode - ${
-      isWhitelistMode
-        ? "Only apply forced styling to sites in the list"
-        : "Apply forced styling to all sites except those in the list"
-    }`;
-    skipListElement.appendChild(modeInfo);
+    const forceModeName = isWhitelistMode ? "Whitelist" : "Blacklist";
+    const styleModeName = isWhitelistStyleMode ? "Whitelist" : "Blacklist";
 
-    // Add Clear List button
-    if (skipList.length > 0) {
+    titleSection.innerHTML = `
+      <h3>Website Lists Overview</h3>
+      <div class="mode-info">
+        <div><strong>Force Styling Mode:</strong> ${forceModeName} Mode (${
+      isWhitelistMode
+        ? "only apply to sites in the list"
+        : "apply to all except sites in the list"
+    })</div>
+        <div><strong>General Styling Mode:</strong> ${styleModeName} Mode (${
+      isWhitelistStyleMode
+        ? "only apply to sites in the list"
+        : "apply to all except sites in the list"
+    })</div>
+      </div>
+    `;
+
+    skipListElement.appendChild(titleSection);
+
+    // Add Clear Both Lists button
+    if (skipForceList.length > 0 || skipThemingList.length > 0) {
       const clearListButton = document.createElement("button");
       clearListButton.classList.add(
         "action-button",
         "secondary",
         "clear-list-button"
       );
-      clearListButton.innerHTML = '<i class="fas fa-trash"></i> Clear List';
+      clearListButton.innerHTML =
+        '<i class="fas fa-trash"></i> Clear All Website Lists';
       clearListButton.addEventListener("click", function () {
         if (
           confirm(
-            `Are you sure you want to clear the entire ${modeType} list? This will affect how styling is applied to websites.`
+            `Are you sure you want to clear ALL website lists? This will reset both Forced and Regular styling lists and may affect how styling is applied to websites.`
           )
         ) {
-          clearSkipList();
+          clearAllSkipLists();
         }
       });
       skipListElement.appendChild(clearListButton);
     }
 
-    if (skipList.length === 0) {
-      skipListElement.innerHTML +=
-        '<div class="no-data">No websites in the list.</div>';
-      return;
+    // Create container for the two tables
+    const tablesContainer = document.createElement("div");
+    tablesContainer.className = "tables-container";
+
+    // Create force styling list
+    const forceListSection = createSingleListSection(
+      skipForceList,
+      isWhitelistMode,
+      "Force Styling List",
+      isWhitelistMode
+        ? "Sites where forced styling IS applied"
+        : "Sites where forced styling is NOT applied",
+      SKIP_FORCE_THEMING_KEY
+    );
+
+    // Create regular styling list
+    const regularListSection = createSingleListSection(
+      skipThemingList,
+      isWhitelistStyleMode,
+      "Regular Styling List",
+      isWhitelistStyleMode
+        ? "Sites where regular styling IS applied"
+        : "Sites where regular styling is NOT applied",
+      SKIP_THEMING_KEY
+    );
+
+    tablesContainer.appendChild(forceListSection);
+    tablesContainer.appendChild(regularListSection);
+    skipListElement.appendChild(tablesContainer);
+  }
+
+  function createSingleListSection(
+    list,
+    isWhitelistMode,
+    title,
+    description,
+    storageKey
+  ) {
+    const section = document.createElement("div");
+    section.className = "list-section";
+
+    const sectionTitle = document.createElement("h4");
+    sectionTitle.textContent = title;
+    section.appendChild(sectionTitle);
+
+    const sectionDescription = document.createElement("p");
+    sectionDescription.className = "list-description";
+    sectionDescription.textContent = description;
+    section.appendChild(sectionDescription);
+
+    if (list.length === 0) {
+      const emptyMessage = document.createElement("div");
+      emptyMessage.className = "no-data";
+      emptyMessage.textContent = "No websites in this list";
+      section.appendChild(emptyMessage);
+      return section;
     }
 
     const table = document.createElement("table");
@@ -203,32 +281,76 @@ document.addEventListener("DOMContentLoaded", function () {
     // Table header
     const thead = document.createElement("thead");
     const headerRow = document.createElement("tr");
-    headerRow.innerHTML = `<th>${actionType} Websites</th>`;
+    headerRow.innerHTML = `<th>Website</th><th>Action</th>`;
     thead.appendChild(headerRow);
     table.appendChild(thead);
 
     // Table body
     const tbody = document.createElement("tbody");
 
-    for (const site of skipList) {
+    for (const site of list) {
       const row = document.createElement("tr");
-      row.innerHTML = `<td>${site}</td>`;
+
+      // Website column
+      const siteCell = document.createElement("td");
+      siteCell.textContent = site;
+      row.appendChild(siteCell);
+
+      // Action column
+      const actionCell = document.createElement("td");
+      const removeButton = document.createElement("button");
+      removeButton.className = "remove-site-button";
+      removeButton.innerHTML = '<i class="fas fa-times"></i>';
+      removeButton.title = "Remove from list";
+      removeButton.addEventListener("click", function () {
+        removeSiteFromList(site, storageKey);
+      });
+      actionCell.appendChild(removeButton);
+      row.appendChild(actionCell);
+
       tbody.appendChild(row);
     }
 
     table.appendChild(tbody);
-    skipListElement.appendChild(table);
+    section.appendChild(table);
+    return section;
+  }
+
+  async function removeSiteFromList(site, listKey) {
+    try {
+      // Get current list
+      const data = await browser.storage.local.get(listKey);
+      const list = data[listKey] || [];
+
+      // Remove the site
+      const newList = list.filter((item) => item !== site);
+
+      // Save updated list
+      await browser.storage.local.set({ [listKey]: newList });
+
+      // Refresh the display
+      loadAllData();
+
+      console.log(`Removed ${site} from ${listKey}`);
+    } catch (error) {
+      console.error(`Error removing site from list: ${error}`);
+      alert(`An error occurred: ${error.message}`);
+    }
   }
 
-  async function clearSkipList() {
+  async function clearAllSkipLists() {
     try {
-      await browser.storage.local.remove(SKIP_FORCE_THEMING_KEY);
-      alert(`${SKIP_FORCE_THEMING_KEY} has been cleared successfully.`);
+      // Clear both lists at once
+      await browser.storage.local.remove([
+        SKIP_FORCE_THEMING_KEY,
+        SKIP_THEMING_KEY,
+      ]);
+      alert("All website lists have been cleared successfully.");
       loadAllData(); // Reload data to reflect changes
     } catch (error) {
-      console.error("Error clearing skip list:", error);
+      console.error("Error clearing lists:", error);
       alert(
-        "An error occurred while trying to clear the list: " + error.message
+        "An error occurred while trying to clear the lists: " + error.message
       );
     }
   }
diff --git a/popup/popup.css b/popup/popup.css
index f1d23e4..3ffd5cb 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -60,14 +60,14 @@ body {
   font-size: 30px;

 }

 

-#header-container{

+#header-container {

   display: flex;

   justify-content: space-between;

   flex-direction: column;

   width: 100%;

 }

 

-.miniheader{

+.miniheader {

   margin-top: 2px;

   font-size: 11px;

   display: flex;

@@ -502,6 +502,11 @@ input:checked + .slider:before {
   margin-bottom: 16px;

 }

 

+/* Make forcing container collapsible */

+.forcing-container.collapsed {

+  display: none;

+}

+

 .warning {

   color: var(--warning-color);

   margin-top: 8px;

@@ -554,3 +559,15 @@ input:checked + .slider:before {
 .toggle-switch.disabled input:checked + .slider {

   background-color: rgba(249, 135, 100, 0.5);

 }

+

+.site-domain {

+  color: var(--accent-color);

+  font-weight: 600;

+  max-width: 180px;

+  display: inline-block;

+  white-space: nowrap;

+  overflow: hidden;

+  text-overflow: ellipsis;

+  vertical-align: bottom;

+  margin-right: 4px;

+}

diff --git a/popup/popup.html b/popup/popup.html
index c4d96e4..1ab05c3 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -27,35 +27,38 @@
 
     <main class="app-content">
       <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">
+            <input type="checkbox" id="enable-styling">
             <span class="slider round"></span>
           </label>
-          <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
+          <span class="toggle-label">Global Styling</span>
         </div>
         <div class="toggle-container">
           <label class="toggle-switch">
-            <input type="checkbox" id="skip-theming">
+            <input type="checkbox" id="whitelist-style-mode">
             <span class="slider round"></span>
           </label>
-          <span id="site-style-toggle-label" class="toggle-label">Skip Styling for this Site</span>
+          <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
         </div>
       </div>
 
       <!-- Current Site Features Section -->
       <div id="current-site-features" class="features-container">
         <button class="collapsible-button" id="toggle-features">
-          <span>Current Site Features</span>
+          <span id="current-site-label">
+            <span id="site-domain" class="site-domain"></span>
+            <span>Features</span>
+          </span>
           <i class="fas fa-chevron-down"></i>
         </button>
+        <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 id="current-site-toggles" class="features-list collapsed"></div>
         <div class="actions" id="current-site-actions">
           <!-- reload botton -->
@@ -79,27 +82,34 @@
         <span class="toggle-label">Auto Update Styles</span>
       </div>
       <div id="last-fetched-time" class="last-fetched-time"></div>
-      <div class="forcing-container">
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="force-styling">
-            <span class="slider round"></span>
-          </label>
-          <span class="toggle-label">Force Styling</span>
-        </div>
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="whitelist-mode">
-            <span class="slider round"></span>
-          </label>
-          <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
-        </div>
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="skip-force-theming">
-            <span class="slider round"></span>
-          </label>
-          <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+
+      <div class="features-container">
+        <button class="collapsible-button" id="toggle-forcing">
+          <span>Force Styling Settings</span>
+          <i class="fas fa-chevron-down"></i>
+        </button>
+        <div id="forcing-content" class="forcing-container collapsed">
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="force-styling">
+              <span class="slider round"></span>
+            </label>
+            <span class="toggle-label">Force Styling</span>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="whitelist-mode">
+              <span class="slider round"></span>
+            </label>
+            <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="skip-force-theming">
+              <span class="slider round"></span>
+            </label>
+            <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+          </div>
         </div>
       </div>
 
@@ -126,4 +136,4 @@
   <script src="popup.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
index 9c546e8..c86a882 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -13,7 +13,9 @@ new (class ExtensionPopup {
   siteSettings = {};
   enableStylingSwitch = document.getElementById("enable-styling");
   whitelistStylingModeSwitch = document.getElementById("whitelist-style-mode");
-  whitelistStylingModeLabel = document.getElementById("whitelist-style-mode-label");
+  whitelistStylingModeLabel = document.getElementById(
+    "whitelist-style-mode-label"
+  );
   skipThemingSwitch = document.getElementById("skip-theming");
   siteStyleToggleLabel = document.getElementById("site-style-toggle-label");
   skipThemingList = [];
@@ -69,6 +71,11 @@ new (class ExtensionPopup {
       .getElementById("toggle-features")
       ?.addEventListener("click", this.toggleFeatures.bind(this));
 
+    // Add toggle forcing button event listener
+    document
+      .getElementById("toggle-forcing")
+      ?.addEventListener("click", this.toggleForcing.bind(this));
+
     this.whitelistModeSwitch.addEventListener(
       "change",
       this.handleWhitelistModeChange.bind(this)
@@ -116,6 +123,14 @@ new (class ExtensionPopup {
           this.normalizedCurrentSiteHostname,
           ")"
         );
+
+        // Update the site label with current hostname (without www.)
+        const siteDomainElement = document.getElementById("site-domain");
+        if (siteDomainElement) {
+          const displayDomain = normalizeHostname(this.currentSiteHostname);
+          siteDomainElement.textContent = displayDomain;
+          siteDomainElement.title = displayDomain; // Add full domain as tooltip for long domains
+        }
       }
     } catch (error) {
       console.error("Error getting current tab info:", error);
@@ -163,7 +178,7 @@ new (class ExtensionPopup {
     this.updateModeLabels();
 
     // In whitelist mode, checked means "include this site"
-    // In blacklist mode, checked means "skip this site" 
+    // In blacklist mode, checked means "skip this site"
     this.skipForceThemingSwitch.checked = this.skipForceThemingList.includes(
       normalizeHostname(this.currentSiteHostname)
     );
@@ -226,7 +241,8 @@ 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;
+    this.globalSettings.whitelistStyleMode =
+      this.whitelistStylingModeSwitch.checked;
 
     browser.storage.local
       .set({
@@ -280,11 +296,15 @@ new (class ExtensionPopup {
 
   saveSkipForceThemingList() {
     const isChecked = this.skipForceThemingSwitch.checked;
-    const index = this.skipForceThemingList.indexOf(normalizeHostname(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(normalizeHostname(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);
@@ -301,7 +321,9 @@ new (class ExtensionPopup {
 
   saveSkipThemingList() {
     const isChecked = this.skipThemingSwitch.checked;
-    const index = this.skipThemingList.indexOf(normalizeHostname(this.currentSiteHostname));
+    const index = this.skipThemingList.indexOf(
+      normalizeHostname(this.currentSiteHostname)
+    );
 
     if (isChecked && index === -1) {
       // Add to the list (whitelist: include, blacklist: skip)
@@ -384,6 +406,26 @@ new (class ExtensionPopup {
         }
       }
 
+      // Set the forcing section's initial collapsed state
+      const forcingContent = document.getElementById("forcing-content");
+      const toggleForcingButton = document.getElementById("toggle-forcing");
+
+      if (hasSpecificTheme) {
+        // We have a specific theme, collapse the forcing section
+        forcingContent.classList.add("collapsed");
+        if (toggleForcingButton) {
+          const icon = toggleForcingButton.querySelector("i");
+          if (icon) icon.className = "fas fa-chevron-down";
+        }
+      } else {
+        // No specific theme found, expand the forcing section
+        forcingContent.classList.remove("collapsed");
+        if (toggleForcingButton) {
+          const icon = toggleForcingButton.querySelector("i");
+          if (icon) icon.className = "fas fa-chevron-up";
+        }
+      }
+
       // Disable the force styling toggle if we found a theme for this site
       if (hasSpecificTheme) {
         // We found a specific theme for this site, no need for force styling
@@ -906,4 +948,20 @@ new (class ExtensionPopup {
       icon.className = "fas fa-chevron-up";
     }
   }
+
+  // Toggle forcing section visibility
+  toggleForcing() {
+    const forcingContent = document.getElementById("forcing-content");
+    const toggleButton = document.getElementById("toggle-forcing");
+
+    forcingContent.classList.toggle("collapsed");
+
+    // Update the icon
+    const icon = toggleButton.querySelector("i");
+    if (forcingContent.classList.contains("collapsed")) {
+      icon.className = "fas fa-chevron-down";
+    } else {
+      icon.className = "fas fa-chevron-up";
+    }
+  }
 })();