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,11 +81,15 @@ async function getSettingMessages(){
 	const settingsDisplay = require("../options/settingsDisplay");
 
 	const foundMessages = [];
-	settingsDisplay.forEach(function(display){
+	settingsDisplay.forEach(function(groupDefinition){
-		if ((typeof display) === "string"){
+		if (groupDefinition.name){
-			foundMessages.push("section_" + display.toLowerCase());
+			foundMessages.push("group_" + groupDefinition.name.toLowerCase());
 		}
-		else {
+		groupDefinition.sections.forEach(function(sectionDefinition){
+			if (sectionDefinition.name){
+				foundMessages.push("section_" + sectionDefinition.name.toLowerCase());
+			}
+			sectionDefinition.settings.forEach(function(display){
 				let settingDefinition = getDefinition(display.name);
 				if (!settingDefinition){
 					settingDefinition = display;
@@ -106,7 +110,8 @@ async function getSettingMessages(){
 						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 * {
@@ -290,3 +288,42 @@ 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 = [];
+		const rows = [];
-		let section = {
+		const section = {
+			node: body,
 			addRow: function(row){
 				rows.push(row);
 				body.appendChild(row);
@@ -327,16 +374,15 @@
 		};
 		
 		search.on(function(){section.updateDisplay();});
-		lastSection = section;
+		return section;
 	};
-	addSection();
 	
 	const beforeChangeEventListeners = {};
-	settingsDisplay.forEach(function(display){
+	settingsDisplay.map(function(groupDefinition){
-		if (typeof display === "string"){
+		const group = addGroup(groupDefinition);
-			addSection(display);
+		groupDefinition.sections.forEach(function(sectionDefinition){
-		}
+			const section = group.addSection(sectionDefinition);
-		else {
+			sectionDefinition.settings.forEach(function(display){
 				var setting = settings.getDefinition(display.name);
 				if (!setting){
 					if (display.inputs){
@@ -445,7 +491,6 @@
 					settingStrings.getStrings(setting).forEach(function(string){
 						search.register(string, row);
 					});
-				let section = lastSection;
 					section.addRow(row);
 					if (!display.displayDependencies){
 						display.displayDependencies = {};
@@ -477,8 +522,10 @@
 					});
 					displayHidden.on(computeDependencies);
 				}
-		}
 			});
+		});
+		return group;
+	})[0].select();
 	
 	const version = document.createElement("div");
 	version.className = "version";

options/settingsDisplay.js

@@ -6,15 +6,22 @@
 	"use strict";
 	var settingsDisplay = [
 		{
-			"name": "displayAdvancedSettings"
+			name: "general",
-		},
+			sections: [
 				{
-			"name": "displayDescriptions"
+					name: "",
+					settings: [
+						{
+							"name": "displayAdvancedSettings"
 						},
 						{
 							"name": "blockMode"
 						},
-		"asking",
+					]
+				},
+				{
+					name: "asking",
+					settings: [
 						{
 							"name": "askOnlyOnce",
 							"displayDependencies": {
@@ -35,7 +42,11 @@
 								"displayAdvancedSettings": [true]
 							}
 						},
-		"faking",
+					]
+				},
+				{
+					name: "faking",
+					settings: [
 						{
 							"name": "rng",
 							"displayDependencies": [
@@ -116,7 +127,11 @@
 								}
 							]
 						},
-		"notifications",
+					]
+				},
+				{
+					name: "notifications",
+					settings: [
 						{
 							"name": "showNotifications"
 						},
@@ -193,7 +208,11 @@
 								}
 							]
 						},
-		"lists",
+					]
+				},
+				{
+					name: "lists",
+					settings: [
 						{
 							"name": "enableStackList",
 							"displayDependencies": {
@@ -234,7 +253,16 @@
 								"displayAdvancedSettings": [true]
 							}
 						},
-		"Canvas-API",
+					]
+				},
+			]
+		},
+		{
+			name: "APIs",
+			sections: [
+				{
+					name: "Canvas-API",
+					settings: [
 						{
 							"name": "protectedCanvasPart"
 						},
@@ -345,7 +373,11 @@
 								}
 							]
 						},
-		"Audio-API",
+					]
+				},
+				{
+					name: "Audio-API",
+					settings: [
 						{
 							"name": "protectAudio"
 						},
@@ -441,7 +473,11 @@
 								}
 							]
 						},
-		"History-API",
+					]
+				},
+				{
+					name: "History-API",
+					settings: [
 						{
 							"name": "protectedAPIFeatures",
 							"displayedSection": "History-API",
@@ -457,7 +493,11 @@
 								"displayAdvancedSettings": [true]
 							}
 						},
-		"Window-API",
+					]
+				},
+				{
+					name: "Window-API",
+					settings: [
 						{
 							"name": "protectWindow"
 						},
@@ -471,7 +511,11 @@
 								}
 							]
 						},
-		"DOMRect-API",
+					]
+				},
+				{
+					name: "DOMRect-API",
+					settings: [
 						{
 							"name": "protectDOMRect"
 						},
@@ -492,7 +536,11 @@
 								"displayAdvancedSettings": [true]
 							}
 						},
-		"Navigator-API",
+					]
+				},
+				{
+					name: "Navigator-API",
+					settings: [
 						{
 							"name": "protectNavigator"
 						},
@@ -514,7 +562,16 @@
 								}
 							]
 						},
-		"misc",
+					]
+				},
+			]
+		},
+		{
+			name: "misc",
+			sections: [
+				{
+					name: "misc",
+					settings: [
 						{
 							"name": "theme"
 						},
@@ -533,7 +590,14 @@
 								"displayAdvancedSettings": [true]
 							}
 						},
-		"settings",
+					]
+				},
+				{
+					name: "settings",
+					settings: [
+						{
+							"name": "displayDescriptions"
+						},
 						{
 							"name": "openSettingSanitation"
 						},
@@ -544,6 +608,10 @@
 						{
 							"name": "resetSettings"
 						}
+					]
+				}
+			]
+		}
 	];
 	settingsDisplay.displayHidden = "displayHiddenSettings";
 	

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"
 				}
 			]
 		}