Show only settings that are useful within the given settings set.

options/buildPrefInputs.js

@@ -3,18 +3,6 @@ table.className = "settings";
 document.body.appendChild(table);
 
 [
-	{
-		"name": "whiteList",
-		"title": "White list",
-		"type": "string",
-		"value": ""
-	},
-	{
-		"name": "blackList",
-		"title": "Black list",
-		"type": "string",
-		"value": ""
-	},
 	{
 		"name": "blockMode",
 		"title": "block mode",
@@ -63,11 +51,32 @@ document.body.appendChild(table);
 			}
 		]
 	},
+	{
+		"name": "whiteList",
+		"title": "White list",
+		"type": "string",
+		"value": "",
+		"displayDependencies": {
+			"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"]
+		}
+	},
+	{
+		"name": "blackList",
+		"title": "Black list",
+		"type": "string",
+		"value": "",
+		"displayDependencies": {
+			"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"]
+		}
+	},
 	{
 		"name": "maxFakeSize",
 		"title": "Maximal fake size",
 		"type": "integer",
-		"value": 0
+		"value": 0,
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"]
+		}
 	},
 	{
 		"name": "rng",
@@ -83,66 +92,119 @@ document.body.appendChild(table);
 				"value": "persistent",
 				"label": "persistent"
 			}
-		]
+		],
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"]
+		}
 	},
 	{
 		"name": "storePersistentRnd",
 		"title": "Store persistent data",
 		"type": "bool",
-		"value": false
+		"value": false,
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"],
+			"rng": ["persistent"]
+		}
 	},
 	{
 		"name": "clearPersistentRnd",
 		"title": "Clear persistent random storage",
 		"type": "control",
-		"label": "Clear"
+		"label": "Clear",
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"],
+			"rng": ["persistent"]
+		}
 	},
 	{
 		"name": "askOnlyOnce",
 		"title": "Ask only once",
 		"type": "bool",
-		"value": true
+		"value": true,
+		"displayDependencies": {
+			"blockMode": ["askReadout", "ask"]
+		}
 	},
 	{
 		"name": "showNotifications",
 		"title": "Show notifications",
 		"type": "bool",
-		"value": true
+		"value": true,
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"]
+		}
+	},
+	{
+		"name": "storeImageForInspection",
+		"title": "Store image for inspection",
+		"type": "bool",
+		"value": false,
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"],
+			"showNotifications": [true]
+		}
 	},
 	// {
 		// "name": "notificationDisplayTime",
 		// "title": "notification display time",
 		// "type": "integer",
-		// "value": 30
+		// "value": 30,
+		// "displayDependencies": {
+			// "blockMode": ["fakeReadout", "fakeInput"]
+		// }
 	// },
 	{
 		"name": "ignoreList",
 		"title": "Ignore list",
 		"type": "string",
-		"value": ""
+		"value": "",
+		"displayDependencies": {
+			"blockMode": ["fakeReadout", "fakeInput"],
+			"showNotifications": [true]
+		}
 	},
 	{
 		"name": "showCallingFile",
 		"title": "Display calling file",
 		"type": "bool",
-		"value": false
+		"value": false,
+		"displayDependencies": {
+			"blockMode": ["askReadout", "ask"]
+		}
 	},
 	{
 		"name": "showCompleteCallingStack",
 		"title": "Display complete calling stack",
 		"type": "bool",
-		"value": false
+		"value": false,
+		"displayDependencies": [
+			{
+				"blockMode": ["fakeReadout", "fakeInput"],
+				"showNotifications": [true]
+			},
+			{
+				"blockMode": ["askReadout", "ask"]
+			}
+		]
 	},{
 		"name": "enableStackList",
 		"title": "Use file specific scoped white list",
 		"type": "bool",
-		"value": false
+		"value": false,
+		"displayDependencies": {
+			"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"]
+		}
 	},
 	{
 		"name": "stackList",
 		"title": "File specific white list",
 		"type": "string",
-		"value": ""
+		"value": "",
+		"displayDependencies": {
+			"enableStackList": [true]
+		}
+		
 	},
 	{
 		"name": "showReleaseNotes",
@@ -151,7 +213,7 @@ document.body.appendChild(table);
 		"label": "Show"
 	}
 ].forEach(function(pref){
-	var html = '<td><span class="title">__MSG_' + pref.name + '_title__</span><div class="description">__MSG_' + pref.name + '_description__</div></td><td>';
+	var html = '<td><div class="content"><span class="title">__MSG_' + pref.name + '_title__</span><div class="description">__MSG_' + pref.name + '_description__</div></div></td><td><div class="content">';
 	var inputAttributes = ' data-storage-name="' + pref.name + '" data-storage-type="' + pref.type + '" class="setting"'
 	switch (pref.type){
 		case "integer":
@@ -181,8 +243,9 @@ document.body.appendChild(table);
 		default:
 			console.log("Unknown preference type: " + pref.type);
 	}
-	html += "</td>";
+	html += "</div></td>";
 	var tr = document.createElement("tr");
+	tr.setting = pref;
 	tr.className = "settingRow";
 	tr.innerHTML = html;
 	console.log(html);

options/options.css

@@ -7,7 +7,12 @@
 	vertical-align: top;
 }
 
-.settings .settingRow td{
+.settings .settingRow.hidden {
+	display: none;
+}
+
+.settings .settingRow .content {
+	overflow: hidden;
 	padding: 0.5em 0;
 	border-top: 1px solid #c1c1c1;
 }

options/options.html

@@ -6,6 +6,7 @@
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 	</head>
 	<body>
+		<script src="../lib/defaultSettings.js"></script>
 		<script src="buildPrefInputs.js"></script>
 		<script src="options.js"></script>
 	</body>

options/options.js

@@ -1,4 +1,9 @@
-(function(){
+browser.storage.local.get().then(function(data){
+	Object.keys(data).forEach(function(key){
+		settings[key] = data[key];
+	});
+	return settings;
+}).then(function(settings){
 	function traverse(node, func){
 		func(node);
 		Array.from(node.childNodes).forEach(function(child){traverse(child, func);});
@@ -7,13 +12,18 @@
 	// getting the translation of all the messages
 	traverse(document.body, function(node){
 		if (node.nodeType == 3){
-			node.nodeValue = node.nodeValue.replace(/\b__MSG_(.+)__\b/g, function(m, key){
+			var lines = node.nodeValue.replace(/\b__MSG_(.+)__\b/g, function(m, key){
 				try {
 					return browser.i18n.getMessage(key);
 				}
 				catch (e){
 					return "Unknown i18n key: " + key;
 				}
+			}).split(/\n/g);
+			node.nodeValue = lines.shift();
+			lines.forEach(function(line){
+				node.parentNode.appendChild(document.createElement("br"));
+				node.parentNode.appendChild(document.createTextNode(line));
 			});
 		}
 	});
@@ -21,12 +31,7 @@
 	Array.from(document.querySelectorAll("input.setting, select.setting")).forEach(function(input){
 		var storageName = input.dataset.storageName;
 		if (input.type === "checkbox"){
-			browser.storage.local.get(storageName).then(function(value){
+			input.checked = settings[storageName];
-				// console.log(storageName, "got storage value", value);
-				if (value.hasOwnProperty(storageName)){
-					input.checked = value[storageName];
-				}
-			});
 			
 			input.addEventListener("click", function(){
 				var value = this.checked;
@@ -35,12 +40,7 @@
 				browser.storage.local.set(obj);
 			});}
 		else {
-			browser.storage.local.get(storageName).then(function(value){
+			input.value = settings[storageName];
-				// console.log(storageName, "got storage value", value);
-				if (value.hasOwnProperty(storageName)){
-					input.value = value[storageName];
-				}
-			});
 			
 			input.addEventListener("change", function(){
 				var value = this.value;
@@ -69,9 +69,27 @@
 		});
 	});
 	
+	function updateDisplay(){
+		document.querySelectorAll("tr.settingRow").forEach(function(row){
+			var displayDependencies = row.setting.displayDependencies;
+			if (displayDependencies){
+				row.classList[(
+					(Array.isArray(displayDependencies)? displayDependencies: [displayDependencies]).some(function(displayDependency){
+						return Object.keys(displayDependency).every(function(key){
+							console.log(key, displayDependency[key], settings[key]);
+							return displayDependency[key].indexOf(settings[key]) !== -1;
+						});
+					})
+				)? "remove": "add"]("hidden");
+			}
+		});
+	}
+	updateDisplay();
+	
 	browser.storage.onChanged.addListener(function(change, area){
 		if (area === "local"){
 			Object.keys(change).forEach(function(key){
+				settings[key] = change[key].newValue;
 				var input = document.querySelector(".setting[data-storage-name=" + key + "]");
 				if (input){
 					if (input.type === "checkbox"){
@@ -82,6 +100,7 @@
 					}
 				}
 			});
+			updateDisplay();
 		}
 	});
-}());	
+});	

releaseNotes.txt

@@ -8,6 +8,7 @@ Version 0.4.0:
 	new features:
 		- information of all fake events in one tab are visible
 		- new setting to enable the inspection of the content of the faked canvas
+		- settings page now only shows settings that are useful within the given settings set
 	
 	fixes:
 		- ask mode did not work for input types