Fix dirty style updating. Closes #585 (#586)

* Fix dirty style updating. Closes #585

* Move common code to edit.js

* init updateDirty

edit/edit.js

@@ -174,11 +174,29 @@ preinit();
         $('#beautify').onclick = () => beautify(editor.getEditors());
         $('#lint').addEventListener('scroll', hideLintHeaderOnScroll, {passive: true});
         window.addEventListener('resize', () => debounce(rememberWindowSize, 100));
-        editor = usercss ? createSourceEditor(style) : createSectionsEditor(style);
+        editor = (usercss ? createSourceEditor : createSectionsEditor)({
-        if (editor.ready) {
+          style,
-          return editor.ready();
+          onTitleChanged: updateTitle
-        }
         });
+        editor.dirty.onChange(updateDirty);
+        return Promise.resolve(editor.ready && editor.ready())
+          .then(updateDirty);
+      });
+  }
+
+  function updateTitle() {
+    if (editor) {
+      const styleName = editor.getStyle().name;
+      const isDirty = editor.dirty.isDirty();
+      document.title = (isDirty ? '* ' : '') + styleName;
+    }
+  }
+
+  function updateDirty() {
+    const isDirty = editor.dirty.isDirty();
+    document.body.classList.toggle('dirty', isDirty);
+    $('#save-button').disabled = !isDirty;
+    updateTitle();
   }
 })();
 
@@ -306,7 +324,7 @@ function beforeUnload(e) {
     // refocus if unloading was canceled
     setTimeout(() => activeElement.focus());
   }
-  if (editor && editor.isDirty()) {
+  if (editor && editor.dirty.isDirty()) {
     // neither confirm() nor custom messages work in modern browsers but just in case
     e.returnValue = t('styleChangesNotSaved');
   }

edit/sections-editor.js

@@ -6,10 +6,9 @@
 /* exported createSectionsEditor */
 'use strict';
 
-function createSectionsEditor(style) {
+function createSectionsEditor({style, onTitleChanged}) {
   let INC_ID = 0; // an increment id that is used by various object to track the order
   const dirty = dirtyReporter();
-  dirty.onChange(updateTitle);
 
   const container = $('#sections');
   const sections = [];
@@ -18,7 +17,7 @@ function createSectionsEditor(style) {
   nameEl.addEventListener('input', () => {
     dirty.modify('name', style.name, nameEl.value);
     style.name = nameEl.value;
-    updateTitle();
+    onTitleChanged();
   });
 
   const enabledEl = $('#enabled');
@@ -64,7 +63,7 @@ function createSectionsEditor(style) {
   return {
     ready: () => initializing,
     replaceStyle,
-    isDirty: dirty.isDirty,
+    dirty,
     getStyle: () => style,
     getEditors,
     scrollToEditor,
@@ -413,7 +412,7 @@ function createSectionsEditor(style) {
     nameEl.value = style.name || '';
     enabledEl.checked = style.enabled !== false;
     $('#url').href = style.url || '';
-    updateTitle();
+    onTitleChanged();
   }
 
   function updateLivePreview() {
@@ -424,14 +423,6 @@ function createSectionsEditor(style) {
     livePreview.update(getModel());
   }
 
-  function updateTitle() {
-    const name = style.name;
-    const clean = !dirty.isDirty();
-    const title = !style.id ? t('addStyleTitle') : name;
-    document.title = (clean ? '' : '* ') + title;
-    $('#save-button').disabled = clean;
-  }
-
   function initSection({
     sections: originalSections,
     total = originalSections.length,

edit/source-editor.js

@@ -6,7 +6,7 @@
 /* exported createSourceEditor */
 'use strict';
 
-function createSourceEditor(style) {
+function createSourceEditor({style, onTitleChanged}) {
   $('#name').disabled = true;
   $('#save-button').disabled = true;
   $('#mozilla-format-container').remove();
@@ -16,12 +16,6 @@ function createSourceEditor(style) {
   $('#sections').appendChild($create('.single-editor'));
 
   const dirty = dirtyReporter();
-  dirty.onChange(() => {
-    const isDirty = dirty.isDirty();
-    document.body.classList.toggle('dirty', isDirty);
-    $('#save-button').disabled = !isDirty;
-    updateTitle();
-  });
 
   // normalize style
   if (!style.id) setupNewStyle(style);
@@ -171,18 +165,10 @@ function createSourceEditor(style) {
     $('#name').value = style.name;
     $('#enabled').checked = style.enabled;
     $('#url').href = style.url;
-    updateTitle();
+    onTitleChanged();
     return cm.setPreprocessor((style.usercssData || {}).preprocessor);
   }
 
-  function updateTitle() {
-    const newTitle = (dirty.isDirty() ? '* ' : '') +
-      (style.id ? style.name : t('addStyleTitle'));
-    if (document.title !== newTitle) {
-      document.title = newTitle;
-    }
-  }
-
   function replaceStyle(newStyle, codeIsUpdated) {
     const sameCode = newStyle.sourceCode === cm.getValue();
     if (sameCode) {
@@ -385,7 +371,7 @@ function createSourceEditor(style) {
 
   return {
     replaceStyle,
-    isDirty: dirty.isDirty,
+    dirty,
     getStyle: () => style,
     getEditors: () => [cm],
     scrollToEditor: () => {},