Fix: switch to editor

background/style-via-api.js

@@ -72,7 +72,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
     });
   }
 
-  function styleDeleted({id}, {tab, frameId}) {
+  function styleDeleted({style: {id}}, {tab, frameId}) {
     const {tabFrames, frameStyles, styleSections} = getCachedData(tab.id, frameId, id);
     const code = styleSections.join('\n');
     if (code && !duplicateCodeExists({frameStyles, id, code})) {
@@ -86,7 +86,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
 
   function styleUpdated({style}, sender) {
     if (!style.enabled) {
-      return styleDeleted(style, sender);
+      return styleDeleted({style}, sender);
     }
     const {tab, frameId} = sender;
     const {frameStyles, styleSections} = getCachedData(tab.id, frameId, style.id);

content/apply.js

@@ -102,7 +102,7 @@
 
     switch (request.method) {
       case 'styleDeleted':
-        removeStyle(request);
+        removeStyle(request.style);
         break;
 
       case 'styleUpdated':

edit.html

@@ -35,7 +35,7 @@
     <script src="edit/source-editor.js"></script>
     <script src="edit/colorpicker-helper.js"></script>
     <script src="edit/beautify.js"></script>
-    <script src="edit/sections.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>

edit/codemirror-editing-hooks.js

@@ -47,7 +47,6 @@ onDOMscriptReady('/codemirror.js').then(() => {
     }
     const wrapper = cm.display.wrapper;
     cm.on('blur', () => {
-      editors.lastActive = cm;
       cm.rerouteHotkeys(true);
       setTimeout(() => {
         wrapper.classList.toggle('CodeMirror-active', wrapper.contains(document.activeElement));
@@ -89,6 +88,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
 
   function setOption(o, v) {
     CodeMirror.defaults[o] = v;
+    const editors = editor.getEditors();
     if (editors.length > 4 && (o === 'theme' || o === 'lineWrapping')) {
       throttleSetOption({key: o, value: v, index: 0});
       return;
@@ -103,8 +103,8 @@ onDOMscriptReady('/codemirror.js').then(() => {
     value,
     index,
     timeStart = performance.now(),
-    cmStart = editors.lastActive || editors[0],
+    cmStart = editor.getLastActivatedEditor(),
-    editorsCopy = editors.slice(),
+    editorsCopy = editor.getEditors().slice(),
     progress,
   }) {
     if (index === 0) {
@@ -119,6 +119,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
 
     const t0 = performance.now();
     const total = editorsCopy.length;
+    const editors = editor.getEditors();
     while (index < total) {
       const cm = editorsCopy[index++];
       if (cm === cmStart ||
@@ -185,7 +186,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
   }
 
   function nextPrevEditor(cm, direction) {
-    const editors = style.getEditors();
+    const editors = editor.getEditors();
     cm = editors[(editors.indexOf(cm) + direction + editors.length) % editors.length];
     editor.scrollToEditor(cm);
     cm.focus();
@@ -277,7 +278,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
       }
 
       case 'autocompleteOnTyping':
-        editors.forEach(cm => setupAutocomplete(cm, el.checked));
+        editor.getEditors().forEach(cm => setupAutocomplete(cm, el.checked));
         return;
 
       case 'autoCloseBrackets':
@@ -412,7 +413,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
       }
     }
     // closest editor should have at least 2 lines visible
-    const lineHeight = editors[0].defaultTextHeight();
+    const lineHeight = editor.getEditors()[0].defaultTextHeight();
     const scrollY = window.scrollY;
     const windowBottom = scrollY + window.innerHeight - 2 * lineHeight;
     const allSectionsContainerTop = scrollY + $('#sections').getBoundingClientRect().top;
@@ -424,7 +425,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
       if (index >= 0 && distances[index] !== undefined) {
         return distances[index];
       }
-      const section = (cm || editors[index]).getSection();
+      const section = cm.display.wrapper.closest('.section');
       if (!section) {
         return 1e9;
       }
@@ -443,6 +444,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
     }
 
     function findClosest() {
+      const editors = editor.getEditors();
       const last = editors.length - 1;
       let a = 0;
       let b = last;

edit/edit.js

@@ -7,7 +7,7 @@ global beautify
 global initWithSectionStyle addSections removeSection getSectionsHashes
 global sectionsToMozFormat
 global exclusions
-global moveFocus editorWorker msg
+global moveFocus editorWorker msg createSectionEditor
 */
 'use strict';
 
@@ -35,17 +35,16 @@ Promise.all([
 ])
 .then(([style]) => {
   const usercss = isUsercss(style);
-  $('#heading').textContent = t(styleId ? 'editStyleHeading' : 'addStyleTitle');
+  $('#heading').textContent = t(style.id ? 'editStyleHeading' : 'addStyleTitle');
   $('#name').placeholder = t(usercss ? 'usercssEditorNamePlaceholder' : 'styleMissingName');
   $('#name').title = usercss ? t('usercssReplaceTemplateName') : '';
 
-  $('#preview-label').classList.toggle('hidden', !styleId);
+  $('#preview-label').classList.toggle('hidden', !style.id);
 
   $('#beautify').onclick = () => beautify(editor.getEditors());
   $('#lint').addEventListener('scroll', hideLintHeaderOnScroll, {passive: true});
   window.addEventListener('resize', () => debounce(rememberWindowSize, 100));
 
-  exclusions.init(style);
   editor = usercss ? createSourceEditor(style) : createSectionEditor(style);
 });
 
@@ -152,7 +151,7 @@ function preinit() {
 function onRuntimeMessage(request) {
   switch (request.method) {
     case 'styleUpdated':
-      if (styleId && styleId === request.style.id &&
+      if (editor.getStyleId() === request.style.id &&
           request.reason !== 'editPreview' &&
           request.reason !== 'editSave' &&
           request.reason !== 'config') {
@@ -167,7 +166,7 @@ function onRuntimeMessage(request) {
       }
       break;
     case 'styleDeleted':
-      if (styleId === request.id || editor && editor.getStyle().id === request.id) {
+      if (editor.getStyleId() === request.style.id) {
         document.removeEventListener('visibilitychange', beforeUnload);
         window.onbeforeunload = null;
         closeCurrentTab();
@@ -235,15 +234,14 @@ function initStyleData() {
   });
   return fetchStyle()
     .then(style => {
-      styleId = style.id;
+      if (style.id) sessionStorage.justEditedStyleId = style.id;
-      if (styleId) sessionStorage.justEditedStyleId = styleId;
       // we set "usercss" class on <html> when <body> is empty
       // so there'll be no flickering of the elements that depend on it
       if (isUsercss(style)) {
         document.documentElement.classList.add('usercss');
       }
       // strip URL parameters when invoked for a non-existent id
-      if (!styleId) {
+      if (!style.id) {
         history.replaceState({}, document.title, location.pathname);
       }
       return style;

edit/global-search.js

@@ -1,6 +1,6 @@
 /* global CodeMirror editors makeSectionVisible */
 /* global focusAccessibility */
-/* global colorMimicry */
+/* global colorMimicry editor */
 'use strict';
 
 onDOMready().then(() => {

edit/linter-report.js

@@ -1,4 +1,4 @@
-/* global linter editors clipString createLinterHelpDialog makeSectionVisible */
+/* global linter editor clipString createLinterHelpDialog makeSectionVisible */
 'use strict';
 
 // eslint-disable-next-line no-var
@@ -16,13 +16,9 @@ Object.assign(linter, (() => {
       table = createTable(cm);
       tables.set(cm, table);
       const container = $('.lint-report-container');
-      if (typeof editor === 'object') {
-        container.append(table.element);
-      } else {
       const nextSibling = findNextSibling(tables, cm);
       container.insertBefore(table.element, nextSibling && tables.get(nextSibling).element);
     }
-    }
     table.updateCaption();
     table.updateAnnotations(annotations);
     updateCount();
@@ -57,6 +53,7 @@ Object.assign(linter, (() => {
   }
 
   function findNextSibling(tables, cm) {
+    const editors = editor.getEditors();
     let i = editors.indexOf(cm) + 1;
     while (i < editors.length) {
       if (tables.has(editors[i])) {
@@ -85,8 +82,7 @@ Object.assign(linter, (() => {
     };
 
     function updateCaption() {
-      caption.textContent = typeof editor === 'object' ?
+      caption.textContent = editor.getEditorTitle(cm);
-        '' : `${t('sectionCode')} ${editors.indexOf(cm) + 1}`;
     }
 
     function updateAnnotations(lines) {

edit/sections-editor.js

@@ -1,7 +1,8 @@
 /* global dirtyReporter showToMozillaHelp
   showSectionHelp toggleContextMenuDelete setGlobalProgress maximizeCodeHeight
   CodeMirror nextPrevEditorOnKeydown showAppliesToHelp propertyToCss
-  regExpTester linter cssToProperty
+  regExpTester linter cssToProperty createLivePreview showCodeMirrorPopup
+  sectionsToMozFormat editorWorker messageBox clipString beautify
 */
 'use strict';
 
@@ -131,7 +132,12 @@ function createSectionsEditor(style) {
     getEditors: () =>
       sections.filter(s => !s.isRemoved()).map(s => s.cm),
     getLastActivatedEditor,
-    scrollToEditor
+    scrollToEditor,
+    getStyleId: () => style.id,
+    getEditorTitle: cm => {
+      const index = sections.filter(s => !s.isRemoved()).findIndex(s => s.cm === cm) + 1;
+      return `${t('sectionCode')} ${index + 1}`;
+    }
   };
 
   function scrollToEditor(cm) {
@@ -177,7 +183,7 @@ function createSectionsEditor(style) {
       // fallthrough to arrow Up
       case 38:
         // arrow Up
-        if (line > 0 || cm === editors[0]) {
+        if (line > 0 || cm === sections[0].cm) {
           return;
         }
         event.preventDefault();
@@ -193,7 +199,7 @@ function createSectionsEditor(style) {
       // fallthrough to arrow Down
       case 40:
         // arrow Down
-        if (line < cm.doc.size - 1 || cm === editors.last) {
+        if (line < cm.doc.size - 1 || cm === sections[sections.length - 1].cm) {
           return;
         }
         event.preventDefault();
@@ -331,7 +337,7 @@ function createSectionsEditor(style) {
     return true;
   }
 
-  function save() {
+  function saveStyle() {
     const newStyle = getModel();
     if (!validate(newStyle)) {
       return;
@@ -507,7 +513,6 @@ function createSectionsEditor(style) {
       el,
       cm,
       render,
-      destroy,
       getCode,
       getModel,
       remove,
@@ -580,7 +585,9 @@ function createSectionsEditor(style) {
       if (!FIREFOX) {
         cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event));
       }
-      cm.on('focus', () => lastActive = Date.now());
+      cm.on('focus', () => {
+        lastActive = Date.now();
+      });
 
       cm.display.wrapper.addEventListener('keydown', event =>
         nextPrevEditorOnKeydown(cm, event), true);

edit/source-editor.js

@@ -407,6 +407,8 @@ function createSourceEditor(style) {
     getStyle: () => style,
     getEditors: () => [cm],
     getLastActivatedEditor: () => cm,
-    scrollToEditor: () => {}
+    scrollToEditor: () => {},
+    getStyleId: () => style.id,
+    getEditorTitle: () => ''
   };
 }

manage/manage.js

@@ -48,7 +48,7 @@ function onRuntimeMessage(msg) {
       handleUpdate(msg.style, msg);
       break;
     case 'styleDeleted':
-      handleDelete(msg.id);
+      handleDelete(msg.style.id);
       break;
     case 'styleApply':
     case 'styleReplaceAll':

popup/popup.js

@@ -37,7 +37,7 @@ function onRuntimeMessage(msg) {
       handleUpdate(msg.style);
       break;
     case 'styleDeleted':
-      handleDelete(msg.id);
+      handleDelete(msg.style.id);
       break;
     case 'prefChanged':
       if ('popup.stylesFirst' in msg.prefs) {