Added sections to options list

_locales/de/messages.json

@@ -17,6 +17,32 @@
 		"description": ""
 	},
 	
+	
+	"section_asking": {
+		"message": "Nachfragen",
+		"description": ""
+	},
+	"section_faking": {
+		"message": "Vortäuschen",
+		"description": ""
+	},
+	"section_notifications": {
+		"message": "Benachrichtigungen",
+		"description": ""
+	},
+	"section_lists": {
+		"message": "Listen",
+		"description": ""
+	},
+	"section_misc": {
+		"message": "Gemischtes",
+		"description": ""
+	},
+	"section_settings": {
+		"message": "Einstellungen",
+		"description": ""
+	},
+	
 	"displayAdvancedSettings_title": {
 		"message": "Expertenmodus",
 		"description": ""

_locales/en/messages.json

@@ -17,6 +17,32 @@
 		"description": ""
 	},
 	
+	
+	"section_asking": {
+		"message": "Asking",
+		"description": ""
+	},
+	"section_faking": {
+		"message": "Faking",
+		"description": ""
+	},
+	"section_notifications": {
+		"message": "Notifications",
+		"description": ""
+	},
+	"section_lists": {
+		"message": "Lists",
+		"description": ""
+	},
+	"section_misc": {
+		"message": "Misc",
+		"description": ""
+	},
+	"section_settings": {
+		"message": "Settings",
+		"description": ""
+	},
+	
 	"displayAdvancedSettings_title": {
 		"message": "Expert mode",
 		"description": ""

options/options.css

@@ -10,10 +10,22 @@
 	vertical-align: top;
 }
 
-.settings .settingRow.hidden {
+.settings .hidden {
 	display: none;
 }
 
+.settings td, .settings th {
+	margin: 0;
+	padding: 0;
+}
+
+.settings .section h2 {
+	border: 1px #c1c1c1 solid;
+	border-radius: 0.5em ;
+	padding: 0.2em 0.5em;
+	margin: 0.7em 1px 0.2em;
+}
+
 .settings .settingRow .content {
 	overflow: visible;
 	padding: 0.5em 0;
@@ -21,6 +33,17 @@
 	position: relative;
 }
 
+.settings .settingRow td:first-child .content {
+	margin-left: 0.6em;
+}
+.settings .settingRow td:last-child .content {
+	margin-right: 0.6em;
+}
+
+.settings .section + .settingRow .content {
+	border-top: 0 solid black;
+}
+
 .settings.hideDescriptions .settingRow .info {
 	margin: 0 0.5em;
 	border-radius: 100%;

options/options.js

@@ -39,48 +39,88 @@
 	settings.on("displayDescriptions", function(){
 		table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
 	});
-	
 	document.body.appendChild(table);
-	settingsDisplay.forEach(function(display){
-		var setting = settings.getDefinition(display.name);
-		if (!setting){
-			if (display.inputs){
-				setting = {
-					name: display.name,
-					inputs: display.inputs.map(settings.getDefinition)
-				};
-			}
-			else if (callbacks[display.name]){
-				setting = {
-					name: display.name,
-					action: callbacks[display.name]
-				};
-			}
+	
+	let lastSection = null;
+	let addSection = function addSection(name){
+		let body = document.createElement("tbody");
+		if (name){
+			let row = document.createElement("tr");
+			row.className = "section";
+			let cell = document.createElement("td");
+			cell.colSpan = 2;
+			row.appendChild(cell);
+			let heading = document.createElement("h2");
+			heading.textContent = browser.i18n.getMessage("section_" + name);
+			cell.appendChild(heading);
+			body.appendChild(row);
 		}
-		if (setting){
-			var row = optionsGui.createSettingRow(setting);
-			table.appendChild(row);
-			if (display.displayDependencies){
-				var displayDependencies = display.displayDependencies;
-				displayDependencies = Array.isArray(displayDependencies)?
-					displayDependencies:
-					[displayDependencies];
-				var computeDependencies = function(){
-					logging.verbose("evaluate display dependencies for", setting);
-					row.classList[(
-						displayDependencies.some(function(displayDependency){
-							return Object.keys(displayDependency).every(function(key){
-								return displayDependency[key].indexOf(settings[key]) !== -1;
-							});
-						})
-					)? "remove": "add"]("hidden");
-				};
-				computeDependencies();
-				displayDependencies.forEach(function(displayDependency){
-					Object.keys(displayDependency).forEach(function(name){
-						settings.on(name, computeDependencies);
+		table.appendChild(body);
+		let rows = [];
+		let section = {
+			addRow: function(row){
+				rows.push(row);
+				body.appendChild(row);
+			},
+			updateDisplay: function(){
+				body.classList[(
+					rows.some(function(row){
+						return !row.classList.contains("hidden");
+					})
+				)? "remove": "add"]("hidden");
+			}
+		};
+		lastSection = section;
+	};
+	addSection();
+	
+	settingsDisplay.forEach(function(display){
+		if (typeof display === "string"){
+			addSection(display);
+		}
+		else {
+			var setting = settings.getDefinition(display.name);
+			if (!setting){
+				if (display.inputs){
+					setting = {
+						name: display.name,
+						inputs: display.inputs.map(settings.getDefinition)
+					};
+				}
+				else if (callbacks[display.name]){
+					setting = {
+						name: display.name,
+						action: callbacks[display.name]
+					};
+				}
+			}
+			if (setting){
+				var row = optionsGui.createSettingRow(setting);
+				let section = lastSection;
+				section.addRow(row);
+				if (display.displayDependencies){
+					var displayDependencies = display.displayDependencies;
+					displayDependencies = Array.isArray(displayDependencies)?
+						displayDependencies:
+						[displayDependencies];
+					var computeDependencies = function(){
+						logging.verbose("evaluate display dependencies for", setting);
+						row.classList[(
+							displayDependencies.some(function(displayDependency){
+								return Object.keys(displayDependency).every(function(key){
+									return displayDependency[key].indexOf(settings[key]) !== -1;
+								});
+							})
+						)? "remove": "add"]("hidden");
+						section.updateDisplay();
+					};
+					computeDependencies();
+					displayDependencies.forEach(function(displayDependency){
+						Object.keys(displayDependency).forEach(function(name){
+							settings.on(name, computeDependencies);
+						});
 					});
-				});
+				}
 			}
 		}
 	});

options/settingsDisplay.js

@@ -13,20 +13,7 @@
 		{
 			"name": "blockMode"
 		},
-		{
-			"name": "whiteList",
-			"displayDependencies": {
-				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"],
-				"displayAdvancedSettings": [true]
-			}
-		},
-		{
-			"name": "blackList",
-			"displayDependencies": {
-				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"],
-				"displayAdvancedSettings": [true]
-			}
-		},
+		"asking",
 		{
 			"name": "askOnlyOnce",
 			"displayDependencies": {
@@ -40,6 +27,7 @@
 				"displayAdvancedSettings": [true]
 			}
 		},
+		"faking",
 		{
 			"name": "minFakeSize",
 			"displayDependencies": [
@@ -187,6 +175,7 @@
 				}
 			]
 		},
+		"notifications",
 		{
 			"name": "showNotifications",
 			"displayDependencies": [
@@ -252,6 +241,7 @@
 				}
 			]
 		},
+		"lists",
 		{
 			"name": "enableStackList",
 			"displayDependencies": {
@@ -267,6 +257,21 @@
 			}
 			
 		},
+		{
+			"name": "whiteList",
+			"displayDependencies": {
+				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"],
+				"displayAdvancedSettings": [true]
+			}
+		},
+		{
+			"name": "blackList",
+			"displayDependencies": {
+				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"],
+				"displayAdvancedSettings": [true]
+			}
+		},
+		"misc",
 		{
 			"name": "showReleaseNotes"
 		},
@@ -276,6 +281,7 @@
 				"displayAdvancedSettings": [true]
 			}
 		},
+		"settings",
 		{
 			"name": "exportSettings",
 			"displayDependencies": {