Merge pull request #119 from tophf/beautifier

Editor: CSS-beautifier

_locales/en/messages.json

@@ -261,6 +261,10 @@
 		"message": "Regexp is invalid.",
 		"description": "Validation message for a bad regexp in a style"
 	},
+	"styleBeautify": {
+		"message": "Beautify",
+		"description": "Label for the CSS-beautifier button on the edit style page"
+	},
 	"styleCancelEditLabel": {
 		"message": "Back to manage",
 		"description": "Label for cancel button for style editing"
@@ -315,6 +319,14 @@
 		"message": "(Stylish does not work on pages like this.)",
 		"description": "Note in the toolbar pop-up when on a URL Stylish can't affect"
 	},
+	"undo": {
+		"message": "Undo",
+		"description": "Button label"
+	},
+	"undoGlobal": {
+		"message": "Undo (global)",
+		"description": "CSS-beautify global Undo button label"
+	},
 	"updateCheckFailBadResponseCode": {
 		"message": "Update failed - server responded with code $code$.",
 		"description": "Text that displays when an update check failed because the response code indicates an error",

beautify/beautify-css.js

@@ -0,0 +1,464 @@
+/*jshint curly:true, eqeqeq:true, laxbreak:true, noempty:false */
+/*
+
+  The MIT License (MIT)
+
+  Copyright (c) 2007-2013 Einar Lielmanis and contributors.
+
+  Permission is hereby granted, free of charge, to any person
+  obtaining a copy of this software and associated documentation files
+  (the "Software"), to deal in the Software without restriction,
+  including without limitation the rights to use, copy, modify, merge,
+  publish, distribute, sublicense, and/or sell copies of the Software,
+  and to permit persons to whom the Software is furnished to do so,
+  subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+
+
+ CSS Beautifier
+---------------
+
+    Written by Harutyun Amirjanyan, (amirjanyan@gmail.com)
+
+    Based on code initially developed by: Einar Lielmanis, <einar@jsbeautifier.org>
+        http://jsbeautifier.org/
+
+    Usage:
+        css_beautify(source_text);
+        css_beautify(source_text, options);
+
+    The options are (default in brackets):
+        indent_size (4)                   — indentation size,
+        indent_char (space)               — character to indent with,
+        selector_separator_newline (true) - separate selectors with newline or
+                                            not (e.g. "a,\nbr" or "a, br")
+        end_with_newline (false)          - end with a newline
+        newline_between_rules (true)      - add a new line after every css rule
+
+    e.g
+
+    css_beautify(css_source_text, {
+      'indent_size': 1,
+      'indent_char': '\t',
+      'selector_separator': ' ',
+      'end_with_newline': false,
+      'newline_between_rules': true
+    });
+*/
+
+// http://www.w3.org/TR/CSS21/syndata.html#tokenization
+// http://www.w3.org/TR/css3-syntax/
+
+(function() {
+    function css_beautify(source_text, options) {
+        function defaultOption(opt, defaultValue) {
+            return opt === undefined ? defaultValue : opt;
+        }
+        options = options || {};
+        var indentSize = options.indent_size || 4;
+        var indentCharacter = options.indent_char || ' ';
+        var selectorSeparatorNewline = defaultOption(options.selector_separator_newline, true);
+        var end_with_newline = defaultOption(options.end_with_newline, false);
+        var newline_between_rules = defaultOption(options.newline_between_rules, true);
+        var newline_between_properties = defaultOption(options.newline_between_properties, true);
+        var newline_before_open_brace = defaultOption(options.newline_before_open_brace, false);
+        var newline_after_open_brace = defaultOption(options.newline_after_open_brace, true);
+        var newline_before_close_brace = defaultOption(options.newline_before_close_brace, true);
+
+        // compatibility
+        if (typeof indentSize === "string") {
+            indentSize = parseInt(indentSize, 10);
+        }
+
+
+        // tokenizer
+        var whiteRe = /^\s+$/;
+        var wordRe = /[\w$\-_]/;
+
+        var pos = -1,
+            ch;
+        var parenLevel = 0;
+
+        function next() {
+            ch = source_text.charAt(++pos);
+            return ch || '';
+        }
+
+        function peek(skipWhitespace) {
+            var prev_pos = pos;
+            if (skipWhitespace) {
+                eatWhitespace();
+            }
+            result = source_text.charAt(pos + 1) || '';
+            pos = prev_pos - 1;
+            next();
+            return result;
+        }
+
+        function eatString(endChars) {
+            var start = pos;
+            while (next()) {
+                if (ch === "\\") {
+                    next();
+                } else if (endChars.indexOf(ch) !== -1) {
+                    break;
+                } else if (ch === "\n") {
+                    break;
+                }
+            }
+            return source_text.substring(start, pos + 1);
+        }
+
+        function peekString(endChar) {
+            var prev_pos = pos;
+            var str = eatString(endChar);
+            pos = prev_pos - 1;
+            next();
+            return str;
+        }
+
+        function eatWhitespace() {
+            var result = '';
+            while (whiteRe.test(peek())) {
+                next();
+                result += ch;
+            }
+            return result;
+        }
+
+        function skipWhitespace() {
+            var result = '';
+            if (ch && whiteRe.test(ch)) {
+                result = ch;
+            }
+            while (whiteRe.test(next())) {
+                result += ch;
+            }
+            return result;
+        }
+
+        function eatComment(singleLine) {
+            var start = pos;
+            singleLine = peek() === "/";
+            next();
+            while (next()) {
+                if (!singleLine && ch === "*" && peek() === "/") {
+                    next();
+                    break;
+                } else if (singleLine && ch === "\n") {
+                    return source_text.substring(start, pos);
+                }
+            }
+
+            return source_text.substring(start, pos) + ch;
+        }
+
+
+        function lookBack(str) {
+            return source_text.substring(pos - str.length, pos).toLowerCase() ===
+                str;
+        }
+
+        // Nested pseudo-class if we are insideRule
+        // and the next special character found opens
+        // a new block
+        function foundNestedPseudoClass() {
+            for (var i = pos + 1; i < source_text.length; i++) {
+                var ch = source_text.charAt(i);
+                if (ch === "{") {
+                    return true;
+                } else if (ch === ";" || ch === "}" || ch === ")") {
+                    return false;
+                }
+            }
+            return false;
+        }
+
+        // printer
+        var basebaseIndentString = source_text.match(/^[\t ]*/)[0];
+        var singleIndent = new Array(indentSize + 1).join(indentCharacter);
+        var indentLevel = 0;
+        var nestedLevel = 0;
+
+        function indent() {
+            indentLevel++;
+            basebaseIndentString += singleIndent;
+        }
+
+        function outdent() {
+            indentLevel--;
+            basebaseIndentString = basebaseIndentString.slice(0, -indentSize);
+        }
+
+        var print = {};
+        print["{"] = function(ch) {
+            newline_before_open_brace ? output.push('\n') : print.singleSpace();
+            output.push(ch);
+            newline_after_open_brace ? print.newLine() : print.singleSpace();
+        };
+        print["}"] = function(ch) {
+            newline_before_close_brace ? print.newLine() : print.singleSpace();
+            output.push(ch);
+            print.newLine();
+        };
+
+        print._lastCharWhitespace = function() {
+            return whiteRe.test(output[output.length - 1]);
+        };
+
+        print.newLine = function(keepWhitespace) {
+            if (!keepWhitespace) {
+                print.trim();
+            }
+
+            if (output.length) {
+                output.push('\n');
+            }
+            if (basebaseIndentString) {
+                output.push(basebaseIndentString);
+            }
+        };
+        print.singleSpace = function() {
+            if (output.length && !print._lastCharWhitespace()) {
+                output.push(' ');
+            }
+        };
+
+        print.trim = function() {
+            while (print._lastCharWhitespace()) {
+                output.pop();
+            }
+        };
+
+
+        var output = [];
+        if (basebaseIndentString) {
+            output.push(basebaseIndentString);
+        }
+        /*_____________________--------------------_____________________*/
+
+        var insideRule = false;
+        var enteringConditionalGroup = false;
+        var top_ch = '';
+        var last_top_ch = '';
+
+        while (true) {
+            var whitespace = skipWhitespace();
+            var isAfterSpace = whitespace !== '';
+            var isAfterNewline = whitespace.indexOf('\n') !== -1;
+            last_top_ch = top_ch;
+            top_ch = ch;
+
+            if (!ch) {
+                break;
+            } else if (ch === '/' && peek() === '*') { /* css comment */
+                var header = lookBack("");
+                print.newLine();
+                output.push(eatComment());
+                print.newLine();
+                if (header) {
+                    print.newLine(true);
+                }
+            } else if (ch === '/' && peek() === '/') { // single line comment
+                if (!isAfterNewline && last_top_ch !== '{') {
+                    print.trim();
+                }
+                print.singleSpace();
+                output.push(eatComment());
+                print.newLine();
+            } else if (ch === '@') {
+                // pass along the space we found as a separate item
+                if (isAfterSpace) {
+                    print.singleSpace();
+                }
+                output.push(ch);
+
+                // strip trailing space, if present, for hash property checks
+                var variableOrRule = peekString(": ,;{}()[]/='\"");
+
+                if (variableOrRule.match(/[ :]$/)) {
+                    // we have a variable or pseudo-class, add it and insert one space before continuing
+                    next();
+                    variableOrRule = eatString(": ").replace(/\s$/, '');
+                    output.push(variableOrRule);
+                    print.singleSpace();
+                }
+
+                variableOrRule = variableOrRule.replace(/\s$/, '')
+
+                // might be a nesting at-rule
+                if (variableOrRule in css_beautify.NESTED_AT_RULE) {
+                    nestedLevel += 1;
+                    if (variableOrRule in css_beautify.CONDITIONAL_GROUP_RULE) {
+                        enteringConditionalGroup = true;
+                    }
+                }
+            } else if (ch === '{') {
+                if (peek(true) === '}') {
+                    eatWhitespace();
+                    next();
+                    print.singleSpace();
+                    output.push("{}");
+                    print.newLine();
+                    if (newline_between_rules && indentLevel === 0) {
+                        print.newLine(true);
+                    }
+                } else {
+                    indent();
+                    print["{"](ch);
+                    // when entering conditional groups, only rulesets are allowed
+                    if (enteringConditionalGroup) {
+                        enteringConditionalGroup = false;
+                        insideRule = (indentLevel > nestedLevel);
+                    } else {
+                        // otherwise, declarations are also allowed
+                        insideRule = (indentLevel >= nestedLevel);
+                    }
+                }
+            } else if (ch === '}') {
+                outdent();
+                print["}"](ch);
+                insideRule = false;
+                if (nestedLevel) {
+                    nestedLevel--;
+                }
+                if (newline_between_rules && indentLevel === 0) {
+                    print.newLine(true);
+                }
+            } else if (ch === ":") {
+                eatWhitespace();
+                if ((insideRule || enteringConditionalGroup) &&
+                    !(lookBack("&") || foundNestedPseudoClass())) {
+                    // 'property: value' delimiter
+                    // which could be in a conditional group query
+                    output.push(':');
+                    print.singleSpace();
+                } else {
+                    // sass/less parent reference don't use a space
+                    // sass nested pseudo-class don't use a space
+                    if (peek() === ":") {
+                        // pseudo-element
+                        next();
+                        output.push("::");
+                    } else {
+                        // pseudo-class
+                        output.push(':');
+                    }
+                }
+            } else if (ch === '"' || ch === '\'') {
+                if (isAfterSpace) {
+                    print.singleSpace();
+                }
+                output.push(eatString(ch));
+            } else if (ch === ';') {
+                output.push(ch);
+                newline_between_properties ? print.newLine() : print.singleSpace();
+            } else if (ch === '(') { // may be a url
+                if (lookBack("url")) {
+                    output.push(ch);
+                    eatWhitespace();
+                    if (next()) {
+                        if (ch !== ')' && ch !== '"' && ch !== '\'') {
+                            output.push(eatString(')'));
+                        } else {
+                            pos--;
+                        }
+                    }
+                } else {
+                    parenLevel++;
+                    if (isAfterSpace) {
+                        print.singleSpace();
+                    }
+                    output.push(ch);
+                    eatWhitespace();
+                }
+            } else if (ch === ')') {
+                output.push(ch);
+                parenLevel--;
+            } else if (ch === ',') {
+                output.push(ch);
+                eatWhitespace();
+                if (!insideRule && selectorSeparatorNewline && parenLevel < 1) {
+                    print.newLine();
+                } else {
+                    print.singleSpace();
+                }
+            } else if (ch === ']') {
+                output.push(ch);
+            } else if (ch === '[') {
+                if (isAfterSpace) {
+                    print.singleSpace();
+                }
+                output.push(ch);
+            } else if (ch === '=') { // no whitespace before or after
+                eatWhitespace()
+                ch = '=';
+                output.push(ch);
+            } else {
+                if (isAfterSpace) {
+                    print.singleSpace();
+                }
+
+                output.push(ch);
+            }
+        }
+
+
+        var sweetCode = output.join('').replace(/[\r\n\t ]+$/, '');
+
+        // establish end_with_newline
+        if (end_with_newline) {
+            sweetCode += "\n";
+        }
+
+        return sweetCode;
+    }
+
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
+    css_beautify.NESTED_AT_RULE = {
+        "@page": true,
+        "@font-face": true,
+        "@keyframes": true,
+        // also in CONDITIONAL_GROUP_RULE below
+        "@media": true,
+        "@supports": true,
+        "@document": true
+    };
+    css_beautify.CONDITIONAL_GROUP_RULE = {
+        "@media": true,
+        "@supports": true,
+        "@document": true
+    };
+
+    /*global define */
+    if (typeof define === "function" && define.amd) {
+        // Add support for AMD ( https://github.com/amdjs/amdjs-api/wiki/AMD#defineamd-property- )
+        define([], function() {
+            return {
+                css_beautify: css_beautify
+            };
+        });
+    } else if (typeof exports !== "undefined") {
+        // Add support for CommonJS. Just put this file somewhere on your require.paths
+        // and you will be able to `var html_beautify = require("beautify").html_beautify`.
+        exports.css_beautify = css_beautify;
+    } else if (typeof window !== "undefined") {
+        // If we're running a web page and don't have either of the above, add our one global
+        window.css_beautify = css_beautify;
+    } else if (typeof global !== "undefined") {
+        // If we don't even have window, try global.
+        global.css_beautify = css_beautify;
+    }
+
+}());

edit.html

@@ -124,7 +124,7 @@
 			#sections > div:only-of-type .remove-section {
 				display: none;
 			}
-			#sections > div .add-section {
+			#sections > div > button:not(:first-of-type) {
 				margin-left: 0.4rem;
 			}
 			.dirty > label::before {
@@ -248,10 +248,11 @@
 				cursor: pointer;
 				width: 8px;
 				height: 8px;
+				border: 8px solid transparent;
 				position: absolute;
-				right: 0.5rem;
+				right: 4px;
-				top: 0.75rem;
+				top: 4px;
-				background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px), linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px);
+				background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat, linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat;
 			}
 
 			.keymap-list {
@@ -316,6 +317,34 @@
 				text-align: left;
 			}
 
+			/************ CSS beautifier ************/
+			.beautify-options {
+				white-space: nowrap;
+				font-family: monospace;
+			}
+			.beautify-options div {
+				float: left;
+			}
+			.beautify-options div[newline="true"] + div {
+				clear: left;
+			}
+			.beautify-options div[newline="true"] + div span[indent] {
+				padding-left: 2rem;
+			}
+			.beautify-options:after {
+				clear: both;
+				display: block;
+				content: " ";
+				height: 1rem;
+			}
+			.beautify-options span {
+				font-weight: bold;
+			}
+			.beautify-options select {
+				border: none;
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+
 			/************ reponsive layouts ************/
 			@media(max-width:737px) {
 				#header {
@@ -425,7 +454,7 @@
 				</div>
 			</section>
 			<section id="actions">
-				<div><button id="to-mozilla" i18n-text="styleToMozillaFormat"></button><img id="to-mozilla-help" src="help.png"></div>
+				<div><button id="beautify" i18n-text="styleBeautify"></button> <button id="to-mozilla" i18n-text="styleToMozillaFormat"></button><img id="to-mozilla-help" src="help.png"></div>
 				<div><a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a></div>
 				<div><button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button></div>
 			</section>

edit.js

@@ -44,6 +44,7 @@ var sectionTemplate = tHTML('\
 		</div>\
 		<button class="remove-section" i18n-text="sectionRemove"></button>\
 		<button class="add-section" i18n-text="sectionAdd"></button>\
+		<button class="beautify-section" i18n-text="styleBeautify"></button>\
 	</div>\
 ');
 
@@ -483,6 +484,7 @@ function addSection(event, section) {
 	div.querySelector(".applies-to-help").addEventListener("click", showAppliesToHelp, false);
 	div.querySelector(".remove-section").addEventListener("click", removeSection, false);
 	div.querySelector(".add-section").addEventListener("click", addSection, false);
+	div.querySelector(".beautify-section").addEventListener("click", beautify);
 
 	var codeElement = div.querySelector(".code");
 	var appliesTo = div.querySelector(".applies-to-list");
@@ -825,6 +827,72 @@ function gotoLintIssue(event) {
 	});
 }
 
+function beautify(event) {
+	var undoCount = 1;
+	if (exports.css_beautify) { // thanks to csslint's definition of 'exports'
+		doBeautify();
+	} else {
+		var script = document.head.appendChild(document.createElement("script"));
+		script.src = "beautify/beautify-css.js";
+		script.onload = doBeautify;
+	}
+	function doBeautify() {
+		var tabs = prefs.getPref("editor.indentWithTabs");
+		var options = prefs.getPref("editor.beautify");
+		options.indent_size = tabs ? 1 : prefs.getPref("editor.tabSize");
+		options.indent_char = tabs ? "\t" : " ";
+
+		var section = querySelectorParent(event.target, "#sections > div");
+		var scope = section ? [getCodeMirrorForSection(section)] : editors;
+		scope.forEach(function(cm) {
+			setTimeout(function() {
+				var text = cm.getValue();
+				var newText = exports.css_beautify(text, options);
+				if (newText != text) {
+					cm.setValue(newText);
+				}
+			}, 0);
+		});
+
+		showHelp(t("styleBeautify"), "<div class='beautify-options'>" +
+			optionHtml(".selector1,", "selector_separator_newline") +
+			optionHtml(".selector2,", "newline_before_open_brace") +
+			optionHtml("{", "newline_after_open_brace") +
+			optionHtml("border: none;", "newline_between_properties", true) +
+			optionHtml("display: block;", "newline_before_close_brace", true) +
+			optionHtml("}", "newline_between_rules") +
+			"</div>" +
+			"<div><button role='undo'></button></div>");
+
+		var undoButton = document.querySelector("#help-popup button[role='undo']");
+		undoButton.textContent = t(scope.length == 1 ? "undo" : "undoGlobal");
+		undoButton.addEventListener("click", function() {
+			scope.forEach(CodeMirror.commands.undo);
+			undoButton.disabled = --undoCount == 0;
+		});
+
+		document.querySelector(".beautify-options").addEventListener("change", function(event) {
+			var value = event.target.selectedIndex > 0;
+			options[event.target.dataset.option] = value;
+			prefs.setPref("editor.beautify", options);
+			event.target.parentNode.setAttribute("newline", value.toString());
+			doBeautify();
+			undoCount++;
+			undoButton.disabled = false;
+		});
+
+		function optionHtml(label, optionName, indent) {
+			var value = options[optionName];
+			return "<div newline='" + value.toString() + "'>" +
+				"<span" + (indent ? " indent" : "") + ">" + label + "</span>" +
+				"<select data-option='" + optionName + "'>" +
+					"<option" + (value ? "" : " selected") + ">&nbsp;</option>" +
+					"<option" + (value ? " selected" : "") + ">\\n</option>" +
+				"</select></div>";
+		}
+	}
+}
+
 window.addEventListener("load", init, false);
 
 function init() {
@@ -868,11 +936,20 @@ function initWithStyle(style) {
 	document.querySelectorAll("#sections > div").forEach(function(div) {
 		div.parentNode.removeChild(div);
 	});
-	(style.sections.length == 0 ? [{code: ""}] : style.sections).forEach(function(section) {
+	var queue = style.sections.length ? style.sections : [{code: ""}];
-		setTimeout(function() {
+	var queueStart = new Date().getTime();
-			maximizeCodeHeight(addSection(null, section), editors.length == style.sections.length);
+	// after 200ms the sections will be added asynchronously
+	while (new Date().getTime() - queueStart <= 200 && queue.length) {
+		maximizeCodeHeight(addSection(null, queue.shift()), !queue.length);
+	}
+	if (queue.length) {
+		setTimeout(function processQueue() {
+			maximizeCodeHeight(addSection(null, queue.shift()), !queue.length);
+			if (queue.length) {
+				setTimeout(processQueue, 0);
+			}
 		}, 0);
-	});
+	}
 	initHooks();
 }
 
@@ -883,6 +960,7 @@ function initHooks() {
 	});
 	document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false);
 	document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false);
+	document.getElementById("beautify").addEventListener("click", beautify);
 	document.getElementById("save-button").addEventListener("click", save, false);
 	document.getElementById("sections-help").addEventListener("click", showSectionHelp, false);
 	document.getElementById("keyMap-help").addEventListener("click", showKeyMapHelp, false);

storage.js

@@ -173,50 +173,51 @@ var prefs = {
 	"manage.onlyEnabled": false, // display only enabled styles
 	"manage.onlyEdited": false,  // display only styles created locally
 
-	"editor.options": null,    // CodeMirror.defaults.*
+	"editor.options": {},          // CodeMirror.defaults.*
 	"editor.lineWrapping": true,   // word wrap
 	"editor.smartIndent": true,    // "smart" indent
 	"editor.indentWithTabs": false,// smart indent with tabs
 	"editor.tabSize": 4,           // tab width, in spaces
 	"editor.keyMap": navigator.appVersion.indexOf("Windows") > 0 ? "sublime" : "default",
 	"editor.theme": "default",     // CSS theme
+	"editor.beautify": {           // CSS beautifier
+		selector_separator_newline: true,
+		newline_before_open_brace: false,
+		newline_after_open_brace: true,
+		newline_between_properties: true,
+		newline_before_close_brace: true,
+		newline_between_rules: false,
+		end_with_newline: false
+	},
 
 	NO_DEFAULT_PREFERENCE: "No default preference for '%s'",
 	UNHANDLED_DATA_TYPE: "Default '%s' is of type '%s' - what should be done with it?",
 
-	getPref: function(key, ifUndefined) {
+	getPref: function(key, defaultValue) {
-	// Returns localStorage[key], ifUndefined, this[key], or undefined
+	// Returns localStorage[key], defaultValue, this[key], or undefined
-	//   as type of ifUndefined, this[key], or localStorage[key]
+	//   as type of defaultValue, this[key], or localStorage[key]
-		if (ifUndefined === undefined) ifUndefined = this[key]; // default value
 		var value = localStorage[key];
-		if (undefined === value) { // no user preference
+		if (value === undefined) {
-			if (ifUndefined === undefined) console.error(this.NO_DEFAULT_PREFERENCE, key);
+			return defaultValue === undefined ? shallowCopy(this[key]) : defaultValue;
-			return ifUndefined;
 		}
-		switch (typeof ifUndefined) {
+		switch (typeof (defaultValue === undefined ? this[key] : defaultValue)) {
 			case "boolean": return value.toLowerCase() === "true";
 			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 ifUndefined);
+			default: console.error(UNHANDLED_DATA_TYPE, key, typeof defaultValue);
 		}
 		return value;
 	},
 	setPref: function(key, value) {
-		if (!(key in this)) console.warn(this.NO_DEFAULT_PREFERENCE, key);
+		var oldValue = localStorage[key];
-		var oldValue = this.getPref(key);
+		if (value === undefined || equal(value, this[key])) {
-
+			delete localStorage[key];
-		if (undefined === value || this[key] === value) {
-			localStorage.removeItem(key); // (deleted || default)
 		} else {
-			var strValue = ("string" === typeof value ||
+			localStorage[key] = typeof value == "string" ? value : JSON.stringify(value);
-			               undefined === value) ? value : JSON.stringify(value);
-			localStorage.setItem(key, strValue);
 		}
-
+		if (!equal(value, oldValue === undefined ? this[key] : oldValue)) {
-		var newValue = this.getPref(key);
-		if (newValue !== oldValue) {
 			var message = {method: "prefChanged", prefName: key, value: value};
 			notifyAllTabs(message);
 			chrome.extension.sendMessage(message);
@@ -257,3 +258,29 @@ function sessionStorageHash(name) {
 	Object.defineProperty(hash, "name", {value: name});
 	return hash;
 }
+
+function shallowCopy(obj) {
+	if (typeof obj != "object") {
+		return obj;
+	}
+	var copy = {};
+	for (var k in obj) {
+		copy[k] = obj[k];
+	}
+	return copy;
+}
+
+function equal(a, b) {
+	if (!a || !b || typeof a != "object") {
+		return a === b;
+	}
+	if (Object.keys(a).length != Object.keys(b).length) {
+		return false;
+	}
+	for (var k in a) {
+		if (a[k] !== b[k]) {
+			return false;
+		}
+	}
+	return true;
+}