diff options
Diffstat (limited to 'data-viewer')
| -rw-r--r-- | data-viewer/data-viewer.css | 87 | ||||
| -rw-r--r-- | data-viewer/data-viewer.js | 186 |
2 files changed, 229 insertions, 44 deletions
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css index fd5c3e7..508d34f 100644 --- a/data-viewer/data-viewer.css +++ b/data-viewer/data-viewer.css @@ -346,18 +346,7 @@ body { /* Clear list button styling */ .clear-list-button { - margin-top: 8px; - margin-bottom: 16px; - background-color: var(--secondary-bg); - border-color: var(--border-color); - font-size: 12px; - padding: 6px 12px; -} - -.clear-list-button:hover { - background-color: rgba(220, 53, 69, 0.1); - border-color: var(--danger-color); - color: var(--danger-color); + margin-bottom: 20px; } /* Null and object value styling */ @@ -446,3 +435,77 @@ body { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } + +/* Styling for the website lists section */ +.tables-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 16px; +} + +.list-title-section { + margin-bottom: 16px; +} + +.list-title-section h3 { + margin-top: 0; + margin-bottom: 12px; + color: var(--text-primary); + font-size: 18px; +} + +.list-section { + background-color: var(--bg-color); + border-radius: var(--radius-sm); + padding: 16px; +} + +.list-section h4 { + margin-top: 0; + margin-bottom: 8px; + color: var(--accent-color); +} + +.list-description { + margin-top: 0; + margin-bottom: 16px; + font-size: 13px; + color: var(--text-secondary); + font-style: italic; +} + +.remove-site-button { + background-color: var(--danger-color); + color: white; + border: none; + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition); +} + +.remove-site-button:hover { + background-color: var(--danger-hover-color); + transform: scale(1.1); +} + +.remove-site-button i { + font-size: 12px; +} + +.clear-list-button { + margin-bottom: 20px; +} + +/* Responsive handling for mobile */ +@media (max-width: 768px) { + .tables-container { + grid-template-columns: 1fr; + gap: 16px; + } +} diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js index f6dd566..c006f09 100644 --- a/data-viewer/data-viewer.js +++ b/data-viewer/data-viewer.js @@ -1,6 +1,7 @@ document.addEventListener("DOMContentLoaded", function () { const BROWSER_STORAGE_KEY = "transparentZenSettings"; const SKIP_FORCE_THEMING_KEY = "skipForceThemingList"; + const SKIP_THEMING_KEY = "skipThemingList"; const globalSettingsElement = document.getElementById("global-settings-data"); const skipListElement = document.getElementById("skip-list-data"); @@ -100,9 +101,15 @@ document.addEventListener("DOMContentLoaded", function () { disableTransparencyToggle.checked = globalSettings.disableTransparency || false; - // Display skip/enable list - const skipList = data[SKIP_FORCE_THEMING_KEY] || []; - displaySkipList(skipList, globalSettings.whitelistMode); + // Display skip/enable lists for both forced and non-forced websites + const skipForceList = data[SKIP_FORCE_THEMING_KEY] || []; + const skipThemingList = data[SKIP_THEMING_KEY] || []; + displayCombinedSkipLists( + skipForceList, + skipThemingList, + globalSettings.whitelistMode, + globalSettings.whitelistStyleMode + ); // Display combined websites and settings displayCombinedWebsiteData(data); @@ -155,46 +162,117 @@ document.addEventListener("DOMContentLoaded", function () { globalSettingsElement.appendChild(table); } - function displaySkipList(skipList, isWhitelistMode) { + function displayCombinedSkipLists( + skipForceList, + skipThemingList, + isWhitelistMode, + isWhitelistStyleMode + ) { skipListElement.innerHTML = ""; - const modeType = isWhitelistMode ? "Whitelist" : "Blacklist"; - const actionType = isWhitelistMode ? "Enabled" : "Skipped"; + // Create title and description section + const titleSection = document.createElement("div"); + titleSection.className = "list-title-section"; - const modeInfo = document.createElement("div"); - modeInfo.classList.add("mode-info"); - modeInfo.innerHTML = `<strong>Current Mode:</strong> ${modeType} Mode - ${ - isWhitelistMode - ? "Only apply forced styling to sites in the list" - : "Apply forced styling to all sites except those in the list" - }`; - skipListElement.appendChild(modeInfo); + const forceModeName = isWhitelistMode ? "Whitelist" : "Blacklist"; + const styleModeName = isWhitelistStyleMode ? "Whitelist" : "Blacklist"; - // Add Clear List button - if (skipList.length > 0) { + titleSection.innerHTML = ` + <h3>Website Lists Overview</h3> + <div class="mode-info"> + <div><strong>Force Styling Mode:</strong> ${forceModeName} Mode (${ + isWhitelistMode + ? "only apply to sites in the list" + : "apply to all except sites in the list" + })</div> + <div><strong>General Styling Mode:</strong> ${styleModeName} Mode (${ + isWhitelistStyleMode + ? "only apply to sites in the list" + : "apply to all except sites in the list" + })</div> + </div> + `; + + skipListElement.appendChild(titleSection); + + // Add Clear Both Lists button + if (skipForceList.length > 0 || skipThemingList.length > 0) { const clearListButton = document.createElement("button"); clearListButton.classList.add( "action-button", "secondary", "clear-list-button" ); - clearListButton.innerHTML = '<i class="fas fa-trash"></i> Clear List'; + clearListButton.innerHTML = + '<i class="fas fa-trash"></i> Clear All Website Lists'; clearListButton.addEventListener("click", function () { if ( confirm( - `Are you sure you want to clear the entire ${modeType} list? This will affect how styling is applied to websites.` + `Are you sure you want to clear ALL website lists? This will reset both Forced and Regular styling lists and may affect how styling is applied to websites.` ) ) { - clearSkipList(); + clearAllSkipLists(); } }); skipListElement.appendChild(clearListButton); } - if (skipList.length === 0) { - skipListElement.innerHTML += - '<div class="no-data">No websites in the list.</div>'; - return; + // Create container for the two tables + const tablesContainer = document.createElement("div"); + tablesContainer.className = "tables-container"; + + // Create force styling list + const forceListSection = createSingleListSection( + skipForceList, + isWhitelistMode, + "Force Styling List", + isWhitelistMode + ? "Sites where forced styling IS applied" + : "Sites where forced styling is NOT applied", + SKIP_FORCE_THEMING_KEY + ); + + // Create regular styling list + const regularListSection = createSingleListSection( + skipThemingList, + isWhitelistStyleMode, + "Regular Styling List", + isWhitelistStyleMode + ? "Sites where regular styling IS applied" + : "Sites where regular styling is NOT applied", + SKIP_THEMING_KEY + ); + + tablesContainer.appendChild(forceListSection); + tablesContainer.appendChild(regularListSection); + skipListElement.appendChild(tablesContainer); + } + + function createSingleListSection( + list, + isWhitelistMode, + title, + description, + storageKey + ) { + const section = document.createElement("div"); + section.className = "list-section"; + + const sectionTitle = document.createElement("h4"); + sectionTitle.textContent = title; + section.appendChild(sectionTitle); + + const sectionDescription = document.createElement("p"); + sectionDescription.className = "list-description"; + sectionDescription.textContent = description; + section.appendChild(sectionDescription); + + if (list.length === 0) { + const emptyMessage = document.createElement("div"); + emptyMessage.className = "no-data"; + emptyMessage.textContent = "No websites in this list"; + section.appendChild(emptyMessage); + return section; } const table = document.createElement("table"); @@ -203,32 +281,76 @@ document.addEventListener("DOMContentLoaded", function () { // Table header const thead = document.createElement("thead"); const headerRow = document.createElement("tr"); - headerRow.innerHTML = `<th>${actionType} Websites</th>`; + headerRow.innerHTML = `<th>Website</th><th>Action</th>`; thead.appendChild(headerRow); table.appendChild(thead); // Table body const tbody = document.createElement("tbody"); - for (const site of skipList) { + for (const site of list) { const row = document.createElement("tr"); - row.innerHTML = `<td>${site}</td>`; + + // Website column + const siteCell = document.createElement("td"); + siteCell.textContent = site; + row.appendChild(siteCell); + + // Action column + const actionCell = document.createElement("td"); + const removeButton = document.createElement("button"); + removeButton.className = "remove-site-button"; + removeButton.innerHTML = '<i class="fas fa-times"></i>'; + removeButton.title = "Remove from list"; + removeButton.addEventListener("click", function () { + removeSiteFromList(site, storageKey); + }); + actionCell.appendChild(removeButton); + row.appendChild(actionCell); + tbody.appendChild(row); } table.appendChild(tbody); - skipListElement.appendChild(table); + section.appendChild(table); + return section; + } + + async function removeSiteFromList(site, listKey) { + try { + // Get current list + const data = await browser.storage.local.get(listKey); + const list = data[listKey] || []; + + // Remove the site + const newList = list.filter((item) => item !== site); + + // Save updated list + await browser.storage.local.set({ [listKey]: newList }); + + // Refresh the display + loadAllData(); + + console.log(`Removed ${site} from ${listKey}`); + } catch (error) { + console.error(`Error removing site from list: ${error}`); + alert(`An error occurred: ${error.message}`); + } } - async function clearSkipList() { + async function clearAllSkipLists() { try { - await browser.storage.local.remove(SKIP_FORCE_THEMING_KEY); - alert(`${SKIP_FORCE_THEMING_KEY} has been cleared successfully.`); + // Clear both lists at once + await browser.storage.local.remove([ + SKIP_FORCE_THEMING_KEY, + SKIP_THEMING_KEY, + ]); + alert("All website lists have been cleared successfully."); loadAllData(); // Reload data to reflect changes } catch (error) { - console.error("Error clearing skip list:", error); + console.error("Error clearing lists:", error); alert( - "An error occurred while trying to clear the list: " + error.message + "An error occurred while trying to clear the lists: " + error.message ); } } |