don't disable Beautify (let the user decide); code cosmetics

edit/source-editor.js

@@ -5,13 +5,12 @@
 'use strict';
 
 function createSourceEditor(style) {
-  // a flag for isTouched()
-  let hadBeenSaved = false;
-  let savedGeneration = 0;
-
   $('#name').disabled = true;
   $('#save-button').disabled = true;
   $('#mozilla-format-container').remove();
+  $('#save-button').onclick = save;
+  $('#toggle-style-help').onclick = showToggleStyleHelp;
+  $('#header').addEventListener('wheel', headerOnScroll, {passive: true});
   $('#sections').textContent = '';
   $('#sections').appendChild($create('.single-editor'));
 
@@ -25,15 +24,52 @@ function createSourceEditor(style) {
   // normalize style
   if (!style.id) setupNewStyle(style);
 
-  const cm = CodeMirror($('.single-editor'), {value: style.sourceCode});
+  const cm = CodeMirror($('.single-editor'), {
+    value: style.sourceCode,
+  });
+  let savedGeneration = cm.changeGeneration();
+
   editors.push(cm);
-  savedGeneration = cm.changeGeneration();
+
+  $('#enabled').onchange = function () {
+    const value = this.checked;
+    dirty.modify('enabled', style.enabled, value);
+    style.enabled = value;
+  };
+
+  cm.on('changes', () => {
+    dirty.modify('sourceGeneration', savedGeneration, cm.changeGeneration());
+    updateLintReportIfEnabled(cm);
+  });
+
+  cm.on('focus', () => cm.rerouteHotkeys(false));
+  cm.on('blur', () => cm.rerouteHotkeys(true));
+
+  CodeMirror.commands.prevEditor = cm => nextPrevMozDocument(cm, -1);
+  CodeMirror.commands.nextEditor = cm => nextPrevMozDocument(cm, 1);
+  CodeMirror.commands.toggleStyle = toggleStyle;
+  CodeMirror.commands.save = save;
+  CodeMirror.closestVisible = () => cm;
 
   cm.operation(initAppliesToLineWidget);
+
   updateMeta().then(() => {
+
     initLint();
-    initLinterSwitch();
+
-    initHooks();
+    let prevMode = NaN;
+    cm.on('optionChange', (cm, option) => {
+      if (option !== 'mode') return;
+      const mode = getModeName();
+      if (mode === prevMode) return;
+      prevMode = mode;
+      updateLinter();
+      updateLinterSwitch();
+    });
+
+    $('#editor.linter').addEventListener('change', updateLinterSwitch);
+    updateLinterSwitch();
+
     setTimeout(() => {
       if ((document.activeElement || {}).localName !== 'input') {
         cm.focus();
@@ -48,37 +84,19 @@ function createSourceEditor(style) {
     prefs.subscribe([PREF_NAME], (key, value) => widget.toggle(value));
   }
 
-  function initLinterSwitch() {
+  function updateLinterSwitch() {
-    const linterEl = $('#editor.linter');
+    const el = $('#editor.linter');
-    let prevMode = NaN;
+    el.value = linterConfig.getName();
-    cm.on('optionChange', (cm, option) => {
+    const cssLintOption = $('[value="csslint"]', el);
-      if (option !== 'mode') {
+    const mode = getModeName();
-        return;
+    if (mode !== 'css') {
-      }
-      const mode = cm.doc.mode;
-      if (mode === prevMode || mode && mode.name === prevMode) {
-        return;
-      }
-      prevMode = mode;
-      updateLinter();
-      update();
-    });
-    linterEl.addEventListener('change', update);
-    update();
-
-    function update() {
-      linterEl.value = linterConfig.getName();
-
-      const cssLintOption = linterEl.querySelector('[value="csslint"]');
-      if (cm.getOption('mode') !== 'css') {
       cssLintOption.disabled = true;
-        cssLintOption.title = t('linterCSSLintIncompatible', cm.getOption('mode'));
+      cssLintOption.title = t('linterCSSLintIncompatible', mode);
     } else {
       cssLintOption.disabled = false;
       cssLintOption.title = '';
     }
   }
-  }
 
   function setupNewStyle(style) {
     style.sections[0].code = ' '.repeat(prefs.get('editor.tabSize')) + '/* Insert code here... */';
@@ -87,7 +105,6 @@ function createSourceEditor(style) {
       style.sections[0].domains = ['example.com'];
       section = mozParser.format(style);
     }
-
     const DEFAULT_CODE = `
       /* ==UserStyle==
       @name           ${t('usercssReplaceTemplateName') + ' - ' + new Date().toLocaleString()}
@@ -97,8 +114,10 @@ function createSourceEditor(style) {
       @author         Me
       ==/UserStyle== */
     `.replace(/^\s+/gm, '') + '\n\n' + section;
+
     dirty.clear('sourceGeneration');
     style.sourceCode = '';
+
     chromeSync.getLZValue('usercssTemplate').then(code => {
       style.sourceCode = code || DEFAULT_CODE;
       cm.startOperation();
@@ -111,43 +130,12 @@ function createSourceEditor(style) {
     });
   }
 
-  function initHooks() {
-    $('#save-button').onclick = save;
-    $('#toggle-style-help').onclick = showToggleStyleHelp;
-
-    $('#enabled').onchange = function () {
-      const value = this.checked;
-      dirty.modify('enabled', style.enabled, value);
-      style.enabled = value;
-    };
-
-    $('#header').addEventListener('wheel', headerOnScroll, {passive: true});
-
-    cm.on('changes', () => {
-      dirty.modify('sourceGeneration', savedGeneration, cm.changeGeneration());
-      updateLintReportIfEnabled(cm);
-    });
-
-    cm.on('focus', () => cm.rerouteHotkeys(false));
-    cm.on('blur', () => cm.rerouteHotkeys(true));
-
-    CodeMirror.commands.prevEditor = cm => nextPrevMozDocument(cm, -1);
-    CodeMirror.commands.nextEditor = cm => nextPrevMozDocument(cm, 1);
-    CodeMirror.commands.toggleStyle = toggleStyle;
-    CodeMirror.commands.save = save;
-
-    CodeMirror.closestVisible = () => cm;
-  }
-
   function updateMeta() {
     $('#name').value = style.name;
     $('#enabled').checked = style.enabled;
     $('#url').href = style.url;
-    const {usercssData: {preprocessor} = {}} = style;
-    // beautify only works with regular CSS
-    $('#beautify').disabled = cm.getOption('mode') !== 'css';
     updateTitle();
-    return cm.setPreprocessor(preprocessor);
+    return cm.setPreprocessor(style.usercssData.preprocessor);
   }
 
   function updateTitle() {
@@ -160,7 +148,6 @@ function createSourceEditor(style) {
 
   function replaceStyle(newStyle, codeIsUpdated) {
     const sameCode = newStyle.sourceCode === cm.getValue();
-    hadBeenSaved = sameCode;
     if (sameCode) {
       savedGeneration = cm.changeGeneration();
       dirty.clear('sourceGeneration');
@@ -172,9 +159,7 @@ function createSourceEditor(style) {
     }
 
     Promise.resolve(messageBox.confirm(t('styleUpdateDiscardChanges'))).then(ok => {
-      if (!ok) {
+      if (!ok) return;
-        return;
-      }
       updateEnvironment();
       if (!sameCode) {
         const cursor = cm.getCursor();
@@ -200,14 +185,11 @@ function createSourceEditor(style) {
     dirty.modify('enabled', style.enabled, value);
     style.enabled = value;
     updateMeta();
-    // save when toggle enable state?
     save();
   }
 
   function save() {
-    if (!dirty.isDirty()) {
+    if (!dirty.isDirty()) return;
-      return;
-    }
     const code = cm.getValue();
     return (
       API.saveUsercss({
@@ -235,6 +217,7 @@ function createSourceEditor(style) {
         }
         messageBox.alert(contents);
       });
+  }
 
   function drawLinePointer(pos) {
     const SIZE = 60;
@@ -254,12 +237,6 @@ function createSourceEditor(style) {
       pointer.slice(start, end)
     );
   }
-  }
-
-  function isTouched() {
-    // indicate that the editor had been touched by the user
-    return dirty.isDirty() || hadBeenSaved;
-  }
 
   function nextPrevMozDocument(cm, dir) {
     const MOZ_DOC = '@-moz-document';
@@ -341,12 +318,14 @@ function createSourceEditor(style) {
       deltaY;
   }
 
+  function getModeName() {
+    const mode = cm.doc.mode;
+    return mode && mode.name || mode;
+  }
+
   return {
     replaceStyle,
-    save,
-    toggleStyle,
     isDirty: dirty.isDirty,
     getStyle: () => style,
-    isTouched
   };
 }