Editor: add Undo button to CSS-beautifier

_locales/en/messages.json

@@ -319,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",

edit.html

@@ -330,6 +330,12 @@
 			.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;
 			}
@@ -447,7 +453,7 @@
 				</div>
 			</section>
 			<section id="actions">
-				<div><button id="to-mozilla" i18n-text="styleToMozillaFormat"></button><img id="to-mozilla-help" src="help.png"> <button id="beautify" i18n-text="styleBeautify"></button></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

@@ -828,6 +828,7 @@ function gotoLintIssue(event) {
 }
 
 function beautify(event) {
+	var undoCount = 1;
 	if (exports.css_beautify) { // thanks to csslint's definition of 'exports'
 		doBeautify();
 	} else {
@@ -860,7 +861,15 @@ function beautify(event) {
 			optionHtml("border: none;", "newline_between_properties", true) +
 			optionHtml("display: block;", "newline_before_close_brace", true) +
 			optionHtml("}", "newline_between_rules") +
-			"</div>");
+			"</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;
@@ -868,6 +877,8 @@ function beautify(event) {
 			prefs.setPref("editor.beautify", options);
 			event.target.parentNode.setAttribute("newline", value.toString());
 			doBeautify();
+			undoCount++;
+			undoButton.disabled = false;
 		});
 
 		function optionHtml(label, optionName, indent) {