Added the ability to disable transparency globally #7

8 files changed, 116 insertions, 5 deletions

diff --git a/background.js b/background.js
index f823262..45be234 100644
--- a/background.js
+++ b/background.js
@@ -238,12 +238,20 @@ async function applyCSSToTab(tab) {
 async function applyCSS(tabId, hostname, features) {
   if (!features) return;
 
+  const settingsData = await browser.storage.local.get("transparentZenSettings");
+  const globalSettings = settingsData.transparentZenSettings || {};
   const siteKey = `transparentZenSettings.${hostname}`;
   const siteData = await browser.storage.local.get(siteKey);
   const featureSettings = siteData[siteKey] || {};
 
   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 (logging) console.log(`Skipping transparency feature: ${feature}`);
+      continue;
+    }
+    
     if (featureSettings[feature] !== false) {
       combinedCSS += css + "\n";
     }
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index eef5d95..fd5c3e7 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -1,6 +1,22 @@
 /* Data Viewer specific styles */
 @import url("../theme.css");
 
+/* Toggle setting container style */
+.toggle-setting-container {
+  background-color: var(--secondary-bg);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  margin-bottom: 24px;
+  border-left: 3px solid var(--accent-color);
+}
+
+.setting-description {
+  margin-top: 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  padding-left: 58px;
+}
+
 /* General layout adjustments */
 .app-content {
   max-width: 960px;
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index a9934d7..e52b830 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -29,6 +29,19 @@
                 </button>
             </div>
 
+            <div class="toggle-setting-container">
+                <div class="toggle-container">
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="disable-transparency">
+                        <span class="slider round"></span>
+                    </label>
+                    <span class="toggle-label">Disable Transparency Globally</span>
+                </div>
+                <div class="setting-description">
+                    This will disable all transparency features while keeping other styling effects active
+                </div>
+            </div>
+
             <div class="data-section">
                 <h2 class="section-title">Global Settings</h2>
                 <div id="global-settings-data" class="data-container"></div>
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index afc516f..d14a6c6 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -10,6 +10,7 @@ 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");
 
   // Load and display the data
   loadAllData();
@@ -22,6 +23,11 @@ document.addEventListener("DOMContentLoaded", function () {
     window.close();
   });
 
+  // Event listener for disable transparency toggle
+  disableTransparencyToggle.addEventListener("change", function() {
+    saveTransparencySettings(this.checked);
+  });
+
   // Event listener for delete all data button
   deleteAllButton.addEventListener("click", function () {
     if (
@@ -51,6 +57,22 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   }
 
+  async function saveTransparencySettings(isDisabled) {
+    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.`);
+    } catch (error) {
+      console.error("Error saving transparency settings:", error);
+      alert("An error occurred while saving the transparency setting: " + error.message);
+    }
+  }
+
   async function displayAddonVersion() {
     const manifest = browser.runtime.getManifest();
     versionElement.textContent = `Version: ${manifest.version}`;
@@ -64,6 +86,9 @@ 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;
 
       // Display skip/enable list
       const skipList = data[SKIP_FORCE_THEMING_KEY] || [];
diff --git a/inject-css.js b/inject-css.js
index f37abd7..2fe96c0 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -189,11 +189,20 @@ async function injectCSS(hostname, features) {
   if (!features) return;
 
   const siteKey = `transparentZenSettings.${hostname}`;
+  const settings = await browser.storage.local.get("transparentZenSettings");
+  const globalSettings = settings.transparentZenSettings || {};
   const siteData = await browser.storage.local.get(siteKey);
   const featureSettings = siteData[siteKey] || {};
 
   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 (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/manifest.json b/manifest.json
index b8ff9f6..8197932 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Zen Internet",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Inject custom css from my repository in real time",
   "browser_specific_settings": {
     "gecko": {
diff --git a/popup/popup.css b/popup/popup.css
index 3b71d1e..6dd3829 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -484,3 +484,28 @@ input:checked + .slider:before {
   color: var(--text-secondary);

   margin-left: 8px;

 }

+

+/* Add these styles at the end of the file */

+

+/* Overridden feature styles */

+.overridden-feature {

+  opacity: 0.7;

+  position: relative;

+}

+

+.overridden-label {

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

+  font-size: 11px;

+  font-style: italic;

+  margin-left: 6px;

+  font-weight: normal;

+}

+

+.disabled-toggle .slider {

+  background-color: var(--border-color) !important;

+  cursor: not-allowed;

+}

+

+.disabled-toggle input:checked + .slider {

+  background-color: rgba(var(--accent-color), 0.5) !important;

+}

diff --git a/popup/popup.js b/popup/popup.js
index 8feac4d..6448194 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -278,24 +278,39 @@ new (class ExtensionPopup {
 
         this.currentSiteFeatures.appendChild(skipForceThemingToggle);
       }
+      
+      // Check if transparency is globally disabled
+      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 isOverridden = isTransparencyDisabled && isTransparencyFeature;
 
         const featureToggle = document.createElement("div");
         featureToggle.className = "feature-toggle";
-        featureToggle.innerHTML = `
-          <span class="feature-name">${displayFeatureName}</span>
-          <label class="toggle-switch">
+        
+        // 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' : ''}">
             <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");
+        }
 
         this.currentSiteFeatures.appendChild(featureToggle);
       }