Change how configure dialog works.

_locales/en/messages.json

@@ -171,6 +171,14 @@
     "message": "No",
     "description": "'No' button in a confirm dialog"
   },
+  "confirmDefault": {
+    "message": "Use default",
+    "description": "'Set to default' button in a confirm dialog"
+  },
+  "confirmSave": {
+    "message": "Save",
+    "description": "'Save' button in a confirm dialog"
+  },
   "confirmStop": {
     "message": "Stop",
     "description": "'Stop' button in a confirm dialog"

manage/manage.js

@@ -282,34 +282,84 @@ Object.assign(handleEvent, {
   },
 
   config(event, {styleMeta: style}) {
-    let isChanged = false;
+    const form = buildConfigForm();
 
     messageBox({
       title: `Configure ${style.name}`,
       className: 'regular-form',
-      contents: buildConfigForm(),
+      contents: form.el,
-      buttons: [t('confirmClose')]
+      buttons: [
-    }).then(() => {
+        t('confirmSave'),
-      if (!isChanged) {
+        {
+          textContent: t('confirmDefault'),
+          onclick: form.useDefault
+        },
+        t('confirmCancel')
+      ]
+    }).then(result => {
+      if (result.button !== 0 && !result.enter) {
         return;
       }
       style.reason = 'config';
+      const vars = form.getVars();
+      let dirty = false;
+      for (const key of Object.keys(vars)) {
+        if (vars[key].dirty) {
+          dirty = true;
+          style.vars[key].value = vars[key].value;
+        }
+      }
+      if (!dirty) {
+        return;
+      }
       saveStyleSafe(style);
     });
 
     function buildConfigForm() {
       const labels = [];
-      for (const va of Object.values(style.vars)) {
+      const vars = deepCopy(style.vars);
-        const input = $element({tag: 'input', type: 'text', value: va.value});
+      for (const key of Object.keys(vars)) {
-        input.oninput = () => {
+        const va = vars[key];
-          isChanged = true;
+        va.input = $element({tag: 'input', type: 'text', value: va.value});
-          va.value = input.value;
+        va.input.oninput = () => {
-          animateElement(input, {className: 'value-update'});
+          va.dirty = true;
+          va.value = va.input.value;
         };
-        const label = $element({tag: 'label', appendChild: [va.label, input]});
+        const label = $element({
+          tag: 'label',
+          appendChild: [va.label, va.input]
+        });
         labels.push(label);
       }
-      return labels;
+      drawValues();
+
+      function drawValues() {
+        for (const key of Object.keys(vars)) {
+          const va = vars[key];
+          va.input.value = va.value === null || va.value === undefined ?
+            va.default : va.value;
+        }
+      }
+
+      function useDefault() {
+        for (const key of Object.keys(vars)) {
+          const va = vars[key];
+          va.dirty = va.value !== null && va.value !== undefined &&
+            va.value !== va.default;
+          va.value = null;
+        }
+        drawValues();
+      }
+
+      function getVars() {
+        return vars;
+      }
+
+      return {
+        el: labels,
+        useDefault,
+        getVars
+      };
     }
   },
 

msgbox/msgbox.css

@@ -145,17 +145,3 @@
   border-radius: .25rem;
   border-width: 1px;
 }
-
-#message-box.regular-form input[type=text].value-update {
-  animation-name: input-fadeout;
-  animation-duration: .4s;
-}
-
-@keyframes input-fadeout {
-  from {
-    background: palegreen;
-  }
-  to {
-    background: white;
-  }
-}