Options: made sections collapsible

For #353

lib/settingContainers.js

@@ -122,9 +122,14 @@
 					listener(value);
 				});
 			};
-			settingDefinition.getExpandByName = function(name){
+			settingDefinition.getExpandByName = function(name, defaultValue = false){
 				const expandStore = settingDefinition.get();
+				if ((typeof expandStore[name]) !== "undefined"){
 					return expandStore[name] || false;
+				}
+				else {
+					return defaultValue;
+				}
 			};
 			settingDefinition.onExpandChange = function(name, listener){
 				if (!changeListeners[name]){

options/options.css

@@ -42,11 +42,32 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
 	padding: 0;
 }
 
+.settings .collapsed .settingRow {
+	display: none;
+}
+
 .settings .section h2 {
 	border: 1px #c1c1c1 solid;
 	border-radius: 0.5em ;
-	padding: 0.2em 0.5em;
+	padding: 0.2em 2em 0.2em 0.5em;
 	margin: 0.7em 1px 0.2em;
+	position: relative;
+}
+
+
+.settings .section .collapser {
+	cursor: pointer;
+	position: absolute;
+	right: 0.8em;
+}
+.settings .section .collapser::before {
+	content: "\25BC";
+}
+.settings .collapsed .section .collapser::before {
+	content: "\25B6";
+}
+.searching .settings .section .collapser {
+	visibility: hidden;
 }
 
 .settings .settingRow .content {

options/options.js

@@ -244,18 +244,40 @@
 		}
 	});
 	
+	const {hide: hideContainer, expand: expandContainer} = settings.getContainers();
+	
 	let lastSection = null;
-	let addSection = function addSection(name){
+	const addSection = function addSection(name){
-		let body = document.createElement("tbody");
+		const body = document.createElement("tbody");
 		if (name){
-			let row = document.createElement("tr");
+			const row = document.createElement("tr");
 			row.className = "section";
-			let cell = document.createElement("td");
+			
+			const cell = document.createElement("td");
 			cell.colSpan = 3;
 			row.appendChild(cell);
-			let heading = document.createElement("h2");
+			
-			heading.textContent = extension.getTranslation("section_" + name);
+			const id = "section_" + name;
+			
+			const heading = document.createElement("h2");
+			heading.textContent = extension.getTranslation(id);
 			cell.appendChild(heading);
+			
+			if (expandContainer){
+				const collapser = document.createElement("span");
+				collapser.className = "collapser";
+				collapser.addEventListener("click", function(){
+					expandContainer.setExpandByName(id, !expandContainer.getExpandByName(id, true));
+				});
+				expandContainer.onExpandChange(id, function(value){
+					body.classList[value? "remove": "add"]("collapsed");
+				});
+				if (!expandContainer.getExpandByName(id, true)){
+					body.classList.add("collapsed");
+				}
+				heading.appendChild(collapser);
+			}
+			
 			body.appendChild(row);
 		}
 		table.appendChild(body);
@@ -295,8 +317,6 @@
 	addSection();
 	
 	const beforeChangeEventListeners = {};
-	
-	const {hide: hideContainer, expand: expandContainer} = settings.getContainers();
 	settingsDisplay.forEach(function(display){
 		if (typeof display === "string"){
 			addSection(display);

releaseNotes.txt

@@ -4,6 +4,7 @@ Version 0.5.11:
 	
 	new features:
 		- added auto update for beta versions
+		- options: made sections collapsible
 	
 	fixes:
 		- improved protection of (i)frame properties

versions/updates.json

@@ -9,6 +9,10 @@
 				{
 					"version": "0.5.11Alpha20190609",
 					"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.11Alpha20190609-an+fx.xpi"
+				},
+				{
+					"version": "0.5.11Alpha20190611",
+					"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.11Alpha20190611-an+fx.xpi"
 				}
 			]
 		}