Merge pull request #112 from tophf/manage-search

Manage styles: add search contents 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

@@ -15,6 +15,7 @@ var styleTemplate = tHTML('\
 ');
 
 var lastUpdatedStyleId = null;
+var installed = document.getElementById("installed");
 
 var appliesToExtraTemplate = document.createElement("span");
 appliesToExtraTemplate.className = "applies-to-extra";
@@ -33,7 +34,6 @@ function showStyles(styles) {
 		return;
 	}
 	styles.sort(function(a, b) { return a.name.localeCompare(b.name)});
-	var installed = document.getElementById("installed");
 	styles.map(createStyleElement).forEach(function(e) {
 		installed.appendChild(e);
 	});
@@ -186,7 +186,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 });
 
 function handleUpdate(style) {
-	var installed = document.getElementById("installed");
 	var element = createStyleElement(style);
 	installed.replaceChild(element, installed.querySelector("[style-id='" + style.id + "']"));
 	if (style.id == lastUpdatedStyleId) {
@@ -197,7 +196,6 @@ function handleUpdate(style) {
 }
 
 function handleDelete(id) {
-	var installed = document.getElementById("installed");
 	installed.removeChild(installed.querySelector("[style-id='" + id + "']"));
 }
 
@@ -432,14 +430,51 @@ 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) {
-	var container = document.getElementById("installed"),
-	    control = event.target;
-	if (control.checked) container.classList.add(className);
-	else container.classList.remove(className);
+	installed.classList.toggle(className, event.target.checked);
 }
 function initFilter(className, node) {
 	node.addEventListener("change", onFilterChange.bind(undefined, className), false);