summaryrefslogtreecommitdiff
path: root/data-viewer
diff options
context:
space:
mode:
Diffstat (limited to 'data-viewer')
-rw-r--r--data-viewer/data-viewer.css87
-rw-r--r--data-viewer/data-viewer.js186
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
);
}
}