From 59c75cdbaaf01ceaf34ef4e6813b3d277be7340b Mon Sep 17 00:00:00 2001 From: kkapsner Date: Sun, 22 Dec 2024 00:02:59 +0100 Subject: [PATCH] Improve whitelist inspection Fixes #623 --- _locales/en/messages.json | 2 +- options/whitelist.css | 20 +++++++ options/whitelist.js | 119 +++++++++++++++++++++++-------------- themes/colorful/layout.css | 1 + themes/dark/layout.css | 1 + themes/default/layout.css | 1 + themes/light/layout.css | 1 + 7 files changed, 99 insertions(+), 46 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 89b3e10..a7ee8b4 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1675,7 +1675,7 @@ "description": "" }, "whitelist_inspection_description": { - "message": "Shows which API protections are active for a given site. If you remove a checkmark for an API this API will be not protected for the selected site.", + "message": "This shows which fingerprint protections are active for specified sites.\n\nUnchecked means that the site can use that particular function in an unaltered manner. This includes it could use it to (partially) fingerprint your browser.\nChecked means that CanvasBlocker provides a protection which makes it harder for the site to uniquely identifying you.", "description": "" }, "whitelist_all_apis": { diff --git a/options/whitelist.css b/options/whitelist.css index 172aa1f..8a33cea 100644 --- a/options/whitelist.css +++ b/options/whitelist.css @@ -1,3 +1,23 @@ .description { margin: 1em 0; +} + +.whitelist { + border-collapse: collapse; +} + +.whitelist tr.highlight { + background-color: var(--highlight-color); +} + +.whitelist th { + padding: 0.1em 0.4em; +} + +.whitelist td { + padding: 0.1em 0.4em; + border: 1px solid gray; +} +.whitelist .inputCell { + text-align: center; } \ No newline at end of file diff --git a/options/whitelist.js b/options/whitelist.js index 6bcffd5..244092a 100644 --- a/options/whitelist.js +++ b/options/whitelist.js @@ -20,7 +20,11 @@ const description = document.createElement("div"); description.className = "description"; - description.textContent = extension.getTranslation("whitelist_inspection_description"); + extension.getTranslation("whitelist_inspection_description").split(/(\n)/g).forEach(function(line){ + const node = line === "\n"? document.createElement("br"): document.createTextNode(line); + description.appendChild(node); + }); + document.body.appendChild(description); @@ -81,18 +85,30 @@ }, ]; + const table = document.createElement("table"); + table.className = "whitelist"; + document.body.appendChild(table); + + const header = document.createElement("thead"); + table.appendChild(header); + + const headerRow = document.createElement("tr"); + header.appendChild(headerRow); + + const urlCell = document.createElement("th"); + urlCell.textContent = "URL"; + headerRow.appendChild(urlCell); + + whitelistSettings.forEach(function(setting){ + const cell = document.createElement("th"); + cell.textContent = setting.title; + setting.headerCell = cell; + headerRow.appendChild(cell); + }); + const tableBody = document.createElement("tbody"); + table.appendChild(tableBody); settings.onloaded(function(){ - const sets = settingContainers.urlContainer.get(); - - const selectLabel = document.createElement("label"); - selectLabel.textContent = "URL "; - document.body.appendChild(selectLabel); - - const setSelect = document.createElement("select"); - sets.forEach(function(set){ - setSelect.appendChild(new Option(set.url)); - }); - selectLabel.appendChild(setSelect); + const sets = Array.from(settingContainers.urlContainer.get()); if (searchParameters.has("urls")){ const urls = JSON.parse(searchParameters.get("urls")).map(function(url){ @@ -103,56 +119,69 @@ if (urls.some(function(url){ return set.match && set.match(url); })){ - setSelect.selectedIndex = index; + set.highlight = true; return true; } return false; }) && searchParameters.has("domain") ){ - setSelect.appendChild(new Option(searchParameters.get("domain"))); - setSelect.selectedIndex = setSelect.options.length - 1; + sets.unshift({url: searchParameters.get("domain"), highlight: true}); } } - const table = document.createElement("table"); - whitelistSettings.forEach(function(setting){ - const settingDefinition = settings.getDefinition(setting.name); + const setNodes = new Map(); + sets.forEach(function(set){ const row = document.createElement("tr"); - setting.row = row; - const name = document.createElement("td"); - name.textContent = setting.title || extension.getTranslation(setting.name + "_title"); - row.appendChild(name); - setting.input = document.createElement("input"); - setting.input.type = "checkbox"; - setting.input.addEventListener("change", function(){ - const value = this.checked? setting.protectedValue: setting.whitelistValue; - if (settingDefinition.get() === value){ - settingDefinition.reset(setSelect.value); - } - else { - settingDefinition.set(value, setSelect.value); - } + if (set.highlight){ + row.className = "highlight"; + } + tableBody.appendChild(row); + + const urlCell = document.createElement("td"); + urlCell.textContent = set.url; + row.appendChild(urlCell); + + const nodes = new Map(); + whitelistSettings.forEach(function(setting){ + const settingDefinition = settings.getDefinition(setting.name); + const cell = document.createElement("td"); + cell.className = "inputCell"; + row.appendChild(cell); + + const input = document.createElement("input"); + input.type = "checkbox"; + input.addEventListener("change", function(){ + const value = this.checked? setting.protectedValue: setting.whitelistValue; + if (settingDefinition.get() === value){ + settingDefinition.reset(set.url); + } + else { + settingDefinition.set(value, set.url); + } + }); + nodes.set(setting, {cell, input}); + cell.appendChild(input); }); - const input = document.createElement("td"); - input.appendChild(setting.input); - row.appendChild(input); - table.appendChild(row); + setNodes.set(set, nodes); }); - document.body.appendChild(table); function update(){ - whitelistSettings.forEach(function(setting){ - setting.row.style.display = settings.get(setting.name) === setting.whitelistValue? - "none": - ""; - - const currentValue = settings.get(setting.name, setSelect.value); - setting.input.checked = currentValue !== setting.whitelistValue; + sets.forEach(function(set){ + const nodes = setNodes.get(set); + whitelistSettings.forEach(function(setting){ + const display = settings.get(setting.name) === setting.whitelistValue? + "none": + ""; + setting.headerCell.style.display = display; + const currentValue = settings.get(setting.name, set.url); + const node = nodes.get(setting); + node.cell.style.display = display; + node.input.checked = currentValue !== setting.whitelistValue; + }); }); } update(); - setSelect.addEventListener("change", update); settings.on("any", update); }); }()); \ No newline at end of file diff --git a/themes/colorful/layout.css b/themes/colorful/layout.css index 7812ec0..6195a28 100644 --- a/themes/colorful/layout.css +++ b/themes/colorful/layout.css @@ -7,4 +7,5 @@ body { --button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%); --stacked-inputs-border-color: rgb(255, 0, 255); --stacked-inputs-focus-color: rgb(255, 196, 0); + --highlight-color: rgb(203, 255, 192); } \ No newline at end of file diff --git a/themes/dark/layout.css b/themes/dark/layout.css index d2d67fb..baa8f63 100644 --- a/themes/dark/layout.css +++ b/themes/dark/layout.css @@ -7,4 +7,5 @@ body { --button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%); --stacked-inputs-border-color: rgb(92, 92, 97); --stacked-inputs-focus-color: rgb(92, 92, 97); + --highlight-color: rgb(26, 92, 24); } \ No newline at end of file diff --git a/themes/default/layout.css b/themes/default/layout.css index 3bf6518..d88eced 100644 --- a/themes/default/layout.css +++ b/themes/default/layout.css @@ -7,4 +7,5 @@ body { --button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%); --stacked-inputs-border-color: rgb(185, 185, 185); --stacked-inputs-focus-color: rgb(236, 237, 236); + --highlight-color: rgb(203, 255, 192);; } \ No newline at end of file diff --git a/themes/light/layout.css b/themes/light/layout.css index 14e3b6a..5100a97 100644 --- a/themes/light/layout.css +++ b/themes/light/layout.css @@ -7,4 +7,5 @@ body { --button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%); --stacked-inputs-border-color: rgb(222, 222, 222); --stacked-inputs-focus-color: rgb(240, 240, 240); + --highlight-color: rgb(203, 255, 192);; } \ No newline at end of file