inform about auto-saving

_locales/en/messages.json

@@ -88,6 +88,9 @@
     "message": "Author",
     "description": "Label for the style author"
   },
+  "autosaveNotice": {
+    "message": "Changes are saved automatically"
+  },
   "backupButtons": {
     "message": "Backup",
     "description": "Heading for backup"

edit/edit.css

@@ -792,12 +792,14 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 }
 
 #help-popup .buttons {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: .75em;
 }
 .non-windows #help-popup .buttons {
   direction: rtl;
-  text-align: right;
+  justify-content: start;
 }
 #help-popup button[name^="import"] {
   line-height: 1.5rem;
@@ -819,8 +821,8 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 #help-popup .rules p {
   margin: .25em 0;
 }
-#help-popup .buttons button:nth-child(n + 2) {
-  margin-left: .5em;
+#help-popup .buttons > :nth-child(n + 2) {
+  margin-inline: .5em 0;
 }
 
 /************ lint ************/

edit/settings.js

@@ -25,6 +25,7 @@ function StyleSettings() {
     ui,
     $create('.buttons', [
       $create('button', {onclick: helpPopup.close}, t('confirmClose')),
+      createInfo({title: t('autosaveNotice')}),
     ]),
   ]));
   $('#help-popup').className = 'style-settings-popup';
@@ -80,6 +81,13 @@ function StyleSettings() {
     };
   }
 
+  function createInfo(props) {
+    const info = $('.svg-icon.info').closest('a').cloneNode(true);
+    info.id = '';
+    info.dataset.cmd = 'note';
+    return Object.assign(info, props);
+  }
+
   function createInput(selector, getter, setter) {
     const el = $(selector, ui);
     el.addEventListener('change', setter);