diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 580ef244..76952976 100644 --- a/_locales/en/messages.json +++ b/_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": { - "message": "To Mozilla format", - "description": "Label for the button that converts the code to Mozilla format" + "styleMozillaFormatHeading": { + "message": "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$'?", diff --git a/edit.html b/edit.html index 8542773c..32c037b1 100644 --- a/edit.html +++ b/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 @@
-
-
-
+
+ + + +
+
+

+ + +

diff --git a/edit.js b/edit.js index 6f6dc026..9e0e0b10 100644 --- a/edit.js +++ b/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); - mergeOptions(userOptions, CM.defaults); - - function mergeOptions(source, target) { - for (var key in source) target[key] = source[key]; - return target; - } + shallowMerge(stylishOptions, CM.defaults); + shallowMerge(userOptions, CM.defaults); // 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("
\ + \ + \ +
").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.+$/, "") + "
"; + }); + + 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); diff --git a/storage.js b/storage.js index 3f8d2d02..5826f0f3 100644 --- a/storage.js +++ b/storage.js @@ -262,14 +262,16 @@ function sessionStorageHash(name) { } function shallowCopy(obj) { - if (typeof obj != "object") { - return obj; + return typeof obj == "object" ? shallowMerge(obj, {}) : obj; +} + +function shallowMerge(from, to) { + if (typeof from == "object" && typeof to == "object") { + for (var k in from) { + to[k] = from[k]; + } } - var copy = {}; - for (var k in obj) { - copy[k] = obj[k]; - } - return copy; + return to; } function equal(a, b) {