Update popup style sort after toggle. Closes #619

popup/popup.js

@@ -231,7 +231,7 @@ function showStyles(styles) {
   const enabledFirst = prefs.get('popup.enabledFirst');
   styles.sort((a, b) => (
     enabledFirst && a.enabled !== b.enabled
-      ? !(a.enabled < b.enabled) ? -1 : 1
+      ? a.enabled ? -1 : 1
       : a.name.localeCompare(b.name)
   ));
 
@@ -241,6 +241,20 @@ function showStyles(styles) {
   window.dispatchEvent(new Event('showStyles:done'));
 }
 
+function sortStylesInPlace() {
+  const enabledFirst = prefs.get('popup.enabledFirst');
+  const styles = $$('.entry', installed);
+  if (styles.length) {
+    styles.sort((a, b) => {
+      const aEnabled = a.styleMeta.enabled;
+      return enabledFirst && aEnabled !== b.styleMeta.enabled
+        ? aEnabled ? -1 : 1
+        : a.styleMeta.name.localeCompare(b.styleMeta.name);
+    });
+    styles.forEach(style => installed.appendChild(style));
+  }
+}
+
 
 function createStyleElement({
   style,
@@ -343,7 +357,9 @@ Object.assign(handleEvent, {
   toggle(event) {
     // when fired on checkbox, prevent the parent label from seeing the event, see #501
     event.stopPropagation();
-    API.toggleStyle(handleEvent.getClickedStyleId(event), this.checked);
+    API
+      .toggleStyle(handleEvent.getClickedStyleId(event), this.checked)
+      .then(sortStylesInPlace);
   },
 
   delete(event) {