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