Add Chrome shortcut keys; update popups on change

* hotkey to open Manage styles
* hotkey to enable/disable all styles

No default hotkeys are provided, to customize go to "Keyboard shortcuts" on the Extensions page

background.js

@@ -40,6 +40,20 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	}
 });
 
+chrome.commands.onCommand.addListener(function(command) {
+	switch (command) {
+		case "openManage":
+			openURL({url: chrome.extension.getURL("manage.html")});
+			break;
+		case "styleDisableAll":
+			var newState = !prefs.getPref("disableAll");
+			prefs.setPref("disableAll", newState);
+			notifyAllTabs({method: "styleDisableAll", disableAll: newState});
+			chrome.extension.sendMessage({method: "updatePopup", reason: "styleDisableAll", disableAll: newState});
+			break;
+	}
+});
+
 function getStyles(options, callback) {
 
 	var enabled = fixBoolean(options.enabled);

edit.js

@@ -619,6 +619,7 @@ function saveComplete(style) {
 	} else {
 		updateTitle();
 	}
+	chrome.extension.sendMessage({method: "updatePopup", reason: "styleUpdated", style: style});
 }
 
 function showMozillaFormat() {

manifest.json

@@ -18,6 +18,14 @@
 	"background": {
 		"page": "background.html"
 	},
+	"commands": {
+	  "openManage": {
+		"description": "__MSG_openManage__"
+	  },
+	  "styleDisableAll": {
+		"description": "__MSG_disableAllStyles__"
+	  }
+	},
 	"content_scripts": [
 		{
 			"matches": ["http://*/*", "https://*/*", "file:///*"],

popup.js

@@ -4,8 +4,10 @@ styleTemplate.innerHTML = "<input class='checker' type='checkbox'><div class='st
 var writeStyleTemplate = document.createElement("a");
 writeStyleTemplate.className = "write-style-link";
 
+var installed = document.getElementById("installed");
+
 if (!prefs.getPref("popup.stylesFirst")) {
-	document.body.insertBefore(document.querySelector("body > .actions"), document.getElementById("installed"));
+	document.body.insertBefore(document.querySelector("body > .actions"), installed);
 }
 
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
@@ -87,7 +89,6 @@ function showStyles(styles) {
 		if (enabledFirst && a.enabled !== b.enabled) return !(a.enabled < b.enabled) ? -1 : 1;
 		return a.name.localeCompare(b.name);
 	});
-	var installed = document.getElementById("installed");
 	if (styles.length == 0) {
 		installed.innerHTML = "<div class='entry' id='no-styles'>" + t('noStylesForSite') + "</div>";
 	}
@@ -173,14 +174,39 @@ function openLink(event) {
 }
 
 function handleUpdate(style) {
-	var installed = document.getElementById("installed");
+	var styleElement = installed.querySelector("[style-id='" + style.id + "']");
-	installed.replaceChild(createStyleElement(style), installed.querySelector("[style-id='" + style.id + "']"));
+	if (styleElement) {
+		installed.replaceChild(createStyleElement(style), styleElement);
+	}
 }
 
 function handleDelete(id) {
-	var installed = document.getElementById("installed");
+	var styleElement = installed.querySelector("[style-id='" + id + "']");
-	installed.removeChild(installed.querySelector("[style-id='" + id + "']"));
+	if (styleElement) {
+		installed.removeChild(styleElement);
 	}
+}
+
+function handleDisableAll(disableAll) {
+	installed.classList.toggle("disabled", disableAll);
+}
+
+chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
+	if (request.method == "updatePopup") {
+		switch (request.reason) {
+			case "styleUpdated":
+				handleUpdate(request.style);
+				break;
+			case "styleDeleted":
+				handleDelete(request.id);
+				break;
+			case "styleDisableAll":
+				document.getElementById("disableAll").checked = request.disableAll;
+				handleDisableAll(request.disableAll);
+				break;
+		}
+	}
+});
 
 tE("open-manage-link", "openManage");
 tE("write-style-for", "writeStyleFor");
@@ -191,8 +217,9 @@ tE("disableAll-label", "disableAllStyles");
 	document.getElementById(id).addEventListener("click", openLink, false);
 });
 
-loadPrefs({"disableAll": false})
+loadPrefs({"disableAll": false});
+handleDisableAll(prefs.getPref("disableAll"));
 document.getElementById("disableAll").addEventListener("change", function(event) {
-	document.getElementById("installed").classList.toggle("disabled", event.target.checked);
 	notifyAllTabs({method: "styleDisableAll", disableAll: event.target.checked});
+	chrome.extension.sendMessage({method: "updatePopup", reason: "styleDisableAll", disableAll: event.target.checked});
 });

storage.js

@@ -81,6 +81,7 @@ function enableStyle(id, enabled) {
 			chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
 				handleUpdate(styles[0]);
 				notifyAllTabs({method: "styleUpdated", style: styles[0]});
+				chrome.extension.sendMessage({method: "updatePopup", reason: "styleUpdated", style: styles[0]});
 			});
 		});
 	});
@@ -94,6 +95,7 @@ function deleteStyle(id) {
 			t.executeSql("DELETE FROM styles WHERE id = ?;", [id]);
 		}, reportError, function() {
 			chrome.extension.sendMessage({method: "styleChanged"});
+			chrome.extension.sendMessage({method: "updatePopup", reason: "styleDeleted", id: id});
 			handleDelete(id);
 			notifyAllTabs({method: "styleDeleted", id: id});
 		});