prefs: keep up-to-date using prefChanged event

popup.js

@@ -59,8 +59,9 @@ function initPopup(url) {
   }
 
   // action buttons
-  $('#disableAll').onchange = () =>
-    installed.classList.toggle('disabled', prefs.get('disableAll'));
+  $('#disableAll').onchange = function() {
+    installed.classList.toggle('disabled', this.checked);
+  };
   setupLivePrefs(['disableAll']);
 
   $('#find-styles-link').onclick = handleEvent.openURLandHide;

prefs.js

@@ -87,12 +87,16 @@ var prefs = new function Prefs() {
       const oldValue = deepCopy(values[key]);
       values[key] = value;
       defineReadonlyProperty(this.readOnlyValues, key, value);
-      if (!noBroadcast && !equal(value, oldValue)) {
-        this.broadcast(key, value, {noSync});
-      }
+      if (BG && BG != window) {
+        BG.prefs.set(key, BG.deepCopy(value), {noBroadcast, noSync});
+      } else {
         localStorage[key] = typeof defaults[key] == 'object'
           ? JSON.stringify(value)
           : value;
+        if (!noBroadcast && !equal(value, oldValue)) {
+          this.broadcast(key, value, {noSync});
+        }
+      }
     },
 
     remove: key => this.set(key, undefined),
@@ -170,6 +174,14 @@ var prefs = new function Prefs() {
     }
   });
 
+  chrome.runtime.onMessage.addListener(msg => {
+    if (msg.prefs) {
+      for (const id in msg.prefs) {
+        this.set(id, msg.prefs[id], {noBroadcast: true, noSync: true});
+      }
+    }
+  });
+
   function doBroadcast() {
     const affects = {all: 'disableAll' in broadcastPrefs};
     if (!affects.all) {