issue #4 Add option to hide number of enabled styles in active tab from toolbar icon

_locales/en/messages.json

@@ -145,6 +145,14 @@
 		"message": "Manage installed styles.",
 		"description": "Link to open the manage page."
 	},
+	"optionsHeading": {
+		"message": "Options",
+		"description": "Heading for options section on manage page."
+	},
+	"prefShowBadge": {
+		"message": "Show number of styles active for the current site on the toolbar button",
+		"description": "Label for the checkbox controlling toolbar badge text."
+	},
 	"sectionAdd": {
 		"message": "Add another section",
 		"description": "Label for the button to add a section"

background.js

@@ -3,12 +3,14 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		case "getStyles":
 			getStyles(request, function(r) {
 				sendResponse(r);
-				if (request.updateBadge) {
-					var t = getBadgeText(r);
-					console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") badge text set to '" + t + "'.");
-					chrome.browserAction.setBadgeText({text: t, tabId: sender.tab.id});
-				} else {
-					console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") doesn't get badge text.");
+				if (localStorage["show-badge"] == "true") {
+					if (request.updateBadge) {
+						var t = getBadgeText(r);
+						console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") badge text set to '" + t + "'.");
+						chrome.browserAction.setBadgeText({text: t, tabId: sender.tab.id});
+					} else {
+						console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") doesn't get badge text.");
+					}
 				}
 			});
 			return true;
@@ -293,3 +295,5 @@ function getDomains(url) {
 	return domains;
 }
 
+// Get the DB so that any first run actions will be performed immediately when the background page loads.
+getDatabase(function() {}, reportError);

manage.html

@@ -97,6 +97,10 @@
 			<p id="manage-text"></p>
 			<p><button id="check-all-updates"></button></p>
 			<p><a href="edit.html"><button id="add-style-label"></button></a></p>
+			<div id="options">
+				<h2 id="options-heading"></h2>
+				<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge"></label>
+			</div>
 		</div>
 		<div id="installed"></div>
 

manage.js

@@ -14,6 +14,8 @@ function showStyles(styles) {
 	styles.map(createStyleElement).forEach(function(e) {
 		installed.appendChild(e);
 	});
+	// prefs may be defaulted in storage.js - at this point they'll have been loaded
+	loadPrefs();
 }
 
 function createStyleElement(style) {
@@ -342,10 +344,37 @@ function getType(o) {
 	throw "Not supported - " + o;
 }
 
+function isCheckbox(el) {
+	return el.nodeName.toLowerCase() == "input" && "checkbox" == el.type.toLowerCase();
+}
+
+function changePref(event) {
+	var el = event.target;
+	localStorage[el.id] = isCheckbox(el) ? el.checked : el.value;
+	notifyAllTabs({method: "prefChanged"});
+}
+
+function loadPrefs() {
+	["show-badge"].forEach(function(id) {
+		var value = localStorage[id];
+		var el = document.getElementById(id);
+		if (isCheckbox(el)) {
+			if (value == "true") {
+				el.checked = true;
+			}
+		} else {
+			el.value = value;
+		}
+		el.addEventListener("change", changePref);
+	});
+}
+
 document.title = t("manageTitle");
 tE("manage-heading", "manageHeading");
 tE("manage-text", "manageText", null, false);
 tE("check-all-updates", "checkAllUpdates");
 tE("add-style-label", "addStyleLabel");
+tE("options-heading", "optionsHeading");
+tE("show-badge-label", "prefShowBadge");
 
 document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);

messaging.js

@@ -10,11 +10,15 @@ function notifyAllTabs(request) {
 }
 
 function updateBadgeText(tab) {
-	chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url, enabled: true}, function(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});
-	});
+	if (localStorage["show-badge"] == "true") {
+		chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url, enabled: true}, function(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});
+		});
+	} else {
+		chrome.browserAction.setBadgeText({text: "", tabId: tab.id});
+	}
 }
 
 function getBadgeText(styles) {

storage.js

@@ -1,6 +1,7 @@
 var stylishDb = null;
 function getDatabase(ready, error) {
-	if (stylishDb != null) {
+	console.log("getting tha db");
+	if (stylishDb != null && stylishDb.version == "1.5") {
 		ready(stylishDb);
 		return;
 	}
@@ -57,19 +58,22 @@ function dbV13(d, error, done) {
 		// clear out orphans
 		t.executeSql('DELETE FROM section_meta WHERE section_id IN (SELECT sections.id FROM sections LEFT JOIN styles ON styles.id = sections.style_id WHERE styles.id IS NULL);');
 		t.executeSql('DELETE FROM sections WHERE id IN (SELECT sections.id FROM sections LEFT JOIN styles ON styles.id = sections.style_id WHERE styles.id IS NULL);');
-	}, error, function() { done(d)});
+	}, error, function() { dbV14(d, error, done)});
 }
 
 function dbV14(d, error, done) {
 	d.changeVersion(d.version, '1.4', function (t) {
 		t.executeSql('UPDATE styles SET url = null WHERE url = "undefined";');
-	}, error, function() { done(d)});
+	}, error, function() { dbV15(d, error, done)});
 }
 
 function dbV15(d, error, done) {
+	if (!("show-badge" in localStorage)) {
+		localStorage["show-badge"] = true;
+	}
 	d.changeVersion(d.version, '1.5', function (t) {
 		t.executeSql('ALTER TABLE styles ADD COLUMN originalMd5 TEXT NULL;');
-	}, error, function() { done(d)});
+	}, error, function() { done(d, error, done)});
 }
 
 function enableStyle(id, enabled) {