Editor: paste from Mozilla format; export in styled popup

_locales/en/messages.json

@@ -165,6 +165,10 @@
 		"message": "Enable",
 		"description": "Label for the button to enable a style"
 	},
+	"exportLabel": {
+		"message": "Export",
+		"description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
+	},
 	"findStylesForSite": {
 		"message": "Find more styles for this site.",
 		"description": "Text for a link that gets a list of styles for the current site"
@@ -181,6 +185,26 @@
 		"message": "Type a command name",
 		"description": "Placeholder text of inputbox in keymap help popup on the edit style page. Must be very short"
 	},
+	"importLabel": {
+		"message": "Import",
+		"description": "Label for the button to import a style ('edit' page) or all styles ('manage' page)"
+	},
+	"importAppendLabel": {
+		"message": "Append to style",
+		"description": "Label for the button to import a style and append to the existing sections"
+	},
+	"importAppendTooltip": {
+		"message": "Append the imported style to current style",
+		"description": "Tooltip for the button to import a style and append to the existing sections"
+	},
+	"importReplaceLabel": {
+		"message": "Overwrite style",
+		"description": "Label for the button to import and overwrite current style"
+	},
+	"importReplaceTooltip": {
+		"message": "Discard contents of current style and overwrite it with the imported style",
+		"description": "Label for the button to import and overwrite current style"
+	},
 	"installUpdate": {
 		"message": "Install update",
 		"description": "Label for the button to install an update for a single style"
@@ -322,13 +346,21 @@
 		"message": "Sections",
 		"description": "Title for the style sections section"
 	},
-	"styleToMozillaFormat": {
+	"styleMozillaFormatHeading": {
-		"message": "To Mozilla format",
+		"message": "Mozilla Format",
-		"description": "Label for the button that converts the code to Mozilla format"
+		"description": "Heading for the section with buttons to import/export Mozilla format of the style"
+	},
+	"styleFromMozillaFormatPrompt": {
+		"message": "Paste the Mozilla-format code",
+		"description": "Prompt in the dialog displayed after clicking 'Import from Mozilla format' button"
+	},
+	"styleToMozillaFormatTitle": {
+		"message": "Style in Mozilla format",
+		"description": "Title of the popup with the style code in Mozilla format, shown after pressing the Export button on Edit style page"
 	},
 	"styleToMozillaFormatHelp": {
 		"message": "The Mozilla format of the code can be used with Stylish for Firefox and can be submitted to userstyles.org.",
-		"description": "Help info for the button that converts the code to Mozilla format"
+		"description": "Help info for the Mozilla format header section that converts the code to/from Mozilla format"
 	},
 	"styleUpdate": {
 		"message": "Are you sure you want to update '$stylename$'?",

edit.html

@@ -241,7 +241,7 @@
 				background-color: white;
 				box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
 				padding: 0.5rem;
-				z-index: 9999;
+				z-index: 99;
 			}
 			#help-popup .title {
 				font-weight: bold;
@@ -282,6 +282,19 @@
 				padding-right: 0.5rem;
 			}
 
+			#help-popup button[name^="import"] {
+				line-height: 1.5rem;
+				padding: 0 0.5rem;
+				margin: 0.5rem 0 0 0.5rem;
+				pointer-events: none;
+				opacity: 0.5;
+				float: right;
+			}
+			#help-popup.ready button[name^="import"] {
+				pointer-events: all;
+				opacity: 1.0;
+			}
+
 			/************ lint ************/
 			#lint {
 				display: none;
@@ -528,9 +541,16 @@
 				</div>
 			</section>
 			<section id="actions">
-				<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>
-				<div><a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a></div>
+					<button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button>
-				<div><button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button></div>
+					<button id="beautify" i18n-text="styleBeautify"></button>
+					<a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
+				</div>
+				<div>
+					<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><img id="to-mozilla-help" src="help.png"></h2>
+					<button id="from-mozilla" i18n-text="importLabel"></button>
+					<button id="to-mozilla" i18n-text="exportLabel"></button>
+				</div>
 			</section>
 			<section id="options">
 				<h2 id="options-heading" i18n-text="optionsHeading"></h2>

edit.js

@@ -24,6 +24,8 @@ Array.prototype.rotate = function(amount) { // negative amount == rotate left
 	return r;
 }
 
+Object.defineProperty(Array.prototype, "last", {get: function() { return this[this.length - 1]; }});
+
 // reroute handling to nearest editor when keypress resolves to one of these commands
 var hotkeyRerouter = {
 	commands: {
@@ -134,13 +136,8 @@ function initCodeMirror() {
 			"Alt-PageUp": "prevEditor"
 		}
 	}
-	mergeOptions(stylishOptions, CM.defaults);
+	shallowMerge(stylishOptions, CM.defaults);
-	mergeOptions(userOptions, CM.defaults);
+	shallowMerge(userOptions, CM.defaults);
-
-	function mergeOptions(source, target) {
-		for (var key in source) target[key] = source[key];
-		return target;
-	}
 
 	// additional commands
 	CM.commands.jumpToLine = jumpToLine;
@@ -353,7 +350,7 @@ function indicateCodeChange(cm) {
 }
 
 function getSectionForCodeMirror(cm) {
-	return cm.getTextArea().parentNode;
+	return cm.display.wrapper.parentNode;
 }
 
 function getCodeMirrorForSection(section) {
@@ -1086,6 +1083,7 @@ function initHooks() {
 	});
 	document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false);
 	document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false);
+	document.getElementById("from-mozilla").addEventListener("click", fromMozillaFormat);
 	document.getElementById("beautify").addEventListener("click", beautify);
 	document.getElementById("save-button").addEventListener("click", save, false);
 	document.getElementById("sections-help").addEventListener("click", showSectionHelp, false);
@@ -1253,7 +1251,9 @@ function saveComplete(style) {
 }
 
 function showMozillaFormat() {
-	window.open("data:text/plain;charset=UTF-8," + encodeURIComponent(toMozillaFormat()));
+	var popup = showCodeMirrorPopup(t("styleToMozillaFormatTitle"), "", {readOnly: true});
+	popup.codebox.setValue(toMozillaFormat());
+	popup.codebox.execCommand("selectAll");
 }
 
 function toMozillaFormat() {
@@ -1270,6 +1270,147 @@ function toMozillaFormat() {
 	}).join("\n\n");
 }
 
+function fromMozillaFormat() {
+	var popup = showCodeMirrorPopup(t("styleFromMozillaFormatPrompt"), tHTML("<div>\
+		<button name='import-append' i18n-text='importAppendLabel' i18n-title='importAppendTooltip'></button>\
+		<button name='import-replace' i18n-text='importReplaceLabel' i18n-title='importReplaceTooltip'></button>\
+		</div>").innerHTML);
+
+	var contents = popup.querySelector(".contents");
+	contents.insertBefore(popup.codebox.display.wrapper, contents.firstElementChild);
+	popup.codebox.focus();
+
+	popup.querySelector("[name='import-append']").addEventListener("click", doImport);
+	popup.querySelector("[name='import-replace']").addEventListener("click", doImport);
+
+	popup.codebox.on("change", function() {
+		clearTimeout(popup.mozillaTimeout);
+		popup.mozillaTimeout = setTimeout(function() {
+			popup.classList.toggle("ready", trimNewLines(popup.codebox.getValue()));
+		}, 100);
+	});
+
+	function doImport() {
+		var replaceOldStyle = this.name == "import-replace";
+		popup.querySelector(".close-icon").click();
+		var mozStyle = trimNewLines(popup.codebox.getValue());
+		var parser = new exports.css.Parser(), lines = mozStyle.split("\n");
+		var sectionStack = [{code: "", cursor: {line: 1, col: 1}}];
+		var errors = "", oldSectionCount = editors.length;
+
+		parser.addListener("startdocument", function(e) {
+			var outerText = getRange(sectionStack.last.cursor, (--e.col, e));
+			var gapComment = outerText.match(/(\/\*[\s\S]*?\*\/)[\s\n]*$/);
+			var section = {code: "", cursor: backtrackTo(this, exports.css.Tokens.LBRACE, "end")};
+			// move last comment before @-moz-document inside the section
+			if (gapComment && !gapComment[1].match(/\/\*\s*AGENT_SHEET\s*\*\//)) {
+				section.code = gapComment[1] + "\n";
+				outerText = trimNewLines(outerText.substring(0, gapComment.index));
+			}
+			addContinuation(sectionStack.last, outerText);
+			e.functions.forEach(function(f) {
+				var m = f.match(/^(url|url-prefix|domain|regexp)\((['"]?)(.+?)\2?\)$/);
+				var aType = CssToProperty[m[1]];
+				var aValue = aType != "regexps" ? m[3] : m[3].replace(/\\\\/g, "\\");
+				(section[aType] = section[aType] || []).push(aValue);
+			});
+			sectionStack.push(section);
+		});
+
+		parser.addListener("enddocument", function(e) {
+			var cursor = backtrackTo(this, exports.css.Tokens.RBRACE, "start");
+			var section = sectionStack.pop();
+			addContinuation(section, getRange(section.cursor, cursor));
+			sectionStack.last.cursor = (++cursor.col, cursor);
+			doAddSection(section);
+		});
+
+		parser.addListener("endstylesheet", function() {
+			// add nonclosed (broken) outer sections except for the global one
+			sectionStack.slice(1).forEach(doAddSection);
+
+			if (!replaceOldStyle) {
+				var lastOldCM = editors[oldSectionCount - 1];
+				var lastOldSection = getSectionForCodeMirror(lastOldCM);
+				var addAfter = {target: lastOldSection.querySelector(".add-section")};
+
+				if (oldSectionCount < editors.length
+				&& lastOldCM.getValue() == ""
+				&& lastOldSection.querySelector(".applies-to-everything")) {
+					removeSection(addAfter);
+					oldSectionCount--;
+				}
+			} else {
+				var addAfter = {target: getSectionForCodeMirror(editors[0]).previousElementSibling.firstElementChild};
+			}
+
+			var globalSection = sectionStack[0];
+			addContinuation(globalSection,
+				getRange(sectionStack.last.cursor, {line: lines.length, col: lines.last.length + 1}));
+			// only add global section if it contains actual code
+			if (globalSection.code
+					.replace("@namespace url(http://www.w3.org/1999/xhtml);", "") /* strip boilerplate NS */
+					.replace(/\/\*[\s\S]*?\*\//g, "") /* strip comments */
+					.replace(/[\s\n]/g, "")) { /* strip all whitespace including new lines */
+				setCleanItem(addSection(addAfter, {code: globalSection.code}), false);
+			}
+
+			delete maximizeCodeHeight.stats;
+			editors.forEach(function(cm, i) {
+				maximizeCodeHeight(getSectionForCodeMirror(cm), i == editors.length - 1);
+			});
+
+			makeSectionVisible(editors[oldSectionCount]);
+			editors[oldSectionCount].focus();
+			if (errors) {
+				showHelp(t("issues"), errors);
+			}
+		});
+
+		parser.addListener("error", function(e) {
+			errors += e.line + ":" + e.col + " " + e.message.replace(/ at line \d.+$/, "") + "<br>";
+		});
+
+		parser.parse(mozStyle);
+
+		function getRange(start, end) {
+			if (start.line == end.line) {
+				return lines[start.line - 1].substring(start.col - 1, end.col - 1).trim();
+			} else {
+				return trimNewLines(lines[start.line - 1].substr(start.col - 1) + "\n" +
+					lines.slice(start.line, end.line - 1).join("\n") +
+					"\n" + lines[end.line - 1].substring(0, end.col - 1));
+			}
+		}
+		function doAddSection(section) {
+			if (replaceOldStyle && oldSectionCount > 0) {
+				oldSectionCount = 0;
+				editors.slice(0).reverse().forEach(function(cm) {
+					removeSection({target: getSectionForCodeMirror(cm).firstElementChild});
+				});
+			}
+			setCleanItem(addSection(null, section), false);
+		}
+	}
+	function backtrackTo(parser, tokenType, startEnd) {
+		var tokens = parser._tokenStream._lt;
+		for (var i = tokens.length - 2; i >= 0; --i) {
+			if (tokens[i].type == tokenType) {
+				return {line: tokens[i][startEnd+"Line"], col: tokens[i][startEnd+"Col"]};
+			}
+		}
+	}
+	function trimNewLines(s) {
+		return s.replace(/^[\s\n]+/, "").replace(/[\s\n]+$/, "");
+	}
+	function addContinuation(section, addendum) {
+		section.code = section.code && addendum
+			? section.code + "\n/**************************/\n" + addendum
+			: section.code || addendum;
+		return section.code;
+	}
+}
+
 function showSectionHelp() {
 	showHelp(t("styleSectionsTitle"), t("sectionHelp"));
 }
@@ -1279,7 +1420,7 @@ function showAppliesToHelp() {
 }
 
 function showToMozillaHelp() {
-	showHelp(t("styleToMozillaFormat"), t("styleToMozillaFormatHelp"));
+	showHelp(t("styleMozillaFormatHeading"), t("styleToMozillaFormatHelp"));
 }
 
 function showKeyMapHelp() {
@@ -1371,6 +1512,7 @@ function showLintHelp() {
 
 function showHelp(title, text) {
 	var div = document.getElementById("help-popup");
+	div.style.cssText = "";
 	div.querySelector(".contents").innerHTML = text;
 	div.querySelector(".title").innerHTML = title;
 
@@ -1380,15 +1522,40 @@ function showHelp(title, text) {
 	}
 
 	div.style.display = "block";
+	return div;
 
 	function closeHelp(e) {
 		if (e.type == "click" || (e.keyCode == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
 			div.style.display = "";
+			document.querySelector(".contents").innerHTML = "";
 			document.removeEventListener("keydown", closeHelp);
 		}
 	}
 }
 
+function showCodeMirrorPopup(title, html, options) {
+	var popup = showHelp(title, html);
+	popup.style.width = popup.style.maxWidth = "calc(100vw - 7rem)";
+
+	popup.codebox = CodeMirror(popup.querySelector(".contents"), shallowMerge(options, {
+		mode: "css",
+		lineNumbers: true,
+		lineWrapping: true,
+		foldGutter: true,
+		gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+		matchBrackets: true,
+		lint: {getAnnotations: CodeMirror.lint.css, delay: 0},
+		styleActiveLine: true,
+		theme: prefs.getPref("editor.theme"),
+		keyMap: prefs.getPref("editor.keyMap")
+	}));
+	popup.codebox.focus();
+	popup.codebox.setSize(null, "70vh");
+	popup.codebox.on("focus", function() { hotkeyRerouter.setState(false) });
+	popup.codebox.on("blur", function() { hotkeyRerouter.setState(true) });
+	return popup;
+}
+
 function getParams() {
 	var params = {};
 	var urlParts = location.href.split("?", 2);

storage.js

@@ -262,14 +262,16 @@ function sessionStorageHash(name) {
 }
 
 function shallowCopy(obj) {
-	if (typeof obj != "object") {
+	return typeof obj == "object" ? shallowMerge(obj, {}) : obj;
-		return obj;
+}
+
+function shallowMerge(from, to) {
+	if (typeof from == "object" && typeof to == "object") {
+		for (var k in from) {
+			to[k] = from[k];
+		}
 	}
-	var copy = {};
+	return to;
-	for (var k in obj) {
-		copy[k] = obj[k];
-	}
-	return copy;
 }
 
 function equal(a, b) {