summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--background.js8
-rw-r--r--data-viewer/data-viewer.css16
-rw-r--r--data-viewer/data-viewer.html13
-rw-r--r--data-viewer/data-viewer.js25
-rw-r--r--inject-css.js9
-rw-r--r--manifest.json2
-rw-r--r--popup/popup.css25
-rw-r--r--popup/popup.js23
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);
}