' +
optionHtml('.selector1,', 'selector_separator_newline') +
@@ -1261,7 +1275,20 @@ function setStyleMeta(style) {
$('#url').href = style.url;
}
-function initWithStyle({style, codeIsUpdated}) {
+function initWithStyle({style}) {
+ // FIXME: what does codeIsUpdated do?
+ if (!style.usercss) {
+ return _initWithStyle({style});
+ }
+
+ if (editor) {
+ editor.replaceStyle(style);
+ } else {
+ editor = createSourceEditor(style);
+ }
+}
+
+function _initWithStyle({style, codeIsUpdated}) {
setStyleMeta(style);
if (codeIsUpdated === false) {
@@ -1440,6 +1467,13 @@ function updateLintReportIfEnabled(cm, time) {
}
function save() {
+ if (!editor) {
+ return _save();
+ }
+ editor.save();
+}
+
+function _save() {
updateLintReportIfEnabled(null, 0);
// save the contents of the CodeMirror editors back into the textareas
diff --git a/edit/lint.js b/edit/lint.js
index e8cc1fc9..df103833 100644
--- a/edit/lint.js
+++ b/edit/lint.js
@@ -147,7 +147,7 @@ function updateLinter({immediately} = {}) {
function updateEditors() {
CodeMirror.defaults.lint = linterConfig.getForCodeMirror(linter);
const guttersOption = prepareGuttersOption();
- editors.forEach(cm => {
+ $$('#sections .CodeMirror').map(e => e.CodeMirror).forEach(cm => {
cm.setOption('lint', CodeMirror.defaults.lint);
if (guttersOption) {
cm.setOption('guttersOption', guttersOption);
@@ -217,7 +217,7 @@ function updateLintReport(cm, delay) {
state.postponeNewIssues = delay === undefined || delay === null;
function update(cm) {
- const scope = cm ? [cm] : editors;
+ const scope = cm ? [cm] : $$('#sections .CodeMirror').map(e => e.CodeMirror);
let changed = false;
let fixedOldIssues = false;
scope.forEach(cm => {
@@ -284,7 +284,7 @@ function renderLintReport(someBlockChanged) {
const label = t('sectionCode');
const newContent = content.cloneNode(false);
let issueCount = 0;
- editors.forEach((cm, index) => {
+ $$('#sections .CodeMirror').map(e => e.CodeMirror).forEach((cm, index) => {
if (cm.state.lint && cm.state.lint.html) {
const html = '
' + label + ' ' + (index + 1) + '' + cm.state.lint.html;
const newBlock = newContent.appendChild(tHTML(html, 'table'));
diff --git a/edit/source-editor.js b/edit/source-editor.js
new file mode 100644
index 00000000..2fbc2188
--- /dev/null
+++ b/edit/source-editor.js
@@ -0,0 +1,133 @@
+/* global CodeMirror dirtyReporter initLint beautify showKeyMapHelp */
+/* global showToggleStyleHelp goBackToManage updateLintReportIfEnabled */
+/* global hotkeyRerouter setupAutocomplete */
+
+'use strict';
+
+function createSourceEditor(style) {
+ // draw HTML
+ $('#sections').innerHTML = '';
+ $('#name').disabled = true;
+ $('#mozilla-format-heading').parentNode.remove();
+
+ $('#sections').appendChild(tHTML(`
+
+
+
+ `));
+
+ // draw CodeMirror
+ $('#sections textarea').value = style.source;
+ const cm = CodeMirror.fromTextArea($('#sections textarea'));
+
+ // dirty reporter
+ const dirty = dirtyReporter();
+ dirty.onChange(() => {
+ const DIRTY = dirty.isDirty();
+ document.title = (DIRTY ? '* ' : '') + t('editStyleTitle', [style.name]);
+ document.body.classList.toggle('dirty', DIRTY);
+ $('#save-button').disabled = !DIRTY;
+ });
+
+ // draw metas info
+ updateMetas();
+ initHooks();
+ initLint();
+
+ function initHooks() {
+ // sidebar commands
+ $('#save-button').onclick = save;
+ $('#beautify').onclick = beautify;
+ $('#keyMap-help').onclick = showKeyMapHelp;
+ $('#toggle-style-help').onclick = showToggleStyleHelp;
+ $('#cancel-button').onclick = goBackToManage;
+
+ // enable
+ $('#enabled').onchange = e => {
+ const value = e.target.checked;
+ dirty.modify('enabled', style.enabled, value);
+ style.enabled = value;
+ };
+
+ // source
+ cm.on('change', () => {
+ const value = cm.getValue();
+ dirty.modify('source', style.source, value);
+ style.source = value;
+
+ updateLintReportIfEnabled(cm);
+ });
+
+ // hotkeyRerouter
+ cm.on('focus', () => {
+ hotkeyRerouter.setState(false);
+ });
+ cm.on('blur', () => {
+ hotkeyRerouter.setState(true);
+ });
+
+ // autocomplete
+ if (prefs.get('editor.autocompleteOnTyping')) {
+ setupAutocomplete(cm);
+ }
+ }
+
+ function updateMetas() {
+ $('#name').value = style.name;
+ $('#enabled').checked = style.enabled;
+ $('#url').href = style.url;
+ cm.setOption('mode', style.preprocessor || 'css');
+ CodeMirror.autoLoadMode(cm, style.preprocessor || 'css');
+ // beautify only works with regular CSS
+ $('#beautify').disabled = Boolean(style.preprocessor);
+ }
+
+ function replaceStyle(_style) {
+ style = _style;
+ updateMetas();
+ if (style.source !== cm.getValue()) {
+ const cursor = cm.getCursor();
+ cm.setValue(style.source);
+ cm.setCursor(cursor);
+ }
+ dirty.clear();
+ }
+
+ function toggleStyle() {
+ const value = !style.enabled;
+ dirty.modify('enabled', style.enabled, value);
+ style.enabled = value;
+ updateMetas();
+ // save when toggle enable state?
+ save();
+ }
+
+ function save() {
+ if (!dirty.isDirty()) {
+ return;
+ }
+ const req = {
+ method: 'saveUsercss',
+ reason: 'editSave',
+ id: style.id,
+ enabled: style.enabled,
+ source: style.source
+ };
+ return onBackgroundReady().then(() => BG.saveUsercss(req))
+ .then(result => {
+ if (result.status === 'error') {
+ throw new Error(result.error);
+ }
+ return result;
+ })
+ .then(({style}) => {
+ replaceStyle(style);
+ })
+ .catch(err => {
+ console.error(err);
+ alert(err);
+ });
+ }
+
+ return {replaceStyle, save, toggleStyle};
+}
diff --git a/edit/util.js b/edit/util.js
new file mode 100644
index 00000000..e76e289e
--- /dev/null
+++ b/edit/util.js
@@ -0,0 +1,90 @@
+'use strict';
+
+function dirtyReporter() {
+ const dirty = new Map();
+ const onchanges = [];
+
+ function add(obj, value) {
+ const saved = dirty.get(obj);
+ if (!saved) {
+ dirty.set(obj, {type: 'add', newValue: value});
+ } else if (saved.type === 'remove') {
+ if (saved.savedValue === value) {
+ dirty.delete(obj);
+ } else {
+ saved.newValue = value;
+ saved.type = 'modify';
+ }
+ }
+ }
+
+ function remove(obj, value) {
+ const saved = dirty.get(obj);
+ if (!saved) {
+ dirty.set(obj, {type: 'remove', savedValue: value});
+ } else if (saved.type === 'add') {
+ dirty.delete(obj);
+ } else if (saved.type === 'modify') {
+ saved.type = 'remove';
+ }
+ }
+
+ function modify(obj, oldValue, newValue) {
+ const saved = dirty.get(obj);
+ if (!saved) {
+ if (oldValue !== newValue) {
+ dirty.set(obj, {type: 'modify', savedValue: oldValue, newValue});
+ }
+ } else if (saved.type === 'modify') {
+ if (saved.savedValue === newValue) {
+ dirty.delete(obj);
+ } else {
+ saved.newValue = newValue;
+ }
+ } else if (saved.type === 'add') {
+ saved.newValue = newValue;
+ }
+ }
+
+ function clear() {
+ dirty.clear();
+ }
+
+ function isDirty() {
+ return dirty.size > 0;
+ }
+
+ function onChange(cb) {
+ onchanges.push(cb);
+ }
+
+ function wrap(obj) {
+ for (const key of ['add', 'remove', 'modify', 'clear']) {
+ obj[key] = trackChange(obj[key]);
+ }
+ return obj;
+ }
+
+ function emitChange() {
+ for (const cb of onchanges) {
+ try {
+ cb();
+ } catch (err) {
+ console.error(err);
+ }
+ }
+ }
+
+ function trackChange(fn) {
+ return function () {
+ const dirty = isDirty();
+ const result = fn.apply(null, arguments);
+ if (dirty !== isDirty()) {
+ emitChange();
+ }
+ return result;
+ };
+ }
+
+ return wrap({add, remove, modify, clear, isDirty, onChange});
+}