Merge pull request #115 from tophf/icon-no-styles

Dim toolbar icon on unstyled tabs

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);
@@ -41,9 +41,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		case "styleReplaceAll":
 			replaceAll(request.styles, document);
 			break;
-		case "realURL":
-			sendResponse(location.href);
-			break;
 		case "styleDisableAll":
 			disableAll(request.disableAll);
 			break;

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) {
-		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});
+		if (method) {
+			chrome.tabs.sendMessage(data.tabId, {method: method, styles: styleHash});
 		}
+		updateIcon({id: data.tabId, url: data.url}, styleHash);
 	});
 }
 
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	switch (request.method) {
 		case "getStyles":
-			getStyles(request, sendResponse);
+			var styles = getStyles(request, sendResponse);
+			// check if this is a main content frame style enumeration
+			if (request.matchUrl && !request.id && sender && sender.tab && sender.frameId == 0) {
+				updateIcon(sender.tab, styles);
+			}
 			return true;
 		case "saveStyle":
 			saveStyle(request, sendResponse);
@@ -62,15 +65,15 @@ chrome.commands.onCommand.addListener(function(command) {
 
 // contextMenus API is present in ancient Chrome but it throws an exception
 // upon encountering the unsupported parameter value "browser_action", so we have to catch it.
-try {
+
 chrome.contextMenus.create({
 	id: "show-badge", title: chrome.i18n.getMessage("menuShowBadge"),
 	type: "checkbox", contexts: ["browser_action"], checked: prefs.getPref("show-badge")
-});
+}, function() { var clearError = chrome.runtime.lastError; });
 chrome.contextMenus.create({
 	id: "disableAll", title: chrome.i18n.getMessage("disableAllStyles"),
 	type: "checkbox", contexts: ["browser_action"], checked: prefs.getPref("disableAll")
-});
+}, function() { var clearError = chrome.runtime.lastError; });
 chrome.contextMenus.onClicked.addListener(function(info, tab) {
 	if (info.menuItemId == "disableAll") {
 		disableAllStylesToggle(info.checked);
@@ -78,7 +81,6 @@ chrome.contextMenus.onClicked.addListener(function(info, tab) {
 		prefs.setPref(info.menuItemId, info.checked);
 	}
 });
-} catch(e) {console.error(e)}
 
 function disableAllStylesToggle(newState) {
 	if (newState === undefined || newState === null) {
@@ -123,11 +125,11 @@ function getStyles(options, callback) {
 			}
 		});
 		callback(styles);
+		return styles;
 	}
 
 	if (cachedStyles) {
-		callCallback();
-		return;
+		return callCallback();
 	}
 
 	getDatabase(function(db) {
@@ -381,13 +383,9 @@ function openURL(options) {
 			chrome.tabs.highlight({windowId: tabs[0].windowId, tabs: tabs[0].index}, function (window) {});
 		} else {
 			delete options.method;
-			chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
+			getActiveTab(function(tab) {
 				// re-use an active new tab page
-				if (tabs.length && tabs[0].url.match(/^chrome:\/\/newtab\/?$/)) {
-					chrome.tabs.update(options);
-				} else {
-					chrome.tabs.create(options);
-				}
+				chrome.tabs[tab.url == "chrome://newtab/" ? "update" : "create"](options);
 			});
 		}
 	});

manifest.json

@@ -5,7 +5,7 @@
 	"homepage_url": "https://userstyles.org",
 	"manifest_version": 2,
 	"icons": {
-	"16": "16.png",
+		"16": "16.png",
 		"48": "48.png",
 		"128": "128.png"
 	},
@@ -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,24 +16,74 @@ function notifyAllTabs(request) {
 	chrome.extension.sendMessage(reqPopup);
 }
 
-function updateBadgeText(tab) {
-	if (prefs.getPref("show-badge")) {
-		function stylesReceived(styles) {
-			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) {
+	// while NTP is still loading only process the request for its main frame with a real url
+	// (but when it's loaded we should process style toggle requests from popups, for example)
+	if (tab.url == "chrome://newtab/" && tab.status != "complete") {
+		return;
+	}
+	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;
+	}
+	getTabRealURL(tab, function(url) {
 		// 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") {
-			getStyles({matchUrl: tab.url, enabled: true}, stylesReceived);
+			getStyles({matchUrl: url, enabled: true}, stylesReceived);
 		} else {
-			chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url, enabled: true}, stylesReceived);
+			chrome.extension.sendMessage({method: "getStyles", matchUrl: url, enabled: true}, stylesReceived);
 		}
-	} else {
-		chrome.browserAction.setBadgeText({text: "", tabId: tab.id});
+	});
+
+	function stylesReceived(styles) {
+		var disableAll = "disableAll" in styles ? styles.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" : [0, 0, 0, 0]});
+		//console.log("Tab " + tab.id + " (" + tab.url + ") badge text set to '" + t + "'.");
 	}
 }
 
-function getBadgeText(styles) {
-	return styles.length == 0 ? "" : ("" + styles.length);
+function getActiveTab(callback) {
+	chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
+		callback(tabs[0]);
+	});
+}
+
+function getActiveTabRealURL(callback) {
+	getActiveTab(function(tab) {
+		getTabRealURL(tab, callback);
+	});
+}
+
+function getTabRealURL(tab, callback) {
+	if (tab.url != "chrome://newtab/") {
+		callback(tab.url);
+		return;
+	}
+	chrome.webNavigation.getAllFrames({tabId: tab.id}, function(frames) {
+		frames.some(function(frame) {
+			if (frame.parentFrameId == -1) { // parentless frame is the main frame
+				callback(frame.url);
+				return true;
+			}
+		});
+	});
 }

popup.js

@@ -24,17 +24,7 @@ if (!prefs.getPref("popup.stylesFirst")) {
 	document.body.insertBefore(document.querySelector("body > .actions"), installed);
 }
 
-chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-	// Only one is active, I hope
-	var tab = tabs[0];
-
-	// The new tab lies about what it is.
-	if (tab.url == "chrome://newtab/") {
-		chrome.tabs.sendMessage(tab.id, {method: "realURL"}, null, updatePopUp);
-	} else {
-		updatePopUp(tab.url);
-	}
-});
+getActiveTabRealURL(updatePopUp);
 
 function updatePopUp(url) {
 	var urlWillWork = /^(file|http|https|chrome\-extension):/.exec(url);
@@ -195,8 +185,8 @@ function handleUpdate(style) {
 	if (styleElement) {
 		installed.replaceChild(createStyleElement(style), styleElement);
 	} else {
-		chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
-			if (tabs.length && chrome.extension.getBackgroundPage().getApplicableSections(style, tabs[0].url).length) {
+		getActiveTabRealURL(function(url) {
+			if (chrome.extension.getBackgroundPage().getApplicableSections(style, url).length) {
 				// a new style for the current url is installed
 				document.getElementById("unavailable").style.display = "none";
 				installed.appendChild(createStyleElement(style));