diff --git a/edit/edit.js b/edit/edit.js index 8551381a..78b6e78c 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -174,12 +174,30 @@ preinit(); $('#beautify').onclick = () => beautify(editor.getEditors()); $('#lint').addEventListener('scroll', hideLintHeaderOnScroll, {passive: true}); window.addEventListener('resize', () => debounce(rememberWindowSize, 100)); - editor = usercss ? createSourceEditor(style) : createSectionsEditor(style); - if (editor.ready) { - return editor.ready(); - } + editor = (usercss ? createSourceEditor : createSectionsEditor)({ + style, + 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(); + } })(); function preinit() { @@ -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'); } diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 79605374..c6ef5c1c 100644 --- a/edit/sections-editor.js +++ b/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, diff --git a/edit/source-editor.js b/edit/source-editor.js index 59209c5b..6a4658f5 100644 --- a/edit/source-editor.js +++ b/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: () => {},