summaryrefslogtreecommitdiff
path: root/popup
diff options
context:
space:
mode:
Diffstat (limited to 'popup')
-rw-r--r--popup/popup.css21
-rw-r--r--popup/popup.html78
-rw-r--r--popup/popup.js70
3 files changed, 127 insertions, 42 deletions
diff --git a/popup/popup.css b/popup/popup.css
index f1d23e4..3ffd5cb 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -60,14 +60,14 @@ body {
font-size: 30px;
}
-#header-container{
+#header-container {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 100%;
}
-.miniheader{
+.miniheader {
margin-top: 2px;
font-size: 11px;
display: flex;
@@ -502,6 +502,11 @@ input:checked + .slider:before {
margin-bottom: 16px;
}
+/* Make forcing container collapsible */
+.forcing-container.collapsed {
+ display: none;
+}
+
.warning {
color: var(--warning-color);
margin-top: 8px;
@@ -554,3 +559,15 @@ input:checked + .slider:before {
.toggle-switch.disabled input:checked + .slider {
background-color: rgba(249, 135, 100, 0.5);
}
+
+.site-domain {
+ color: var(--accent-color);
+ font-weight: 600;
+ max-width: 180px;
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: bottom;
+ margin-right: 4px;
+}
diff --git a/popup/popup.html b/popup/popup.html
index c4d96e4..1ab05c3 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -27,35 +27,38 @@
<main class="app-content">
<div class="features-container">
- <div class="toggle-container">
- <label class="toggle-switch">
- <input type="checkbox" id="enable-styling">
- <span class="slider round"></span>
- </label>
- <span class="toggle-label">Enable Styling</span>
- </div>
<div class="toggle-container">
<label class="toggle-switch">
- <input type="checkbox" id="whitelist-style-mode">
+ <input type="checkbox" id="enable-styling">
<span class="slider round"></span>
</label>
- <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
+ <span class="toggle-label">Global Styling</span>
</div>
<div class="toggle-container">
<label class="toggle-switch">
- <input type="checkbox" id="skip-theming">
+ <input type="checkbox" id="whitelist-style-mode">
<span class="slider round"></span>
</label>
- <span id="site-style-toggle-label" class="toggle-label">Skip Styling for this Site</span>
+ <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
</div>
</div>
<!-- Current Site Features Section -->
<div id="current-site-features" class="features-container">
<button class="collapsible-button" id="toggle-features">
- <span>Current Site Features</span>
+ <span id="current-site-label">
+ <span id="site-domain" class="site-domain"></span>
+ <span>Features</span>
+ </span>
<i class="fas fa-chevron-down"></i>
</button>
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="skip-theming">
+ <span class="slider round"></span>
+ </label>
+ <span id="site-style-toggle-label" class="toggle-label">Skip Styling for this Site</span>
+ </div>
<div id="current-site-toggles" class="features-list collapsed"></div>
<div class="actions" id="current-site-actions">
<!-- reload botton -->
@@ -79,27 +82,34 @@
<span class="toggle-label">Auto Update Styles</span>
</div>
<div id="last-fetched-time" class="last-fetched-time"></div>
- <div class="forcing-container">
- <div class="toggle-container">
- <label class="toggle-switch">
- <input type="checkbox" id="force-styling">
- <span class="slider round"></span>
- </label>
- <span class="toggle-label">Force Styling</span>
- </div>
- <div class="toggle-container">
- <label class="toggle-switch">
- <input type="checkbox" id="whitelist-mode">
- <span class="slider round"></span>
- </label>
- <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
- </div>
- <div class="toggle-container">
- <label class="toggle-switch">
- <input type="checkbox" id="skip-force-theming">
- <span class="slider round"></span>
- </label>
- <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+
+ <div class="features-container">
+ <button class="collapsible-button" id="toggle-forcing">
+ <span>Force Styling Settings</span>
+ <i class="fas fa-chevron-down"></i>
+ </button>
+ <div id="forcing-content" class="forcing-container collapsed">
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="force-styling">
+ <span class="slider round"></span>
+ </label>
+ <span class="toggle-label">Force Styling</span>
+ </div>
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="whitelist-mode">
+ <span class="slider round"></span>
+ </label>
+ <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
+ </div>
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="skip-force-theming">
+ <span class="slider round"></span>
+ </label>
+ <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+ </div>
</div>
</div>
@@ -126,4 +136,4 @@
<script src="popup.js"></script>
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
index 9c546e8..c86a882 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -13,7 +13,9 @@ new (class ExtensionPopup {
siteSettings = {};
enableStylingSwitch = document.getElementById("enable-styling");
whitelistStylingModeSwitch = document.getElementById("whitelist-style-mode");
- whitelistStylingModeLabel = document.getElementById("whitelist-style-mode-label");
+ whitelistStylingModeLabel = document.getElementById(
+ "whitelist-style-mode-label"
+ );
skipThemingSwitch = document.getElementById("skip-theming");
siteStyleToggleLabel = document.getElementById("site-style-toggle-label");
skipThemingList = [];
@@ -69,6 +71,11 @@ new (class ExtensionPopup {
.getElementById("toggle-features")
?.addEventListener("click", this.toggleFeatures.bind(this));
+ // Add toggle forcing button event listener
+ document
+ .getElementById("toggle-forcing")
+ ?.addEventListener("click", this.toggleForcing.bind(this));
+
this.whitelistModeSwitch.addEventListener(
"change",
this.handleWhitelistModeChange.bind(this)
@@ -116,6 +123,14 @@ new (class ExtensionPopup {
this.normalizedCurrentSiteHostname,
")"
);
+
+ // Update the site label with current hostname (without www.)
+ const siteDomainElement = document.getElementById("site-domain");
+ if (siteDomainElement) {
+ const displayDomain = normalizeHostname(this.currentSiteHostname);
+ siteDomainElement.textContent = displayDomain;
+ siteDomainElement.title = displayDomain; // Add full domain as tooltip for long domains
+ }
}
} catch (error) {
console.error("Error getting current tab info:", error);
@@ -163,7 +178,7 @@ new (class ExtensionPopup {
this.updateModeLabels();
// In whitelist mode, checked means "include this site"
- // In blacklist mode, checked means "skip this site"
+ // In blacklist mode, checked means "skip this site"
this.skipForceThemingSwitch.checked = this.skipForceThemingList.includes(
normalizeHostname(this.currentSiteHostname)
);
@@ -226,7 +241,8 @@ new (class ExtensionPopup {
this.globalSettings.autoUpdate = this.autoUpdateSwitch.checked;
this.globalSettings.forceStyling = this.forceStylingSwitch.checked;
this.globalSettings.whitelistMode = this.whitelistModeSwitch.checked;
- this.globalSettings.whitelistStyleMode = this.whitelistStylingModeSwitch.checked;
+ this.globalSettings.whitelistStyleMode =
+ this.whitelistStylingModeSwitch.checked;
browser.storage.local
.set({
@@ -280,11 +296,15 @@ new (class ExtensionPopup {
saveSkipForceThemingList() {
const isChecked = this.skipForceThemingSwitch.checked;
- const index = this.skipForceThemingList.indexOf(normalizeHostname(this.currentSiteHostname));
+ const index = this.skipForceThemingList.indexOf(
+ normalizeHostname(this.currentSiteHostname)
+ );
if (isChecked && index === -1) {
// Add to the list (whitelist: include, blacklist: skip)
- this.skipForceThemingList.push(normalizeHostname(this.currentSiteHostname));
+ this.skipForceThemingList.push(
+ normalizeHostname(this.currentSiteHostname)
+ );
} else if (!isChecked && index !== -1) {
// Remove from the list (whitelist: exclude, blacklist: include)
this.skipForceThemingList.splice(index, 1);
@@ -301,7 +321,9 @@ new (class ExtensionPopup {
saveSkipThemingList() {
const isChecked = this.skipThemingSwitch.checked;
- const index = this.skipThemingList.indexOf(normalizeHostname(this.currentSiteHostname));
+ const index = this.skipThemingList.indexOf(
+ normalizeHostname(this.currentSiteHostname)
+ );
if (isChecked && index === -1) {
// Add to the list (whitelist: include, blacklist: skip)
@@ -384,6 +406,26 @@ new (class ExtensionPopup {
}
}
+ // Set the forcing section's initial collapsed state
+ const forcingContent = document.getElementById("forcing-content");
+ const toggleForcingButton = document.getElementById("toggle-forcing");
+
+ if (hasSpecificTheme) {
+ // We have a specific theme, collapse the forcing section
+ forcingContent.classList.add("collapsed");
+ if (toggleForcingButton) {
+ const icon = toggleForcingButton.querySelector("i");
+ if (icon) icon.className = "fas fa-chevron-down";
+ }
+ } else {
+ // No specific theme found, expand the forcing section
+ forcingContent.classList.remove("collapsed");
+ if (toggleForcingButton) {
+ const icon = toggleForcingButton.querySelector("i");
+ if (icon) icon.className = "fas fa-chevron-up";
+ }
+ }
+
// Disable the force styling toggle if we found a theme for this site
if (hasSpecificTheme) {
// We found a specific theme for this site, no need for force styling
@@ -906,4 +948,20 @@ new (class ExtensionPopup {
icon.className = "fas fa-chevron-up";
}
}
+
+ // Toggle forcing section visibility
+ toggleForcing() {
+ const forcingContent = document.getElementById("forcing-content");
+ const toggleButton = document.getElementById("toggle-forcing");
+
+ forcingContent.classList.toggle("collapsed");
+
+ // Update the icon
+ const icon = toggleButton.querySelector("i");
+ if (forcingContent.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-07-12 05:47:32 +0000