Added the ability to disable transparency globally #7

3 files changed, 54 insertions, 0 deletions

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] || [];