Fix: minor

edit.html

@@ -18,30 +18,6 @@
       }
     </style>
 
-    <script src="js/promisify.js"></script>
-    <script src="js/dom.js"></script>
-    <script src="js/messaging.js"></script>
-    <script src="js/prefs.js"></script>
-    <script src="js/localization.js"></script>
-    <script src="js/script-loader.js"></script>
-    <script src="js/storage-util.js"></script>
-    <script src="js/exclusions.js"></script>
-    <script src="js/msg.js"></script>
-    <script src="content/apply.js"></script>
-    <script src="edit/util.js"></script>
-    <script src="edit/regexp-tester.js"></script>
-    <script src="edit/live-preview.js"></script>
-    <script src="edit/applies-to-line-widget.js"></script>
-    <script src="edit/source-editor.js"></script>
-    <script src="edit/colorpicker-helper.js"></script>
-    <script src="edit/beautify.js"></script>
-    <script src="edit/sections-editor.js"></script>
-    <script src="edit/show-keymap-help.js"></script>
-    <script src="edit/codemirror-editing-hooks.js"></script>
-    <script src="edit/edit.js"></script>
-
-    <script src="msgbox/msgbox.js" async></script>
-
     <link  href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
     <script src="vendor/codemirror/lib/codemirror.js"></script>
 
@@ -84,6 +60,18 @@
     <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
     <script src="vendor-overwrites/colorpicker/colorview.js"></script>
 
+    <script src="js/promisify.js"></script>
+    <script src="js/dom.js"></script>
+    <script src="js/messaging.js"></script>
+    <script src="js/prefs.js"></script>
+    <script src="js/localization.js"></script>
+    <script src="js/script-loader.js"></script>
+    <script src="js/storage-util.js"></script>
+    <script src="js/exclusions.js"></script>
+    <script src="js/msg.js"></script>
+
+    <script src="content/apply.js"></script>
+
     <link  href="edit/global-search.css" rel="stylesheet">
     <script src="edit/global-search.js"></script>
 
@@ -92,6 +80,23 @@
     <link  href="edit/codemirror-default.css" rel="stylesheet">
     <script src="edit/codemirror-default.js"></script>
 
+    <script src="edit/editor-worker.js"></script>
+
+    <script src="edit/util.js"></script>
+    <script src="edit/regexp-tester.js"></script>
+    <script src="edit/live-preview.js"></script>
+    <script src="edit/applies-to-line-widget.js"></script>
+    <script src="edit/reroute-hotkeys.js"></script>
+    <script src="edit/codemirror-factory.js"></script>
+    <script src="edit/source-editor.js"></script>
+    <script src="edit/colorpicker-helper.js"></script>
+    <script src="edit/beautify.js"></script>
+    <script src="edit/sections-editor.js"></script>
+    <script src="edit/show-keymap-help.js"></script>
+    <script src="edit/edit.js"></script>
+
+    <script src="msgbox/msgbox.js" async></script>
+
     <script src="edit/linter.js"></script>
     <script src="edit/linter-defaults.js"></script>
     <script src="edit/linter-engines.js"></script>
@@ -100,8 +105,6 @@
     <script src="edit/linter-report.js"></script>
     <script src="edit/linter-config-dialog.js"></script>
 
-    <script src="edit/editor-worker.js"></script>
-
     <link id="cm-theme" rel="stylesheet">
 
     <template data-id="appliesTo">

edit/codemirror-editing-hooks.js

@@ -1,18 +0,0 @@
-/*
-global CodeMirror loadScript
-global editor ownTabId
-global messageBox
-*/
-'use strict';
-
-onDOMscriptReady('/codemirror.js').then(() => {
-
-
-  ////////////////////////////////////////////////
-
-  ////////////////////////////////////////////////
-
-  ////////////////////////////////////////////////
-
-
-});

edit/live-preview.js

@@ -40,7 +40,7 @@ function createLivePreview(preprocess) {
     const port = chrome.runtime.connect({
       name: 'livePreview'
     });
-    port.onDisconnet.addListener(err => {
+    port.onDisconnect.addListener(err => {
       throw err;
     });
     return {update, disconnect};

edit/sections-editor.js

@@ -3,7 +3,7 @@
   CodeMirror nextPrevEditorOnKeydown showAppliesToHelp propertyToCss
   regExpTester linter cssToProperty createLivePreview showCodeMirrorPopup
   sectionsToMozFormat editorWorker messageBox clipString beautify
-  rerouteHotkeys
+  rerouteHotkeys cmFactory
 */
 'use strict';
 
@@ -523,11 +523,11 @@ function createSectionsEditor(style) {
     if (sections.every(s => s.isRemoved() || s === section)) {
       throw new Error('Cannot remove last section');
     }
-    section.remove();
     if (!section.getCode()) {
       const index = sections.indexOf(section);
       sections.splice(index, 1);
       section.el.remove();
+      section.remove(true);
     } else {
       const lines = [];
       const MAX_LINES = 10;
@@ -537,6 +537,7 @@ function createSectionsEditor(style) {
                    lines.slice(0, MAX_LINES).map(s => clipString(s, 100)).join('\n') +
                    (lines.length > MAX_LINES ? '\n...' : '');
       $('.deleted-section', section.el).title = title;
+      section.remove(false);
     }
     dirty.remove(section, section);
     updateSectionOrder();
@@ -595,10 +596,12 @@ function createSectionsEditor(style) {
   function createSection(originalSection) {
     const sectionId = INC_ID++;
     const el = template.section.cloneNode(true);
-    const cm = CodeMirror(wrapper => {
+    const cm = cmFactory.create(wrapper => {
       el.insertBefore(wrapper, $('.code-label', el).nextSibling);
     }, {value: originalSection.code});
 
+    const changeListeners = new Set();
+
     const appliesToContainer = $('.applies-to-list', el);
     const appliesTo = [];
     for (const [key, fnName] of Object.entries(propertyToCss)) {
@@ -609,10 +612,7 @@ function createSectionsEditor(style) {
       }
     }
     if (!appliesTo.length) {
-      const apply = createApply({all: true});
+      insertApplyAfter({all: true});
-      appliesTo.push(apply);
-      appliesToContainer.appendChild(apply.el);
-      dirty.addChild(apply.dirty);
     }
 
     let changeGeneration = cm.changeGeneration();
@@ -625,8 +625,6 @@ function createSectionsEditor(style) {
     linter.enableForEditor(cm);
     linter.refreshReport();
 
-    const changeListeners = new Set();
-
     let lastActive = 0;
 
     const section = {
@@ -731,11 +729,14 @@ function createSectionsEditor(style) {
       return cm.getValue();
     }
 
-    function remove() {
+    function remove(destroy = false) {
       linter.disableForEditor(cm);
       el.classList.add('removed');
       removed = true;
       appliesTo.forEach(a => a.remove());
+      if (destroy) {
+        cmFactory.destroy(cm);
+      }
     }
 
     function restore() {
@@ -751,7 +752,7 @@ function createSectionsEditor(style) {
     }
 
     function updateRegexpTester() {
-      const regexps = appliesTo.filter(a => a.getKey() === 'regexp')
+      const regexps = appliesTo.filter(a => a.getType() === 'regexp')
         .map(a => a.getValue());
       if (regexps.length) {
         el.classList.add('has-regexp');
@@ -773,7 +774,7 @@ function createSectionsEditor(style) {
         appliesToContainer.appendChild(apply.el);
       }
       dirty.add(apply, apply);
-      if (appliesTo.length && appliesTo[0].all) {
+      if (appliesTo.length > 1 && appliesTo[0].all) {
         removeApply(appliesTo[0]);
       }
       emitSectionChange();
@@ -868,7 +869,7 @@ function createSectionsEditor(style) {
 
   function replaceSections(sections) {
     for (const section of sections) {
-      section.remove();
+      section.remove(true);
     }
     sections.length = 0;
     container.textContent = '';

edit/source-editor.js

@@ -5,7 +5,7 @@ global createAppliesToLineWidget messageBox
 global sectionsToMozFormat
 global exclusions
 global beforeUnload
-global createMetaCompiler linter createLivePreview
+global createMetaCompiler linter createLivePreview cmFactory
 */
 'use strict';
 
@@ -30,7 +30,7 @@ function createSourceEditor(style) {
   // normalize style
   if (!style.id) setupNewStyle(style);
 
-  const cm = CodeMirror($('.single-editor'), {
+  const cm = cmFactory.create($('.single-editor'), {
     value: style.sourceCode,
   });
   let savedGeneration = cm.changeGeneration();