From 3176cd97d89b3ae161f09956973ecb7ec01a9c3f Mon Sep 17 00:00:00 2001 From: sameerasw Date: Sat, 12 Apr 2025 15:37:43 +0530 Subject: Added the ability to disable transparency globally #7 --- background.js | 8 ++++++++ data-viewer/data-viewer.css | 16 ++++++++++++++++ data-viewer/data-viewer.html | 13 +++++++++++++ data-viewer/data-viewer.js | 25 +++++++++++++++++++++++++ inject-css.js | 9 +++++++++ manifest.json | 2 +- popup/popup.css | 25 +++++++++++++++++++++++++ popup/popup.js | 23 +++++++++++++++++++---- 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 @@ +
+
+ + Disable Transparency Globally +
+
+ This will disable all transparency features while keeping other styling effects active +
+
+

Global Settings

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 = ` - ${displayFeatureName} -