Merge pull request #88 from tophf/chrome-hotkeys

Add Chrome shortcut keys; update all visible popups on change; add 2 prefs to toolbar button menu

_locales/en/messages.json

@@ -181,6 +181,10 @@
 		"message": "Stylish",
 		"description": "Title for the manage page"
 	},
+	"menuShowBadge": {
+		"message": "Show active style count",
+		"description": "Label (must be very short) for the checkbox in the toolbar button context menu controlling toolbar badge text."
+	},
 	"noStylesForSite": {
 		"message": "No styles installed for this site.",
 		"description": "Text displayed when no styles are installed for the current site"

background.js

@@ -37,9 +37,54 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		case "openURL":
 			openURL(request);
 			break;
+		case "styleDisableAll":
+			chrome.contextMenus.update("disableAll", {checked: request.disableAll});
+			break;
+		case "prefChanged":
+			if (request.prefName == "show-badge") {
+				chrome.contextMenus.update("show-badge", {checked: request.value});
+			}
+			break;
 	}
 });
 
+chrome.commands.onCommand.addListener(function(command) {
+	switch (command) {
+		case "openManage":
+			openURL({url: chrome.extension.getURL("manage.html")});
+			break;
+		case "styleDisableAll":
+			disableAllStylesToggle();
+			chrome.contextMenus.update("disableAll", {checked: prefs.getPref("disableAll")});
+			break;
+	}
+});
+
+chrome.contextMenus.create({
+	id: "show-badge", title: chrome.i18n.getMessage("menuShowBadge"),
+	type: "checkbox", contexts: ["browser_action"], checked: prefs.getPref("show-badge")
+});
+chrome.contextMenus.create({
+	id: "disableAll", title: chrome.i18n.getMessage("disableAllStyles"),
+	type: "checkbox", contexts: ["browser_action"], checked: prefs.getPref("disableAll")
+});
+chrome.contextMenus.onClicked.addListener(function(info, tab) {
+	if (info.menuItemId == "disableAll") {
+		disableAllStylesToggle(info.checked);
+	} else {
+		prefs.setPref(info.menuItemId, info.checked);
+	}
+});
+
+function disableAllStylesToggle(newState) {
+	if (newState === undefined || newState === null) {
+		newState = !prefs.getPref("disableAll");
+	}
+	prefs.setPref("disableAll", newState);
+	notifyAllTabs({method: "styleDisableAll", disableAll: newState});
+	chrome.extension.sendMessage({method: "updatePopup", reason: "styleDisableAll", disableAll: newState});
+}
+
 function getStyles(options, callback) {
 
 	var enabled = fixBoolean(options.enabled);

edit.js

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

manifest.json

@@ -12,12 +12,21 @@
 	"permissions": [
 		"tabs",
 		"webNavigation",
+		"contextMenus",
 		"http://userstyles.org/",
 		"https://userstyles.org/"
 	],
 	"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,15 +174,40 @@ function openLink(event) {
 }
 
 function handleUpdate(style) {
-	var installed = document.getElementById("installed");
-	installed.replaceChild(createStyleElement(style), installed.querySelector("[style-id='" + style.id + "']"));
+	var styleElement = installed.querySelector("[style-id='" + style.id + "']");
+	if (styleElement) {
+		installed.replaceChild(createStyleElement(style), styleElement);
+	}
 }
 
 function handleDelete(id) {
-	var installed = document.getElementById("installed");
-	installed.removeChild(installed.querySelector("[style-id='" + id + "']"));
+	var styleElement = 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");
 tE("find-styles-link", "findStylesForSite");
@@ -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

@@ -80,7 +80,8 @@ function enableStyle(id, enabled) {
 			chrome.extension.sendMessage({method: "styleChanged"});
 			chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
 				handleUpdate(styles[0]);
-				notifyAllTabs({method:"styleUpdated", style: 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});
 		});
@@ -215,7 +217,9 @@ var prefs = {
 
 		var newValue = this.getPref(key);
 		if (newValue !== oldValue) {
-			notifyAllTabs({method: "prefChanged", prefName: key, value: value});
+			var message = {method: "prefChanged", prefName: key, value: value};
+			notifyAllTabs(message);
+			chrome.extension.sendMessage(message);
 		}
 	},
 	removePref: function(key) { setPref(key, undefined) }