confirm reload in sectioned editor

edit/base.js

@@ -33,6 +33,7 @@ const editor = {
   /** @type {'customName'|'name'} */
   nameTarget: 'name',
   previewDelay: 200, // Chrome devtools uses 200
+  saving: false,
   scrollInfo: null,
 
   cancel: () => location.assign('/manage.html'),

edit/edit.js

@@ -61,19 +61,11 @@ baseInit.ready.then(async () => {
 //#endregion
 //#region events
 
-const IGNORE_UPDATE_REASONS = [
-  'editPreview',
-  'editPreviewEnd',
-  'editSave',
-  // https://github.com/openstyles/stylus/issues/807 is closed without fix
-  // 'config,
-];
-
 msg.onExtension(request => {
   const {style} = request;
   switch (request.method) {
     case 'styleUpdated':
-      if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
+      if (editor.style.id === style.id) {
         handleExternalUpdate(request);
       }
       break;
@@ -89,6 +81,14 @@ msg.onExtension(request => {
 });
 
 async function handleExternalUpdate({style, reason}) {
+  if (reason === 'editPreview' ||
+      reason === 'editPreviewEnd') {
+    return;
+  }
+  if (reason === 'editSave' && editor.saving) {
+    editor.saving = false;
+    return;
+  }
   if (reason === 'toggle') {
     if (editor.dirty.isDirty()) {
       editor.toggleStyle(style.enabled);
@@ -191,6 +191,13 @@ window.on('beforeunload', e => {
       }
     },
 
+    async save() {
+      if (dirty.isDirty()) {
+        editor.saving = true;
+        await editor.saveImpl();
+      }
+    },
+
     toggleStyle(enabled = !style.enabled) {
       $('#enabled').checked = enabled;
       editor.updateEnabledness(enabled);

edit/sections-editor.js

@@ -7,6 +7,7 @@
 /* global editor */
 /* global linterMan */
 /* global prefs */
+/* global styleSectionsEqual */ // sections-util.js
 /* global t */// localization.js
 'use strict';
 
@@ -86,9 +87,15 @@ function SectionsEditor() {
     },
 
     async replaceStyle(newStyle) {
+      const sameCode = styleSectionsEqual(newStyle, getModel());
+      if (!sameCode && !await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) {
+        return;
+      }
       dirty.clear();
       // FIXME: avoid recreating all editors?
+      if (!sameCode) {
         await initSections(newStyle.sections, {replace: true});
+      }
       Object.assign(style, newStyle);
       editor.updateClass();
       updateMeta();
@@ -99,10 +106,7 @@ function SectionsEditor() {
       updateLivePreview();
     },
 
-    async save() {
-      if (!dirty.isDirty()) {
-        return;
-      }
+    async saveImpl() {
       let newStyle = getModel();
       if (!validate(newStyle)) {
         return;

edit/source-editor.js

@@ -61,8 +61,7 @@ function SourceEditor() {
         cm.focus();
       }
     },
-    async save() {
-      if (!dirty.isDirty()) return;
+    async saveImpl() {
       const sourceCode = cm.getValue();
       try {
         const {customName, enabled, id} = style;
@@ -221,7 +220,6 @@ function SourceEditor() {
       return;
     }
 
-    // TODO: also confirm in sections-editor?
     if (await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) {
       updateEnvironment();
       if (!sameCode) {