renamed data viewer to advanced settings and made teh features list collapsible.

author: sameerasw <[email protected]> 2025-04-23 19:29:02 +0530
committer: sameerasw <[email protected]> 2025-04-23 19:29:02 +0530
commit: e7fddf621a59292ebc2440666a109e7d4aa0e0ea (patch)
tree: 5d750dc350a832b13d5f27d6542ef09c8387b630
parent: aa456d8c2fa6c22e77a4454ef5d08d3502251611 (diff)
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";
+    }
+  }
 })();
author	sameerasw <[email protected]>	2025-04-23 19:29:02 +0530
committer	sameerasw <[email protected]>	2025-04-23 19:29:02 +0530
commit	e7fddf621a59292ebc2440666a109e7d4aa0e0ea (patch)
tree	5d750dc350a832b13d5f27d6542ef09c8387b630
parent	aa456d8c2fa6c22e77a4454ef5d08d3502251611 (diff)