proper cleanup on close + builtin event emitter

edit/edit.js

@@ -110,7 +110,7 @@ async function handleExternalUpdate({style, reason}) {
   } else {
     await editor.replaceStyle(style);
   }
-  editor.updateSettings();
+  window.dispatchEvent(new Event('styleSettings'));
 }
 
 window.on('beforeunload', e => {

edit/settings.js

@@ -8,8 +8,9 @@
 'use strict';
 
 function StyleSettings() {
+  const ssId = 'styleSettings';
   const AUTOSAVE_DELAY = 500; // same as config-dialog.js
-  const ui = t.template.styleSettings.cloneNode(true);
+  const ui = t.template[ssId].cloneNode(true);
   const elAuto = $('[id="config.autosave"]', ui);
   const elSave = $('#ss-save', ui);
   const pendingSetters = new Map();
@@ -22,10 +23,10 @@ function StyleSettings() {
     initArea('inclusions'),
     initArea('exclusions'),
   ];
-  (editor.updateSettings = () => {
-    updaters.forEach(fn => fn());
-  })();
-  helpPopup.show(t('styleSettings'), ui, {
+  update();
+  window.on(ssId, update);
+  window.on('closeHelp', () => window.off(ssId, update), {once: true});
+  helpPopup.show(t(ssId), ui, {
     className: 'style-settings-popup',
   });
   elSave.onclick = save;
@@ -81,6 +82,7 @@ function StyleSettings() {
 
   function save() {
     pendingSetters.forEach((fn, el) => fn(el.value));
+    pendingSetters.clear();
     helpPopup.div.classList.remove('dirty');
     elSave.disabled = true;
   }
@@ -88,4 +90,8 @@ function StyleSettings() {
   function textToList(text) {
     return text.split(/\n/).map(s => s.trim()).filter(Boolean);
   }
+
+  function update() {
+    updaters.forEach(fn => fn());
+  }
 }