Create search in options page

Fixes #242

options/options.css

@@ -28,7 +28,7 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
 	border-spacing: 0;
 	border-collapse: collapse;
 }
-.settings.displayDescriptions {
+.settings {
 	table-layout: fixed;
 }
 .settings * {
@@ -214,4 +214,18 @@ td.hideColumn {
 	text-align: right;
 	color: gray;
 	font-size: 0.8em;
+}
+
+#search {
+	box-sizing: border-box;
+	width: 100%;
+	border: none;
+	background-color: transparent;
+}
+.searching .settingRow {
+	display: none;
+}
+
+.searching .settingRow.found {
+	display: table-row;
 }

options/options.html

@@ -10,7 +10,9 @@
 		<script src="../lib/logging.js"></script>
 		<script src="../lib/settingDefinitions.js"></script>
 		<script src="../lib/settingContainers.js"></script>
+		<script src="../lib/settingStrings.js"></script>
 		<script src="../lib/settings.js"></script>
+		<script src="../lib/search.js"></script>
 		<script src="optionsGui.js"></script>
 		<script src="settingsDisplay.js"></script>
 		<script src="options.js"></script>

options/options.js

@@ -10,6 +10,8 @@
 	const optionsGui = require("./optionsGui");
 	const settings = require("./settings");
 	const settingsDisplay = require("./settingsDisplay");
+	const search = require("./search");
+	const settingStrings = require("./settingStrings");
 
 	var callbacks = {
 		showReleaseNotes: function(){
@@ -168,7 +170,26 @@
 	document.body.appendChild(table);
 	
 	const displayHidden = settings.getDefinition(settingsDisplay.displayHidden);
-	table.appendChild(optionsGui.createThead(displayHidden));
+	table.appendChild(
+		optionsGui.createThead(
+			displayHidden,
+			search.init()
+		)
+	);
+	search.on(function({search, results, lastResults}){
+		lastResults.forEach(function(node){
+			node.classList.remove("found");
+		});
+		if (search){
+			document.body.classList.add("searching");
+			results.forEach(function(node){
+				node.classList.add("found");
+			});
+		}
+		else {
+			document.body.classList.remove("searching");
+		}
+	});
 	
 	let lastSection = null;
 	let addSection = function addSection(name){
@@ -192,10 +213,16 @@
 				body.appendChild(row);
 			},
 			updateDisplay: function(){
+				const searchMode = document.body.classList.contains("searching");
 				var anyVisible = false;
 				rows.forEach(function(row){
 					var isHidden = row.classList.contains("hidden");
 					if (!isHidden){
+						if (searchMode){
+							if (!row.classList.contains("found")){
+								return;
+							}
+						}
 						if (anyVisible){
 							row.classList.remove("firstVisible");
 						}
@@ -208,6 +235,8 @@
 				body.classList[anyVisible? "remove": "add"]("hidden");
 			}
 		};
+		
+		search.on(function(){section.updateDisplay();});
 		lastSection = section;
 	};
 	addSection();
@@ -306,6 +335,9 @@
 				}
 				
 				var row = optionsGui.createSettingRow(setting);
+				settingStrings.getStrings(setting).forEach(function(string){
+					search.register(string, row);
+				});
 				let section = lastSection;
 				section.addRow(row);
 				if (!display.displayDependencies){

options/optionsGui.js

@@ -375,7 +375,7 @@
 
 	scope.createSettingRow = createSettingRow;
 	
-	function createThead(displayHidden){
+	function createThead(displayHidden, restContent){
 		const tHead = document.createElement("thead");
 		const headRow = document.createElement("tr");
 		const hideHeadCell = document.createElement("td");
@@ -393,6 +393,9 @@
 		
 		const restHeadCell = document.createElement("td");
 		restHeadCell.colSpan = 2;
+		if (restContent){
+			restHeadCell.appendChild(restContent);
+		}
 		headRow.appendChild(restHeadCell);
 		tHead.appendChild(headRow);
 		return tHead;