Listing filters for 'Manage'

Two independent filters. One allows only styles that are enabled, the
other allows only styles that were written locally (that is, styles
without an update URL).

_locales/en/messages.json

@@ -129,10 +129,22 @@
 		"message": "Install update",
 		"description": "Label for the button to install an update for a single style"
 	},
+	"manageFilters": {
+		"message": "Filters",
+		"description": "Label for filters container"
+	},
 	"manageHeading": {
 		"message": "Installed Styles",
 		"description": "Heading for the manage page"
 	},
+	"manageOnlyEnabled": {
+		"message": "Only enabled styles",
+		"description": "Checkbox to show only enabled styles"
+	},
+	"manageOnlyEdited": {
+		"message": "Only edited styles",
+		"description": "Checkbox to show only locally edited styles"
+	},
 	"manageText": {
 		"message": "Visit <a href='http:\/\/userstyles.org'>userstyles.org<\/a> for pre-made styles. Ask in <a href='http:\/\/forum.userstyles.org'>the forum<\/a> if you need help.",
 		"description": "Help text on the manage page"

manage.html

@@ -25,15 +25,23 @@
 				-webkit-box-shadow: 0px 0px 50px -18px black;
 			}
 			#installed {
-				padding-left: 280px;
+				position: relative;
+				margin-left: 280px;
 			}
-			.enabled, .disabled {
+			[style-id] {
 				margin: 10px;
 				padding: 0px 15px;
 			}
-			.enabled:not(:first-child), .disabled:not(:first-child) {
+			[style-id] {
 				border-top: 2px solid gray;
 			}
+			#installed::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				width: 100%; height: 2px;
+				background-color: #fff;
+			}
 			.applies-to, .actions {
 				padding-left: 15px;
 			}
@@ -93,13 +101,25 @@
 				}
 
 				#installed {
-					padding-left: 0px;
+					margin-left: 0px;
 				}
 
-				.enabled, .disabled {
+				[style-id] {
 					margin: 0px;
 				}
 			}
+
+			fieldset {
+				border-width:  1px;
+				border-radius: 6px;
+				margin: 1em 0;
+			}
+			legend {
+				color: gray;
+			}
+			.enabled-only > .disabled, .edited-only > [style-update-url] {
+				display: none;
+			}
 		</style>
 		<script src="localization.js"></script>
 		<script src="health.js"></script>
@@ -113,6 +133,11 @@
 			<img src="128.png">
 			<h1 id="manage-heading"></h1>
 			<p id="manage-text"></p>
+			<fieldset>
+				<legend id="filters"></legend>
+				<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled"></label></div>
+				<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited"></label></div>
+			</fieldset>
 			<p><button id="check-all-updates"></button></p>
 			<p><a href="edit.html"><button id="add-style-label"></button></a></p>
 			<div id="options">

manage.js

@@ -8,6 +8,11 @@ appliesToExtraTemplate.className = "applies-to-extra";
 appliesToExtraTemplate.innerHTML = " " + t('appliesDisplayTruncatedSuffix');
 
 chrome.extension.sendMessage({method: "getStyles"}, showStyles);
+loadPrefs({
+	"manage.onlyEnabled": false,
+	"manage.onlyEdited": false,
+	"show-badge": true
+});
 
 function showStyles(styles) {
 	styles.sort(function(a, b) { return a.name.localeCompare(b.name)});
@@ -15,7 +20,6 @@ function showStyles(styles) {
 	styles.map(createStyleElement).forEach(function(e) {
 		installed.appendChild(e);
 	});
-	loadPrefs({"show-badge": true});
 }
 
 function createStyleElement(style) {
@@ -341,5 +345,21 @@ tE("check-all-updates", "checkAllUpdates");
 tE("add-style-label", "addStyleLabel");
 tE("options-heading", "optionsHeading");
 tE("show-badge-label", "prefShowBadge");
+tE("manage.onlyEnabled-label", "manageOnlyEnabled");
+tE("manage.onlyEdited-label", "manageOnlyEdited");
+tE("filters", "manageFilters");
 
 document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);
+
+function onFilterChange (className, event) {
+	var container = document.getElementById("installed"),
+	    control = event.target;
+	if (control.checked) container.classList.add(className);
+	else container.classList.remove(className);
+}
+function initFilter(className, node) {
+	node.addEventListener("change", onFilterChange.bind(undefined, className), false);
+	onFilterChange(className, {target: node});
+}
+initFilter("enabled-only", document.getElementById("manage.onlyEnabled"));
+initFilter("edited-only", document.getElementById("manage.onlyEdited"));

storage.js

@@ -168,6 +168,9 @@ var prefs = {
 	"popup.breadcrumbs.usePath": false, // use URL path for "this URL"
 	"popup.enabledFirst": true,  // display enabled styles before disabled styles
 
+	"manage.onlyEnabled": false, // display only enabled styles
+	"manage.onlyEdited": false,// display only styles created locally
+
 	NO_DEFAULT_PREFERENCE: "No default preference for '%s'",
 	UNHANDLED_DATA_TYPE: "Default '%s' is of type '%s' - what should be done with it?",