From 259cf4ab80f68e408211c9274618dff35cbdf5fc Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Wed, 26 Dec 2018 22:04:32 -0600
Subject: [PATCH] Add popup auto resort option

---
 _locales/en/messages.json |  4 ++++
 js/prefs.js               |  1 +
 options.html              |  7 +++++++
 popup/popup.js            | 22 ++++++++++++----------
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d0cd0136..ed438df1 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1055,6 +1055,10 @@
     "message": "Styles before commands",
     "description": "Label for the checkbox controlling section order in the popup."
   },
+  "popupAutoResort": {
+    "message": "Resort styles in popup after toggling",
+    "description": "Label for the checkbox controlling popup resorting."
+  },
   "prefShowBadge": {
     "message": "Number of styles active for the current site",
     "description": "Label for the checkbox controlling toolbar badge text."
diff --git a/js/prefs.js b/js/prefs.js
index 3e30d600..962a7ecf 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -18,6 +18,7 @@ const prefs = (() => {
     'popup.breadcrumbs.usePath': false, // use URL path for 'this URL'
     'popup.enabledFirst': true,     // display enabled styles before disabled styles
     'popup.stylesFirst': true,      // display enabled styles before disabled styles
+    'popup.autoResort': false,      // auto resort styles after toggling
     'popup.borders': false,         // add white borders on the sides
     'popup.findStylesInline': true, // use the inline style search
 
diff --git a/options.html b/options.html
index d20834b5..bee5654e 100644
--- a/options.html
+++ b/options.html
@@ -101,6 +101,13 @@
             <span></span>
           </span>
         </label>
+        <label>
+          <span i18n-text="popupAutoResort"></span>
+          <span class="onoffswitch">
+            <input type="checkbox" id="popup.autoResort" class="slider">
+            <span></span>
+          </span>
+        </label>
         <label class="chromium-only">
           <span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
           <span class="onoffswitch">
diff --git a/popup/popup.js b/popup/popup.js
index 20267e16..2f0fad72 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -242,16 +242,18 @@ function showStyles(styles) {
 }
 
 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));
+  if (prefs.get('popup.autoResort')) {
+    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));
+    }
   }
 }