Dim toolbar icon on unstyled tabs, regenerate icons

apply.js

@@ -14,8 +14,8 @@ function requestStyles() {
 	if (location.href.indexOf(chrome.extension.getURL("")) == 0) {
 		var bg = chrome.extension.getBackgroundPage();
 		if (bg && bg.getStyles) {
+			// apply styles immediately, then proceed with a normal request that will update the icon
 			bg.getStyles(request, applyStyles);
-			return;
 		}
 	}
 	chrome.extension.sendMessage(request, applyStyles);

background.js

@@ -2,6 +2,7 @@
 // why the content script also asks for this stuff.
 chrome.webNavigation.onCommitted.addListener(webNavigationListener.bind(this, "styleApply"));
 chrome.webNavigation.onHistoryStateUpdated.addListener(webNavigationListener.bind(this, "styleReplaceAll"));
+chrome.webNavigation.onBeforeNavigate.addListener(webNavigationListener.bind(this, null));
 function webNavigationListener(method, data) {
 	// Until Chrome 41, we can't target a frame with a message
 	// (https://developer.chrome.com/extensions/tabs#method-sendMessage)
@@ -11,19 +12,21 @@ function webNavigationListener(method, data) {
 		return;
 	}
 	getStyles({matchUrl: data.url, enabled: true, asHash: true}, function(styleHash) {
+		if (method) {
 			chrome.tabs.sendMessage(data.tabId, {method: method, styles: styleHash});
-		// Don't show the badge for frames
-		if (data.frameId == 0 && prefs.getPref("show-badge")) {
-			delete styleHash.disableAll;
-			chrome.browserAction.setBadgeText({text: getBadgeText(Object.keys(styleHash)), tabId: data.tabId});
 		}
+		updateIcon({id: data.tabId}, styleHash)
 	});
 }
 
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	switch (request.method) {
 		case "getStyles":
-			getStyles(request, sendResponse);
+			var styles = getStyles(request, sendResponse);
+			if (request.matchUrl && sender && sender.tab && sender.frameId == 0) {
+				// this is a main content frame, so update the icon
+				updateIcon(sender.tab, styles);
+			}
 			return true;
 		case "saveStyle":
 			saveStyle(request, sendResponse);
@@ -123,11 +126,11 @@ function getStyles(options, callback) {
 			}
 		});
 		callback(styles);
+		return styles;
 	}
 
 	if (cachedStyles) {
-		callCallback();
+		return callCallback();
-		return;
 	}
 
 	getDatabase(function(db) {

manifest.json

@@ -43,7 +43,10 @@
 	],
 	"options_page": "manage.html",
 	"browser_action": {
-		"default_icon": "19.png",
+		"default_icon": {
+			"19": "19w.png",
+			"38": "38w.png"
+		},
 		"default_title": "Stylish",
 		"default_popup": "popup.html"
 	},

messaging.js

@@ -3,7 +3,7 @@ function notifyAllTabs(request) {
 		windows.forEach(function(win) {
 			win.tabs.forEach(function(tab) {
 				chrome.tabs.sendMessage(tab.id, request);
-				updateBadgeText(tab);
+				updateIcon(tab);
 			});
 		});
 	});
@@ -16,12 +16,27 @@ function notifyAllTabs(request) {
 	chrome.extension.sendMessage(reqPopup);
 }
 
-function updateBadgeText(tab) {
+var defaultBadgeColor = "red";
-	if (prefs.getPref("show-badge")) {
+chrome.browserAction.getBadgeBackgroundColor({}, function(color) {
-		function stylesReceived(styles) {
+	defaultBadgeColor = color;
-			var t = getBadgeText(styles);
+});
-			console.log("Tab " + tab.id + " (" + tab.url + ") badge text set to '" + t + "'.");
+
-			chrome.browserAction.setBadgeText({text: t, tabId: tab.id});
+function updateIcon(tab, styles) {
+	if (styles) {
+		// check for not-yet-existing tabs e.g. omnibox instant search
+		chrome.tabs.get(tab.id, function() {
+			if (!chrome.runtime.lastError) {
+				// for 'styles' asHash:true fake the length by counting numeric ids manually
+				if (styles.length === undefined) {
+					styles.length = 0;
+					for (var id in styles) {
+						styles.length += id.match(/^\d+$/) ? 1 : 0;
+					}
+				}
+				stylesReceived(styles);
+			}
+		});
+		return;
 	}
 	// if we have access to this, call directly. a page sending a message to itself doesn't seem to work right.
 	if (typeof getStyles != "undefined") {
@@ -29,11 +44,17 @@ function updateBadgeText(tab) {
 	} else {
 		chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url, enabled: true}, stylesReceived);
 	}
-	} else {
-		chrome.browserAction.setBadgeText({text: "", tabId: tab.id});
-	}
-}
 
-function getBadgeText(styles) {
+	function stylesReceived(styles) {
-	return styles.length == 0 ? "" : ("" + styles.length);
+		var disableAll = prefs.getPref("disableAll");
+		var postfix = styles.length == 0 || disableAll ? "w" : "";
+		chrome.browserAction.setIcon({
+			path: {19: "19" + postfix + ".png", 38: "38" + postfix + ".png"},
+			tabId: tab.id
+		});
+		var t = prefs.getPref("show-badge") && styles.length ? ("" + styles.length) : "";
+		chrome.browserAction.setBadgeText({text: t, tabId: tab.id});
+		chrome.browserAction.setBadgeBackgroundColor({color: disableAll ? "#aaa" : defaultBadgeColor});
+		//console.log("Tab " + tab.id + " (" + tab.url + ") badge text set to '" + t + "'.");
+	}
 }