hide Settings button in new styles

edit/base.js

@@ -11,7 +11,6 @@
   debounce
   getOwnTab
   sessionStore
-  tryCatch
   tryJSONparse
   tryURL
 */// toolbox.js
@@ -24,7 +23,6 @@
 const editor = {
   style: null,
   dirty: DirtyReporter(),
-  events: {},
   isUsercss: false,
   isWindowed: false,
   lazyKeymaps: {
@@ -39,18 +37,6 @@ const editor = {
 
   cancel: () => location.assign('/manage.html'),
 
-  emit(name, ...args) {
-    for (const fn of editor.events[name] || []) {
-      tryCatch(fn, ...args);
-    }
-  },
-
-  on(name, fn) {
-    (editor.events[name] || (
-      editor.events[name] = new Set()
-    )).add(fn);
-  },
-
   updateClass() {
     document.documentElement.classList.toggle('is-new-style', !editor.style.id);
   },
@@ -65,19 +51,6 @@ const editor = {
   },
 };
 
-editor.on('styleUpdated', (newStyle, reason) => {
-  if (reason === 'config') {
-    delete newStyle.sourceCode;
-    delete newStyle.sections;
-    delete newStyle.name;
-    delete newStyle.enabled;
-    Object.assign(editor.style, newStyle);
-    editor.updateLivePreview();
-  } else if (reason !== 'new') {
-    editor.replaceStyle(newStyle);
-  }
-});
-
 //#region pre-init
 
 const baseInit = (() => {

edit/edit.css

@@ -34,6 +34,7 @@ a:hover {
 }
 
 html.is-new-style #preview-label,
+html.is-new-style #style-cfg-btn,
 html.is-new-style #publish,
 .hidden {
   display: none !important;

edit/edit.js

@@ -74,14 +74,7 @@ msg.onExtension(request => {
   switch (request.method) {
     case 'styleUpdated':
       if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
-        if (request.reason === 'toggle') {
-          editor.emit('styleToggled', request.style);
-        } else {
-          API.styles.get(request.style.id)
-            .then(style => {
-              editor.emit('styleUpdated', style, request.reason);
-            });
-        }
+        handleExternalUpdate(request);
       }
       break;
     case 'styleDeleted':
@@ -95,6 +88,31 @@ msg.onExtension(request => {
   }
 });
 
+async function handleExternalUpdate({style, reason}) {
+  if (reason === 'toggle') {
+    if (editor.dirty.isDirty()) {
+      editor.toggleStyle(style.enabled);
+    } else {
+      Object.assign(editor.style, style);
+    }
+    editor.updateMeta();
+    editor.updateLivePreview();
+    return;
+  }
+  style = await API.styles.get(style.id);
+  if (reason === 'config') {
+    delete style.sourceCode;
+    delete style.sections;
+    delete style.name;
+    delete style.enabled;
+    Object.assign(editor.style, style);
+    editor.updateLivePreview();
+  } else {
+    await editor.replaceStyle(style);
+  }
+  editor.updateSettings();
+}
+
 window.on('beforeunload', e => {
   let pos;
   if (editor.isWindowed &&

edit/sections-editor.js

@@ -23,7 +23,7 @@ function SectionsEditor() {
   let headerOffset; // in compact mode the header is at the top so it reduces the available height
   let cmExtrasHeight; // resize grip + borders
 
-  updateHeader();
+  updateMeta();
   rerouteHotkeys.toggle(true); // enabled initially because we don't always focus a CodeMirror
   editor.livePreview.init();
   container.classList.add('section-editor');
@@ -44,6 +44,7 @@ function SectionsEditor() {
 
     closestVisible,
     updateLivePreview,
+    updateMeta,
 
     getEditors() {
       return sections.filter(s => !s.removed).map(s => s.cm);
@@ -90,7 +91,7 @@ function SectionsEditor() {
       await initSections(newStyle.sections, {replace: true});
       Object.assign(style, newStyle);
       editor.updateClass();
-      updateHeader();
+      updateMeta();
       // Go from new style URL to edit style URL
       if (style.id && !/[&?]id=/.test(location.search)) {
         history.replaceState({}, document.title, `${location.pathname}?id=${style.id}`);
@@ -108,9 +109,6 @@ function SectionsEditor() {
       }
       newStyle = await API.styles.editSave(newStyle);
       destroyRemovedSections();
-      if (!style.id) {
-        editor.emit('styleUpdated', newStyle, 'new');
-      }
       sessionStore.justEditedStyleId = newStyle.id;
       editor.replaceStyle(newStyle, false);
     },
@@ -128,16 +126,6 @@ function SectionsEditor() {
 
   editor.ready = initSections(style.sections);
 
-  editor.on('styleToggled', newStyle => {
-    if (!dirty.isDirty()) {
-      Object.assign(style, newStyle);
-    } else {
-      editor.toggleStyle(newStyle.enabled);
-    }
-    updateHeader();
-    updateLivePreview();
-  });
-
   /** @param {EditorSection} section */
   function fitToContent(section) {
     const {cm, cm: {display: {wrapper, sizer}}} = section;
@@ -477,7 +465,7 @@ function SectionsEditor() {
     }
   }
 
-  function updateHeader() {
+  function updateMeta() {
     $('#name').value = style.customName || style.name || '';
     $('#enabled').checked = style.enabled !== false;
     $('#url').href = style.url || '';

edit/settings.js

@@ -7,7 +7,7 @@
 'use strict';
 
 function StyleSettings() {
-  let {style} = editor;
+  const {style} = editor;
   const ui = t.template.styleSettings.cloneNode(true);
   const inputs = [
     createInput('.style-update-url input', () => style.updateUrl || '',
@@ -19,8 +19,9 @@ function StyleSettings() {
       ['.style-exclude', 'exclusions'],
     ].map(createArea),
   ];
-  update(style);
-  editor.on('styleUpdated', update);
+  (editor.updateSettings = () => {
+    inputs.forEach(i => i.update());
+  })();
   helpPopup.show(t('styleSettings'), $create([
     ui,
     $create('.buttons', [
@@ -39,13 +40,6 @@ function StyleSettings() {
     return list.filter(Boolean);
   }
 
-  function update(newStyle, reason) {
-    if (!newStyle.id) return;
-    if (reason === 'editSave') return;
-    style = newStyle;
-    inputs.forEach(i => i.update());
-  }
-
   function createArea([parentSel, type]) {
     const sel = parentSel + ' textarea';
     const el = $(sel, ui);

edit/source-editor.js

@@ -45,6 +45,7 @@ function SourceEditor() {
     sections: sectionFinder.sections,
     replaceStyle,
     updateLivePreview,
+    updateMeta,
     closestVisible: () => cm,
     getEditors: () => [cm],
     getEditorTitle: () => '',
@@ -70,9 +71,6 @@ function SourceEditor() {
           messageBoxProxy.alert(t('usercssAvoidOverwriting'), 'danger', t('genericError'));
         } else {
           res = await API.usercss.editSave({customName, enabled, id, sourceCode});
-          if (!id) {
-            editor.emit('styleUpdated', res.style, 'new');
-          }
           // Awaiting inside `try` so that exceptions go to our `catch`
           await replaceStyle(res.style);
         }
@@ -116,15 +114,6 @@ function SourceEditor() {
   if (!$isTextInput(document.activeElement)) {
     cm.focus();
   }
-  editor.on('styleToggled', newStyle => {
-    if (dirty.isDirty()) {
-      editor.toggleStyle(newStyle.enabled);
-    } else {
-      style.enabled = newStyle.enabled;
-    }
-    updateMeta();
-    updateLivePreview();
-  });
 
   async function preprocess(style) {
     const res = await API.usercss.build({
@@ -220,7 +209,7 @@ function SourceEditor() {
     cm.setPreprocessor((style.usercssData || {}).preprocessor);
   }
 
-  function replaceStyle(newStyle) {
+  async function replaceStyle(newStyle) {
     dirty.clear('name');
     const sameCode = newStyle.sourceCode === cm.getValue();
     if (sameCode) {
@@ -232,8 +221,8 @@ function SourceEditor() {
       return;
     }
 
-    Promise.resolve(messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))).then(ok => {
-      if (!ok) return;
+    // TODO: also confirm in sections-editor?
+    if (await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) {
       updateEnvironment();
       if (!sameCode) {
         const cursor = cm.getCursor();
@@ -246,7 +235,7 @@ function SourceEditor() {
         updateLivePreview();
       }
       dirty.clear();
-    });
+    }
 
     function updateEnvironment() {
       if (style.id !== newStyle.id) {