Added tabs in options page

For #353

.tools/findUnusedMessages.js

@@ -7,7 +7,7 @@ const util = require("util");
 function getMessagesInContent(content){
 	const foundMessages = [];
 	[
-		/\b(?:_|browser.i18n.getMessage|notify|extension)\(["']([^"']+)["']\s*(?:\)|,)/g,
+		/\b(?:_|browser.i18n.getMessage|extension.getTranslation|notify|extension)\(["']([^"']+)["']\s*(?:\)|,)/g,
 		/\b(?:messageId|name|getTranslation)\s*:\s*["']([^"']+)["']/g,
 	].forEach(function(re){
 		let match;
@@ -81,32 +81,37 @@ async function getSettingMessages(){
 	const settingsDisplay = require("../options/settingsDisplay");
 
 	const foundMessages = [];
-	settingsDisplay.forEach(function(display){
-		if ((typeof display) === "string"){
-			foundMessages.push("section_" + display.toLowerCase());
+	settingsDisplay.forEach(function(groupDefinition){
+		if (groupDefinition.name){
+			foundMessages.push("group_" + groupDefinition.name.toLowerCase());
 		}
-		else {
-			let settingDefinition = getDefinition(display.name);
-			if (!settingDefinition){
-				settingDefinition = display;
-				display.action = true;
+		groupDefinition.sections.forEach(function(sectionDefinition){
+			if (sectionDefinition.name){
+				foundMessages.push("section_" + sectionDefinition.name.toLowerCase());
 			}
-			if (settingDefinition){
-				if (display.inputs){
-					settingDefinition.inputs = display.inputs.map(function(input){
-						return getDefinition(input);
+			sectionDefinition.settings.forEach(function(display){
+				let settingDefinition = getDefinition(display.name);
+				if (!settingDefinition){
+					settingDefinition = display;
+					display.action = true;
+				}
+				if (settingDefinition){
+					if (display.inputs){
+						settingDefinition.inputs = display.inputs.map(function(input){
+							return getDefinition(input);
+						});
+					}
+					else if (display.actions){
+						settingDefinition.actions = display.actions.map(function(action){
+							return {name: action};
+						});
+					}
+					settingStrings.getMessages(settingDefinition).forEach(function(message){
+						foundMessages.push(message.toLowerCase());
 					});
 				}
-				else if (display.actions){
-					settingDefinition.actions = display.actions.map(function(action){
-						return {name: action};
-					});
-				}
-				settingStrings.getMessages(settingDefinition).forEach(function(message){
-					foundMessages.push(message.toLowerCase());
-				});
-			}
-		}
+			});
+		});
 	});
 	return foundMessages.map(function(message){return message.toLowerCase();});
 }
@@ -140,7 +145,7 @@ Promise.all([getSettingMessages(), getMessagesInFolder(path.join(__dirname, ".."
 			settingMessages.indexOf(message) === -1 &&
 			knownMessages.indexOf(message) === -1
 		){
-			console.log(`${message} not used`);
+			console.log(`usage of ${message} not found`);
 		}
 	});
 });

_locales/de/messages.json

@@ -83,6 +83,18 @@
 		"message": "In separatem Tab öffnen",
 		"description": ""
 	},
+	"group_general": {
+		"message": "Allgemein",
+		"description": ""
+	},
+	"group_APIs": {
+		"message": "APIs",
+		"description": ""
+	},
+	"group_misc": {
+		"message": "Vermischtes",
+		"description": ""
+	},
 	"section_asking": {
 		"message": "Nachfragen",
 		"description": ""
@@ -100,7 +112,7 @@
 		"description": ""
 	},
 	"section_misc": {
-		"message": "Gemischtes",
+		"message": "Vermischtes",
 		"description": ""
 	},
 	"section_settings": {

_locales/en/messages.json

@@ -89,6 +89,19 @@
 		"description": ""
 	},
 	
+	"group_general": {
+		"message": "General",
+		"description": ""
+	},
+	"group_APIs": {
+		"message": "APIs",
+		"description": ""
+	},
+	"group_misc": {
+		"message": "Misc",
+		"description": ""
+	},
+	
 	"section_asking": {
 		"message": "Asking",
 		"description": ""

options/options.css

@@ -25,8 +25,6 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
 	width: 100%;
 	border-spacing: 0;
 	border-collapse: collapse;
-}
-.settings {
 	table-layout: fixed;
 }
 .settings * {
@@ -289,4 +287,43 @@ td.hideColumn {
 
 .searching .settingRow.found:not(.hidden) {
 	display: table-row;
+}
+
+.groupTabs {
+	display: flex;
+	flex-wrap: nowrap;
+}
+
+.groups {
+	flex-basis: max-content;
+	flex-shrink: 0;
+	flex-grow: 0;
+	list-style: none;
+	margin: 0;
+	margin-right: 1em;
+	padding: 0;
+	min-width: 50px;
+	min-height: 100%;
+	border-right: 1px solid #c1c1c1;
+}
+.searching .groups {
+	visibility: hidden;
+}
+.groups .groupName {
+	cursor: pointer;
+	border: 1px solid #c1c1c1;
+	border-radius: 0.5em;
+	padding: 2px 1em;
+	margin: 2px;
+}
+.groups .groupName.selected {
+	border-right-color: transparent;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin-right: -1px;
+	padding-right: calc(1em + 3px);
+	background-color: var(--background-color);
+}
+body:not(.searching) .settings tbody:not(.selectedGroup) {
+	display: none;
 }

options/options.js

@@ -222,12 +222,24 @@
 		}
 	});
 	
+	var groupTabs = document.createElement("div");
+	groupTabs.classList = "groupTabs";
+	document.body.appendChild(groupTabs);
+	
+	var groups = document.createElement("ul");
+	groups.className = "groups";
+	groupTabs.appendChild(groups);
+	
 	var table = document.createElement("table");
 	table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
 	settings.on("displayDescriptions", function(){
 		table.className = "settings " + (settings.displayDescriptions? "display": "hide") + "Descriptions";
 	});
-	document.body.appendChild(table);
+	var tableContainer = document.createElement("div");
+	tableContainer.classList = "tabContents";
+	groupTabs.appendChild(tableContainer);
+	
+	tableContainer.appendChild(table);
 	
 	const displayHidden = settings.getDefinition(settingsDisplay.displayHidden);
 	const searchInput = search.init();
@@ -261,7 +273,41 @@
 	
 	const {hide: hideContainer, expand: expandContainer} = settings.getContainers();
 	
-	let lastSection = null;
+	const addGroup = function addGroup(groupDefinition){
+		const sections = [];
+		const group = {
+			select: function(){
+				groups.querySelectorAll(".selected").forEach(function(group){
+					group.classList.remove("selected");
+				});
+				table.querySelectorAll("tbody").forEach(function(section){
+					section.classList.remove("selectedGroup");
+				});
+				sections.forEach(function(section){
+					section.node.classList.add("selectedGroup");
+				});
+				name.classList.add("selected");
+			},
+			addSection: function(sectionDefinition){
+				const section = addSection(sectionDefinition.name);
+				sections.push(section);
+				return section;
+			}
+		};
+		
+		const groupIndex = groups.childNodes.length;
+		const name = document.createElement("li");
+		name.textContent = extension.getTranslation("group_" + groupDefinition.name);
+		name.className = "groupName group" + groupIndex;
+		
+		
+		name.addEventListener("click", group.select);
+		
+		groups.appendChild(name);
+		
+		return group;
+	};
+	
 	const addSection = function addSection(name){
 		const body = document.createElement("tbody");
 		if (name){
@@ -296,8 +342,9 @@
 			body.appendChild(row);
 		}
 		table.appendChild(body);
-		let rows = [];
-		let section = {
+		const rows = [];
+		const section = {
+			node: body,
 			addRow: function(row){
 				rows.push(row);
 				body.appendChild(row);
@@ -327,158 +374,158 @@
 		};
 		
 		search.on(function(){section.updateDisplay();});
-		lastSection = section;
+		return section;
 	};
-	addSection();
 	
 	const beforeChangeEventListeners = {};
-	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)
-					};
+	settingsDisplay.map(function(groupDefinition){
+		const group = addGroup(groupDefinition);
+		groupDefinition.sections.forEach(function(sectionDefinition){
+			const section = group.addSection(sectionDefinition);
+			sectionDefinition.settings.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 (display.actions){
+						setting = {
+							name: display.name,
+							actions: display.actions.map(function(action){
+								return {
+									name: action,
+									action: callbacks[action]
+								};
+							}).filter(function(action){
+								return action.action;
+							})
+						};
+					}
+					else if (callbacks[display.name]){
+						setting = {
+							name: display.name,
+							action: callbacks[display.name]
+						};
+					}
 				}
-				else if (display.actions){
-					setting = {
-						name: display.name,
-						actions: display.actions.map(function(action){
-							return {
-								name: action,
-								action: callbacks[action]
-							};
-						}).filter(function(action){
-							return action.action;
-						})
+				if (setting){
+					setting.display = display;
+					
+					let originalSet = setting.set;
+					setting.originalSet = originalSet;
+					if (originalSet){
+						const eventListeners = [];
+						beforeChangeEventListeners[setting.name] = eventListeners;
+						setting.set = function(...args){
+							if (eventListeners.every(function(listener){
+								return listener.call(setting, ...args);
+							})){
+								return originalSet.apply(this, args);
+							}
+							else {
+								return false;
+							}
+						};
+					}
+					
+					let hideChangeListeners = [];
+					setting.setHide = function setHide(value){
+						if (hideContainer){
+							hideContainer.setHideByName(display.name, value);
+							if (computeDependencies){
+								computeDependencies();
+							}
+						}
 					};
-				}
-				else if (callbacks[display.name]){
-					setting = {
-						name: display.name,
-						action: callbacks[display.name]
+					setting.onHideChange = function(listener){
+						hideChangeListeners.push(listener);
 					};
-				}
-			}
-			if (setting){
-				setting.display = display;
-				
-				let originalSet = setting.set;
-				setting.originalSet = originalSet;
-				if (originalSet){
-					const eventListeners = [];
-					beforeChangeEventListeners[setting.name] = eventListeners;
-					setting.set = function(...args){
-						if (eventListeners.every(function(listener){
-							return listener.call(setting, ...args);
-						})){
-							return originalSet.apply(this, args);
+					setting.getHide = function getHide(){
+						if (hideContainer){
+							return hideContainer.getHideByName(display.name);
 						}
 						else {
 							return false;
 						}
 					};
-				}
-				
-				let hideChangeListeners = [];
-				setting.setHide = function setHide(value){
 					if (hideContainer){
-						hideContainer.setHideByName(display.name, value);
-						if (computeDependencies){
-							computeDependencies();
-						}
-					}
-				};
-				setting.onHideChange = function(listener){
-					hideChangeListeners.push(listener);
-				};
-				setting.getHide = function getHide(){
-					if (hideContainer){
-						return hideContainer.getHideByName(display.name);
-					}
-					else {
-						return false;
-					}
-				};
-				if (hideContainer){
-					hideContainer.onHideChange(display.name, function(value){
-						if (computeDependencies){
-							computeDependencies();
-						}
-						hideChangeListeners.forEach(function(listener){
-							listener(value);
-						});
-					});
-				}
-				
-				let expandChangeListeners = [];
-				setting.setExpand = function setExpand(value){
-					if (expandContainer){
-						expandContainer.setExpandByName(display.name, value);
-					}
-				};
-				setting.onExpandChange = function(listener){
-					expandChangeListeners.push(listener);
-				};
-				setting.getExpand = function getExpand(){
-					if (expandContainer){
-						return expandContainer.getExpandByName(display.name);
-					}
-					else {
-						return false;
-					}
-				};
-				if (expandContainer){
-					expandContainer.onExpandChange(display.name, function(value){
-						expandChangeListeners.forEach(function(listener){
-							listener(value);
-						});
-					});
-				}
-				
-				var row = optionsGui.createSettingRow(setting);
-				settingStrings.getStrings(setting).forEach(function(string){
-					search.register(string, row);
-				});
-				let section = lastSection;
-				section.addRow(row);
-				if (!display.displayDependencies){
-					display.displayDependencies = {};
-				}
-				var displayDependencies = display.displayDependencies;
-				displayDependencies = Array.isArray(displayDependencies)?
-					displayDependencies:
-					[displayDependencies];
-				var computeDependencies = function(){
-					logging.verbose("evaluate display dependencies for", setting);
-					row.classList[(
-						(
-							displayHidden.get() ||
-							!setting.getHide()
-						) &&
-						displayDependencies.some(function(displayDependency){
-							return Object.keys(displayDependency).every(function(key){
-								return displayDependency[key].indexOf(settings[key]) !== -1;
+						hideContainer.onHideChange(display.name, function(value){
+							if (computeDependencies){
+								computeDependencies();
+							}
+							hideChangeListeners.forEach(function(listener){
+								listener(value);
 							});
-						})
-					)? "remove": "add"]("hidden");
-					section.updateDisplay();
-				};
-				computeDependencies();
-				displayDependencies.forEach(function(displayDependency){
-					Object.keys(displayDependency).forEach(function(name){
-						settings.on(name, computeDependencies);
+						});
+					}
+					
+					let expandChangeListeners = [];
+					setting.setExpand = function setExpand(value){
+						if (expandContainer){
+							expandContainer.setExpandByName(display.name, value);
+						}
+					};
+					setting.onExpandChange = function(listener){
+						expandChangeListeners.push(listener);
+					};
+					setting.getExpand = function getExpand(){
+						if (expandContainer){
+							return expandContainer.getExpandByName(display.name);
+						}
+						else {
+							return false;
+						}
+					};
+					if (expandContainer){
+						expandContainer.onExpandChange(display.name, function(value){
+							expandChangeListeners.forEach(function(listener){
+								listener(value);
+							});
+						});
+					}
+					
+					var row = optionsGui.createSettingRow(setting);
+					settingStrings.getStrings(setting).forEach(function(string){
+						search.register(string, row);
 					});
-				});
-				displayHidden.on(computeDependencies);
-			}
-		}
-	});
+					section.addRow(row);
+					if (!display.displayDependencies){
+						display.displayDependencies = {};
+					}
+					var displayDependencies = display.displayDependencies;
+					displayDependencies = Array.isArray(displayDependencies)?
+						displayDependencies:
+						[displayDependencies];
+					var computeDependencies = function(){
+						logging.verbose("evaluate display dependencies for", setting);
+						row.classList[(
+							(
+								displayHidden.get() ||
+								!setting.getHide()
+							) &&
+							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);
+						});
+					});
+					displayHidden.on(computeDependencies);
+				}
+			});
+		});
+		return group;
+	})[0].select();
 	
 	const version = document.createElement("div");
 	version.className = "version";

releaseNotes.txt

@@ -4,6 +4,7 @@ Version 0.5.12:
 	
 	new features:
 		- enabled whitelisting of local files
+		- added tabs in options page
 	
 	fixes:
 		- detect when browser.contextualIdentities.onRemoved is not supported

versions/updates.json

@@ -37,6 +37,10 @@
 				{
 					"version": "0.5.12Alpha20190625",
 					"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.12Alpha20190625-an+fx.xpi"
+				},
+				{
+					"version": "0.5.12Alpha20190629",
+					"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.12Alpha20190629-an+fx.xpi"
 				}
 			]
 		}