options: use live prefs + reset button

_locales/en/messages.json

@@ -550,11 +550,8 @@
   "optionsActions": {
     "message": "Actions"
   },
-  "optionsSave": {
+  "optionsReset": {
-    "message": "Save"
+    "message": "Reset"
-  },
-  "optionsSaved": {
-    "message": "Options saved."
   },
   "optionsOpenManager": {
     "message": "Open styles manager"

options/index.css

@@ -53,24 +53,11 @@ input[type=number] {
   margin-top: -2em;
 }
 
-#save {
+#reset {
   text-align: right;
   position: relative;
 }
 
-#save-status {
-  margin-top: .5ex;
-  position: absolute;
-  right: 0;
-  visibility: hidden;
-}
-
-#save-status.fadeinout {
-  visibility: visible;
-  animation: fadeinout 1s ease-in-out;
-  animation-fill-mode: both;
-}
-
 #notes {
   background-color: #f4f4f4;
   margin-top: .75rem;

options/index.html

@@ -49,9 +49,8 @@
         <td><input type="number" min="0" id="updateInterval"></td>
       </tr>
     </table>
-    <div id="save">
+    <div id="reset">
-      <button id="save-button" i18n-text="optionsSave"></button>
+      <button data-cmd="reset" i18n-text="optionsReset"></button>
-      <div id="save-status" i18n-text="optionsSaved"></div>
     </div>
   </div>
 

options/index.js

@@ -2,31 +2,15 @@
 'use strict';
 
 
-function restore() {
+setupLivePrefs([
-  setupLivePrefs([
   'show-badge',
-    'popup.stylesFirst'
+  'popup.stylesFirst',
-  ]);
+  'badgeNormal',
-  //$('#show-badge').value = bg.prefs.get('show-badge');
+  'badgeDisabled',
-  $('#badgeDisabled').value = prefs.get('badgeDisabled');
+  'popupWidth',
-  $('#badgeNormal').value = prefs.get('badgeNormal');
-  $('#popupWidth').value = prefs.get('popupWidth');
-  $('#updateInterval').value = prefs.get('updateInterval');
-  enforceValueRange('popupWidth');
-}
-
-
-function save() {
-  prefs.set('badgeDisabled', $('#badgeDisabled').value);
-  prefs.set('badgeNormal', $('#badgeNormal').value);
-  prefs.set('popupWidth', enforceValueRange('popupWidth'));
-  prefs.set(
   'updateInterval',
-    Math.max(0, Number($('#updateInterval').value))
+]);
-  );
+enforceValueRange('popupWidth');
-  animateElement($('#save-status'), {className: 'fadeinout'});
-}
-
 
 function enforceValueRange(id) {
   const element = document.getElementById(id);
@@ -41,10 +25,6 @@ function enforceValueRange(id) {
   return value | 0;
 }
 
-
-restore();
-$('#save').onclick = save;
-
 // overwrite the default URL if browser is Opera
 $('[data-cmd="open-keyboard"]').href = configureCommands.url;
 
@@ -104,5 +84,10 @@ document.onclick = e => {
       configureCommands.open();
       break;
 
+    case 'reset':
+      $$('input')
+        .filter(input => input.id in prefs.readOnlyValues)
+        .forEach(input => prefs.reset(input.id));
+      break;
   }
 };

popup.js

@@ -33,18 +33,24 @@ chrome.runtime.onMessage.addListener(msg => {
         const actions = $('body > .actions');
         const before = stylesFirst ? actions : actions.nextSibling;
         document.body.insertBefore(installed, before);
+      } else if ('popupWidth' in msg.prefs) {
+        setPopupWidth(msg.prefs.popupWidth);
       }
       break;
   }
 });
 
 
+function setPopupWidth(width = prefs.get('popupWidth')) {
+  document.body.style.width =
+    Math.max(200, Math.min(800, width)) + 'px';
+}
+
+
 function initPopup(url) {
   installed = $('#installed');
 
-  // popup width
+  setPopupWidth();
-  document.body.style.width =
-    Math.max(200, Math.min(800, prefs.get('popupWidth'))) + 'px';
 
   // force Chrome to resize the popup
   document.body.style.height = '10px';

storage.js

@@ -652,6 +652,8 @@ prefs = prefs || new function Prefs() {
 
     remove: key => this.set(key, undefined),
 
+    reset: key => this.set(key, deepCopy(defaults[key])),
+
     broadcast(key, value, {noSync} = {}) {
       broadcastPrefs[key] = value;
       debounce(doBroadcast);