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,9 +39,46 @@
 	settings.on("displayDescriptions", function(){
 		table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
 	});
-	
 	document.body.appendChild(table);
+	
+	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);
+		}
+		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){
@@ -59,7 +96,8 @@
 			}
 			if (setting){
 				var row = optionsGui.createSettingRow(setting);
-			table.appendChild(row);
+				let section = lastSection;
+				section.addRow(row);
 				if (display.displayDependencies){
 					var displayDependencies = display.displayDependencies;
 					displayDependencies = Array.isArray(displayDependencies)?
@@ -74,6 +112,7 @@
 								});
 							})
 						)? "remove": "add"]("hidden");
+						section.updateDisplay();
 					};
 					computeDependencies();
 					displayDependencies.forEach(function(displayDependency){
@@ -83,5 +122,6 @@
 					});
 				}
 			}
+		}
 	});
 }());

options/settingsDisplay.js

@@ -13,20 +13,7 @@
 		{
 			"name": "blockMode"
 		},
-		{
+		"asking",
-			"name": "whiteList",
-			"displayDependencies": {
-				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "block", "ask"],
-				"displayAdvancedSettings": [true]
-			}
-		},
-		{
-			"name": "blackList",
-			"displayDependencies": {
-				"blockMode": ["blockReadout", "fakeReadout", "fakeInput", "askReadout", "ask", "allow"],
-				"displayAdvancedSettings": [true]
-			}
-		},
 		{
 			"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": {