Editor: paste from Mozilla format; export in styled popup
This commit is contained in:
tophf
parent
461d52ac41
commit
0ead2ef259
|
|
@ -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$'?",
|
||||
|
|
|
|||
28
edit.html
28
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><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>
|
||||
<div>
|
||||
<button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button>
|
||||
<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>
|
||||
|
|
|
|||
187
edit.js
187
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("<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);
|
||||
|
|
|
|||
14
storage.js
14
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user