summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--data-viewer/data-viewer.html4
-rw-r--r--popup/popup.css18
-rw-r--r--popup/popup.html21
-rw-r--r--popup/popup.js62
4 files changed, 88 insertions, 17 deletions
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index 55f9121..305cb2e 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>ZenInternet - Data Viewer</title>
+ <title>ZenInternet - Advanced Settings</title>
<link rel="stylesheet" href="../theme.css">
<link rel="stylesheet" href="../popup/popup.css">
<link rel="stylesheet" href="data-viewer.css">
@@ -16,7 +16,7 @@
<header class="app-header">
<div class="logo-container">
<img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
- <h1 class="app-title">ZenInternet Data Viewer</h1>
+ <h1 class="app-title">ZenInternet Settings</h1>
</div>
<div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
<div id="addon-version" class="addon-version"></div>
diff --git a/popup/popup.css b/popup/popup.css
index 761b154..67eab43 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -250,6 +250,8 @@ input:checked + .slider:before {
.collapsible-button {
width: 100%;
padding: 12px 16px;
+ margin-bottom: 10px;
+ border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: space-between;
@@ -273,9 +275,23 @@ input:checked + .slider:before {
display: none;
}
-.websites-list:not(.collapsed) + .collapsible-button i {
+.features-list.collapsed {
+ display: none;
+}
+
+#current-site-actions.collapsed {
+ display: none;
+}
+
+.collapsible-button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* When features are expanded, rotate the chevron */
+.collapsible-button i.fa-chevron-up {
transform: rotate(180deg);
}
+
.websites-list {
list-style: none;
padding: 0;
diff --git a/popup/popup.html b/popup/popup.html
index edc9bce..bc53134 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -32,9 +32,12 @@
<!-- Current Site Features Section -->
<div id="current-site-features" class="features-container">
- <h2 class="section-title">Current Site Features</h2>
- <div id="current-site-toggles" class="features-list"></div>
- <div class="actions">
+ <button class="collapsible-button" id="toggle-features">
+ <span>Current Site Features</span>
+ <i class="fas fa-chevron-down"></i>
+ </button>
+ <div id="current-site-toggles" class="features-list collapsed"></div>
+ <div class="actions" id="current-site-actions">
<!-- reload botton -->
<button id="reload" class="action-button secondary">
Reload to apply <i class="fas fa-sync-alt"></i>
@@ -42,15 +45,6 @@
</div>
</div>
- <!-- All Websites Section (Collapsible) -->
- <!-- <div class="websites-container">
- <button class="collapsible-button" id="toggle-websites">
- <span>All Websites</span>
- <i class="fas fa-chevron-down"></i>
- </button>
- <div id="websites-list" class="websites-list collapsed"></div>
- </div> -->
-
<div class="actions">
<button id="refetch-css" class="action-button primary">
<i class="fas fa-sync-alt"></i> Refetch latest styles
@@ -91,7 +85,8 @@
<div class="actions">
<button id="view-data" class="action-button secondary">
- <i class="fas fa-database"></i> View All Stored Data
+ <i class="fa-solid fa-gear"></i>
+ Advanced Settings
</button>
</div>
diff --git a/popup/popup.js b/popup/popup.js
index 9a13ce2..44123ee 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -50,6 +50,11 @@ new (class ExtensionPopup {
);
this.reloadButton.addEventListener("click", this.reloadPage.bind(this));
+ // Add toggle features button event listener
+ document
+ .getElementById("toggle-features")
+ ?.addEventListener("click", this.toggleFeatures.bind(this));
+
this.whitelistModeSwitch.addEventListener(
"change",
this.handleWhitelistModeChange.bind(this)
@@ -242,8 +247,40 @@ new (class ExtensionPopup {
const hasExampleSite = "example.com.css" in styles;
const hasNoStyles = Object.keys(styles).length === 0;
+ // Only collapse if we found a specific theme for this site
+ // Otherwise keep it expanded to show the request theme button
+ const hasSpecificTheme =
+ currentSiteKey && currentSiteKey !== "example.com.css";
+
+ // Apply collapsed class based on whether we have a theme
+ const featuresList = document.getElementById("current-site-toggles");
+ const actionsContainer = document.getElementById("current-site-actions");
+
+ if (hasSpecificTheme) {
+ featuresList.classList.add("collapsed");
+ if (actionsContainer) actionsContainer.classList.add("collapsed");
+
+ // Update the icon to show collapsed state
+ const toggleButton = document.getElementById("toggle-features");
+ if (toggleButton) {
+ const icon = toggleButton.querySelector("i");
+ if (icon) icon.className = "fas fa-chevron-down";
+ }
+ } else {
+ // Keep expanded when no theme was found or using default
+ featuresList.classList.remove("collapsed");
+ if (actionsContainer) actionsContainer.classList.remove("collapsed");
+
+ // Update the icon to show expanded state
+ const toggleButton = document.getElementById("toggle-features");
+ if (toggleButton) {
+ const icon = toggleButton.querySelector("i");
+ if (icon) icon.className = "fas fa-chevron-up";
+ }
+ }
+
// Disable the force styling toggle if we found a theme for this site
- if (currentSiteKey && currentSiteKey !== "example.com.css") {
+ if (hasSpecificTheme) {
// We found a specific theme for this site, no need for force styling
// Disable the skip/enable toggle
this.skipForceThemingSwitch.disabled = true;
@@ -636,4 +673,27 @@ new (class ExtensionPopup {
url: "https://addons.mozilla.org/en-US/firefox/addon/zen-internet/versions/",
});
}
+
+ // Toggle features section visibility
+ toggleFeatures() {
+ const featuresList = document.getElementById("current-site-toggles");
+ const actionsContainer = document.getElementById("current-site-actions");
+ const toggleButton = document.getElementById("toggle-features");
+
+ featuresList.classList.toggle("collapsed");
+ if (actionsContainer) {
+ actionsContainer.classList.toggle(
+ "collapsed",
+ featuresList.classList.contains("collapsed")
+ );
+ }
+
+ // Update the icon
+ const icon = toggleButton.querySelector("i");
+ if (featuresList.classList.contains("collapsed")) {
+ icon.className = "fas fa-chevron-down";
+ } else {
+ icon.className = "fas fa-chevron-up";
+ }
+ }
})();
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-12 14:01:29 +0000