" +
"");
var undoButton = document.querySelector("#help-popup button[role='undo']");
undoButton.textContent = t(scope.length == 1 ? "undo" : "undoGlobal");
undoButton.addEventListener("click", function() {
var undoable = false;
scope.forEach(function(cm) {
if (cm.beautifyChange && cm.beautifyChange[cm.changeGeneration()]) {
delete cm.beautifyChange[cm.changeGeneration()];
cm.undo();
undoable |= cm.beautifyChange[cm.changeGeneration()];
}
});
undoButton.disabled = !undoable;
});
scope.forEach(function(cm) {
setTimeout(function() {
var text = cm.getValue();
var newText = exports.css_beautify(text, options);
if (newText != text) {
if (!cm.beautifyChange || !cm.beautifyChange[cm.changeGeneration()]) {
// clear the list if last change wasn't a css-beautify
cm.beautifyChange = {};
}
cm.setValue(newText);
cm.beautifyChange[cm.changeGeneration()] = true;
undoButton.disabled = false;
}
}, 0);
});
document.querySelector(".beautify-options").addEventListener("change", function(event) {
var value = event.target.selectedIndex > 0;
options[event.target.dataset.option] = value;
prefs.set("editor.beautify", options);
event.target.parentNode.setAttribute("newline", value.toString());
doBeautify();
});
function optionHtml(label, optionName, indent) {
var value = options[optionName];
return "
" +
"" + label + "" +
"
";
}
}
}
window.addEventListener("load", init, false);
function init() {
var params = getParams();
if (!params.id) { // match should be 2 - one for the whole thing, one for the parentheses
// This is an add
var section = {code: ""}
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");
initHooks();
return;
}
// This is an edit
tE("heading", "editStyleHeading", null, false);
requestStyle();
function requestStyle() {
chrome.runtime.sendMessage({method: "getStyles", id: params.id}, function callback(styles) {
if (!styles) { // Chrome is starting up and shows edit.html
requestStyle();
return;
}
var style = styles[0];
styleId = style.id;
initWithStyle(style);
});
}
}
function initWithStyle(style) {
document.getElementById("name").value = style.name;
document.getElementById("enabled").checked = style.enabled;
document.getElementById("url").href = style.url;
// if this was done in response to an update, we need to clear existing sections
getSections().forEach(function(div) { div.remove(); });
var queue = style.sections.length ? style.sections : [{code: ""}];
var queueStart = new Date().getTime();
// after 100ms the sections will be added asynchronously
while (new Date().getTime() - queueStart <= 100 && queue.length) {
add();
}
(function processQueue() {
if (queue.length) {
add();
setTimeout(processQueue, 0);
}
})();
initHooks();
function add() {
var sectionDiv = addSection(null, queue.shift());
maximizeCodeHeight(sectionDiv, !queue.length);
updateLintReport(sectionDiv.CodeMirror, prefs.get("editor.lintDelay"));
}
}
function initHooks() {
document.querySelectorAll("#header .style-contributor").forEach(function(node) {
node.addEventListener("change", onChange);
node.addEventListener("input", onChange);
});
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);
document.getElementById("keyMap-help").addEventListener("click", showKeyMapHelp, false);
document.getElementById("cancel-button").addEventListener("click", goBackToManage);
document.getElementById("lint-help").addEventListener("click", showLintHelp);
document.getElementById("lint").addEventListener("click", gotoLintIssue);
window.addEventListener("resize", resizeLintReport);
// touch devices don't have onHover events so the element we'll be toggled via clicking (touching)
if ("ontouchstart" in document.body) {
document.querySelector("#lint h2").addEventListener("click", toggleLintReport);
}
setupGlobalSearch();
setCleanGlobal();
updateTitle();
}
function maximizeCodeHeight(sectionDiv, isLast) {
var cm = sectionDiv.CodeMirror;
var stats = maximizeCodeHeight.stats = maximizeCodeHeight.stats || {totalHeight: 0, deltas: []};
if (!stats.cmActualHeight) {
stats.cmActualHeight = getComputedHeight(cm.display.wrapper);
}
if (!stats.sectionMarginTop) {
stats.sectionMarginTop = parseFloat(getComputedStyle(sectionDiv).marginTop);
}
var sectionTop = sectionDiv.getBoundingClientRect().top - stats.sectionMarginTop;
if (!stats.firstSectionTop) {
stats.firstSectionTop = sectionTop;
}
var extrasHeight = getComputedHeight(sectionDiv) - stats.cmActualHeight;
var cmMaxHeight = window.innerHeight - extrasHeight - sectionTop - stats.sectionMarginTop;
var cmDesiredHeight = cm.display.sizer.clientHeight + 2*cm.defaultTextHeight();
var cmGrantableHeight = Math.max(stats.cmActualHeight, Math.min(cmMaxHeight, cmDesiredHeight));
stats.deltas.push(cmGrantableHeight - stats.cmActualHeight);
stats.totalHeight += cmGrantableHeight + extrasHeight;
if (!isLast) {
return;
}
stats.totalHeight += stats.firstSectionTop;
if (stats.totalHeight <= window.innerHeight) {
editors.forEach(function(cm, index) {
cm.setSize(null, stats.deltas[index] + stats.cmActualHeight);
});
return;
}
// scale heights to fill the gap between last section and bottom edge of the window
var sections = document.getElementById("sections");
var available = window.innerHeight - sections.getBoundingClientRect().bottom -
parseFloat(getComputedStyle(sections).marginBottom);
if (available <= 0) {
return;
}
var totalDelta = stats.deltas.reduce(function(sum, d) { return sum + d; }, 0);
var q = available / totalDelta;
var baseHeight = stats.cmActualHeight - stats.sectionMarginTop;
stats.deltas.forEach(function(delta, index) {
editors[index].setSize(null, baseHeight + Math.floor(q * delta));
});
}
function updateTitle() {
var DIRTY_TITLE = "* $";
var name = document.getElementById("name").savedValue;
var clean = isCleanGlobal();
var title = styleId === null ? t("addStyleTitle") : t('editStyleTitle', [name]);
document.title = clean ? title : DIRTY_TITLE.replace("$", title);
}
function validate() {
var name = document.getElementById("name").value;
if (name == "") {
return t("styleMissingName");
}
// validate the regexps
if (document.querySelectorAll(".applies-to-list").some(function(list) {
return list.childNodes.some(function(li) {
if (li.className == template.appliesToEverything.className) {
return false;
}
var valueElement = li.querySelector("[name=applies-value]");
var type = li.querySelector("[name=applies-type]").value;
var value = valueElement.value;
if (type && value) {
if (type == "regexp") {
try {
new RegExp(value);
} catch (ex) {
valueElement.focus();
return true;
}
}
}
return false;
});
})) {
return t("styleBadRegexp");
}
return null;
}
function save() {
updateLintReport(null, 0);
// save the contents of the CodeMirror editors back into the textareas
for (var i=0; i < editors.length; i++) {
editors[i].save();
}
var error = validate();
if (error) {
alert(error);
return;
}
var name = document.getElementById("name").value;
var enabled = document.getElementById("enabled").checked;
var request = {
method: "saveStyle",
id: styleId,
name: name,
enabled: enabled,
sections: getSectionsHashes()
};
chrome.runtime.sendMessage(request, saveComplete);
}
function getSectionsHashes() {
var sections = [];
getSections().forEach(function(div) {
var meta = getMeta(div);
var code = div.CodeMirror.getValue();
if (/^\s*$/.test(code) && Object.keys(meta).length == 0) {
return;
}
meta.code = code;
sections.push(meta);
});
return sections;
}
function getMeta(e) {
var meta = {urls: [], urlPrefixes: [], domains: [], regexps: []};
e.querySelector(".applies-to-list").childNodes.forEach(function(li) {
if (li.className == template.appliesToEverything.className) {
return;
}
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].push(value);
}
});
return meta;
}
function saveComplete(style) {
styleId = style.id;
setCleanGlobal();
// Go from new style URL to edit style URL
if (location.href.indexOf("id=") == -1) {
history.replaceState({}, document.title, "edit.html?id=" + style.id);
tE("heading", "editStyleHeading", null, false);
}
updateTitle();
}
function showMozillaFormat() {
var popup = showCodeMirrorPopup(t("styleToMozillaFormatTitle"), "", {readOnly: true});
popup.codebox.setValue(toMozillaFormat());
popup.codebox.execCommand("selectAll");
}
function toMozillaFormat() {
return getSectionsHashes().map(function(section) {
var cssMds = [];
for (var i in propertyToCss) {
if (section[i]) {
cssMds = cssMds.concat(section[i].map(function (v){
return propertyToCss[i] + "(\"" + v.replace(/\\/g, "\\\\") + "\")";
}));
}
}
return cssMds.length ? "@-moz-document " + cssMds.join(", ") + " {\n" + section.code + "\n}" : section.code;
}).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: "", start: {line: 1, col: 1}}];
var errors = "", oldSectionCount = editors.length;
var firstAddedCM;
parser.addListener("startdocument", function(e) {
var outerText = getRange(sectionStack.last.start, (--e.col, e));
var gapComment = outerText.match(/(\/\*[\s\S]*?\*\/)[\s\n]*$/);
var section = {code: "", start: 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));
}
if (outerText) {
sectionStack.last.code = outerText;
doAddSection(sectionStack.last);
sectionStack.last.code = "";
}
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 end = backtrackTo(this, exports.css.Tokens.RBRACE, "start");
var section = sectionStack.pop();
section.code += getRange(section.start, end);
sectionStack.last.start = (++end.col, end);
doAddSection(section);
});
parser.addListener("endstylesheet", function() {
// add nonclosed outer sections (either broken or the last global one)
var endOfText = {line: lines.length, col: lines.last.length + 1};
sectionStack.last.code += getRange(sectionStack.last.start, endOfText);
sectionStack.forEach(doAddSection);
delete maximizeCodeHeight.stats;
editors.forEach(function(cm) {
maximizeCodeHeight(cm.getSection(), cm == editors.last);
});
makeSectionVisible(firstAddedCM);
firstAddedCM.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].substr(start.col - 1, end.col - start.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 (!firstAddedCM) {
if (!initFirstSection(section)) {
return;
}
}
// don't add empty sections
if (!(section.code || section.urls || section.urlPrefixes || section.domains || section.regexps)) {
return;
}
setCleanItem(addSection(null, section), false);
firstAddedCM = firstAddedCM || editors.last;
}
// do onetime housekeeping as the imported text is confirmed to be a valid style
function initFirstSection(section) {
// skip adding the first global section when there's no code/comments
if (!section.code.replace("@namespace url(http://www.w3.org/1999/xhtml);", "") /* ignore boilerplate NS */
.replace(/[\s\n]/g, "")) { /* ignore all whitespace including new lines */
return false;
}
if (replaceOldStyle) {
editors.slice(0).reverse().forEach(function(cm) {
removeSection({target: cm.getSection().firstElementChild});
});
} else if (!editors.last.getValue()) {
// nuke the last blank section
if (editors.last.getSection().querySelector(".applies-to-everything")) {
removeSection({target: editors.last.getSection()});
}
}
return true;
}
}
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 showSectionHelp() {
showHelp(t("styleSectionsTitle"), t("sectionHelp"));
}
function showAppliesToHelp() {
showHelp(t("appliesLabel"), t("appliesHelp"));
}
function showToMozillaHelp() {
showHelp(t("styleMozillaFormatHeading"), t("styleToMozillaFormatHelp"));
}
function showKeyMapHelp() {
var keyMap = mergeKeyMaps({}, prefs.get("editor.keyMap"), CodeMirror.defaults.extraKeys);
var keyMapSorted = Object.keys(keyMap)
.map(function(key) { return {key: key, cmd: keyMap[key]} })
.concat([{key: "Shift-Ctrl-Wheel", cmd: "scrollWindow"}])
.sort(function(a, b) { return a.cmd < b.cmd || (a.cmd == b.cmd && a.key < b.key) ? -1 : 1 });
showHelp(t("cm_keyMap") + ": " + prefs.get("editor.keyMap"),
'