From 19a9035bed5dab1c9687bf30aa18562b2e532c9a Mon Sep 17 00:00:00 2001
From: kkapsner <github@mail.kkapsner.de>
Date: Wed, 12 Sep 2018 09:21:52 +0200
Subject: [PATCH] Settings rearrangement

For #251
---
 _locales/de/messages.json  |   4 +
 _locales/en/messages.json  |   4 +
 options/options.js         |   1 +
 options/optionsGui.js      |  12 ++
 options/settingsDisplay.js | 255 +++++++++++++++++++++----------------
 5 files changed, 166 insertions(+), 110 deletions(-)

diff --git a/_locales/de/messages.json b/_locales/de/messages.json
index 0383a9f..1a96be3 100644
--- a/_locales/de/messages.json
+++ b/_locales/de/messages.json
@@ -93,6 +93,10 @@
 		"message": "Einstellungen",
 		"description": ""
 	},
+	"section_canvas-api":{
+		"message": "Canvas API",
+		"description": ""
+	},
 	"section_audio-api":{
 		"message": "Audio API",
 		"description": ""
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 5f63b7a..3bfa07b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -93,6 +93,10 @@
 		"message": "Settings",
 		"description": ""
 	},
+	"section_canvas-api":{
+		"message": "Canvas API",
+		"description": ""
+	},
 	"section_audio-api":{
 		"message": "Audio API",
 		"description": ""
diff --git a/options/options.js b/options/options.js
index d253667..089d053 100644
--- a/options/options.js
+++ b/options/options.js
@@ -247,6 +247,7 @@
 				}
 			}
 			if (setting){
+				setting.display = display;
 				let hideChangeListeners = [];
 				setting.setHide = function setHide(value){
 					if (hideContainer){
diff --git a/options/optionsGui.js b/options/optionsGui.js
index 89c416c..5f6d195 100644
--- a/options/optionsGui.js
+++ b/options/optionsGui.js
@@ -129,7 +129,19 @@
 		}
 		else if (setting.keys){
 			input = document.createElement("table");
+			let inSection = false;
 			setting.keys.forEach(function(key){
+				if (setting.display.displayedSection){
+					if (typeof key === "object"){
+						if (key.level === 1){
+							inSection = key.name === setting.display.displayedSection;
+							return;
+						}
+					}
+					if (!inSection){
+						return;
+					}
+				}
 				let row = document.createElement("tr");
 				if (typeof key === "object"){
 					let cell = document.createElement("td");
diff --git a/options/settingsDisplay.js b/options/settingsDisplay.js
index f4c0d09..5e49ab0 100644
--- a/options/settingsDisplay.js
+++ b/options/settingsDisplay.js
@@ -36,34 +36,6 @@
 			}
 		},
 		"faking",
-		{
-			"name": "minFakeSize",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout", "fakeInput"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
-		{
-			"name": "maxFakeSize",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout", "fakeInput"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
 		{
 			"name": "rng",
 			"displayDependencies": [
@@ -127,70 +99,6 @@
 				}
 			]
 		},
-		{
-			"name": "ignoreFrequentColors",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
-		{
-			"name": "minColors",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
-		{
-			"name": "fakeAlphaChannel",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
-		{
-			"name": "useCanvasCache",
-			"displayDependencies": [
-				{
-					"blockMode": ["fakeReadout"],
-					"displayAdvancedSettings": [true]
-				},
-				{
-					"blockMode": ["askReadout", "ask"],
-					"askDenyMode": ["fake"],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
-		{
-			"name": "protectedAPIFeatures",
-			"displayDependencies": [
-				{
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
 		"notifications",
 		{
 			"name": "showNotifications"
@@ -218,16 +126,6 @@
 				}
 			]
 		},
-		{
-			"name": "storeImageForInspection",
-			"displayDependencies": [
-				{
-					"showNotifications": [true],
-					"storeNotificationData": [true],
-					"displayAdvancedSettings": [true]
-				}
-			]
-		},
 		{
 			"name": "ignoreList",
 			"displayDependencies": [
@@ -314,10 +212,124 @@
 				"displayAdvancedSettings": [true]
 			}
 		},
+		"Canvas-API",
+		{
+			"name": "protectedAPIFeatures",
+			"displayedSection": "Canvas-API",
+			"displayDependencies": [
+				{
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "minFakeSize",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout", "fakeInput"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "maxFakeSize",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout", "fakeInput"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "ignoreFrequentColors",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "minColors",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "fakeAlphaChannel",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "useCanvasCache",
+			"displayDependencies": [
+				{
+					"blockMode": ["fakeReadout"],
+					"displayAdvancedSettings": [true]
+				},
+				{
+					"blockMode": ["askReadout", "ask"],
+					"askDenyMode": ["fake"],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
+		{
+			"name": "storeImageForInspection",
+			"displayDependencies": [
+				{
+					"showNotifications": [true],
+					"storeNotificationData": [true],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
 		"Audio-API",
 		{
 			"name": "protectAudio"
 		},
+		{
+			"name": "protectedAPIFeatures",
+			"displayedSection": "Audio-API",
+			"displayDependencies": [
+				{
+					"protectAudio": [true],
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
 		{
 			"name": "audioFakeRate",
 			"displayDependencies": [
@@ -401,6 +413,15 @@
 			]
 		},
 		"History-API",
+		{
+			"name": "protectedAPIFeatures",
+			"displayedSection": "History-API",
+			"displayDependencies": [
+				{
+					"displayAdvancedSettings": [true]
+				}
+			]
+		},
 		{
 			"name": "historyLengthThreshold",
 			"displayDependencies": {
@@ -409,17 +430,31 @@
 		},
 		"Window-API",
 		{
-			"name": "protectWindow",
-			"displayDependencies": {
-				"displayAdvancedSettings": [true]
-			}
+			"name": "protectWindow"
+		},
+		{
+			"name": "protectedAPIFeatures",
+			"displayedSection": "Window-API",
+			"displayDependencies": [
+				{
+					"protectWindow": [true],
+					"displayAdvancedSettings": [true]
+				}
+			]
 		},
 		"DOMRect-API",
 		{
-			"name": "protectDOMRect",
-			"displayDependencies": {
-				"displayAdvancedSettings": [true]
-			}
+			"name": "protectDOMRect"
+		},
+		{
+			"name": "protectedAPIFeatures",
+			"displayedSection": "DOMRect-API",
+			"displayDependencies": [
+				{
+					"protectDOMRect": [true],
+					"displayAdvancedSettings": [true]
+				}
+			]
 		},
 		{
 			"name": "domRectIntegerFactor",