Add: confirmation to replace dirty style

_locales/en/messages.json

@@ -824,6 +824,10 @@
       }
     }
   },
+  "styleUpdateDiscardChanges": {
+    "message": "The style is changed outside of the editor. Would you like to reload the style?",
+    "description": "Confirmation to update the style in the editor"
+  },
   "stylusUnavailableForURL": {
     "message": "Stylus doesn't work on pages like this.",
     "description": "Note in the toolbar pop-up when on a URL Stylus can't affect"

edit/edit.js

@@ -501,7 +501,7 @@ window.onbeforeunload = () => {
     rememberWindowSize();
   }
   document.activeElement.blur();
-  if ((!editor && isCleanGlobal()) || (editor && !editor.isDirty())) {
+  if (isClean()) {
     return;
   }
   updateLintReportIfEnabled(null, 0);
@@ -509,6 +509,14 @@ window.onbeforeunload = () => {
   return t('styleChangesNotSaved');
 };
 
+function isClean() {
+  if (editor) {
+    return !editor.isDirty();
+  } else {
+    return isCleanGlobal();
+  }
+}
+
 function addAppliesTo(list, name, value) {
   const showingEverything = $('.applies-to-everything', list) !== null;
   // blow away 'Everything' if it's there
@@ -1218,7 +1226,12 @@ function init() {
   getStyle().then(style => {
     styleId = style.id;
     sessionStorage.justEditedStyleId = styleId;
-    initWithStyle({style});
+
+    if (!isUsercss(style)) {
+      initWithSectionStyle({style});
+    } else {
+      editor = createSourceEditor(style);
+    }
   });
 
   function getStyle() {
@@ -1263,32 +1276,14 @@ function setStyleMeta(style) {
   $('#url').href = style.url || '';
 }
 
-function initWithStyle(request) {
-  if (!isUsercss()) {
-    initWithSectionStyle(request);
-    return;
-  }
-
-  if (!editor) {
-    editor = createSourceEditor(request.style);
-    return;
-  }
-
-  if (request.codeIsUpdated === false) {
-    editor.updateStyleMeta(request.style);
-  } else {
-    editor.replaceStyle(request.style);
-  }
-
-  function isUsercss() {
-    if (request.style.usercssData) {
+function isUsercss(style) {
+  if (style.usercssData) {
     return true;
   }
-    if (!request.style.id && prefs.get('newStyleFormat') === 'usercss') {
+  if (!style.id && prefs.get('newStyleFormat') === 'usercss') {
     return true;
   }
   return false;
-  }
 }
 
 function initWithSectionStyle({style, codeIsUpdated}) {
@@ -1838,18 +1833,35 @@ function getParams() {
 
 chrome.runtime.onMessage.addListener(onRuntimeMessage);
 
+function replaceStyle(request) {
+  if (!isClean() && !confirm(t('styleUpdateDiscardChanges'))) {
+    return;
+  }
+
+  if (!isUsercss(request.style)) {
+    initWithSectionStyle(request);
+    return;
+  }
+
+  if (request.codeIsUpdated === false) {
+    editor.updateStyleMeta(request.style);
+  } else {
+    editor.replaceStyle(request.style);
+  }
+}
+
 function onRuntimeMessage(request) {
   switch (request.method) {
     case 'styleUpdated':
-      if (styleId && styleId === request.style.id && request.reason !== 'editSave') {
+      if (styleId && styleId === request.style.id && request.reason !== 'editSave' && request.reason !== 'config') {
         if ((request.style.sections[0] || {}).code === null) {
           // the code-less style came from notifyAllTabs
           onBackgroundReady().then(() => {
             request.style = BG.cachedStyles.byId.get(request.style.id);
-            initWithStyle(request);
+            replaceStyle(request);
           });
         } else {
-          initWithStyle(request);
+          replaceStyle(request);
         }
       }
       break;