Manager: search styles filter

_locales/en/messages.json

@@ -221,6 +221,10 @@
 		"message": "Use /re/ syntax for regexp search",
 		"description": "Label after the search input field in the editor shown on Ctrl-F"
 	},
+	"searchStyles": {
+		"message": "Search contents",
+		"description": "Label for the search filter textbox on the Manage styles page"
+	},
 	"sectionAdd": {
 		"message": "Add another section",
 		"description": "Label for the button to add a section"

manage.html

@@ -119,6 +119,15 @@
 			.enabled-only > .disabled, .edited-only > [style-update-url] {
 				display: none;
 			}
+
+			#search {
+				width: calc(100% - 4px);
+				margin: 0.25rem 4px 0;
+				border-radius: 0.25rem;
+				padding-left: 0.25rem;
+				border-width: 1px;
+			}
+
 		</style>
 		<script src="localization.js"></script>
 		<script src="health.js"></script>
@@ -134,6 +143,7 @@
 				<legend id="filters" i18n-text="manageFilters"></legend>
 				<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label></div>
 				<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label></div>
+				<div><input id="search" type="search" i18n-placeholder="searchStyles"></div>
 			</fieldset>
 			<p><button id="check-all-updates" i18n-text="checkAllUpdates"></button></p>
 			<p>

manage.js

@@ -430,8 +430,48 @@ function jsonEquals(a, b, property) {
 	}
 }
 
+function searchStyles(immediately) {
+	var query = document.getElementById("search").value.toLocaleLowerCase();
+	if (query == (searchStyles.lastQuery || "")) {
+		return;
+	}
+	searchStyles.lastQuery = query;
+	if (immediately) {
+		doSearch();
+	} else {
+		clearTimeout(searchStyles.timeout);
+		searchStyles.timeout = setTimeout(doSearch, 100);
+	}
+	function doSearch() {
+		chrome.extension.sendMessage({method: "getStyles"}, function(styles) {
+			styles.forEach(function(style) {
+				var el = document.querySelector("[style-id='" + style.id + "']");
+				if (el) {
+					el.style.display = !query || isMatchingText(style.name) || isMatchingStyle(style) ? "" : "none";
+				}
+			});
+		});
+	}
+	function isMatchingStyle(style) {
+		return style.sections.some(function(section) {
+			return Object.keys(section).some(function(key) {
+				var value = section[key];
+				switch (typeof value) {
+					case "string": return isMatchingText(value);
+					case "object": return value.some(isMatchingText);
+				}
+			});
+		});
+	}
+	function isMatchingText(text) {
+		return text.toLocaleLowerCase().indexOf(query) >= 0;
+	}
+}
+
 document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);
 document.getElementById("apply-all-updates").addEventListener("click", applyUpdateAll, false);
+document.getElementById("search").addEventListener("input", searchStyles);
+searchStyles(true); // re-apply filtering on history Back
 
 function onFilterChange (className, event) {
 	installed.classList.toggle(className, event.target.checked);