diff options
Diffstat (limited to 'popup')
| -rw-r--r-- | popup/popup.css | 104 | ||||
| -rw-r--r-- | popup/popup.html | 105 | ||||
| -rw-r--r-- | popup/popup.js | 346 |
3 files changed, 484 insertions, 71 deletions
diff --git a/popup/popup.css b/popup/popup.css index f1d23e4..78d9434 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;
@@ -85,11 +85,59 @@ body { text-decoration: underline;
}
-/* What's New Button */
+/* Header buttons container */
+.header-buttons {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+/* Icon button styles */
+.icon-button {
+ background: none;
+ border: none;
+ color: white;
+ font-size: 18px;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 50%;
+ transition: all 0.2s ease;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.icon-button:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ transform: scale(1.1);
+}
+
+.icon-button::after {
+ content: attr(title);
+ position: absolute;
+ bottom: -25px;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ padding: 3px 8px;
+ border-radius: 4px;
+ font-size: 10px;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.2s ease, visibility 0.2s ease;
+ pointer-events: none;
+ white-space: nowrap;
+}
+
+.icon-button:hover::after {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* What's New Button - make it use icon-button styles */
.whats-new-button {
- /* position: absolute;
- top: 16px;
- right: 16px; */
background: none;
border: none;
color: white;
@@ -110,6 +158,25 @@ body { transform: scale(1.1);
}
+/* Add glow pulse animation for the What's New button emoji */
+@keyframes glowPulse {
+ 0% {
+ text-shadow: 0 0 0 rgba(255, 255, 255, 0);
+ }
+ 50% {
+ text-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
+ 0 0 12px rgba(249, 135, 100, 0.6);
+ }
+ 100% {
+ text-shadow: 0 0 0 rgba(255, 255, 255, 0);
+ }
+}
+
+/* Apply the animation to the What's New button */
+.whats-new-button {
+ animation: glowPulse 2s ease-in-out infinite;
+}
+
.whats-new-button::after {
content: "What's New";
position: absolute;
@@ -145,7 +212,7 @@ body { display: flex;
align-items: center;
gap: 12px;
- margin-bottom: 8px;
+ margin-bottom: 2px;
}
/* Current site toggle styling */
@@ -502,6 +569,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 +626,21 @@ 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;
+}
+
+/* Update the reload button styles to fit in the features container */
+.features-container #reload {
+ margin-top: 12px;
+ width: 100%;
+}
diff --git a/popup/popup.html b/popup/popup.html index 9d8d042..d16cb88 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -14,7 +14,7 @@ <header class="app-header"> <div id="header-container"> <div class="logo-container"> - <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img"> + <img src="../assets/images/logo.png" alt="ZenInternet Logo" class="logo-img"> <h1 class="app-title">Zen Internet</h1> </div> <div class="miniheader"> @@ -22,30 +22,53 @@ <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div> </div> </div> - <button id="whats-new" class="whats-new-button" title="What's New">✨</button> + <div class="header-buttons"> + <button id="how-to-use" class="icon-button" title="How to use?">🤔</button> + <button id="whats-new" class="whats-new-button" title="What's New">✨</button> + </div> </header> <main class="app-content"> - <div class="toggle-container features-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 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">Global Styling</span> + </div> + <div class="toggle-container"> + <label class="toggle-switch"> + <input type="checkbox" id="whitelist-style-mode"> + <span class="slider round"></span> + </label> + <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span> + </div> + <!-- Moved reload button here --> + <button id="reload" class="action-button secondary"> + Reload to apply <i class="fas fa-sync-alt"></i> + </button> </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 --> - <button id="reload" class="action-button secondary"> - Reload to apply <i class="fas fa-sync-alt"></i> - </button> + <!-- Reload button was here, now moved above --> </div> </div> @@ -63,27 +86,41 @@ <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 class="toggle-container"> + <label class="toggle-switch"> + <input type="checkbox" id="fallback-background"> + <span class="slider round"></span> + </label> + <span class="toggle-label">Fallback Background</span> + </div> </div> </div> diff --git a/popup/popup.js b/popup/popup.js index c353182..4515856 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,5 +1,34 @@ let logging = false; let SKIP_FORCE_THEMING_KEY = "skipForceThemingList"; +let SKIP_THEMING_KEY = "skipThemingList"; +let FALLBACK_BACKGROUND_KEY = "fallbackBackgroundList"; + +// Default settings to use when values are missing +const DEFAULT_SETTINGS = { + enableStyling: true, // Enable styling globally + autoUpdate: true, // Auto-update styles + forceStyling: false, // Force styling on sites without themes + whitelistMode: false, // Use blacklist mode by default for force styling + whitelistStyleMode: false, // Use blacklist mode by default for regular styling + disableTransparency: false, // Don't disable transparency by default + disableHover: false, // Don't disable hover effects by default + disableFooter: false, // Don't disable footers by default + fallbackBackgroundList: [], // Empty array for fallback background sites +}; + +// Helper function to ensure all required settings exist +function ensureDefaultSettings(settings = {}) { + const result = { ...settings }; + + // Apply default values for any missing settings + for (const [key, defaultValue] of Object.entries(DEFAULT_SETTINGS)) { + if (result[key] === undefined) { + result[key] = defaultValue; + } + } + + return result; +} // Helper function to normalize hostnames by removing www. prefix function normalizeHostname(hostname) { @@ -11,6 +40,13 @@ new (class ExtensionPopup { globalSettings = {}; siteSettings = {}; enableStylingSwitch = document.getElementById("enable-styling"); + whitelistStylingModeSwitch = document.getElementById("whitelist-style-mode"); + whitelistStylingModeLabel = document.getElementById( + "whitelist-style-mode-label" + ); + skipThemingSwitch = document.getElementById("skip-theming"); + siteStyleToggleLabel = document.getElementById("site-style-toggle-label"); + skipThemingList = []; refetchCSSButton = document.getElementById("refetch-css"); websitesList = document.getElementById("websites-list"); currentSiteFeatures = document.getElementById("current-site-toggles"); @@ -27,15 +63,22 @@ new (class ExtensionPopup { reloadButton = document.getElementById("reload"); modeIndicator = document.getElementById("mode-indicator"); whatsNewButton = document.getElementById("whats-new"); + howToUseButton = document.getElementById("how-to-use"); + fallbackBackgroundSwitch = document.getElementById("fallback-background"); + fallbackBackgroundList = []; constructor() { if (logging) console.log("Initializing ExtensionPopup"); // Load settings and initialize the popup this.loadSettings().then(() => { this.loadSkipForceThemingList().then(() => { - this.getCurrentTabInfo().then(() => { - this.restoreSettings(); - this.bindEvents(); + this.loadSkipThemingList().then(() => { + this.loadFallbackBackgroundList().then(() => { + this.getCurrentTabInfo().then(() => { + this.restoreSettings(); + this.bindEvents(); + }); + }); }); }); }); @@ -61,14 +104,27 @@ 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) ); + this.whitelistStylingModeSwitch.addEventListener( + "change", + this.handleWhitelistStyleModeChange.bind(this) + ); + // Add event listener for the "What's New" button this.whatsNewButton.addEventListener("click", this.openWhatsNew.bind(this)); + // Add event listener for the "How to use?" button + this.howToUseButton.addEventListener("click", this.openHowToUse.bind(this)); + // Add event listener for the data viewer button document.getElementById("view-data")?.addEventListener("click", () => { browser.tabs.create({ @@ -103,6 +159,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); @@ -128,6 +192,14 @@ new (class ExtensionPopup { this.saveSkipForceThemingList(); }); + this.skipThemingSwitch.addEventListener("change", () => { + this.saveSkipThemingList(); + }); + + this.fallbackBackgroundSwitch.addEventListener("change", () => { + this.saveFallbackBackgroundList(); + }); + this.reloadButton.addEventListener("click", this.reloadPage.bind(this)); } @@ -140,15 +212,25 @@ new (class ExtensionPopup { this.forceStylingSwitch.checked = this.globalSettings.forceStyling ?? false; this.whitelistModeSwitch.checked = this.globalSettings.whitelistMode ?? false; + this.whitelistStylingModeSwitch.checked = + this.globalSettings.whitelistStyleMode ?? false; this.updateModeLabels(); // In whitelist mode, checked means "include this site" // In blacklist mode, checked means "skip this site" - const isInList = this.skipForceThemingList.includes( - this.currentSiteHostname + this.skipForceThemingSwitch.checked = this.skipForceThemingList.includes( + normalizeHostname(this.currentSiteHostname) + ); + + this.skipThemingSwitch.checked = this.skipThemingList.includes( + normalizeHostname(this.currentSiteHostname) ); - this.skipForceThemingSwitch.checked = isInList; + + this.fallbackBackgroundSwitch.checked = + this.fallbackBackgroundList.includes( + normalizeHostname(this.currentSiteHostname) + ); this.loadCurrentSiteFeatures(); } @@ -159,12 +241,22 @@ new (class ExtensionPopup { const globalData = await browser.storage.local.get( this.BROWSER_STORAGE_KEY ); - this.globalSettings = globalData[this.BROWSER_STORAGE_KEY] || { - enableStyling: true, - autoUpdate: false, - lastFetchedTime: null, - forceStyling: false, - }; + + // Apply defaults for any missing settings + this.globalSettings = ensureDefaultSettings( + globalData[this.BROWSER_STORAGE_KEY] || {} + ); + + // Save back any applied defaults + if ( + JSON.stringify(this.globalSettings) !== + JSON.stringify(globalData[this.BROWSER_STORAGE_KEY]) + ) { + await browser.storage.local.set({ + [this.BROWSER_STORAGE_KEY]: this.globalSettings, + }); + if (logging) console.log("Applied missing default settings"); + } // Load site-specific settings if on a specific site if (this.currentSiteHostname) { @@ -204,6 +296,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; browser.storage.local .set({ @@ -248,15 +342,47 @@ new (class ExtensionPopup { async loadSkipForceThemingList() { const data = await browser.storage.local.get(SKIP_FORCE_THEMING_KEY); this.skipForceThemingList = data[SKIP_FORCE_THEMING_KEY] || []; + + // Initialize with empty array if missing + if (!data[SKIP_FORCE_THEMING_KEY]) { + await browser.storage.local.set({ [SKIP_FORCE_THEMING_KEY]: [] }); + if (logging) console.log("Initialized empty skip force theming list"); + } + } + + async loadSkipThemingList() { + const data = await browser.storage.local.get(SKIP_THEMING_KEY); + this.skipThemingList = data[SKIP_THEMING_KEY] || []; + + // Initialize with empty array if missing + if (!data[SKIP_THEMING_KEY]) { + await browser.storage.local.set({ [SKIP_THEMING_KEY]: [] }); + if (logging) console.log("Initialized empty skip theming list"); + } + } + + async loadFallbackBackgroundList() { + const data = await browser.storage.local.get(FALLBACK_BACKGROUND_KEY); + this.fallbackBackgroundList = data[FALLBACK_BACKGROUND_KEY] || []; + + // Initialize with empty array if missing + if (!data[FALLBACK_BACKGROUND_KEY]) { + await browser.storage.local.set({ [FALLBACK_BACKGROUND_KEY]: [] }); + if (logging) console.log("Initialized empty fallback background list"); + } } saveSkipForceThemingList() { const isChecked = this.skipForceThemingSwitch.checked; - const index = this.skipForceThemingList.indexOf(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(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); @@ -271,6 +397,54 @@ new (class ExtensionPopup { }); } + saveSkipThemingList() { + const isChecked = this.skipThemingSwitch.checked; + const index = this.skipThemingList.indexOf( + normalizeHostname(this.currentSiteHostname) + ); + + if (isChecked && index === -1) { + // Add to the list (whitelist: include, blacklist: skip) + this.skipThemingList.push(normalizeHostname(this.currentSiteHostname)); + } else if (!isChecked && index !== -1) { + // Remove from the list (whitelist: exclude, blacklist: include) + this.skipThemingList.splice(index, 1); + } + + browser.storage.local + .set({ + [SKIP_THEMING_KEY]: this.skipThemingList, + }) + .then(() => { + this.updateActiveTabStyling(); + }); + } + + saveFallbackBackgroundList() { + const isChecked = this.fallbackBackgroundSwitch.checked; + const index = this.fallbackBackgroundList.indexOf( + normalizeHostname(this.currentSiteHostname) + ); + + if (isChecked && index === -1) { + // Add to the list + this.fallbackBackgroundList.push( + normalizeHostname(this.currentSiteHostname) + ); + } else if (!isChecked && index !== -1) { + // Remove from the list + this.fallbackBackgroundList.splice(index, 1); + } + + browser.storage.local + .set({ + [FALLBACK_BACKGROUND_KEY]: this.fallbackBackgroundList, + }) + .then(() => { + this.updateActiveTabStyling(); + }); + } + async loadCurrentSiteFeatures() { if (logging) console.log("loadCurrentSiteFeatures called"); try { @@ -335,6 +509,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 @@ -412,6 +606,8 @@ new (class ExtensionPopup { // Check if transparency is globally disabled const isTransparencyDisabled = this.globalSettings.disableTransparency === true; + const isHoverDisabled = this.globalSettings.disableHover === true; + const isFooterDisabled = this.globalSettings.disableFooter === true; for (const [feature, css] of Object.entries(features)) { const displayFeatureName = feature.includes("-") @@ -422,7 +618,13 @@ new (class ExtensionPopup { const isTransparencyFeature = feature .toLowerCase() .includes("transparency"); - const isOverridden = isTransparencyDisabled && isTransparencyFeature; + const isHoverFeature = feature.toLowerCase().includes("hover"); + const isFooterFeature = feature.toLowerCase().includes("footer"); + + const isOverridden = + (isTransparencyDisabled && isTransparencyFeature) || + (isHoverDisabled && isHoverFeature) || + (isFooterDisabled && isFooterFeature); const featureToggle = document.createElement("div"); featureToggle.className = "feature-toggle"; @@ -444,7 +646,7 @@ new (class ExtensionPopup { featureToggle.innerHTML = toggleHTML; - // If this is a transparency feature and it's disabled globally, add a class + // If this feature is overridden by global settings, add a class if (isOverridden) { featureToggle.classList.add("overridden-feature"); } @@ -525,28 +727,73 @@ new (class ExtensionPopup { if (logging) console.log("refetchCSS called"); this.refetchCSSButton.textContent = "Fetching..."; try { - const response = await fetch( - "https://sameerasw.github.io/my-internet/styles.json", - { - headers: { - "Cache-Control": "no-cache", - }, - } + // Get the repository URL from storage or use the default one + const DEFAULT_REPOSITORY_URL = + "https://sameerasw.github.io/my-internet/styles.json"; + const repoUrlData = await browser.storage.local.get( + "stylesRepositoryUrl" ); - if (!response.ok) throw new Error("Failed to fetch styles.json"); + const repositoryUrl = + repoUrlData.stylesRepositoryUrl || DEFAULT_REPOSITORY_URL; + + console.log("Fetching styles from:", repositoryUrl); + + const response = await fetch(repositoryUrl, { + headers: { + "Cache-Control": "no-cache", + }, + }); + if (!response.ok) + throw new Error(`Failed to fetch styles (Status: ${response.status})`); const styles = await response.json(); await browser.storage.local.set({ styles }); - await browser.storage.local.set({ lastFetchedTime: Date.now() }); + + // Check if we need to initialize default settings + const settingsData = await browser.storage.local.get( + this.BROWSER_STORAGE_KEY + ); + if (!settingsData[this.BROWSER_STORAGE_KEY]) { + // Initialize default settings if none exist + const defaultSettings = { + enableStyling: true, + autoUpdate: true, + forceStyling: false, + whitelistMode: false, + whitelistStyleMode: false, + lastFetchedTime: Date.now(), + }; + + // Save default settings + await browser.storage.local.set({ + [this.BROWSER_STORAGE_KEY]: defaultSettings, + }); + console.info("Initialized default settings during first fetch"); + + // Update our internal global settings + this.globalSettings = defaultSettings; + + // Update UI to reflect these defaults + this.enableStylingSwitch.checked = true; + this.autoUpdateSwitch.checked = false; + this.forceStylingSwitch.checked = false; + this.whitelistModeSwitch.checked = false; + this.whitelistStylingModeSwitch.checked = false; + + // Update labels + this.updateModeLabels(); + } else { + // Just update the lastFetchedTime + await browser.storage.local.set({ lastFetchedTime: Date.now() }); + } this.loadCurrentSiteFeatures(); - // this.loadWebsitesList(); this.updateActiveTabStyling(); this.refetchCSSButton.textContent = "Done!"; setTimeout(() => { this.refetchCSSButton.textContent = "Refetch latest styles"; }, 2000); - console.info("All styles refetched and updated from GitHub." + styles); + console.info(`All styles refetched and updated from ${repositoryUrl}`); this.displayLastFetchedTime(); } catch (error) { this.refetchCSSButton.textContent = "Error!"; @@ -554,6 +801,7 @@ new (class ExtensionPopup { this.refetchCSSButton.textContent = "Refetch latest styles"; }, 2000); console.error("Error refetching styles:", error); + alert(`Error fetching styles: ${error.message}`); } } @@ -734,6 +982,7 @@ new (class ExtensionPopup { shouldApplyCSS(hostname) { if (logging) console.log("shouldApplyCSS called with", hostname); + // Use default if not explicitly set return this.globalSettings.enableStyling !== false; } @@ -755,10 +1004,11 @@ new (class ExtensionPopup { displayLastFetchedTime() { if (logging) console.log("displayLastFetchedTime called"); - browser.storage.local.get("lastFetchedTime").then((result) => { - if (result.lastFetchedTime) { + browser.storage.local.get(this.BROWSER_STORAGE_KEY).then((result) => { + const settings = result[this.BROWSER_STORAGE_KEY] || {}; + if (settings.lastFetchedTime) { this.lastFetchedTime.textContent = `Last fetched: ${new Date( - result.lastFetchedTime + settings.lastFetchedTime ).toLocaleString()}`; } }); @@ -786,6 +1036,11 @@ new (class ExtensionPopup { this.saveSettings(); } + handleWhitelistStyleModeChange() { + this.updateModeLabels(); + this.saveSettings(); + } + updateModeIndicator() { if (this.whitelistModeSwitch.checked) { this.modeIndicator.textContent = @@ -813,6 +1068,14 @@ new (class ExtensionPopup { this.whitelistModeLabel.textContent = "Blacklist Mode"; this.siteToggleLabel.textContent = "Skip Forcing for this Site"; } + + if (this.whitelistStylingModeSwitch.checked) { + this.whitelistStylingModeLabel.textContent = "Whitelist Mode"; + this.siteStyleToggleLabel.textContent = "Enable for this Site"; + } else { + this.whitelistStylingModeLabel.textContent = "Blacklist Mode"; + this.siteStyleToggleLabel.textContent = "Skip Styling for this Site"; + } } // Open the What's New page @@ -822,6 +1085,13 @@ new (class ExtensionPopup { }); } + // Open the How to Use guide + openHowToUse() { + browser.tabs.create({ + url: "https://www.sameerasw.com/zen", + }); + } + // Toggle features section visibility toggleFeatures() { const featuresList = document.getElementById("current-site-toggles"); @@ -844,4 +1114,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"; + } + } })(); |