Add popup auto resort option

_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."

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
 

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">

popup/popup.js

@@ -242,6 +242,7 @@ function showStyles(styles) {
 }
 
 function sortStylesInPlace() {
+  if (prefs.get('popup.autoResort')) {
     const enabledFirst = prefs.get('popup.enabledFirst');
     const styles = $$('.entry', installed);
     if (styles.length) {
@@ -253,6 +254,7 @@ function sortStylesInPlace() {
       });
       styles.forEach(style => installed.appendChild(style));
     }
+  }
 }