Merge pull request #87 from tophf/disable-all-styles-fix

Disable all styles fix

_locales/en/messages.json

@@ -112,6 +112,10 @@
 		"message": "Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for many popular sites.",
 		"description": "Extension description"
 	},
+	"disableAllStyles": {
+		"message": "Turn all styles off",
+		"description": "Label for the checkbox that turns all enabled styles off."
+	},
 	"disableStyleLabel": {
 		"message": "Disable",
 		"description": "Label for the button to disable a style"

apply.js

@@ -14,19 +14,38 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 			}
 			break;
 		case "styleApply":
-			for (var styleId in request.styles) {
-				applySections(styleId, request.styles[styleId]);
-			}
+			applyStyles(request.styles);
 			break;
 		case "styleReplaceAll":
 			replaceAll(request.styles, document);
 			break;
-		case "realURL":
-			sendResponse(location.href);
+		case "realURL":
+			sendResponse(location.href);
+			break;
+		case "styleDisableAll":
+			disableAll(request.disableAll);
 			break;
 	}
 });
 
+var g_disableAll = false;
+function disableAll(disable) {
+	if (!disable === !g_disableAll) return;
+	g_disableAll = disable;
+	disableSheets(g_disableAll, document);
+
+	function disableSheets(disable, doc) {
+		Array.prototype.forEach.call(doc.styleSheets, function(stylesheet) {
+			if (stylesheet.ownerNode.classList.contains("stylish")) {
+				stylesheet.disabled = disable;
+			}
+		});
+		getDynamicIFrames(doc).forEach(function(iframe) {
+			disableSheets(disable, iframe.contentDocument);
+		});
+	}
+}
+
 function removeStyle(id, doc) {
 	var e = doc.getElementById("stylish-" + id);
 	if (e) {
@@ -38,6 +57,11 @@ function removeStyle(id, doc) {
 }
 
 function applyStyles(styleHash) {
+	if ("disableAll" in styleHash) {
+		disableAll(styleHash.disableAll);
+		delete styleHash.disableAll;
+	}
+
 	for (var styleId in styleHash) {
 		applySections(styleId, styleHash[styleId]);
 	}
@@ -66,7 +90,8 @@ function applySections(styleId, sections) {
 }
 
 function addStyleElement(styleElement, doc) {
-	doc.documentElement.appendChild(doc.importNode(styleElement, true));
+	doc.documentElement.appendChild(doc.importNode(styleElement, true))
+	  .disabled = g_disableAll;
 	getDynamicIFrames(doc).forEach(function(iframe) {
 		addStyleElement(styleElement, iframe.contentDocument);
 	});
@@ -110,9 +135,10 @@ var iframeObserver = new MutationObserver(function(mutations) {
 		Array.prototype.filter.call(mutation.addedNodes, function(node) { return "IFRAME" === node.tagName; }).filter(iframeIsDynamic).forEach(function(iframe) {
 			var doc = iframe.contentDocument;
 			styles.forEach(function(style) {
-				doc.documentElement.appendChild(doc.importNode(style, true));
+				doc.documentElement.appendChild(doc.importNode(style, true))
+				  .disabled = g_disableAll;
 			});
 		});
 	});
 });
-iframeObserver.observe(document, {childList: true, subtree: true});
+iframeObserver.observe(document, {childList: true, subtree: true});

background.js

@@ -14,6 +14,7 @@ function webNavigationListener(method, data) {
 		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});
 		}
 	});
@@ -49,7 +50,7 @@ function getStyles(options, callback) {
 	var asHash = "asHash" in options ? options.asHash : false;
 
 	var callCallback = function() {
-		var styles = asHash ? {} : [];
+		var styles = asHash ? {disableAll: prefs.getPref("disableAll", false)} : [];
 		cachedStyles.forEach(function(style) {
 			if (enabled != null && fixBoolean(style.enabled) != enabled) {
 				return;

popup.html

@@ -42,6 +42,9 @@
 			#installed {
 				margin-top: 0.5em;
 			}
+			#installed.disabled {
+				opacity: 0.5;
+			}
 			body > .actions {
 				margin-top: 0.5em;
 			}
@@ -49,6 +52,9 @@
 			.actions > div, #unavailable {
 				margin-bottom: 0.75em;
 			}
+			.actions input, .actions label {
+				vertical-align: middle;
+			}
 
 			#unavailable {
 				border: none;
@@ -120,6 +126,10 @@
 	<div id="installed"></div>
 
 	<div class="actions">
+		<div id="disable-all-wrapper">
+			<input id="disableAll" type="checkbox">
+			<label id="disableAll-label" for="disableAll"></label>
+		</div>
 		<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
 		<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
 		<div id="write-style"><span id="write-style-for"></span></div>

popup.js

@@ -25,6 +25,7 @@ function updatePopUp(url) {
 	if (!urlWillWork) {
 		document.body.classList.add("blocked");
 		tE("unavailable", "stylishUnavailableForURL");
+		return;
 	}
 
 	chrome.extension.sendMessage({method: "getStyles", matchUrl: url}, showStyles);
@@ -184,7 +185,14 @@ function handleDelete(id) {
 tE("open-manage-link", "openManage");
 tE("write-style-for", "writeStyleFor");
 tE("find-styles-link", "findStylesForSite");
+tE("disableAll-label", "disableAllStyles");
 
 ["find-styles-link", "open-manage-link"].forEach(function(id) {
 	document.getElementById(id).addEventListener("click", openLink, false);
 });
+
+loadPrefs({"disableAll": false})
+document.getElementById("disableAll").addEventListener("change", function(event) {
+	document.getElementById("installed").classList.toggle("disabled", event.target.checked);
+	notifyAllTabs({method: "styleDisableAll", disableAll: event.target.checked});
+});

storage.js

@@ -162,6 +162,7 @@ var prefs = {
 	// defaults
 	"openEditInWindow": false, // new editor opens in a own browser window
 	"show-badge": true,        // display text on popup menu icon
+	"disableAll": false,       // boss key
 
 	"popup.breadcrumbs": true, // display "New style" links as URL breadcrumbs
 	"popup.breadcrumbs.usePath": false, // use URL path for "this URL"