Improve whitelist inspection

Fixes #623

_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": {

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;
+}

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 @@
 		},
 	];
 	
-	settings.onloaded(function(){
-		const sets = settingContainers.urlContainer.get();
+	const table = document.createElement("table");
+	table.className = "whitelist";
+	document.body.appendChild(table);
 	
-		const selectLabel = document.createElement("label");
-		selectLabel.textContent = "URL ";
-		document.body.appendChild(selectLabel);
+	const header = document.createElement("thead");
+	table.appendChild(header);
 	
-		const setSelect = document.createElement("select");
-		sets.forEach(function(set){
-			setSelect.appendChild(new Option(set.url));
+	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);
 	});
-		selectLabel.appendChild(setSelect);
+	const tableBody = document.createElement("tbody");
+	table.appendChild(tableBody);
+	settings.onloaded(function(){
+		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");
+		const setNodes = new Map();
+		sets.forEach(function(set){
+			const row = document.createElement("tr");
+			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 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 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(setSelect.value);
+						settingDefinition.reset(set.url);
 					}
 					else {
-					settingDefinition.set(value, setSelect.value);
+						settingDefinition.set(value, set.url);
 					}
 				});
-			const input = document.createElement("td");
-			input.appendChild(setting.input);
-			row.appendChild(input);
-			table.appendChild(row);
+				nodes.set(setting, {cell, input});
+				cell.appendChild(input);
+			});
+			setNodes.set(set, nodes);
 		});
-		document.body.appendChild(table);
 		
 		function update(){
+			sets.forEach(function(set){
+				const nodes = setNodes.get(set);
 				whitelistSettings.forEach(function(setting){
-				setting.row.style.display = settings.get(setting.name) === setting.whitelistValue?
+					const display = settings.get(setting.name) === setting.whitelistValue?
 						"none":
 						"";
-				
-				const currentValue = settings.get(setting.name, setSelect.value);
-				setting.input.checked = currentValue !== setting.whitelistValue;
+					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);
 	});
 }());

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);
 }

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);
 }

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);;
 }

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);;
 }