Deprecate localStorage, refactor prefs

background.js

@@ -102,7 +102,6 @@ function disableAllStylesToggle(newState) {
 		newState = !prefs.getPref("disableAll");
 	}
 	prefs.setPref("disableAll", newState);
-	notifyAllTabs({method: "styleDisableAll", disableAll: newState});
 }
 
 function getStyles(options, callback) {

edit.js

@@ -11,7 +11,7 @@ var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain",
 var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
 
 // make querySelectorAll enumeration code readable
-["forEach", "some", "indexOf"].forEach(function(method) {
+["forEach", "some", "indexOf", "map"].forEach(function(method) {
 	NodeList.prototype[method]= Array.prototype[method];
 });
 
@@ -125,8 +125,7 @@ function initCodeMirror() {
 	var isWindowsOS = navigator.appVersion.indexOf("Windows") > 0;
 
 	// default option values
-	var userOptions = prefs.getPref("editor.options");
+	shallowMerge(CM.defaults, {
-	var stylishOptions = {
 		mode: 'css',
 		lineNumbers: true,
 		lineWrapping: true,
@@ -142,9 +141,7 @@ function initCodeMirror() {
 			"Alt-PageDown": "nextEditor",
 			"Alt-PageUp": "prevEditor"
 		}
-	}
+	}, prefs.getPref("editor.options"));
-	shallowMerge(stylishOptions, CM.defaults);
-	shallowMerge(userOptions, CM.defaults);
 
 	// additional commands
 	CM.commands.jumpToLine = jumpToLine;
@@ -158,11 +155,9 @@ function initCodeMirror() {
 	// "basic" keymap only has basic keys by design, so we skip it
 
 	var extraKeysCommands = {};
-	if (userOptions && typeof userOptions.extraKeys == "object") {
+	Object.keys(CM.defaults.extraKeys).forEach(function(key) {
-		Object.keys(userOptions.extraKeys).forEach(function(key) {
+		extraKeysCommands[CM.defaults.extraKeys[key]] = true;
-			extraKeysCommands[userOptions.extraKeys[key]] = true;
 	});
-	}
 	if (!extraKeysCommands.jumpToLine) {
 		CM.keyMap.sublime["Ctrl-G"] = "jumpToLine";
 		CM.keyMap.emacsy["Ctrl-G"] = "jumpToLine";
@@ -246,12 +241,11 @@ function initCodeMirror() {
 			});
 		}
 		document.getElementById("editor.keyMap").innerHTML = optionsHtmlFromArray(Object.keys(CM.keyMap).sort());
-		var controlPrefs = {};
-		document.querySelectorAll("#options *[data-option][id^='editor.']").forEach(function(option) {
-			controlPrefs[option.id] = CM.defaults[option.dataset.option];
-		});
 		document.getElementById("options").addEventListener("change", acmeEventListener, false);
-		loadPrefs(controlPrefs);
+		loadPrefs(
+			document.querySelectorAll("#options *[data-option][id^='editor.']")
+				.map(function(option) { return option.id })
+		);
 	});
 
 	hotkeyRerouter.setState(true);
@@ -1561,7 +1555,7 @@ function showCodeMirrorPopup(title, html, options) {
 	var popup = showHelp(title, html);
 	popup.classList.add("big");
 
-	popup.codebox = CodeMirror(popup.querySelector(".contents"), shallowMerge(options, {
+	popup.codebox = CodeMirror(popup.querySelector(".contents"), shallowMerge({
 		mode: "css",
 		lineNumbers: true,
 		lineWrapping: true,
@@ -1572,7 +1566,7 @@ function showCodeMirrorPopup(title, html, options) {
 		styleActiveLine: true,
 		theme: prefs.getPref("editor.theme"),
 		keyMap: prefs.getPref("editor.keyMap")
-	}));
+	}, options));
 	popup.codebox.focus();
 	popup.codebox.on("focus", function() { hotkeyRerouter.setState(false) });
 	popup.codebox.on("blur", function() { hotkeyRerouter.setState(true) });

manage.js

@@ -110,7 +110,7 @@ function createStyleElement(style) {
 			event.stopPropagation();
 			if (openWindow || openBackgroundTab || openForegroundTab) {
 				if (openWindow) {
-					var options = prefs.getPref('windowPosition', {});
+					var options = prefs.getPref("windowPosition");
 					options.url = url;
 					chrome.windows.create(options);
 				} else {
@@ -475,12 +475,12 @@ document.addEventListener("DOMContentLoaded", function() {
 	document.getElementById("search").addEventListener("input", searchStyles);
 	searchStyles(true); // re-apply filtering on history Back
 
-	loadPrefs({
+	loadPrefs([
-		"manage.onlyEnabled": false,
+		"manage.onlyEnabled",
-		"manage.onlyEdited": false,
+		"manage.onlyEdited",
-		"show-badge": true,
+		"show-badge",
-		"popup.stylesFirst": true
+		"popup.stylesFirst"
-	});
+	]);
 	initFilter("enabled-only", document.getElementById("manage.onlyEnabled"));
 	initFilter("edited-only", document.getElementById("manage.onlyEdited"));
 });

messaging.js

@@ -8,11 +8,7 @@ function notifyAllTabs(request) {
 		});
 	});
 	// notify all open popups
-	// use a shallow copy since the original `request` is still being processed
+	var reqPopup = shallowMerge({}, request, {method: "updatePopup", reason: request.method});
-	var reqPopup = {};
-	for (var k in request) reqPopup[k] = request[k];
-	reqPopup.reason = request.method;
-	reqPopup.method = "updatePopup";
 	chrome.extension.sendMessage(reqPopup);
 }
 

popup.js

@@ -185,10 +185,6 @@ function handleDelete(id) {
 	}
 }
 
-function handleDisableAll(disableAll) {
-	installed.classList.toggle("disabled", disableAll);
-}
-
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	if (request.method == "updatePopup") {
 		switch (request.reason) {
@@ -199,12 +195,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 			case "styleDeleted":
 				handleDelete(request.id);
 				break;
-			case "prefChanged":
-				if (request.prefName == "disableAll") {
-					document.getElementById("disableAll").checked = request.value;
-					handleDisableAll(request.value);
-				}
-				break;
 		}
 	}
 });
@@ -213,9 +203,7 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	document.getElementById(id).addEventListener("click", openLink, false);
 });
 
-loadPrefs({"disableAll": false});
-handleDisableAll(prefs.getPref("disableAll"));
 document.getElementById("disableAll").addEventListener("change", function(event) {
-	notifyAllTabs({method: "styleDisableAll", disableAll: event.target.checked});
+	installed.classList.toggle("disabled", prefs.getPref("disableAll"));
-	handleDisableAll(event.target.checked);
 });
+loadPrefs(["disableAll"]);

storage.js

@@ -136,28 +136,32 @@ function isCheckbox(el) {
 	return el.nodeName.toLowerCase() == "input" && "checkbox" == el.type.toLowerCase();
 }
 
-function changePref(event) {
+// Accepts an array of pref names (values are fetched via prefs.getPref)
-	var el = event.target;
+function loadPrefs(IDs) {
-	prefs.setPref(el.id, isCheckbox(el) ? el.checked : el.value);
+	var localIDs = {};
+	IDs.forEach(function(id) {
+		localIDs[id] = true;
+		updateElement(id).addEventListener("change", function() {
+			prefs.setPref(this.id, isCheckbox(this) ? this.checked : this.value);
+		});
+	});
+	chrome.extension.onMessage.addListener(function(request) {
+		if (request.prefName in localIDs) {
+			updateElement(request.prefName);
 		}
-
+	});
-// Accepts a hash of pref name to default value
+	function updateElement(id) {
-function loadPrefs(prefs) {
-	for (var id in prefs) {
-		var value = this.prefs.getPref(id, prefs[id]);
 		var el = document.getElementById(id);
-		if (isCheckbox(el)) {
+		el[isCheckbox(el) ? "checked" : "value"] = prefs.getPref(id);
-			el.checked = value;
-		} else {
-			el.value = value;
-		}
 		el.dispatchEvent(new Event("change", {bubbles: true, cancelable: true}));
-		el.addEventListener("change", changePref);
+		return el;
 	}
 }
 
-var prefs = {
+var prefs = chrome.extension.getBackgroundPage().prefs || new function Prefs() {
-	defaults: {
+	var me = this;
+
+	var defaults = {
 		"openEditInWindow": false,      // new editor opens in a own browser window
 		"windowPosition": {},           // detached window position
 		"show-badge": true,             // display text on popup menu icon
@@ -189,83 +193,113 @@ var prefs = {
 		},
 		"editor.lintDelay": 500,        // lint gutter marker update delay, ms
 		"editor.lintReportDelay": 4500, // lint report update delay, ms
-	},
+	};
+	var values = deepCopy(defaults);
 
-	NO_DEFAULT_PREFERENCE: "No default preference for '%s'",
+	var syncTimeout; // see broadcast() function below
-	UNHANDLED_DATA_TYPE: "Default '%s' is of type '%s' - what should be done with it?",
 
-	getPref: function(key, defaultValue) {
+	Object.defineProperty(this, "readOnlyValues", {value: {}});
-	// Returns localStorage[key], defaultValue, this.defaults[key], or undefined
+
-	//   as type of defaultValue, this.defaults[key], or localStorage[key]
+	Prefs.prototype.getPref = function(key, defaultValue) {
-		var value = localStorage[key];
+		if (key in values) {
-		// NB: localStorage["not_key"] is undefined, localStorage.getItem("not_key") is null
+			return values[key];
-		if (value === undefined) {
-			return defaultValue === undefined ? shallowCopy(this.defaults[key]) : defaultValue;
 		}
-		switch (typeof (defaultValue === undefined ? this.defaults[key] : defaultValue)) {
+		if (defaultValue !== undefined) {
-			case "boolean": return value.toLowerCase() === "true";
+			return defaultValue;
-			case "number": return Number(value);
-			case "object": return JSON.parse(value);
-			case "string": break;
-			case "undefined":  console.warn(this.NO_DEFAULT_PREFERENCE, key); break;
-			default: console.error(UNHANDLED_DATA_TYPE, key, typeof defaultValue);
 		}
-		return value;
+		if (key in defaults) {
-	},
+			return defaults[key];
-	getAllPrefs: function() {
-		var all = {}, me = this;
-		Object.keys(this.defaults).forEach(function(key) { all[key] = me.getPref(key) });
-		return all;
-	},
-	setPref: function(key, value, options) {
-		var oldValue = localStorage[key];
-		if (value === undefined || equal(value, this.defaults[key])) {
-			delete localStorage[key];
-		} else {
-			localStorage[key] = typeof value == "string" ? value : JSON.stringify(value);
 		}
-		if (!equal(value, oldValue === undefined ? this.defaults[key] : oldValue)) {
+		console.warn("No default preference for '%s'", key);
-			this.broadcast(key, value, options);
+	};
+
+	Prefs.prototype.getAllPrefs = function(key) {
+		return deepCopy(values);
+	};
+
+	Prefs.prototype.setPref = function(key, value, options) {
+		var oldValue = deepCopy(values[key]);
+		values[key] = value;
+		defineReadonlyProperty(this.readOnlyValues, key, value);
+		if ((!options || !options.noBroadcast) && !equal(value, oldValue)) {
+			me.broadcast(key, value, options);
 		}
-	},
+	};
-	broadcast: function(key, value, options) {
+
+	Prefs.prototype.removePref = function(key) { me.setPref(key, undefined) };
+
+	Prefs.prototype.broadcast = function(key, value, options) {
 		var message = {method: "prefChanged", prefName: key, value: value};
 		notifyAllTabs(message);
 		chrome.extension.sendMessage(message);
-		if (!options || !options.noSync) {
+		if (key == "disableAll") {
-			clearTimeout(this.syncTimeout);
+			notifyAllTabs({method: "styleDisableAll", disableAll: value});
-			this.syncTimeout = setTimeout((function() {
+		}
-				chrome.storage.sync.set({"settings": this.getAllPrefs()});
+		if (!options || !options.noSync) {
-			}).bind(this), 0);
+			clearTimeout(syncTimeout);
+			syncTimeout = setTimeout(function() {
+				chrome.storage.sync.set({"settings": values});
+			}, 0);
 		}
-	},
-	removePref: function(key) { setPref(key, undefined) }
 	};
 
-chrome.storage.sync.get({settings: prefs.getAllPrefs()}, function(result) {
+	Object.keys(defaults).forEach(function(key) {
-	Object.keys(prefs.defaults).forEach(function(key) {
+		me.setPref(key, defaults[key], {noBroadcast: true});
-		if (key in result.settings) {
-			prefs.setPref(key, result.settings[key], {noSync: true});
-		}
 	});
+
+	chrome.storage.sync.get("settings", function(result) {
+		var synced = result.settings;
+		for (var key in defaults) {
+			if (synced && (key in synced)) {
+				me.setPref(key, synced[key], {noSync: true});
+			} else {
+				var value = tryMigrating(key);
+				if (value !== undefined) {
+					me.setPref(key, value);
+				}
+			}
+		}
 	});
 
 	chrome.storage.onChanged.addListener(function(changes, area) {
 		if (area == "sync" && "settings" in changes) {
-		var newSettings = changes.settings.newValue;
+			var synced = changes.settings.newValue;
-		for (key in prefs.defaults) {
+			if (synced) {
-			if (key in newSettings) {
+				for (key in defaults) {
-				prefs.setPref(key, newSettings[key], {noSync: true});
+					if (key in synced) {
+						me.setPref(key, synced[key], {noSync: true});
 					}
 				}
+			} else {
+				// user manually deleted our settings, we'll recreate them
+				chrome.storage.sync.set({"settings": values});
+			}
 		}
 	});
 
-window.addEventListener("storage", function(event) {
+	function tryMigrating(key) {
-	if (event.storageArea == localStorage && event.key in prefs.defaults) {
+		if (!(key in localStorage)) {
-		prefs.broadcast(event.key, prefs.getPref(event.key));
+			return undefined;
 		}
-});
+		var value = localStorage[key];
+		delete localStorage[key];
+		localStorage["DEPRECATED: " + key] = value;
+		switch (typeof defaults[key]) {
+			case "boolean":
+				return value.toLowerCase() === "true";
+			case "number":
+				return Number(value);
+			case "object":
+				try {
+					return JSON.parse(value);
+				} catch(e) {
+					console.log("Cannot migrate from localStorage %s = '%s': %o", key, value, e);
+					return undefined;
+				}
+		}
+		return value;
+	}
+};
 
 function getCodeMirrorThemes(callback) {
 	chrome.runtime.getPackageDirectoryEntry(function(rootDir) {
@@ -300,17 +334,42 @@ function sessionStorageHash(name) {
 	return hash;
 }
 
-function shallowCopy(obj) {
+function deepCopy(obj) {
-	return typeof obj == "object" ? shallowMerge(obj, {}) : obj;
+	if (!obj || typeof obj != "object") {
+		return obj;
+	} else {
+		var emptyCopy = Object.create(Object.getPrototypeOf(obj));
+		return deepMerge(emptyCopy, obj);
+	}
 }
 
-function shallowMerge(from, to) {
+function deepMerge(target, obj1 /* plus any number of object arguments */) {
-	if (typeof from == "object" && typeof to == "object") {
+	for (var i = 1; i < arguments.length; i++) {
-		for (var k in from) {
+		var obj = arguments[i];
-			to[k] = from[k];
+		for (var k in obj) {
+			// hasOwnProperty checking is not needed for our non-OOP stuff
+			var value = obj[k];
+			if (!value || typeof value != "object") {
+				target[k] = value;
+			} else if (k in target) {
+				deepMerge(target[k], value);
+			} else {
+				target[k] = deepCopy(value);
 			}
 		}
-	return to;
+	}
+	return target;
+}
+
+function shallowMerge(target, obj1 /* plus any number of object arguments */) {
+	for (var i = 1; i < arguments.length; i++) {
+		var obj = arguments[i];
+		for (var k in obj) {
+			target[k] = obj[k];
+			// hasOwnProperty checking is not needed for our non-OOP stuff
+		}
+	}
+	return target;
 }
 
 function equal(a, b) {
@@ -327,3 +386,9 @@ function equal(a, b) {
 	}
 	return true;
 }
+
+function defineReadonlyProperty(obj, key, value) {
+	var copy = deepCopy(value);
+	Object.freeze(copy);
+	Object.defineProperty(obj, key, {value: copy, configurable: true})
+}