From 374244fcebc1820bb419185491b7d4bc9cb5454c Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 14 Mar 2015 01:26:26 +0300
Subject: [PATCH 01/11] Editor: remember size/pos only for detached windows

---
 edit.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/edit.js b/edit.js
index 929c97fb..8fb886db 100644
--- a/edit.js
+++ b/edit.js
@@ -3,6 +3,7 @@
 var styleId = null;
 var dirty = false;
 var lockScroll; // ensure the section doesn't jump when clicking selected text
+var isSeparateWindow;
 
 var appliesToTemplate = document.createElement("li");
 appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type"><option value="url">' + t("appliesUrlOption") + '</option><option value="url-prefix">' + t("appliesUrlPrefixOption") + '</option><option value="domain">' + t("appliesDomainOption") + '</option><option value="regexp">' + t("appliesRegexpOption") + '</option></select><input name="applies-value" class="applies-value"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>';
@@ -218,13 +219,19 @@ document.addEventListener("keydown", function(e) {
 	}
 });
 
+chrome.tabs.query({currentWindow: true}, function(tabs) {
+	isSeparateWindow = tabs.length == 1;
+});
+
 window.onbeforeunload = function() {
-	prefs.setPref('windowPosition', {
-		left: screenLeft,
-		top: screenTop,
-		width: outerWidth,
-		height: outerHeight
-	});
+	if (isSeparateWindow) {
+		prefs.setPref('windowPosition', {
+			left: screenLeft,
+			top: screenTop,
+			width: outerWidth,
+			height: outerHeight
+		});
+	}
 	document.activeElement.blur();
 	return !isCleanGlobal() ? t('styleChangesNotSaved') : null;
 }
@@ -308,7 +315,7 @@ function addSection(event, section) {
 	setupCodeMirror(div.querySelector('.code'));
 	if (section) {
 		var index = Array.prototype.indexOf.call(sections.children, section);
-        var cm = editors.pop();
+		var cm = editors.pop();
 		editors.splice(index, 0, cm);
 		cm.focus();
 	}

From ed9ce87d99be04328b61df4f86c3b7009a00d1c4 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 14 Mar 2015 02:06:22 +0300
Subject: [PATCH 02/11] Editor: add sections asynchronously on init

Improves perceived responsiveness.
Becomes noticeable with ~3 sections.
Becomes indispensable with ~10 sections.
---
 edit.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/edit.js b/edit.js
index 8fb886db..bab1ba39 100644
--- a/edit.js
+++ b/edit.js
@@ -489,7 +489,11 @@ function initWithStyle(style) {
 	Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) {
 		div.parentNode.removeChild(div);
 	});
-	style.sections.forEach(function(section) { addSection(null, section) });
+	style.sections.forEach(function(section) {
+		setTimeout(function() {
+			addSection(null, section)
+		}, 0);
+	});
 	setupGlobalSearch();
 	setCleanGlobal(null);
 	initTitle();

From 31a9be7c2afc64b3a056a7f075023af09aafe476 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 14 Mar 2015 06:47:43 +0300
Subject: [PATCH 03/11] Editor: add "!important" word to autocomplete in css
 properties

---
 edit.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/edit.js b/edit.js
index bab1ba39..1886ee87 100644
--- a/edit.js
+++ b/edit.js
@@ -94,7 +94,7 @@ function initCodeMirror() {
 		lint: CodeMirror.lint.css,
 		keyMap: "sublime",
 		extraKeys: {"Ctrl-Space": "autocomplete"}
-	};
+	}
 	mergeOptions(stylishOptions, CM.defaults);
 	mergeOptions(userOptions, CM.defaults);
 
@@ -108,7 +108,20 @@ function initCodeMirror() {
 	cc.jumpToLine = jumpToLine;
 	cc.nextBuffer = nextBuffer;
 	cc.prevBuffer = prevBuffer;
-	// cc.save = save;
+
+	var cssHintHandler = CM.hint.css;
+	CM.hint.css = function(cm) {
+		var cursor = cm.getCursor();
+		var token = cm.getTokenAt(cursor);
+		if (token.state.state === "prop" && "!important".indexOf(token.string) === 0) {
+			return {
+				from: CM.Pos(cursor.line, token.start),
+				to: CM.Pos(cursor.line, token.end),
+				list: ["!important"]
+			}
+		}
+		return cssHintHandler(cm);
+	}
 
 	// user option values
 	CM.getOption = function (o) {

From 603da2736fe67f03ff8040e628192a3fffb2eec0 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 14 Mar 2015 23:07:35 +0300
Subject: [PATCH 04/11] Editor: don't scroll sections into view on click

---
 edit.js | 51 ++++++++++++++++++++-------------------------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/edit.js b/edit.js
index 1886ee87..ee0e8782 100644
--- a/edit.js
+++ b/edit.js
@@ -173,35 +173,6 @@ function setupCodeMirror(textarea) {
 	cm.lastChange = cm.changeGeneration();
 	cm.on("change", indicateCodeChange);
 
-	// ensure the entire section is visible on focus
-	cm.on("focus", function(cm) {
-		var section = cm.display.wrapper.parentNode;
-		var bounds = section.getBoundingClientRect();
-		if ((bounds.bottom > window.innerHeight && bounds.top > 0) || (bounds.top < 0 && bounds.bottom < window.innerHeight)) {
-			lockScroll = null;
-			if (bounds.top < 0) {
-				window.scrollBy(0, bounds.top - 1);
-			} else {
-				window.scrollBy(0, bounds.bottom - window.innerHeight + 1);
-			}
-
-			// prevent possible double fire of selection change event induced by window.scrollBy
-			var selectionChangeCount = 0, selection;
-			function beforeSelectionChange(cm, obj) {
-				if (++selectionChangeCount == 1) {
-					selection = obj.ranges;
-				} else {
-					obj.update(selection);
-					cm.off("beforeSelectionChange", beforeSelectionChange);
-				}
-			}
-			cm.on("beforeSelectionChange", beforeSelectionChange);
-			setTimeout(function() {
-				cm.off("beforeSelectionChange", beforeSelectionChange)
-			}, 200);
-		}
-	});
-
 	// ensure the section doesn't jump when clicking selected text
 	cm.on("cursorActivity", function(cm) {
 		setTimeout(function() {
@@ -363,6 +334,19 @@ function removeSection(event) {
 	setCleanItem(section, !section.defaultValue);
 }
 
+function makeSectionVisible(cm) {
+	var section = cm.display.wrapper.parentNode;
+	var bounds = section.getBoundingClientRect();
+	if ((bounds.bottom > window.innerHeight && bounds.top > 0) || (bounds.top < 0 && bounds.bottom < window.innerHeight)) {
+		lockScroll = null;
+		if (bounds.top < 0) {
+			window.scrollBy(0, bounds.top - 1);
+		} else {
+			window.scrollBy(0, bounds.bottom - window.innerHeight + 1);
+		}
+	}
+}
+
 function setupGlobalSearch() {
 	var originalCommand = {
 		find: CodeMirror.commands.find,
@@ -426,6 +410,7 @@ function setupGlobalSearch() {
 			var searchCursor = cm.getSearchCursor(state.query, pos, shouldIgnoreCase(state.query));
 			if (searchCursor.find(reverse) || editors.length == 1) {
 				if (editors.length > 1) {
+					makeSectionVisible(cm);
 					cm.focus();
 				}
 				// speedup the original findNext
@@ -456,10 +441,14 @@ function jumpToLine(cm) {
 }
 
 function nextBuffer(cm) {
-	editors[(editors.indexOf(cm) + 1) % editors.length].focus();
+	var cm = editors[(editors.indexOf(cm) + 1) % editors.length];
+	makeSectionVisible(cm);
+	cm.focus();
 }
 function prevBuffer(cm) {
-	editors[(editors.indexOf(cm) - 1 + editors.length) % editors.length].focus();
+	var cm = editors[(editors.indexOf(cm) - 1 + editors.length) % editors.length];
+	makeSectionVisible(cm);
+	cm.focus();
 }
 
 window.addEventListener("load", init, false);

From fec53060377b3bcd94ce3291f4368fb6ea686c5c Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 15 Mar 2015 01:05:02 +0300
Subject: [PATCH 05/11] Editor: make Ctrl-S work in input boxes

---
 edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit.js b/edit.js
index ee0e8782..3974257b 100644
--- a/edit.js
+++ b/edit.js
@@ -196,7 +196,7 @@ document.addEventListener("scroll", function(e) {
 	}
 });
 
-document.addEventListener("keydown", function(e) {
+window.addEventListener("keydown", function(e) {
 	if (e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && e.keyCode == 83) {
 		e.preventDefault();
 		save();

From 8e6e1f97b21b63766ecdc8937d6954278638f3fb Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 14 Mar 2015 01:45:38 +0300
Subject: [PATCH 06/11] Manager: "Edit" button re-uses existing tabs,
 shift-click opens a new window

---
 background.js | 22 ++++++++++++++++++++++
 manage.js     | 25 +++++++++++++++++++++++++
 popup.js      | 10 ++--------
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/background.js b/background.js
index a5022cdb..4056abdb 100644
--- a/background.js
+++ b/background.js
@@ -33,6 +33,9 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		case "healthCheck":
 			getDatabase(function() { sendResponse(true); }, function() { sendResponse(false); });
 			break;
+		case "openURL":
+			openURL(request);
+			break;
 	}
 });
 
@@ -321,3 +324,22 @@ chrome.tabs.onAttached.addListener(function(tabId, data) {
 		}
 	});
 });
+
+function openURL(options) {
+	chrome.tabs.query({currentWindow: true, url: options.url}, function(tabs) {
+		// switch to an existing tab with the requested url
+		if (tabs.length) {
+			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) {
+				// 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);
+				}
+			});
+		}
+	});
+}
diff --git a/manage.js b/manage.js
index 5bad7721..41c3a57a 100644
--- a/manage.js
+++ b/manage.js
@@ -93,6 +93,31 @@ function createStyleElement(style) {
 	}
 	var editLink = e.querySelector(".style-edit-link");
 	editLink.setAttribute("href", editLink.getAttribute("href") + style.id);
+	editLink.addEventListener("click", function(event) {
+		if (!event.altKey) {
+			var left = event.button == 0, middle = event.button == 1,
+				shift = event.shiftKey, ctrl = event.ctrlKey;
+			var openWindow = left && shift && !ctrl;
+			var openBackgroundTab = (middle && !shift) || (left && ctrl && !shift);
+			var openForegroundTab = (middle && shift) || (left && ctrl && shift);
+			if (openWindow || openBackgroundTab || openForegroundTab) {
+				event.preventDefault();
+				event.stopPropagation();
+				var url = event.target.href || event.target.parentNode.href;
+				if (openWindow) {
+					var options = prefs.getPref('windowPosition', {});
+					options.url = url;
+					chrome.windows.create(options);
+				} else {
+					chrome.extension.sendMessage({
+						method: "openURL",
+						url: url,
+						active: openForegroundTab
+					});
+				}
+			}
+		}
+	});
 	e.querySelector(".enable").addEventListener("click", function(event) { enable(event, true); }, false);
 	e.querySelector(".disable").addEventListener("click", function(event) { enable(event, false); }, false);
 	e.querySelector(".check-update").addEventListener("click", doCheckUpdate, false);
diff --git a/popup.js b/popup.js
index 63ecb5a0..10f578bf 100644
--- a/popup.js
+++ b/popup.js
@@ -156,14 +156,8 @@ function openLinkInTabOrWindow(event) {
 
 function openLink(event) {
 	event.preventDefault();
-	chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
-		if (tabs && tabs.length && tabs[0].url.match(/^chrome:\/\/newtab\/?$/)) {
-			chrome.tabs.update({url: event.target.href});
-			close(); // close the popup
-		} else {
-			chrome.tabs.create({url: event.target.href});
-		}
-	});
+	chrome.extension.sendMessage({method: "openURL", url: event.target.href});
+	close();
 }
 
 function handleUpdate(style) {

From 3dd8eb1fc63ea776b01538c539f59d7aa9d0ce97 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 15 Mar 2015 07:21:08 +0300
Subject: [PATCH 07/11] Manager: "Apply all updates" button

---
 _locales/en/messages.json |  8 +++++
 manage.html               |  4 +++
 manage.js                 | 61 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 43de23ac..29772243 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -60,6 +60,10 @@
 		"message": "URLs starting with",
 		"description": "Option to make the style apply to the entered string as a URL prefix"
 	},
+	"applyAllUpdates": {
+		"message": "Apply all updates",
+		"description": "Label for the button to apply all detected updates"
+	},
 	"checkAllUpdates": {
 		"message": "Check all styles for updates",
 		"description": "Label for the button to check all styles for updates"
@@ -288,6 +292,10 @@
 		"message": "Style is up to date.",
 		"description": "Text that displays when an update check completed and no update is available"
 	},
+	"updateAllCheckSucceededNoUpdate": {
+		"message": "All styles are up to date.",
+		"description": "Text that displays when an update all check completed and no updates are available"
+	},
 	"updateCompleted": {
 		"message": "Update completed.",
 		"description": "Text that displays when an update completed"
diff --git a/manage.html b/manage.html
index 150cf5a2..0faf51d8 100644
--- a/manage.html
+++ b/manage.html
@@ -140,6 +140,10 @@
 				<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited"></label></div>
 			</fieldset>
 			<p><button id="check-all-updates"></button></p>
+			<p>
+				<button id="apply-all-updates" class="hidden"></button>
+				<span id="update-all-no-updates" class="hidden"></span>
+			</p>
 			<p><a href="edit.html"><button id="add-style-label"></button></a></p>
 			<div id="options">
 				<h2 id="options-heading"></h2>
diff --git a/manage.js b/manage.js
index 41c3a57a..f99dfc67 100644
--- a/manage.js
+++ b/manage.js
@@ -188,11 +188,52 @@ function doCheckUpdate(event) {
 	checkUpdate(getStyleElement(event));
 }
 
-function checkUpdateAll() {
-	Array.prototype.forEach.call(document.querySelectorAll("[style-update-url]"), checkUpdate);
+function applyUpdateAll() {
+	var btnApply = document.getElementById("apply-all-updates");
+	btnApply.disabled = true;
+	setTimeout(function() {
+		btnApply.style.display = "none";
+		btnApply.disabled = false;
+	}, 1000);
+
+	Array.prototype.forEach.call(document.querySelectorAll(".can-update .update"), function(button) {
+		button.click();
+	});
 }
 
-function checkUpdate(element) {
+function checkUpdateAll() {
+	var btnCheck = document.getElementById("check-all-updates");
+	var btnApply = document.getElementById("apply-all-updates");
+	var noUpdates = document.getElementById("update-all-no-updates");
+
+	btnCheck.disabled = true;
+	btnApply.classList.add("hidden");
+	noUpdates.classList.add("hidden");
+
+	var elements = document.querySelectorAll("[style-update-url]");
+	var toCheckCount = elements.length;
+	var updatableCount = 0;
+	Array.prototype.forEach.call(elements, function(element) {
+		checkUpdate(element, function(success) {
+			if (success) {
+				++updatableCount;
+			}
+			if (--toCheckCount == 0) {
+				btnCheck.disabled = false;
+				if (updatableCount) {
+					btnApply.classList.remove("hidden");
+				} else {
+					noUpdates.classList.remove("hidden");
+					setTimeout(function() {
+						noUpdates.classList.add("hidden");
+					}, 10000);
+				}
+			}
+		});
+	});
+}
+
+function checkUpdate(element, callback) {
 	element.querySelector(".update-note").innerHTML = t('checkingForUpdate');
 	element.className = element.className.replace("checking-update", "").replace("no-update", "").replace("can-update", "") + " checking-update";
 	var id = element.getAttribute("style-id");
@@ -203,10 +244,15 @@ function checkUpdate(element) {
 	function handleSuccess(forceUpdate, serverJson) {
 		chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
 			var style = styles[0];
+			var needsUpdate = false;
 			if (!forceUpdate && codeIsEqual(style.sections, serverJson.sections)) {
 				handleNeedsUpdate("no", id, serverJson);
 			} else {
 				handleNeedsUpdate("yes", id, serverJson);
+				needsUpdate = true;
+			}
+			if (callback) {
+				callback(needsUpdate);
 			}
 		});
 	}
@@ -217,6 +263,9 @@ function checkUpdate(element) {
 		} else {
 			handleNeedsUpdate(t('updateCheckFailBadResponseCode', [status]), id, null);
 		}
+		if (callback) {
+			callback(false);
+		}
 	}
 
 	if (!md5Url || !originalMd5) {
@@ -228,6 +277,9 @@ function checkUpdate(element) {
 				checkUpdateFullCode(url, true, handleSuccess, handleFailure);
 			} else {
 				handleNeedsUpdate("no", id, null);
+				if (callback) {
+					callback(false);
+				}
 			}
 		}, handleFailure);
 	}
@@ -367,6 +419,8 @@ document.title = t("manageTitle");
 tE("manage-heading", "manageHeading");
 tE("manage-text", "manageText", null, false);
 tE("check-all-updates", "checkAllUpdates");
+tE("apply-all-updates", "applyAllUpdates");
+tE("update-all-no-updates", "updateAllCheckSucceededNoUpdate");
 tE("add-style-label", "addStyleLabel");
 tE("options-heading", "optionsHeading");
 tE("show-badge-label", "prefShowBadge");
@@ -376,6 +430,7 @@ tE("filters", "manageFilters");
 tE("stylesFirst-label", "popupStylesFirst");
 
 document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);
+document.getElementById("apply-all-updates").addEventListener("click", applyUpdateAll, false);
 
 function onFilterChange (className, event) {
 	var container = document.getElementById("installed"),

From 6b710e9f5651b072d2cb21238c30a78480d13562 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 15 Mar 2015 06:35:30 +0300
Subject: [PATCH 08/11] HTML fixes: close a tag, replace 0px with 0

---
 edit.html   | 14 +++++++-------
 manage.html | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/edit.html b/edit.html
index fbe7b101..2a451d58 100644
--- a/edit.html
+++ b/edit.html
@@ -34,19 +34,19 @@
 		<style type="text/css">
 
 			body {
-				margin: 0px;
+				margin: 0;
 				font: 12px arial,sans-serif;
 			}
 			#header {
 				height: 100%;
 				width: 250px;
 				position: fixed;
-				top: 0px;
+				top: 0;
 				padding: 15px;
 				border-right: 1px dashed #AAA;
 			}
 			.notmac #header {
-				-webkit-box-shadow: 0px 0px 50px -18px black;
+				-webkit-box-shadow: 0 0 50px -18px black;
 			}
 			#sections {
 				padding-left: 290px;
@@ -62,7 +62,7 @@
 			}
 			#sections > div {
 				margin: 10px;
-				padding: 0px 15px;
+				padding: 0 15px;
 			}
 			#sections > div:not(:first-child) {
 				border-top: 2px solid black;
@@ -157,11 +157,11 @@
 				}
 
 				#sections {
-					padding-left: 0px;
+					padding-left: 0;
 				}
 
 				#sections > div {
-					padding: 0px;
+					padding: 0;
 				}
 
 				#sections-heading {
@@ -193,7 +193,7 @@
 		<div id="header">
 			<h1 id="heading"></h1>
 			<section id="basic-info">
-				<div><label for="name" id="name-label"></label><input id="name"><div>
+				<div><label for="name" id="name-label"></label><input id="name"></div>
 				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled"></div>
 			</section>
 			<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
diff --git a/manage.html b/manage.html
index 0faf51d8..045ed389 100644
--- a/manage.html
+++ b/manage.html
@@ -3,7 +3,7 @@
 		<title></title>
 		<style>
 			body {
-				margin: 0px;
+				margin: 0;
 				font: 12px arial,sans-serif;
 			}
 			a, a:visited {
@@ -17,12 +17,12 @@
 				height: 100%;
 				width: 250px;
 				position: fixed;
-				top: 0px;
+				top: 0;
 				padding: 15px;
 				border-right: 1px dashed #AAA;
 			}
 			#header {
-				-webkit-box-shadow: 0px 0px 50px -18px black;
+				-webkit-box-shadow: 0 0 50px -18px black;
 			}
 			#installed {
 				position: relative;
@@ -30,7 +30,7 @@
 			}
 			[style-id] {
 				margin: 10px;
-				padding: 0px 15px;
+				padding: 0 15px;
 			}
 			[style-id] {
 				border-top: 2px solid gray;
@@ -102,11 +102,11 @@
 				}
 
 				#installed {
-					margin-left: 0px;
+					margin-left: 0;
 				}
 
 				[style-id] {
-					margin: 0px;
+					margin: 0;
 				}
 			}
 

From 3ad6fd974bb807bd6e3aae3bd0ba529f46df9420 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 21 Mar 2015 05:53:41 +0300
Subject: [PATCH 09/11] Editor: fix findNext to not display Chrome's findbar

---
 edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit.js b/edit.js
index 3974257b..b0f00888 100644
--- a/edit.js
+++ b/edit.js
@@ -408,7 +408,7 @@ function setupGlobalSearch() {
 				pos = reverse ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(0, 0);
 			}
 			var searchCursor = cm.getSearchCursor(state.query, pos, shouldIgnoreCase(state.query));
-			if (searchCursor.find(reverse) || editors.length == 1) {
+			if (searchCursor.find(reverse)) {
 				if (editors.length > 1) {
 					makeSectionVisible(cm);
 					cm.focus();

From e0650fde711166c88dc85c9737a4c4bd27f839c2 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 21 Mar 2015 16:24:45 +0300
Subject: [PATCH 10/11] Editor: fixes for 0e391f9, refactor, more fixes

* recognize changes in applies-to inputs
* recognize changes only in specified controls
* forget the dirty applies-to ids from a deleted section after the style was saved
* toMozillaFormat: use the actual contents of CodeMirror instances
* toMozillaFormat: allow empty code section with non-empty applies-to
* refactor: simplify, de-kludge, de-duplicate, de-obfuscate, use more descriptive names instead of "items", "a", "b" where appropriate
---
 edit.html |   4 +-
 edit.js   | 352 +++++++++++++++++++++++++-----------------------------
 2 files changed, 168 insertions(+), 188 deletions(-)

diff --git a/edit.html b/edit.html
index 2a451d58..255c47f0 100644
--- a/edit.html
+++ b/edit.html
@@ -193,8 +193,8 @@
 		<div id="header">
 			<h1 id="heading"></h1>
 			<section id="basic-info">
-				<div><label for="name" id="name-label"></label><input id="name"></div>
-				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled"></div>
+				<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
+				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
 			</section>
 			<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
 			<button id="save-button" title="Ctrl-S"></button>
diff --git a/edit.js b/edit.js
index b0f00888..c9758d4b 100644
--- a/edit.js
+++ b/edit.js
@@ -1,85 +1,88 @@
 "use strict";
 
 var styleId = null;
-var dirty = false;
-var lockScroll; // ensure the section doesn't jump when clicking selected text
-var isSeparateWindow;
+var dirty = {};       // only the actually dirty items here
+var editors = [];     // array of all CodeMirror instances
+var lockScroll;       // temporary focus-jump-on-click fix, TODO: revert c084ea3 once CM is updated
+var isSeparateWindow; // used currrently to determine if the window size/pos should be remembered
 
+// direct & reverse mapping of @-moz-document keywords and internal property names
+var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"};
+var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
+
+// templates
 var appliesToTemplate = document.createElement("li");
-appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type"><option value="url">' + t("appliesUrlOption") + '</option><option value="url-prefix">' + t("appliesUrlPrefixOption") + '</option><option value="domain">' + t("appliesDomainOption") + '</option><option value="regexp">' + t("appliesRegexpOption") + '</option></select><input name="applies-value" class="applies-value"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>';
+appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type style-contributor"><option value="url">' + t("appliesUrlOption") + '</option><option value="url-prefix">' + t("appliesUrlPrefixOption") + '</option><option value="domain">' + t("appliesDomainOption") + '</option><option value="regexp">' + t("appliesRegexpOption") + '</option></select><input name="applies-value" class="applies-value style-contributor"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>';
 
 var appliesToEverythingTemplate = document.createElement("li");
 appliesToEverythingTemplate.className = "applies-to-everything";
-appliesToEverythingTemplate.innerHTML = t("appliesToEverything") + ' <button class="add-applies-to">' + t("appliesSpecify") + '</button>'
+appliesToEverythingTemplate.innerHTML = t("appliesToEverything") + ' <button class="add-applies-to">' + t("appliesSpecify") + '</button>';
 
 var sectionTemplate = document.createElement("div");
 sectionTemplate.innerHTML = '<label>' + t('sectionCode') + '</label><textarea class="code"></textarea><br><div class="applies-to"><label>' + t("appliesLabel") + ' <img class="applies-to-help" src="help.png" alt="' + t('helpAlt') + '"></label><ul class="applies-to-list"></ul></div><button class="remove-section">' + t('sectionRemove') + '</button><button class="add-section">' + t('sectionAdd') + '</button>';
 
-document.addEventListener("change", function(event) {
-	var node = event.target;
-	if (node.type && !node.form) { // INPUTs that aren't in a FORM are stylesheet
-		switch (node.type) {
-			case "checkbox":
-				setCleanItem(node, node.checked === node.defaultChecked);
-				break;
-			case "text":
-			case "select-one":
-			case "select-multiple":
-				setCleanItem(node, node.value === node.defaultValue);
-				break;
-		}
-	}
+
+// make querySelectorAll enumeration code readable
+["forEach", "some", "indexOf"].forEach(function(method) {
+	NodeList.prototype[method]= Array.prototype[method];
 });
 
+function onChange(event) {
+	var node = event.target;
+	if ("savedValue" in node) {
+		var currentValue = "checkbox" === node.type ? node.checked : node.value;
+		setCleanItem(node, node.savedValue === currentValue);
+	} else {
+		// the manually added section's applies-to is dirty only when the value is non-empty
+		setCleanItem(node, node.localName != "input" || !node.value.trim());
+		delete node.savedValue; // only valid when actually saved
+	}
+	updateTitle();
+}
+
 // Set .dirty on stylesheet contributors that have changed
-var items = {};
-function isCleanItem(node) {
-	return items[node.id];
+function setDirtyClass(node, isDirty) {
+	node.classList.toggle("dirty", isDirty);
 }
-function setCleanItem(node, clean) {
-	var id = node.id;
-	if (!id) id = node.id = Date.now().toString(32).substr(-6);
-	items[id] = clean;
 
-	if (clean) node.classList.remove("dirty");
-	else node.classList.add("dirty");
+function setCleanItem(node, isClean) {
+	if (!node.id) {
+		node.id = Date.now().toString(32).substr(-6);
+	}
 
-	initTitle();
+	if (isClean) {
+		delete dirty[node.id];
+		node.savedValue = "checkbox" === node.type ? node.checked : node.value;
+	} else {
+		dirty[node.id] = true;
+	}
+
+	setDirtyClass(node, !isClean);
 }
+
 function isCleanGlobal() {
-	var clean = Object.keys(items)
-				      .every(function(item) { return items[item] });
-
-	if (clean) document.body.classList.remove("dirty");
-	else document.body.classList.add("dirty");
-
+	var clean = Object.keys(dirty).length == 0;
+	setDirtyClass(document.body, !clean);
 	return clean;
 }
-function setCleanGlobal(form) {
-	if (!form) form = null;
-	Array.prototype.forEach.call(document.querySelectorAll("input, select"), function(node) {
-		if (node.form === form) {
-			if ("checkbox" === node.type) {
-				node.defaultChecked = node.checked;
-			} else {
-				node.defaultValue = node.value;
-			}
 
-			node.classList.remove("dirty");
-			delete items[node.id];
-		}
-	});
-
-	editors.forEach(function(cm) {
-		cm.lastChange = cm.changeGeneration();
-		cm.getTextArea().parentNode.defaultValue = cm.lastChange;
-		indicateCodeChange(cm);
-	});
-
-	initTitle();
+function setCleanGlobal() {
+	document.querySelectorAll("#header, #sections > div").forEach(setCleanSection);
+	dirty = {}; // forget the dirty applies-to ids from a deleted section after the style was saved
+}
+
+function setCleanSection(section) {
+	section.querySelectorAll(".style-contributor").forEach(function(node) { setCleanItem(node, true) });
+
+	// #header section has no codemirror
+	var wrapper = section.querySelector(".CodeMirror");
+	if (wrapper) {
+		var cm = wrapper.CodeMirror;
+		section.savedValue = cm.changeGeneration();
+		indicateCodeChange(cm);
+	}
 }
 
-var editors = []; // array of all CodeMirror instances
 function initCodeMirror() {
 	var CM = CodeMirror;
 	// default option values
@@ -106,8 +109,8 @@ function initCodeMirror() {
 	// additional commands
 	var cc = CM.commands;
 	cc.jumpToLine = jumpToLine;
-	cc.nextBuffer = nextBuffer;
-	cc.prevBuffer = prevBuffer;
+	cc.nextBuffer = function(cm) { nextPrevBuffer(cm, 1) };
+	cc.prevBuffer = function(cm) { nextPrevBuffer(cm, -1) };
 
 	var cssHintHandler = CM.hint.css;
 	CM.hint.css = function(cm) {
@@ -163,7 +166,7 @@ function acmeEventListener(event) {
 }
 
 // replace given textarea with the CodeMirror editor
-function setupCodeMirror(textarea) {
+function setupCodeMirror(textarea, index) {
 	var cm = CodeMirror.fromTextArea(textarea);
 	cm.addKeyMap({
 		"Ctrl-G": "jumpToLine",
@@ -184,7 +187,14 @@ function setupCodeMirror(textarea) {
 		}, 0);
 	});
 
-	editors.push(cm);
+	editors.splice(index || editors.length, 0, cm);
+	return cm;
+}
+
+function indicateCodeChange(cm) {
+	var section = cm.getTextArea().parentNode;
+	setCleanItem(section, cm.isClean(section.savedValue));
+	updateTitle();
 }
 
 // ensure the section doesn't jump when clicking selected text
@@ -220,10 +230,6 @@ window.onbeforeunload = function() {
 	return !isCleanGlobal() ? t('styleChangesNotSaved') : null;
 }
 
-function indicateCodeChange(cm) {
-	setCleanItem(cm.getTextArea().parentNode, cm.isClean(cm.lastChange));
-}
-
 function addAppliesTo(list, name, value) {
 	var showingEverything = list.querySelector(".applies-to-everything") != null;
 	// blow away "Everything" if it's there
@@ -255,83 +261,72 @@ function addSection(event, section) {
 	div.querySelector(".remove-section").addEventListener("click", removeSection, false);
 	div.querySelector(".add-section").addEventListener("click", addSection, false);
 
+	var codeElement = div.querySelector(".code");
 	var appliesTo = div.querySelector(".applies-to-list");
+	var appliesToAdded = false;
 
 	if (section) {
-		var codeElement = div.querySelector(".code");
 		codeElement.value = section.code;
-		// codeElement.addEventListener("change", makeDirty, false);
-		// // Why is this here? Is it possible for CM to not load?
-		if (section.urls) {
-			section.urls.forEach(function(url) {
-				addAppliesTo(appliesTo, "url", url);
-			});
+		for (var i in propertyToCss) {
+			if (section[i]) {
+				section[i].forEach(function(url) {
+					addAppliesTo(appliesTo, propertyToCss[i], url);
+					appliesToAdded = true;
+				});
+			}
 		}
-		if (section.urlPrefixes) {
-			section.urlPrefixes.forEach(function(url) {
-				addAppliesTo(appliesTo, "url-prefix", url);
-			});
-		}
-		if (section.domains) {
-			section.domains.forEach(function(d) {
-				addAppliesTo(appliesTo, "domain", d);
-			});
-		}
-		if (section.regexps) {
-			section.regexps.forEach(function(d) {
-				addAppliesTo(appliesTo, "regexp", d);
-			});
-		}
-		if (!section.urls && !section.urlPrefixes && !section.domains && !section.regexps) {
-			addAppliesTo(appliesTo);
-		}
-	} else {
+	}
+	if (!appliesToAdded) {
 		addAppliesTo(appliesTo);
 	}
 
+	appliesTo.addEventListener("change", onChange);
+	appliesTo.addEventListener("input", onChange);
+
 	var sections = document.getElementById("sections");
-	var section = event ? event.target.parentNode : null;
-	if (event && section.nextElementSibling) {
-		sections.insertBefore(div, section.nextElementSibling);
+	if (event) {
+		var clickedSection = event.target.parentNode;
+		sections.insertBefore(div, clickedSection.nextElementSibling);
+		var newIndex = document.querySelectorAll("#sections > div").indexOf(clickedSection) + 1;
+		setupCodeMirror(codeElement, newIndex).focus();
 	} else {
 		sections.appendChild(div);
+		setupCodeMirror(codeElement);
 	}
-	setupCodeMirror(div.querySelector('.code'));
-	if (section) {
-		var index = Array.prototype.indexOf.call(sections.children, section);
-		var cm = editors.pop();
-		editors.splice(index, 0, cm);
-		cm.focus();
-	}
+
+	setCleanSection(div);
 }
 
 function removeAppliesTo(event) {
 	var appliesTo = event.target.parentNode,
 	    appliesToList = appliesTo.parentNode;
-	appliesToList.removeChild(appliesTo);
+	removeAreaAndSetDirty(appliesTo);
 	if (!appliesToList.hasChildNodes()) {
-		var e = appliesToEverythingTemplate.cloneNode(true);
-		e.querySelector(".add-applies-to").addEventListener("click", function() {addAppliesTo(this.parentNode.parentNode)}, false);
-		appliesToList.appendChild(e);
+		addAppliesTo(appliesToList);
 	}
-	Array.prototype.forEach.call(appliesTo.querySelectorAll("input, select"), function(node) {
-		setCleanItem(node, !node.defaultValue);
-	});
 }
 
 function removeSection(event) {
-    var section = event.target.parentNode;
-    var wrapper = section.querySelector(".CodeMirror-wrap");
-	var idx = editors.indexOf(wrapper && wrapper.CodeMirror);
-    if (idx >= 0) {
-        editors.splice(idx, 1);
-		setCleanItem(wrapper.parentNode, true);
-    }
-	section.parentNode.removeChild(section);
-	Array.prototype.forEach.call(section.querySelectorAll("input, select"), function(node) {
-		setCleanItem(node, !node.defaultValue);
+	var section = event.target.parentNode;
+	var cm = section.querySelector(".CodeMirror").CodeMirror;
+	removeAreaAndSetDirty(section);
+	editors.splice(editors.indexOf(cm), 1);
+}
+
+function removeAreaAndSetDirty(area) {
+	area.querySelectorAll('.style-contributor').some(function(node) {
+		if (node.savedValue) {
+			// it's a saved section, so make it dirty and stop the enumeration
+			setCleanItem(area, false);
+			return true;
+		} else {
+			// it's an empty section, so undirty the applies-to items,
+			// otherwise orphaned ids would keep the style dirty
+			setCleanItem(node, true);
+		}
 	});
-	setCleanItem(section, !section.defaultValue);
+	updateTitle();
+	area.parentNode.removeChild(area);
 }
 
 function makeSectionVisible(cm) {
@@ -440,13 +435,8 @@ function jumpToLine(cm) {
 	}, {value: cur.line+1});
 }
 
-function nextBuffer(cm) {
-	var cm = editors[(editors.indexOf(cm) + 1) % editors.length];
-	makeSectionVisible(cm);
-	cm.focus();
-}
-function prevBuffer(cm) {
-	var cm = editors[(editors.indexOf(cm) - 1 + editors.length) % editors.length];
+function nextPrevBuffer(cm, direction) {
+	cm = editors[(editors.indexOf(cm) + direction + editors.length) % editors.length];
 	makeSectionVisible(cm);
 	cm.focus();
 }
@@ -459,20 +449,16 @@ function init() {
 	if (!params.id) { // match should be 2 - one for the whole thing, one for the parentheses
 		// This is an add
 		var section = {code: ""}
-		if (params.domain) {
-			section.domains = [params.domain];
-		} else if (params.url) {
-			section.urls = [params.url];
-		} else if (params["url-prefix"]) {
-			section.urlPrefixes = [params["url-prefix"]];
+		for (var i in CssToProperty) {
+			if (params[i]) {
+				section[CssToProperty[i]] = [params[i]];
+			}
 		}
 		addSection(null, section);
 		// default to enabled
 		document.getElementById("enabled").checked = true
 		tE("heading", "addStyleTitle");
-		setupGlobalSearch();
-		setCleanGlobal(null);
-		initTitle();
+		initHooks();
 		return;
 	}
 	// This is an edit
@@ -488,7 +474,7 @@ function initWithStyle(style) {
 	document.getElementById("enabled").checked = style.enabled == "true";
 	document.getElementById("heading").innerHTML = t("editStyleHeading");
 	// if this was done in response to an update, we need to clear existing sections
-	Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) {
+	document.querySelectorAll("#sections > div").forEach(function(div) {
 		div.parentNode.removeChild(div);
 	});
 	style.sections.forEach(function(section) {
@@ -496,18 +482,27 @@ function initWithStyle(style) {
 			addSection(null, section)
 		}, 0);
 	});
-	setupGlobalSearch();
-	setCleanGlobal(null);
-	initTitle();
+	initHooks();
 }
 
-function initTitle() {
+function initHooks() {
+	document.querySelectorAll("#header .style-contributor").forEach(function(node) {
+		node.addEventListener("change", onChange);
+		node.addEventListener("input", onChange);
+	});
+
+	setupGlobalSearch();
+	setCleanGlobal();
+	updateTitle();
+}
+
+function updateTitle() {
 	const DIRTY_TITLE = "* $";
 
-	var name = document.getElementById("name").defaultValue;
-	var dirty = !isCleanGlobal();
+	var name = document.getElementById("name").savedValue;
+	var clean = isCleanGlobal();
 	var title = styleId === null ? t("addStyleTitle") : t('editStyleTitle', [name]);
-	document.title = !dirty ? title : DIRTY_TITLE.replace("$", title);
+	document.title = clean ? title : DIRTY_TITLE.replace("$", title);
 }
 
 function validate() {
@@ -516,18 +511,18 @@ function validate() {
 		return t("styleMissingName");
 	}
 	// validate the regexps
-	if (Array.prototype.some.call(document.querySelectorAll(".applies-to-list"), function(list) {
-		return Array.prototype.some.call(list.childNodes, function(li) {
+	if (document.querySelectorAll(".applies-to-list").some(function(list) {
+		return list.childNodes.some(function(li) {
 			if (li.className == appliesToEverythingTemplate.className) {
 				return false;
 			}
 			var valueElement = li.querySelector("[name=applies-value]");
-			var a = li.querySelector("[name=applies-type]").value;
-			var b = valueElement.value;
-			if (a && b) {
-				if (a == "regexp") {
+			var type = li.querySelector("[name=applies-type]").value;
+			var value = valueElement.value;
+			if (type && value) {
+				if (type == "regexp") {
 					try {
-						new RegExp(b);
+						new RegExp(value);
 					} catch (ex) {
 						valueElement.focus();
 						return true;
@@ -560,19 +555,19 @@ function save() {
 		id: styleId,
 		name: name,
 		enabled: enabled,
-		sections: getSections(),
+		sections: getSections()
 	};
 	chrome.extension.sendMessage(request, saveComplete);
 }
 
 function getSections() {
 	var sections = [];
-	Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) {
-		var code = div.querySelector(".code").value;
-		if (/^\s*$/.test(code)) {
+	document.querySelectorAll("#sections > div").forEach(function(div) {
+		var meta = getMeta(div);
+		var code = div.querySelector(".CodeMirror").CodeMirror.getValue();
+		if (/^\s*$/.test(code) && Object.keys(meta).length == 0) {
 			return;
 		}
-		var meta = getMeta(div);
 		meta.code = code;
 		sections.push(meta);
 	});
@@ -580,28 +575,16 @@ function getSections() {
 }
 
 function getMeta(e) {
-	var meta = {urls: [], urlPrefixes: [], domains: [], regexps: []};
-	Array.prototype.forEach.call(e.querySelector(".applies-to-list").childNodes, function(li) {
+	var meta = {};
+	e.querySelector(".applies-to-list").childNodes.forEach(function(li) {
 		if (li.className == appliesToEverythingTemplate.className) {
 			return;
 		}
-		var a = li.querySelector("[name=applies-type]").value;
-		var b = li.querySelector("[name=applies-value]").value;
-		if (a && b) {
-			switch (a) {
-				case "url":
-					meta.urls.push(b);
-					break;
-				case "url-prefix":
-					meta.urlPrefixes.push(b);
-					break;
-				case "domain":
-					meta.domains.push(b);
-					break;
-				case "regexp":
-					meta.regexps.push(b);
-					break;
-			}
+		var type = li.querySelector("[name=applies-type]").value;
+		var value = li.querySelector("[name=applies-value]").value;
+		if (type && value) {
+			var property = CssToProperty[type];
+			meta[property] ? meta[property].push(value) : meta[property] = [value];
 		}
 	});
 	return meta;
@@ -609,34 +592,32 @@ function getMeta(e) {
 
 function saveComplete(style) {
 	styleId = style.id;
-	setCleanGlobal(null);
+	setCleanGlobal();
 
 	// Go from new style URL to edit style URL
 	if (location.href.indexOf("id=") == -1) {
 		// give the code above a moment before we kill the page
 		setTimeout(function() {location.href = "edit.html?id=" + style.id;}, 200);
 	} else {
-		initTitle();
+		updateTitle();
 	}
 }
 
 function showMozillaFormat() {
-	var w = window.open("data:text/plain;charset=UTF-8," + encodeURIComponent(toMozillaFormat()));
+	window.open("data:text/plain;charset=UTF-8," + encodeURIComponent(toMozillaFormat()));
 }
 
 function toMozillaFormat() {
 	return getSections().map(function(section) {
-		if (section.urls.length == 0 && section.urlPrefixes.length == 0 && section.domains.length == 0 && section.regexps.length == 0) {
-			return section.code;
-		}
-		var propertyToCss = {"urls": "url", "urlPrefixes": "url-prefix", "domains": "domain", "regexps": "regexp"};
 		var cssMds = [];
 		for (var i in propertyToCss) {
-			cssMds = cssMds.concat(section[i].map(function(v) {
-				return propertyToCss[i] + "(\"" + v.replace(/\\/g, "\\\\") + "\")";
-			}));
+			if (section[i]) {
+				cssMds = cssMds.concat(section[i].map(function (v){
+					return propertyToCss[i] + "(\"" + v.replace(/\\/g, "\\\\") + "\")";
+				}));
+			}
 		}
-		return "@-moz-document " + cssMds.join(", ") + " {\n" + section.code + "\n}";
+		return cssMds.length ? "@-moz-document " + cssMds.join(", ") + " {\n" + section.code + "\n}" : section.code;
 	}).join("\n\n");
 }
 
@@ -675,7 +656,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		case "styleUpdated":
 			if (styleId == request.id) {
 				initWithStyle(request.style);
-				dirty = false;
 			}
 			break;
 		case "styleDeleted":

From da52ff7ee0dc1b9089357fa83ad4555b2842e8e7 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 20 Mar 2015 12:28:00 +0300
Subject: [PATCH 11/11] Editor: de-tablify options, support for responsive
 layout

---
 edit.html | 122 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 84 insertions(+), 38 deletions(-)

diff --git a/edit.html b/edit.html
index 255c47f0..7b6d7c35 100644
--- a/edit.html
+++ b/edit.html
@@ -79,6 +79,13 @@
 			#header label {
 				width: 60px;
 			}
+			#options .aligned {
+				display: table-row;
+			}
+			#options .aligned > * {
+				display: table-cell;
+				margin: 0.5ex 0 0 0;
+			}
 			.code {
 				height: 10em;
 				width: 40em;
@@ -154,24 +161,68 @@
 					width: auto;
 					border-right: none;
 					padding-left: 8px;
+					padding-top: 8px;
+				}
+				#header section {
+					display: inline-block;
+					margin-bottom: 0.5em;
+				}
+				#header label {
+					width: auto;
+					vertical-align: baseline;
+					margin-right: .5em;
+				}
+				#header input[type="checkbox"] {
+					vertical-align: middle;
+				}
+				#name {
+					font-weight: bold;
+				}
+				h1, h2 {
+					display: none;
+				}
+				#basic-info > div {
+					display: inline-block;
+					margin-right: 1em;
+				}
+				#actions br {
+					display: none;
+				}
+				#actions img {
+					position: relative;
+					top: .2em;
+					margin-left: .2em;
+				}
+				#actions > * + button, #actions a {
+					margin-left: 1em;
+				}
+				#options {
+					display: flex;
+					flex-wrap: wrap;
+					align-items: baseline;
+				}
+				#options .option, #options .option > * {
+					flex: auto;
+					height: 1.8em;
+					margin: 0;
+					display: inline-block;
+					white-space: nowrap;
+				}
+				#options .option {
+					margin-right: 1em;
 				}
-
 				#sections {
 					padding-left: 0;
 				}
-
 				#sections > div {
 					padding: 0;
 				}
-
 				#sections-heading {
 					padding-left: 8px;
 				}
-
 				body > section > *:not(h2) {
 					padding-left: 8px;
 				}
-
 			}
 
 			/* editor options */
@@ -196,40 +247,35 @@
 				<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
 				<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
 			</section>
-			<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
-			<button id="save-button" title="Ctrl-S"></button>
-			<a href="manage.html"><button id="cancel-button"></button></a>
-			<form id="options">
+			<section id="actions">
+				<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
+				<button id="from-mozilla">From Mozilla format</button><img id="from-mozilla-help" src="help.png"><br><br>
+				<button id="save-button" title="Ctrl-S"></button>
+				<a href="manage.html"><button id="cancel-button"></button></a>
+			</section>
+			<section id="options">
 				<h2 id="options-heading"></h2>
-				<table cols="2">
-				<tr>
-					<td colspan="2">
-						<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
-						<label id="lineWrapping-label" for="editor.lineWrapping"></label>
-					</td>
-				</tr>
-				<tr>
-					<td colspan="2">
-						<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
-						<label id="smartIndent-label" for="editor.smartIndent"></label>
-					</td>
-				</tr>
-				<tr>
-					<td colspan="2">
-						<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
-						<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
-					</td>
-				</tr>
-				<tr>
-					<td><label id="tabSize-label" for="editor.tabSize"></label></td>
-					<td><input data-option="tabSize" id="editor.tabSize" type="number" min="0"></td>
-				</tr>
-				<tr>
-					<td><label id="keyMap-label" for="editor.keyMap"></label></td>
-					<td><select data-option="keyMap" id="editor.keyMap"></select></td>
-				</tr>
-			</table>
-			</form>
+				<div class="option">
+					<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
+					<label id="lineWrapping-label" for="editor.lineWrapping"></label>
+				</div>
+				<div class="option">
+					<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
+					<label id="smartIndent-label" for="editor.smartIndent"></label>
+				</div>
+				<div class="option">
+					<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
+					<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
+				</div>
+				<div class="option aligned">
+					<label id="tabSize-label" for="editor.tabSize"></label>
+					<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
+				</div>
+				<div class="option aligned">
+					<label id="keyMap-label" for="editor.keyMap"></label>
+					<select data-option="keyMap" id="editor.keyMap"></select>
+				</div>
+			</section>
 		</div>
 		<section id="sections">
 			<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>