From eaa5725c8f343823df30790d674cbf097ee29c9b Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Fri, 22 Dec 2017 18:11:46 -0600
Subject: [PATCH 01/34] Add manager sort block

---
 .eslintrc                 |   1 +
 _locales/en/messages.json |  52 ++++++++++++
 global.css                |  10 +--
 js/localization.js        |  11 +++
 js/prefs.js               |   1 +
 manage.html               |  13 ++-
 manage/filters.js         | 110 ++-----------------------
 manage/manage.css         |  35 ++++++--
 manage/manage.js          |  52 +++++++++++-
 manage/sort.js            | 169 ++++++++++++++++++++++++++++++++++++++
 manage/updater-ui.js      |   3 +-
 msgbox/msgbox.css         |   8 ++
 popup/search-results.js   |  12 +--
 13 files changed, 343 insertions(+), 134 deletions(-)
 create mode 100644 manage/sort.js

diff --git a/.eslintrc b/.eslintrc
index bc0641d0..b4ebf99a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -49,6 +49,7 @@ globals:
   tNodeList: false
   tDocLoader: false
   tWordBreak: false
+  formatDate: false
   # dom.js
   onDOMready: false
   onDOMscriptReady: false
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 57d078bf..a8689abb 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -214,6 +214,10 @@
     "message": "Disabled",
     "description": "Used in various lists/options to indicate that something is disabled"
   },
+  "genericEnabledLabel": {
+    "message": "Enabled",
+    "description": "Used in various lists/options to indicate that something is enabled"
+  },
   "genericHistoryLabel": {
     "message": "History",
     "description": "Used in various places to show a history log of something"
@@ -234,6 +238,14 @@
     "message": "Saved",
     "description": "Used in various parts of the UI to indicate that something was saved"
   },
+  "genericTitle": {
+    "message": "Title",
+    "description": "Used in various parts of the UI to indicate the title of something"
+  },
+  "genericUnknown": {
+    "message": "Unknown",
+    "description": "Used in various parts of the UI to indicate if something is unknown (e.g. an unknown date)"
+  },
   "confirmNo": {
     "message": "No",
     "description": "'No' button in a confirm dialog"
@@ -262,6 +274,14 @@
     "message": "Close",
     "description": "'Close' button in a confirm dialog"
   },
+  "dateInstalled": {
+    "message": "Date installed",
+    "description": "Option text for the user to sort the style by install date"
+  },
+  "dateUpdated": {
+    "message": "Date updated",
+    "description": "Option text for the user to sort the style by last update date"
+  },
   "dbError": {
     "message": "An error has occurred using the Stylus database. Would you like to visit a web page with possible solutions?",
     "description": "Prompt when a DB error is encountered"
@@ -816,6 +836,38 @@
   "shortcutsNote": {
     "message": "Define keyboard shortcuts"
   },
+  "sortLabel": {
+    "message": "Select a sort to apply to the installed styles",
+    "description": "Title on the sort select to indicate it is used for sorting entries"
+  },
+  "sortDescending": {
+    "message": "descending",
+    "description": "Text added to indicate that a sort is in the descending (Z to A) direction"
+  },
+  "sortDateNewestFirst": {
+    "message": "newest first",
+    "description": "Text added to indicate that sorting a date would add the newest entries at the top"
+  },
+  "sortDateOldestFirst": {
+    "message": "oldest first",
+    "description": "Text added to indicate that sorting a date would add the oldest entries at the top"
+  },
+  "sortLabelFirst": {
+    "message": "first",
+    "description": "Text added to indicate that entry with a disabled or usercss label will be sorted first (at the top)"
+  },
+  "sortLabelLast": {
+    "message": "last",
+    "description": "Text added to indicate that entry with a disabled or usercss label will be sorted last (at the bottom)"
+  },
+  "sortStylesHelpTitle": {
+    "message": "Sort contents",
+    "description": "Label for the sort info popup on the Manage styles page"
+  },
+  "sortStylesHelp": {
+    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Disabled (at bottom) + Title\", the entries would sort so that all the disabled entries are sorted to the bottom of the list and the entry titles are then applied to both disabled tags and the non-disabled tags separately.",
+    "description": "Text in the minihelp displayed when clicking (i) icon to the right of the sort input field on the Manage styles page"
+  },
   "styleBadRegexp": {
     "message": "Regexp is invalid.",
     "description": "Validation message for a bad regexp in a style"
diff --git a/global.css b/global.css
index a39c97e9..3351d0ac 100644
--- a/global.css
+++ b/global.css
@@ -41,7 +41,7 @@ input:not([type]) {
   padding: 0 3px;
   font: 400 13.3333px Arial;
   border: 1px solid hsl(0, 0%, 66%);
-} 
+}
 
 .svg-icon.checked {
   position: absolute;
@@ -115,7 +115,7 @@ select {
 }
 
 .select-resizer {
-  display: inline-flex!important;
+  display: inline-flex !important;
   cursor: default;
   position: relative;
 }
@@ -196,7 +196,7 @@ select[disabled] > option {
   .moz-appearance-bug input[type="radio"] {
     -moz-appearance: radio !important;
   }
-  
+
   .firefox select {
     font-size: 13px;
     padding: 0 20px 0 2px;
@@ -228,8 +228,8 @@ select[disabled] > option {
 
   .firefox.non-windows .style-name {
     font-family: Arial, sans-serif;
-  }  
-  
+  }
+
 /* Firefox cannot handle fractions in font-size */
   .firefox button:not(.install) {
     font-size: 13px;
diff --git a/js/localization.js b/js/localization.js
index 7c53cda1..8f1b4ebe 100644
--- a/js/localization.js
+++ b/js/localization.js
@@ -197,3 +197,14 @@ function tWordBreak(text) {
   return text.length <= 10 ? text :
     text.replace(/([\d\w\u007B-\uFFFF]{10}|[\d\w\u007B-\uFFFF]{5,10}[!-/]|((?!\s)\W){10})(?!\b|\s)/g, '$&\u00AD');
 }
+
+function formatDate(date) {
+  return tryCatch(lang => {
+    const newDate = new Date(parseInt(date));
+    return newDate.toLocaleDateString(lang, {
+      day: '2-digit',
+      month: 'short',
+      year: newDate.getYear() === new Date().getYear() ? undefined : '2-digit',
+    });
+  }, [chrome.i18n.getUILanguage(), 'en']) || '';
+}
diff --git a/js/prefs.js b/js/prefs.js
index e2ac97eb..27a43531 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -36,6 +36,7 @@ var prefs = new function Prefs() {
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.faviconsGray': true, // gray out favicons
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
+    'manage.newUI.sort': 'title,asc', // current applied sort
 
     'editor.options': {},           // CodeMirror.defaults.*
     'editor.options.expanded': true, // UI element state: expanded/collapsed
diff --git a/manage.html b/manage.html
index 0b3d029d..b6408040 100644
--- a/manage.html
+++ b/manage.html
@@ -155,6 +155,7 @@
   <script src="manage/object-diff.js"></script>
   <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
   <script src="manage/config-dialog.js"></script>
+  <script src="manage/sort.js"></script>
   <script src="manage/manage.js"></script>
 </head>
 
@@ -245,7 +246,6 @@
         <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
       </a>
     </div>
-
   </details>
 
   <p class="nowrap">
@@ -285,6 +285,16 @@
 
     <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
 
+    <div id="sort-wrapper" i18n-title="sortLabel">
+      <div class="sorter-selection">
+        <select id="sort-select"></select>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+      </div>
+      <a href="#" id="sorter-help">
+        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+      </a>
+    </div>
+
     <label>
       <input id="manage.newUI" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
@@ -344,7 +354,6 @@
   </p>
 
 </div>
-
 <div id="installed"></div>
 
 <script src="manage/import-export.js"></script>
diff --git a/manage/filters.js b/manage/filters.js
index fb12d179..63660f37 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -1,4 +1,5 @@
 /* global installed messageBox */
+/* global updateSort */
 'use strict';
 
 const filtersSelector = {
@@ -155,6 +156,7 @@ function filterOnChange({target: el, forceRefilter}) {
   if (installed) {
     reapplyFilter();
   }
+  updateSort();
 }
 
 
@@ -190,17 +192,12 @@ function reapplyFilter(container = installed) {
     filterContainer({hide: false});
   }
   // filtering needed or a single-element job from handleUpdate()
-  const entries = installed.children;
-  const numEntries = entries.length;
-  let numVisible = numEntries - $$('.entry.hidden').length;
   for (const entry of toUnhide.children || toUnhide) {
-    const next = findInsertionPoint(entry);
-    if (entry.nextElementSibling !== next) {
-      installed.insertBefore(entry, next);
+    if (!entry.parentNode) {
+      installed.appendChild(entry);
     }
     if (entry.classList.contains('hidden')) {
       entry.classList.remove('hidden');
-      numVisible++;
     }
   }
   // B: hide
@@ -218,18 +215,10 @@ function reapplyFilter(container = installed) {
   // 1. add all hidden entries to the end
   // 2. add the visible entries before the first hidden entry
   if (container instanceof DocumentFragment) {
-    for (const entry of toHide) {
-      installed.appendChild(entry);
-    }
-    installed.insertBefore(container, $('.entry.hidden'));
+    installed.appendChild(container);
     showFiltersStats();
     return;
   }
-  // normal filtering of the page or a single-element job from handleUpdate()
-  // we need to keep the visible entries together at the start
-  // first pass only moves one hidden entry in hidden groups with odd number of items
-  shuffle(false);
-  setTimeout(shuffle, 0, true);
   // single-element job from handleEvent(): add the last wraith
   if (toHide.length === 1 && toHide[0].parentElement !== installed) {
     installed.appendChild(toHide[0]);
@@ -256,95 +245,6 @@ function reapplyFilter(container = installed) {
       toUnhide = $$(selector, container);
     }
   }
-
-  function shuffle(fullPass) {
-    if (fullPass && !document.body.classList.contains('update-in-progress')) {
-      $('#check-all-updates').disabled = !$('.updatable:not(.can-update)');
-    }
-    // 1. skip the visible group on top
-    let firstHidden = $('#installed > .hidden');
-    let entry = firstHidden;
-    let i = [...entries].indexOf(entry);
-    let horizon = entries[numVisible];
-    const skipGroup = state => {
-      const start = i;
-      const first = entry;
-      while (entry && entry.classList.contains('hidden') === state) {
-        entry = entry.nextElementSibling;
-        i++;
-      }
-      return {first, start, len: i - start};
-    };
-    let prevGroup = i ? {first: entries[0], start: 0, len: i} : skipGroup(true);
-    // eslint-disable-next-line no-unmodified-loop-condition
-    while (entry) {
-      // 2a. find the next hidden group's start and end
-      // 2b. find the next visible group's start and end
-      const isHidden = entry.classList.contains('hidden');
-      const group = skipGroup(isHidden);
-      const hidden = isHidden ? group : prevGroup;
-      const visible = isHidden ? prevGroup : group;
-      // 3. move the shortest group; repeat 2-3
-      if (hidden.len < visible.len && (fullPass || hidden.len % 2)) {
-        // 3a. move hidden under the horizon
-        for (let j = 0; j < (fullPass ? hidden.len : 1); j++) {
-          const entry = entries[hidden.start];
-          installed.insertBefore(entry, horizon);
-          horizon = entry;
-          i--;
-        }
-        prevGroup = isHidden ? skipGroup(false) : group;
-        firstHidden = entry;
-      } else if (isHidden || !fullPass) {
-        prevGroup = group;
-      } else {
-        // 3b. move visible above the horizon
-        for (let j = 0; j < visible.len; j++) {
-          const entry = entries[visible.start + j];
-          installed.insertBefore(entry, firstHidden);
-        }
-        prevGroup = {
-          first: firstHidden,
-          start: hidden.start + visible.len,
-          len: hidden.len + skipGroup(true).len,
-        };
-      }
-    }
-    if (fullPass) {
-      showFiltersStats({immediately: true});
-    }
-  }
-
-  function findInsertionPoint(entry) {
-    const nameLLC = entry.styleNameLowerCase;
-    let a = 0;
-    let b = Math.min(numEntries, numVisible) - 1;
-    if (b < 0) {
-      return entries[numVisible];
-    }
-    if (entries[0].styleNameLowerCase > nameLLC) {
-      return entries[0];
-    }
-    if (entries[b].styleNameLowerCase <= nameLLC) {
-      return entries[numVisible];
-    }
-    // bisect
-    while (a < b - 1) {
-      const c = (a + b) / 2 | 0;
-      if (nameLLC < entries[c].styleNameLowerCase) {
-        b = c;
-      } else {
-        a = c;
-      }
-    }
-    if (entries[a].styleNameLowerCase > nameLLC) {
-      return entries[a];
-    }
-    while (a <= b && entries[a].styleNameLowerCase < nameLLC) {
-      a++;
-    }
-    return entries[entries[a].styleNameLowerCase <= nameLLC ? a + 1 : a];
-  }
 }
 
 
diff --git a/manage/manage.css b/manage/manage.css
index 7478d270..266a9c1b 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -311,7 +311,7 @@ select {
   display: table-row;
 }
 
-.newUI .entry:nth-child(2n) {
+.newUI .entry.odd {
   background-color: rgba(128, 128, 128, 0.05);
 }
 
@@ -331,7 +331,7 @@ select {
   margin: 4px 0;
 }
 
-.filter-selection {
+.filter-selection, .sorter-selection {
   position: relative;
   left: -9px;
 }
@@ -358,7 +358,7 @@ select {
   padding-left: 0;
 }
 
-.filter-selection select {
+.filter-selection select, .sorter-selection select {
   height: 18px;
   border: none;
   max-width: 100%;
@@ -367,7 +367,8 @@ select {
   margin-left: 4px;
 }
 
-.filter-selection .select-arrow {
+.filter-selection .select-arrow,
+.sorter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
   right: 0;
@@ -388,7 +389,8 @@ select {
 }
 
 #filters label:hover,
-#filters .filter-selection:hover {
+#filters .filter-selection:hover,
+#options .sorter-selection:hover {
   background-color: hsla(0, 0%, 50%, .2);
 }
 
@@ -420,6 +422,24 @@ select {
   margin: 0 .5em;
 }
 
+#options .sorter-selection {
+  display: block;
+  left: 0;
+  margin-bottom: 4px;
+  max-width: calc(100% - 2em);
+}
+
+.sorter-selection select {
+  margin-left: 0;
+  padding-left: 0;
+  color: inherit;
+}
+
+.sorter-selection .select-arrow {
+  position: absolute;
+  right: 0;
+}
+
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
   fill: #000;
@@ -833,7 +853,7 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
-#search-wrapper {
+#search-wrapper, #sort-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1026,6 +1046,7 @@ input[id^="manage.newUI"] {
   }
 
   #installed {
+    margin-top: 0;
     padding-left: 0;
   }
 
@@ -1080,7 +1101,7 @@ input[id^="manage.newUI"] {
     margin: 0;
   }
 
-  .filter-selection select {
+  .filter-selection select, .sorter-selection select {
     padding-left: 0;
   }
 
diff --git a/manage/manage.js b/manage/manage.js
index 19426204..12479f96 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -3,6 +3,7 @@
 /* global checkUpdate, handleUpdateInstalled */
 /* global objectDiff */
 /* global configDialog */
+/* global sortInit, sortStyles, updateSort */
 'use strict';
 
 let installed;
@@ -58,6 +59,9 @@ function initGlobalEvents() {
   $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
   $('#manage-shortcuts-button').onclick = () => openURL({url: URLS.configureCommands});
   $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
+  // show date installed & last update on hover
+  installed.addEventListener('mouseover', debounceEntryTitle);
+  installed.addEventListener('mouseout', debounceEntryTitle);
 
   // remember scroll position on normal history navigation
   window.onbeforeunload = rememberScrollPosition;
@@ -81,6 +85,7 @@ function initGlobalEvents() {
 
   // N.B. triggers existing onchange listeners
   setupLivePrefs();
+  sortInit();
 
   $$('[id^="manage.newUI"]')
     .forEach(el => (el.oninput = (el.onchange = switchUI)));
@@ -103,10 +108,10 @@ function initGlobalEvents() {
 
 
 function showStyles(styles = []) {
-  const sorted = styles
-    .map(style => ({name: style.name.toLocaleLowerCase(), style}))
-    .sort((a, b) => (a.name < b.name ? -1 : a.name === b.name ? 0 : 1));
+  const sorted = sortStyles({styles, parser: 'style'})
+    .map(style => ({name: style.name.toLocaleLowerCase(), style}));
   let index = 0;
+  installed.dataset.total = styles.length;
   const scrollY = (history.state || {}).scrollY;
   const shouldRenderAll = scrollY > window.innerHeight || sessionStorage.justEditedStyleId;
   const renderBin = document.createDocumentFragment();
@@ -188,6 +193,8 @@ function createStyleElement({style, name}) {
     (style.enabled ? 'enabled' : 'disabled') +
     (style.updateUrl ? ' updatable' : '') +
     (style.usercssData ? ' usercss' : '');
+  entry.dataset.installdate = style.installDate || t('genericUnknown');
+  entry.dataset.updatedate = style.updateDate || style.installDate || t('genericUnknown');
 
   if (style.url) {
     $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));
@@ -207,6 +214,32 @@ function createStyleElement({style, name}) {
 }
 
 
+function debounceEntryTitle(event) {
+  if (event.target.nodeName === 'A' && event.target.classList.contains('style-name-link')) {
+    if (event.type === 'mouseover' && !event.target.title) {
+      debounce(addEntryTitle, 50, event.target);
+    } else if (debounce.timers.size) {
+      debounce.unregister(addEntryTitle);
+    }
+  }
+}
+
+// Add entry install & updated date to  process locales
+function addEntryTitle(link) {
+  const unknown = t('genericUnknown');
+  const entry = link.closest('.entry');
+  // eslint-disable-next-line no-inner-declarations
+  function checkValidDate(date) {
+    const check = formatDate(date);
+    return (date === unknown || check === 'Invalid Date') ? unknown : check;
+  }
+  if (entry) {
+    link.title = `${t('dateInstalled')}: ${checkValidDate(entry.dataset.installdate)}\n` +
+      `${t('dateUpdated')}: ${checkValidDate(entry.dataset.updatedate)}`;
+  }
+}
+
+
 function createStyleTargetsElement({entry, style, postponeFavicons}) {
   const parts = createStyleElement.parts;
   const targets = parts.targets.cloneNode(true);
@@ -416,6 +449,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
+  updateSort();
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
@@ -524,6 +558,18 @@ function switchUI({styleOnly} = {}) {
 }
 
 
+function updateStripes() {
+  let index = 0;
+  [...installed.children].forEach(entry => {
+    const list = entry.classList;
+    if (!list.contains('hidden')) {
+      list.add(index % 2 ? 'odd' : 'even');
+      list.remove(index++ % 2 ? 'even' : 'odd');
+    }
+  });
+}
+
+
 function rememberScrollPosition() {
   history.replaceState({scrollY: window.scrollY}, document.title);
 }
diff --git a/manage/sort.js b/manage/sort.js
new file mode 100644
index 00000000..161ce2b5
--- /dev/null
+++ b/manage/sort.js
@@ -0,0 +1,169 @@
+/* global installed updateStripes */
+/* global messageBox */
+'use strict';
+
+const sorterType = {
+  alpha: (a, b) => (a < b ? -1 : a === b ? 0 : 1),
+  number: (a, b) => a - b
+};
+
+const tagData = {
+  title: {
+    text: t('genericTitle'),
+    parse: {
+      style: style => style.name.toLowerCase(),
+      entry: entry => {
+        const el = $('.style-name-link', entry);
+        return el ? el.textContent.trim().toLowerCase() : '';
+      }
+    },
+    sorter: sorterType.alpha
+  },
+  usercss: {
+    text: 'Usercss',
+    parse: {
+      style: style => (style.usercssData ? 0 : 1),
+      entry: entry => (entry.classList.contains('usercss') ? 0 : 1)
+    },
+    sorter: sorterType.number
+  },
+  disabled: {
+    text: '', // added as either "enabled" or "disabled" by the addSortOptions function
+    parse: {
+      style: style => (style.enabled ? 1 : 0),
+      entry: entry => (entry.classList.contains('enabled') ? 1 : 0)
+    },
+    sorter: sorterType.number
+  },
+  dateInstalled: {
+    text: t('dateInstalled'),
+    parse: {
+      style: style => style.installDate,
+      entry: entry => entry.dataset.installdate
+    },
+    sorter: sorterType.number
+  },
+  dateUpdated: {
+    text: t('dateUpdated'),
+    parse: {
+      style: style => style.updateDate,
+      entry: entry => entry.dataset.updatedate
+    },
+    sorter: sorterType.number
+  }
+};
+
+// Adding (assumed) most commonly used ('title,asc' should always be first)
+// whitespace before & after the comma is ignored
+const sortSelectOptions = [
+  'title,asc',
+  'title,desc',
+  'dateInstalled,desc, title,asc',
+  'dateInstalled,asc, title,asc',
+  'dateUpdated,desc, title,asc',
+  'dateUpdated,asc, title,asc',
+  'usercss,asc, title,asc',
+  'usercss,desc, title,asc',
+  'disabled,asc, title,asc',
+  'disabled,desc, title,asc',
+  'disabled,desc, usercss,asc, title,asc',
+  'usercss,asc, title,desc',
+  'usercss,desc, title,desc',
+  'disabled,desc, title,desc',
+  'disabled,desc, usercss,asc, title,desc'
+];
+
+const sortByRegex = /\s*,\s*/;
+
+function addSortOptions() {
+  const select = $('#options .sorter-selection select');
+  const renderBin = document.createDocumentFragment();
+  const option = $create('option');
+  const meta = {
+    enabled: t('genericEnabledLabel'),
+    disabled: t('genericDisabledLabel'),
+    desc: ` (${t('sortDescending')})`,
+    dateNew: ` (${t('sortDateNewestFirst')})`,
+    dateOld: ` (${t('sortDateOldestFirst')})`,
+    labelFirst: ` (${t('sortLabelFirst')})`,
+    labelLast: ` (${t('sortLabelLast')})`
+  };
+  sortSelectOptions.forEach(sort => {
+    const opt = option.cloneNode();
+    let lastTag = '';
+    opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
+      if (tagData[val]) {
+        lastTag = val;
+        return acc + (acc !== '' ? ' + ' : '') + tagData[val].text;
+      }
+      if (lastTag.indexOf('date') > -1) return acc + meta[val === 'desc' ? 'dateNew' : 'dateOld'];
+      if (lastTag === 'disabled') return acc + meta[val === 'desc' ? 'enabled' : 'disabled'] + meta['labelFirst'];
+      if (lastTag !== 'title') return acc + meta[val === 'desc' ? 'labelLast' : 'labelFirst'];
+      return acc + (meta[val] || '');
+    }, '');
+    opt.value = sort;
+    renderBin.appendChild(opt);
+  });
+  select.appendChild(renderBin);
+  select.value = prefs.get('manage.newUI.sort');
+}
+
+function sortStyles({styles, parser}) {
+  if (!styles) {
+    styles = [...installed.children];
+    parser = 'entry';
+  } else {
+    parser = 'style';
+  }
+  const sortBy = prefs.get('manage.newUI.sort').split(sortByRegex); // 'title,asc'
+  const len = sortBy.length;
+  return styles.sort((a, b) => {
+    let types, direction;
+    let result = 0;
+    let indx = 0;
+    // multi-sort
+    while (result === 0 && indx < len) {
+      types = tagData[sortBy[indx++]];
+      direction = sortBy[indx++] === 'asc' ? 1 : -1;
+      result = types.sorter(types.parse[parser](a), types.parse[parser](b)) * direction;
+    }
+    return result;
+  });
+}
+
+function manageSort(event) {
+  event.preventDefault();
+  prefs.set('manage.newUI.sort', this.value);
+  updateSort();
+}
+
+function updateSort() {
+  debounce(() => {
+    const renderBin = document.createDocumentFragment();
+    const entries = sortStyles({parser: 'entry'});
+    for (const entry of entries) {
+      renderBin.appendChild(entry);
+    }
+    installed.appendChild(renderBin);
+    updateStripes();
+  });
+}
+
+function showSortHelp(event) {
+  event.preventDefault();
+  messageBox({
+    className: 'help-text',
+    title: t('sortStylesHelpTitle'),
+    contents:
+      $create('div',
+        t('sortStylesHelp').split('\n').map(line =>
+          $create('p', line))),
+    buttons: [t('confirmOK')],
+  });
+}
+
+function sortInit() {
+  $('#options select').addEventListener('change', manageSort);
+  $('#sorter-help').onclick = showSortHelp;
+  addSortOptions();
+}
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index 8e58e627..874a5395 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -1,6 +1,6 @@
 /* global messageBox */
 /* global ENTRY_ID_PREFIX, newUI */
-/* global filtersSelector, filterAndAppend */
+/* global filtersSelector, filterAndAppend, updateSort */
 'use strict';
 
 onDOMready().then(() => {
@@ -144,6 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
+    updateSort();
   }
 }
 
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index cd6cf48d..a64123a8 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -117,6 +117,14 @@
   overflow-wrap: break-word;
 }
 
+#message-box-contents p:first-child {
+  margin-top: 0;
+}
+
+#message-box-contents p:last-child {
+  margin-bottom: 0;
+}
+
 #message-box-buttons {
   padding: .75rem .375rem;
   background-color: #f0f0f0;
diff --git a/popup/search-results.js b/popup/search-results.js
index e3a085a3..efd6283a 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -16,8 +16,6 @@ window.addEventListener('showStyles:done', function _() {
   const BASE_URL = 'https://userstyles.org';
   const UPDATE_URL = 'https://update.userstyles.org/%.md5';
 
-  const UI_LANG = chrome.i18n.getUILanguage();
-
   // normal category is just one word like 'github' or 'google'
   // but for some sites we need a fallback
   //   key: category.tld
@@ -459,17 +457,9 @@ window.addEventListener('showStyles:done', function _() {
 
     Object.assign($('[data-type="updated"] time', entry), {
       dateTime: result.updated,
-      textContent: tryCatch(lang => {
-        const date = new Date(result.updated);
-        return date.toLocaleDateString(lang, {
-          day: '2-digit',
-          month: 'short',
-          year: date.getYear() === new Date().getYear() ? undefined : '2-digit',
-        });
-      }, [UI_LANG, 'en']) || '',
+      textContent: formatDate(result.updated)
     });
 
-
     $('[data-type="weekly"] dd', entry).textContent = formatNumber(result.weekly_install_count);
     $('[data-type="total"] dd', entry).textContent = formatNumber(result.total_install_count);
 

From 236359248413c6422fc5358e379090aa7e6f450c Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Fri, 22 Dec 2017 22:18:40 -0600
Subject: [PATCH 02/34] MessageBox: Add focus to OK button

---
 msgbox/msgbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index a9470c46..3f40fdaa 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -123,7 +123,7 @@ function messageBox({
 
   function moveFocus(dir) {
     const elements = [...messageBox.element.getElementsByTagName('*')];
-    const activeIndex = elements.indexOf(document.activeElement);
+    const activeIndex = Math.max(0, elements.indexOf(document.activeElement));
     const num = elements.length;
     for (let i = 1; i < num; i++) {
       const elementIndex = (activeIndex + i * dir + num) % num;

From 578aa62de03afbddcc7cdb16407421aebb40a048 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 00:44:39 -0600
Subject: [PATCH 03/34] Add asc label & fix css

---
 _locales/en/messages.json |  4 ++++
 manage.html               | 20 ++++++++---------
 manage/manage.css         | 45 ++++++++++++++++++++++++---------------
 manage/sort.js            |  5 +++--
 4 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index a8689abb..32d416ed 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -840,6 +840,10 @@
     "message": "Select a sort to apply to the installed styles",
     "description": "Title on the sort select to indicate it is used for sorting entries"
   },
+  "sortAscending": {
+    "message": "ascending",
+    "description": "Text added to indicate that a sort is in the ascending (A to Z) direction"
+  },
   "sortDescending": {
     "message": "descending",
     "description": "Text added to indicate that a sort is in the descending (Z to A) direction"
diff --git a/manage.html b/manage.html
index b6408040..129f01d6 100644
--- a/manage.html
+++ b/manage.html
@@ -285,16 +285,6 @@
 
     <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
 
-    <div id="sort-wrapper" i18n-title="sortLabel">
-      <div class="sorter-selection">
-        <select id="sort-select"></select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-      <a href="#" id="sorter-help">
-        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-      </a>
-    </div>
-
     <label>
       <input id="manage.newUI" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
@@ -325,6 +315,16 @@
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
 
+    <div id="sort-wrapper" i18n-title="sortLabel">
+      <div class="sorter-selection">
+        <select id="sort-select"></select>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        <a href="#" id="sorter-help">
+          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+        </a>
+      </div>
+    </div>
+
     <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" class="chromium-only"
diff --git a/manage/manage.css b/manage/manage.css
index 266a9c1b..141f690a 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -264,11 +264,14 @@ select {
 }
 
 #add-style-wrapper,
-#options :last-child,
 #backup :last-child {
   margin-bottom: 0;
 }
 
+#options p:last-of-type {
+  margin-top: 0;
+}
+
 #header details:not([open]),
 #header details:not([open]) h2 {
   padding-bottom: 0;
@@ -327,11 +330,11 @@ select {
   margin: 0;
 }
 
-#newUIoptions > div {
+#newUIoptions > div, #newUIoptions > label {
   margin: 4px 0;
 }
 
-.filter-selection, .sorter-selection {
+.filter-selection {
   position: relative;
   left: -9px;
 }
@@ -358,7 +361,7 @@ select {
   padding-left: 0;
 }
 
-.filter-selection select, .sorter-selection select {
+.filter-selection select {
   height: 18px;
   border: none;
   max-width: 100%;
@@ -367,8 +370,7 @@ select {
   margin-left: 4px;
 }
 
-.filter-selection .select-arrow,
-.sorter-selection .select-arrow {
+.filter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
   right: 0;
@@ -389,8 +391,7 @@ select {
 }
 
 #filters label:hover,
-#filters .filter-selection:hover,
-#options .sorter-selection:hover {
+#filters .filter-selection:hover {
   background-color: hsla(0, 0%, 50%, .2);
 }
 
@@ -422,22 +423,32 @@ select {
   margin: 0 .5em;
 }
 
-#options .sorter-selection {
+#sort-wrapper {
+  margin: 5px 0;
+}
+
+#sort-wrapper .sorter-selection {
+  position: relative;
   display: block;
   left: 0;
   margin-bottom: 4px;
-  max-width: calc(100% - 2em);
+  max-width: calc(100% - 18px);
 }
 
-.sorter-selection select {
-  margin-left: 0;
-  padding-left: 0;
+#sort-select {
   color: inherit;
+  max-width: 100%;
 }
 
-.sorter-selection .select-arrow {
+#sort-wrapper .select-arrow {
+  top: 3px;
+  right: 3px;
+}
+
+#sorter-help {
   position: absolute;
-  right: 0;
+  right: -22px;
+  top: 3px;
 }
 
 .newUI .entry .svg-icon.checked,
@@ -853,7 +864,7 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
-#search-wrapper, #sort-wrapper {
+#search-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1101,7 +1112,7 @@ input[id^="manage.newUI"] {
     margin: 0;
   }
 
-  .filter-selection select, .sorter-selection select {
+  .filter-selection select {
     padding-left: 0;
   }
 
diff --git a/manage/sort.js b/manage/sort.js
index 161ce2b5..4f06ef48 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -76,12 +76,13 @@ const sortSelectOptions = [
 const sortByRegex = /\s*,\s*/;
 
 function addSortOptions() {
-  const select = $('#options .sorter-selection select');
+  const select = $('#sort-select');
   const renderBin = document.createDocumentFragment();
   const option = $create('option');
   const meta = {
     enabled: t('genericEnabledLabel'),
     disabled: t('genericDisabledLabel'),
+    asc: ` (${t('sortAscending')})`,
     desc: ` (${t('sortDescending')})`,
     dateNew: ` (${t('sortDateNewestFirst')})`,
     dateOld: ` (${t('sortDateOldestFirst')})`,
@@ -163,7 +164,7 @@ function showSortHelp(event) {
 }
 
 function sortInit() {
-  $('#options select').addEventListener('change', manageSort);
+  $('#sort-select').addEventListener('change', manageSort);
   $('#sorter-help').onclick = showSortHelp;
   addSortOptions();
 }

From 8d7d831af7560f048618b681bea859fcfe780f4f Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 00:51:41 -0600
Subject: [PATCH 04/34] Add date tooltip on H2 hover

---
 manage/manage.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/manage/manage.js b/manage/manage.js
index 12479f96..5fea08ac 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -215,9 +215,10 @@ function createStyleElement({style, name}) {
 
 
 function debounceEntryTitle(event) {
-  if (event.target.nodeName === 'A' && event.target.classList.contains('style-name-link')) {
-    if (event.type === 'mouseover' && !event.target.title) {
-      debounce(addEntryTitle, 50, event.target);
+  if (event.target.nodeName === 'H2' && event.target.classList.contains('style-name')) {
+    const link = $('.style-name-link', event.target);
+    if (event.type === 'mouseover' && !link.title) {
+      debounce(addEntryTitle, 50, link);
     } else if (debounce.timers.size) {
       debounce.unregister(addEntryTitle);
     }

From 662ce716dabe891289fc7488754de6fe1cfaf4e0 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 00:55:42 -0600
Subject: [PATCH 05/34] Fix sort help messagebox text

---
 _locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 32d416ed..1ef57df4 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -869,7 +869,7 @@
     "description": "Label for the sort info popup on the Manage styles page"
   },
   "sortStylesHelp": {
-    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Disabled (at bottom) + Title\", the entries would sort so that all the disabled entries are sorted to the bottom of the list and the entry titles are then applied to both disabled tags and the non-disabled tags separately.",
+    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title (ascending)\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
     "description": "Text in the minihelp displayed when clicking (i) icon to the right of the sort input field on the Manage styles page"
   },
   "styleBadRegexp": {

From edf44fbdf35d74aa8bc849ca530049814b8d89c6 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 01:06:26 -0600
Subject: [PATCH 06/34] Stripe entries on init

---
 manage/manage.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/manage/manage.js b/manage/manage.js
index 5fea08ac..efa82dbf 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -109,7 +109,7 @@ function initGlobalEvents() {
 
 function showStyles(styles = []) {
   const sorted = sortStyles({styles, parser: 'style'})
-    .map(style => ({name: style.name.toLocaleLowerCase(), style}));
+    .map((style, index) => ({name: style.name.toLocaleLowerCase(), style, index}));
   let index = 0;
   installed.dataset.total = styles.length;
   const scrollY = (history.state || {}).scrollY;
@@ -154,7 +154,7 @@ function showStyles(styles = []) {
 }
 
 
-function createStyleElement({style, name}) {
+function createStyleElement({style, name, index}) {
   // query the sub-elements just once, then reuse the references
   if ((createStyleElement.parts || {}).newUI !== newUI.enabled) {
     const entry = template[`style${newUI.enabled ? 'Compact' : ''}`];
@@ -195,6 +195,7 @@ function createStyleElement({style, name}) {
     (style.usercssData ? ' usercss' : '');
   entry.dataset.installdate = style.installDate || t('genericUnknown');
   entry.dataset.updatedate = style.updateDate || style.installDate || t('genericUnknown');
+  if (index !== undefined) entry.classList.add(index % 2 ? 'odd' : 'even');
 
   if (style.url) {
     $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));

From 01af7abb96c698b8860df685664377d65a1f7f1e Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 01:46:26 -0600
Subject: [PATCH 07/34] Fix debounce of updateSort

---
 manage/filters.js    |  2 +-
 manage/manage.js     |  2 +-
 manage/sort.js       | 18 ++++++++----------
 manage/updater-ui.js |  2 +-
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 63660f37..56e1b117 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -156,7 +156,7 @@ function filterOnChange({target: el, forceRefilter}) {
   if (installed) {
     reapplyFilter();
   }
-  updateSort();
+  debounce(updateSort);
 }
 
 
diff --git a/manage/manage.js b/manage/manage.js
index efa82dbf..c1452694 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -451,7 +451,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
-  updateSort();
+  debounce(updateSort);
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
diff --git a/manage/sort.js b/manage/sort.js
index 4f06ef48..225c5c6a 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -135,19 +135,17 @@ function sortStyles({styles, parser}) {
 function manageSort(event) {
   event.preventDefault();
   prefs.set('manage.newUI.sort', this.value);
-  updateSort();
+  debounce(updateSort);
 }
 
 function updateSort() {
-  debounce(() => {
-    const renderBin = document.createDocumentFragment();
-    const entries = sortStyles({parser: 'entry'});
-    for (const entry of entries) {
-      renderBin.appendChild(entry);
-    }
-    installed.appendChild(renderBin);
-    updateStripes();
-  });
+  const renderBin = document.createDocumentFragment();
+  const entries = sortStyles({parser: 'entry'});
+  for (const entry of entries) {
+    renderBin.appendChild(entry);
+  }
+  installed.appendChild(renderBin);
+  updateStripes();
 }
 
 function showSortHelp(event) {
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index 874a5395..e276c097 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -144,7 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
-    updateSort();
+    debounce(updateSort);
   }
 }
 

From a87cc6cfb1afaaa76552e96319566d7651c844ee Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 23 Dec 2017 15:57:24 +0300
Subject: [PATCH 08/34] reuse styleNameLowerCase

---
 manage/manage.js | 10 ++++++++--
 manage/sort.js   | 15 ++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/manage/manage.js b/manage/manage.js
index c1452694..2979ffb9 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -108,8 +108,14 @@ function initGlobalEvents() {
 
 
 function showStyles(styles = []) {
-  const sorted = sortStyles({styles, parser: 'style'})
-    .map((style, index) => ({name: style.name.toLocaleLowerCase(), style, index}));
+  const sorted = sortStyles({
+    styles: styles.map((style, index) => ({
+      style,
+      index,
+      name: style.name.toLocaleLowerCase(),
+    })),
+    parser: 'style',
+  });
   let index = 0;
   installed.dataset.total = styles.length;
   const scrollY = (history.state || {}).scrollY;
diff --git a/manage/sort.js b/manage/sort.js
index 225c5c6a..60ed5ec6 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -11,18 +11,15 @@ const tagData = {
   title: {
     text: t('genericTitle'),
     parse: {
-      style: style => style.name.toLowerCase(),
-      entry: entry => {
-        const el = $('.style-name-link', entry);
-        return el ? el.textContent.trim().toLowerCase() : '';
-      }
+      style: ({name}) => name,
+      entry: entry => entry.styleNameLowerCase,
     },
     sorter: sorterType.alpha
   },
   usercss: {
     text: 'Usercss',
     parse: {
-      style: style => (style.usercssData ? 0 : 1),
+      style: ({style}) => (style.usercssData ? 0 : 1),
       entry: entry => (entry.classList.contains('usercss') ? 0 : 1)
     },
     sorter: sorterType.number
@@ -30,7 +27,7 @@ const tagData = {
   disabled: {
     text: '', // added as either "enabled" or "disabled" by the addSortOptions function
     parse: {
-      style: style => (style.enabled ? 1 : 0),
+      style: ({style}) => (style.enabled ? 1 : 0),
       entry: entry => (entry.classList.contains('enabled') ? 1 : 0)
     },
     sorter: sorterType.number
@@ -38,7 +35,7 @@ const tagData = {
   dateInstalled: {
     text: t('dateInstalled'),
     parse: {
-      style: style => style.installDate,
+      style: ({style}) => style.installDate,
       entry: entry => entry.dataset.installdate
     },
     sorter: sorterType.number
@@ -46,7 +43,7 @@ const tagData = {
   dateUpdated: {
     text: t('dateUpdated'),
     parse: {
-      style: style => style.updateDate,
+      style: ({style}) => style.updateDate,
       entry: entry => entry.dataset.updatedate
     },
     sorter: sorterType.number

From 3f72ae7448a2df27568a37238b7afb6bef1646a1 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 09:03:16 -0600
Subject: [PATCH 09/34] Move sort select under filters & match styles

---
 manage.html       | 20 +++++++++---------
 manage/manage.css | 54 +++++++++++++++++++----------------------------
 2 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/manage.html b/manage.html
index 129f01d6..214859a1 100644
--- a/manage.html
+++ b/manage.html
@@ -248,6 +248,16 @@
     </div>
   </details>
 
+  <div id="sort-wrapper" i18n-title="sortLabel">
+    <div class="sorter-selection">
+      <select id="sort-select"></select>
+      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+    </div>
+    <a href="#" id="sorter-help">
+      <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+    </a>
+  </div>
+
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
     <a href="#" id="update-history" i18n-title="genericHistoryLabel">
@@ -315,16 +325,6 @@
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
 
-    <div id="sort-wrapper" i18n-title="sortLabel">
-      <div class="sorter-selection">
-        <select id="sort-select"></select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        <a href="#" id="sorter-help">
-          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-        </a>
-      </div>
-    </div>
-
     <p>
       <button id="manage-options-button" i18n-text="openOptionsManage"></button>
       <button id="manage-shortcuts-button" class="chromium-only"
diff --git a/manage/manage.css b/manage/manage.css
index 141f690a..5ebcde9c 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -423,34 +423,6 @@ select {
   margin: 0 .5em;
 }
 
-#sort-wrapper {
-  margin: 5px 0;
-}
-
-#sort-wrapper .sorter-selection {
-  position: relative;
-  display: block;
-  left: 0;
-  margin-bottom: 4px;
-  max-width: calc(100% - 18px);
-}
-
-#sort-select {
-  color: inherit;
-  max-width: 100%;
-}
-
-#sort-wrapper .select-arrow {
-  top: 3px;
-  right: 3px;
-}
-
-#sorter-help {
-  position: absolute;
-  right: -22px;
-  top: 3px;
-}
-
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
   fill: #000;
@@ -864,13 +836,23 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
-#search-wrapper {
+#search-wrapper, #sort-wrapper {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
 
-#search {
+#sort-wrapper {
+  margin-top: .25em;
+}
+
+#sort-wrapper .sorter-selection {
+  position: relative;
+  max-width: calc(100% - 15px);
+}
+
+#search, #sort-select {
+  max-width: 100%;
   flex-grow: 1;
   margin: 0.25rem 0 0;
   background: #fff;
@@ -880,13 +862,21 @@ input[id^="manage.newUI"] {
   font: 400 12px Arial;
   color: #000;
   border: 1px solid hsl(0, 0%, 66%);
-  border-radius: 0.25rem;
 }
 
-#search-help {
+#sort-select {
+  padding-right: 18px;
+}
+
+#search-help, #sorter-help {
   margin: 4px -5px 0 2px;
 }
 
+#sort-wrapper .select-arrow {
+  top: 7px;
+  right: 4px;
+}
+
 #message-box.help-text > div {
   max-width: 26rem;
 }

From 2cdc6274ab5342002b6d347ee469b7a0962eaa42 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 09:32:15 -0600
Subject: [PATCH 10/34] Add sort optgroups

---
 _locales/en/messages.json | 18 +++++++++---------
 manage/sort.js            | 24 +++++++++++++++++++-----
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1ef57df4..97b73bd7 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -840,14 +840,6 @@
     "message": "Select a sort to apply to the installed styles",
     "description": "Title on the sort select to indicate it is used for sorting entries"
   },
-  "sortAscending": {
-    "message": "ascending",
-    "description": "Text added to indicate that a sort is in the ascending (A to Z) direction"
-  },
-  "sortDescending": {
-    "message": "descending",
-    "description": "Text added to indicate that a sort is in the descending (Z to A) direction"
-  },
   "sortDateNewestFirst": {
     "message": "newest first",
     "description": "Text added to indicate that sorting a date would add the newest entries at the top"
@@ -864,12 +856,20 @@
     "message": "last",
     "description": "Text added to indicate that entry with a disabled or usercss label will be sorted last (at the bottom)"
   },
+  "sortLabelTitleAsc": {
+    "message": "Title Ascending",
+    "description": "Text added to option group to indicate a block of options that apply a title ascending (A to Z) sort"
+  },
+  "sortLabelTitleDesc": {
+    "message": "Title Descending",
+    "description": "Text added to option group to indicate a block of options that apply a title descending (Z to A) sort"
+  },
   "sortStylesHelpTitle": {
     "message": "Sort contents",
     "description": "Label for the sort info popup on the Manage styles page"
   },
   "sortStylesHelp": {
-    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title (ascending)\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
+    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
     "description": "Text in the minihelp displayed when clicking (i) icon to the right of the sort input field on the Manage styles page"
   },
   "styleBadRegexp": {
diff --git a/manage/sort.js b/manage/sort.js
index 60ed5ec6..d1427c89 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -53,8 +53,8 @@ const tagData = {
 // Adding (assumed) most commonly used ('title,asc' should always be first)
 // whitespace before & after the comma is ignored
 const sortSelectOptions = [
+  '{groupAsc}',
   'title,asc',
-  'title,desc',
   'dateInstalled,desc, title,asc',
   'dateInstalled,asc, title,asc',
   'dateUpdated,desc, title,asc',
@@ -64,6 +64,8 @@ const sortSelectOptions = [
   'disabled,asc, title,asc',
   'disabled,desc, title,asc',
   'disabled,desc, usercss,asc, title,asc',
+  '{groupDesc}',
+  'title,desc',
   'usercss,asc, title,desc',
   'usercss,desc, title,desc',
   'disabled,desc, title,desc',
@@ -73,21 +75,32 @@ const sortSelectOptions = [
 const sortByRegex = /\s*,\s*/;
 
 function addSortOptions() {
+  let container;
   const select = $('#sort-select');
   const renderBin = document.createDocumentFragment();
   const option = $create('option');
+  const optgroup = $create('optgroup');
   const meta = {
     enabled: t('genericEnabledLabel'),
     disabled: t('genericDisabledLabel'),
-    asc: ` (${t('sortAscending')})`,
-    desc: ` (${t('sortDescending')})`,
     dateNew: ` (${t('sortDateNewestFirst')})`,
     dateOld: ` (${t('sortDateOldestFirst')})`,
     labelFirst: ` (${t('sortLabelFirst')})`,
-    labelLast: ` (${t('sortLabelLast')})`
+    labelLast: ` (${t('sortLabelLast')})`,
+    groupAsc: t('sortLabelTitleAsc'),
+    groupDesc: t('sortLabelTitleDesc')
   };
+  const optgroupRegex = /\{\w+\}/;
   sortSelectOptions.forEach(sort => {
     const opt = option.cloneNode();
+    if (optgroupRegex.test(sort)) {
+      if (container) {
+        renderBin.appendChild(container);
+      }
+      container = optgroup.cloneNode();
+      container.label = meta[sort.substring(1, sort.length - 1)];
+      return;
+    }
     let lastTag = '';
     opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
       if (tagData[val]) {
@@ -100,8 +113,9 @@ function addSortOptions() {
       return acc + (meta[val] || '');
     }, '');
     opt.value = sort;
-    renderBin.appendChild(opt);
+    container.appendChild(opt);
   });
+  renderBin.appendChild(container);
   select.appendChild(renderBin);
   select.value = prefs.get('manage.newUI.sort');
 }

From 8c9eab2f5e8e98fe3dca325bf5cbaeafe1d49c5e Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 10:14:12 -0600
Subject: [PATCH 11/34] Fix wording & location of sort tooltip

---
 _locales/en/messages.json | 2 +-
 manage.html               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 97b73bd7..b74809ca 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -869,7 +869,7 @@
     "description": "Label for the sort info popup on the Manage styles page"
   },
   "sortStylesHelp": {
-    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts that include a \"(descending)\" label will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title\", the entries would sort so that all the enabled entries are sorted to the top of the list and the entry titles are then applied to both enabled tags and the disabled tags separately.",
+    "message": "Choose the type of sort to apply to the installed entries from within the sort dropdown. The default setting applies an ascending sort (A to Z) to the entry titles. Sorts within the \"Title Descending\" group will apply a descending sort (Z to A) to the title.\nThere are other presets that will allow sorting the entries by multiple criteria. Think of this like sorting a table with multiple columns and each category in a select (between the plus signs) represents a column, or group.\nFor example, if the setting is \"Enabled (first) + Title\", the entries would sort so that all the enabled entries are sorted to the top of the list, then an entry title ascending sort (A to Z) is applied to both the enabled and disabled entries separately.",
     "description": "Text in the minihelp displayed when clicking (i) icon to the right of the sort input field on the Manage styles page"
   },
   "styleBadRegexp": {
diff --git a/manage.html b/manage.html
index 214859a1..e6b5e223 100644
--- a/manage.html
+++ b/manage.html
@@ -248,8 +248,8 @@
     </div>
   </details>
 
-  <div id="sort-wrapper" i18n-title="sortLabel">
-    <div class="sorter-selection">
+  <div id="sort-wrapper">
+    <div class="sorter-selection" i18n-title="sortLabel">
       <select id="sort-select"></select>
       <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
     </div>

From 201e43f56b2d4c6a91e6d8fabd2a2ecba83711cb Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 10:25:09 -0600
Subject: [PATCH 12/34] Use performance in updateSort

---
 manage/sort.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/manage/sort.js b/manage/sort.js
index d1427c89..1c253f5c 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -92,7 +92,6 @@ function addSortOptions() {
   };
   const optgroupRegex = /\{\w+\}/;
   sortSelectOptions.forEach(sort => {
-    const opt = option.cloneNode();
     if (optgroupRegex.test(sort)) {
       if (container) {
         renderBin.appendChild(container);
@@ -102,6 +101,7 @@ function addSortOptions() {
       return;
     }
     let lastTag = '';
+    const opt = option.cloneNode();
     opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
       if (tagData[val]) {
         lastTag = val;
@@ -152,8 +152,21 @@ function manageSort(event) {
 function updateSort() {
   const renderBin = document.createDocumentFragment();
   const entries = sortStyles({parser: 'entry'});
-  for (const entry of entries) {
-    renderBin.appendChild(entry);
+  let index = 0;
+  moveEntries();
+  function moveEntries() {
+    const t0 = performance.now();
+    let moved = 0;
+    while (
+      index < entries.length &&
+      (++moved < 10 || performance.now() - t0 < 10)
+    ) {
+      renderBin.appendChild(entries[index++]);
+    }
+    if (index < entries.length) {
+      requestAnimationFrame(moveEntries);
+      return;
+    }
   }
   installed.appendChild(renderBin);
   updateStripes();

From cbbd5838687b197ac19c04c9b7f151e5af385b29 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 12:40:47 -0600
Subject: [PATCH 13/34] Add down arrow to descending sort options

---
 manage/sort.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/manage/sort.js b/manage/sort.js
index 1c253f5c..9cf0a1b7 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -81,6 +81,7 @@ function addSortOptions() {
   const option = $create('option');
   const optgroup = $create('optgroup');
   const meta = {
+    desc: ' ⇩',
     enabled: t('genericEnabledLabel'),
     disabled: t('genericDisabledLabel'),
     dateNew: ` (${t('sortDateNewestFirst')})`,

From f083b97f3261c88d6dba7189b9d8b9ce91248452 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 17:54:09 -0600
Subject: [PATCH 14/34] Don't apply updateSort if the sort hasn't changed

---
 manage/sort.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/manage/sort.js b/manage/sort.js
index 9cf0a1b7..94e93824 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -153,8 +153,8 @@ function manageSort(event) {
 function updateSort() {
   const renderBin = document.createDocumentFragment();
   const entries = sortStyles({parser: 'entry'});
+  const isDiffSort = [...installed.children].find((entry, index) => entry.id !== entries[index].id);
   let index = 0;
-  moveEntries();
   function moveEntries() {
     const t0 = performance.now();
     let moved = 0;
@@ -169,7 +169,10 @@ function updateSort() {
       return;
     }
   }
-  installed.appendChild(renderBin);
+  if (isDiffSort !== undefined) {
+    moveEntries();
+    installed.appendChild(renderBin);
+  }
   updateStripes();
 }
 

From e7c89ba91cb9c6f241e241b028908de5a93853a6 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 18:01:32 -0600
Subject: [PATCH 15/34] Update stripes if sort differs

---
 manage/sort.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/sort.js b/manage/sort.js
index 94e93824..77bfb617 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -172,8 +172,8 @@ function updateSort() {
   if (isDiffSort !== undefined) {
     moveEntries();
     installed.appendChild(renderBin);
+    updateStripes();
   }
-  updateStripes();
 }
 
 function showSortHelp(event) {

From 621640bd9f7be7df2c9b4be31155392db7023ee3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 24 Dec 2017 03:12:45 +0300
Subject: [PATCH 16/34] fixup a87cc6cf: use the new index

---
 manage/manage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/manage/manage.js b/manage/manage.js
index 2979ffb9..96206fbe 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -109,12 +109,14 @@ function initGlobalEvents() {
 
 function showStyles(styles = []) {
   const sorted = sortStyles({
-    styles: styles.map((style, index) => ({
+    parser: 'style',
+    styles: styles.map(style => ({
       style,
-      index,
       name: style.name.toLocaleLowerCase(),
     })),
-    parser: 'style',
+  }).map((info, index) => {
+    info.index = index;
+    return info;
   });
   let index = 0;
   installed.dataset.total = styles.length;

From aa17234894f09490d4970f839118e7bfa3c68744 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 18:52:15 -0600
Subject: [PATCH 17/34] Add desc sort icon font

---
 manage/manage.css |  21 +++++++++++++++++++++
 manage/sort.js    |   2 +-
 manage/sort.ttf   | Bin 0 -> 1100 bytes
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 manage/sort.ttf

diff --git a/manage/manage.css b/manage/manage.css
index 5ebcde9c..f0360979 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -962,6 +962,27 @@ input[id^="manage.newUI"] {
   text-overflow: ellipsis;
 }
 
+/* sort font */
+@font-face {
+  font-family: 'sorticon';
+  src: url('sort.ttf?t4i57s') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  unicode-range: U+EA4D;
+}
+
+#sort-select {
+  font-family: 'sorticon', arial;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/manage/sort.js b/manage/sort.js
index 77bfb617..430d5419 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -81,7 +81,7 @@ function addSortOptions() {
   const option = $create('option');
   const optgroup = $create('optgroup');
   const meta = {
-    desc: ' ⇩',
+    desc: ' \uea4d',
     enabled: t('genericEnabledLabel'),
     disabled: t('genericDisabledLabel'),
     dateNew: ` (${t('sortDateNewestFirst')})`,
diff --git a/manage/sort.ttf b/manage/sort.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..dd665cb7ef3160734df3098582e70d8ac4583c89
GIT binary patch
literal 1100
zcmaJ=KWGzC82`PyOPZvT*wVBpRj$N>gT&NItDtaGu}ToCbQ0_}Ig>zg7m^Dm;E+Ka
zT+G_dp$ZP_D2PLFaB|gA0uDl*ouoN`clT;i34V|FzTfZr^S<xBcLxDr8eOQ!-M(}2
zQffB(kd_aeJB6BApO1f80>mQu-ICd?Q=cUFb*xnFJa{{N@t(X*-YZ*XG4-SO3Q%I?
zYh@ayKB}L{4f1p4n%hnQI(d<NuIdy_oX0(KKmSC{Y}eV#De}kUx^331y_@mh<om4g
zr0z6b_DRt$_<pD=L=O@A_mt1HJPWn>iB%Ez<Hkg=?c-tq2YI#c^<k)-bozI3Bzge+
zYW`fLFVrj<a1B?e6No|K5YP|u-l6BwhQC;N-_!4yH@>fcU{q?%rU2_#gOE|&|7{WI
z-arGpj<SO!W-$*e&tzsY3+w7qdNfwk8DVsv4+gqo9QH+jXb5B2r>Ho@V4$LF1cN=x
z+Gk#WTfU#V_6yURe-eBxzKo8vtjf3NnL}Y-aEA!vxsFZ|MnpnSNc=Q%JzxpU;Vf<h
z84)b_FG)GtIUsUL;*H!_V2ZY|hC;j}u}Zuqu}0jIIKnR~Epe3gTM{R58c+SV(c-iu
z=?SqyT#{HNzAmvw{7B*m@0(v=kQ=3aOX37BW4}^xYK~*0f&v`WI33vAR-;*QY<(r0
z!!|55&}0A|+-C(@<R)fKG;Ud?R@H2<sKrKGsKP{JV&sNnyL!p8t%m7ZMSZuUZx)<9
pd&^=YsO_?PiQCvgM<!hAB5k|qaNP_JkPi>Q9>YIj{8j$Je*ieBqDBA!

literal 0
HcmV?d00001


From 2646d910ab93a79d33d2f6dd3788746cdbaefafa Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 19:14:39 -0600
Subject: [PATCH 18/34] Modularize sorter

---
 manage/filters.js    |   4 +-
 manage/manage.js     |  20 +--
 manage/sort.js       | 374 ++++++++++++++++++++++---------------------
 manage/updater-ui.js |   4 +-
 4 files changed, 203 insertions(+), 199 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 56e1b117..01e99b0a 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -1,5 +1,5 @@
 /* global installed messageBox */
-/* global updateSort */
+/* global sorter */
 'use strict';
 
 const filtersSelector = {
@@ -156,7 +156,7 @@ function filterOnChange({target: el, forceRefilter}) {
   if (installed) {
     reapplyFilter();
   }
-  debounce(updateSort);
+  debounce(sorter().updateSort);
 }
 
 
diff --git a/manage/manage.js b/manage/manage.js
index 96206fbe..e16696cd 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -3,7 +3,7 @@
 /* global checkUpdate, handleUpdateInstalled */
 /* global objectDiff */
 /* global configDialog */
-/* global sortInit, sortStyles, updateSort */
+/* global sorter */
 'use strict';
 
 let installed;
@@ -85,7 +85,7 @@ function initGlobalEvents() {
 
   // N.B. triggers existing onchange listeners
   setupLivePrefs();
-  sortInit();
+  sorter().sortInit();
 
   $$('[id^="manage.newUI"]')
     .forEach(el => (el.oninput = (el.onchange = switchUI)));
@@ -108,7 +108,7 @@ function initGlobalEvents() {
 
 
 function showStyles(styles = []) {
-  const sorted = sortStyles({
+  const sorted = sorter().sortStyles({
     parser: 'style',
     styles: styles.map(style => ({
       style,
@@ -459,7 +459,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
-  debounce(updateSort);
+  debounce(sorter().updateSort);
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
@@ -568,18 +568,6 @@ function switchUI({styleOnly} = {}) {
 }
 
 
-function updateStripes() {
-  let index = 0;
-  [...installed.children].forEach(entry => {
-    const list = entry.classList;
-    if (!list.contains('hidden')) {
-      list.add(index % 2 ? 'odd' : 'even');
-      list.remove(index++ % 2 ? 'even' : 'odd');
-    }
-  });
-}
-
-
 function rememberScrollPosition() {
   history.replaceState({scrollY: window.scrollY}, document.title);
 }
diff --git a/manage/sort.js b/manage/sort.js
index 430d5419..98f61709 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -2,195 +2,211 @@
 /* global messageBox */
 'use strict';
 
-const sorterType = {
-  alpha: (a, b) => (a < b ? -1 : a === b ? 0 : 1),
-  number: (a, b) => a - b
-};
+var sorter = (() => {
 
-const tagData = {
-  title: {
-    text: t('genericTitle'),
-    parse: {
-      style: ({name}) => name,
-      entry: entry => entry.styleNameLowerCase,
-    },
-    sorter: sorterType.alpha
-  },
-  usercss: {
-    text: 'Usercss',
-    parse: {
-      style: ({style}) => (style.usercssData ? 0 : 1),
-      entry: entry => (entry.classList.contains('usercss') ? 0 : 1)
-    },
-    sorter: sorterType.number
-  },
-  disabled: {
-    text: '', // added as either "enabled" or "disabled" by the addSortOptions function
-    parse: {
-      style: ({style}) => (style.enabled ? 1 : 0),
-      entry: entry => (entry.classList.contains('enabled') ? 1 : 0)
-    },
-    sorter: sorterType.number
-  },
-  dateInstalled: {
-    text: t('dateInstalled'),
-    parse: {
-      style: ({style}) => style.installDate,
-      entry: entry => entry.dataset.installdate
-    },
-    sorter: sorterType.number
-  },
-  dateUpdated: {
-    text: t('dateUpdated'),
-    parse: {
-      style: ({style}) => style.updateDate,
-      entry: entry => entry.dataset.updatedate
-    },
-    sorter: sorterType.number
-  }
-};
-
-// Adding (assumed) most commonly used ('title,asc' should always be first)
-// whitespace before & after the comma is ignored
-const sortSelectOptions = [
-  '{groupAsc}',
-  'title,asc',
-  'dateInstalled,desc, title,asc',
-  'dateInstalled,asc, title,asc',
-  'dateUpdated,desc, title,asc',
-  'dateUpdated,asc, title,asc',
-  'usercss,asc, title,asc',
-  'usercss,desc, title,asc',
-  'disabled,asc, title,asc',
-  'disabled,desc, title,asc',
-  'disabled,desc, usercss,asc, title,asc',
-  '{groupDesc}',
-  'title,desc',
-  'usercss,asc, title,desc',
-  'usercss,desc, title,desc',
-  'disabled,desc, title,desc',
-  'disabled,desc, usercss,asc, title,desc'
-];
-
-const sortByRegex = /\s*,\s*/;
-
-function addSortOptions() {
-  let container;
-  const select = $('#sort-select');
-  const renderBin = document.createDocumentFragment();
-  const option = $create('option');
-  const optgroup = $create('optgroup');
-  const meta = {
-    desc: ' \uea4d',
-    enabled: t('genericEnabledLabel'),
-    disabled: t('genericDisabledLabel'),
-    dateNew: ` (${t('sortDateNewestFirst')})`,
-    dateOld: ` (${t('sortDateOldestFirst')})`,
-    labelFirst: ` (${t('sortLabelFirst')})`,
-    labelLast: ` (${t('sortLabelLast')})`,
-    groupAsc: t('sortLabelTitleAsc'),
-    groupDesc: t('sortLabelTitleDesc')
+  const sorterType = {
+    alpha: (a, b) => (a < b ? -1 : a === b ? 0 : 1),
+    number: (a, b) => a - b
   };
-  const optgroupRegex = /\{\w+\}/;
-  sortSelectOptions.forEach(sort => {
-    if (optgroupRegex.test(sort)) {
-      if (container) {
-        renderBin.appendChild(container);
+
+  const tagData = {
+    title: {
+      text: t('genericTitle'),
+      parse: {
+        style: ({name}) => name,
+        entry: entry => entry.styleNameLowerCase,
+      },
+      sorter: sorterType.alpha
+    },
+    usercss: {
+      text: 'Usercss',
+      parse: {
+        style: ({style}) => (style.usercssData ? 0 : 1),
+        entry: entry => (entry.classList.contains('usercss') ? 0 : 1)
+      },
+      sorter: sorterType.number
+    },
+    disabled: {
+      text: '', // added as either "enabled" or "disabled" by the addSortOptions function
+      parse: {
+        style: ({style}) => (style.enabled ? 1 : 0),
+        entry: entry => (entry.classList.contains('enabled') ? 1 : 0)
+      },
+      sorter: sorterType.number
+    },
+    dateInstalled: {
+      text: t('dateInstalled'),
+      parse: {
+        style: ({style}) => style.installDate,
+        entry: entry => entry.dataset.installdate
+      },
+      sorter: sorterType.number
+    },
+    dateUpdated: {
+      text: t('dateUpdated'),
+      parse: {
+        style: ({style}) => style.updateDate,
+        entry: entry => entry.dataset.updatedate
+      },
+      sorter: sorterType.number
+    }
+  };
+
+  // Adding (assumed) most commonly used ('title,asc' should always be first)
+  // whitespace before & after the comma is ignored
+  const sortSelectOptions = [
+    '{groupAsc}',
+    'title,asc',
+    'dateInstalled,desc, title,asc',
+    'dateInstalled,asc, title,asc',
+    'dateUpdated,desc, title,asc',
+    'dateUpdated,asc, title,asc',
+    'usercss,asc, title,asc',
+    'usercss,desc, title,asc',
+    'disabled,asc, title,asc',
+    'disabled,desc, title,asc',
+    'disabled,desc, usercss,asc, title,asc',
+    '{groupDesc}',
+    'title,desc',
+    'usercss,asc, title,desc',
+    'usercss,desc, title,desc',
+    'disabled,desc, title,desc',
+    'disabled,desc, usercss,asc, title,desc'
+  ];
+
+  const sortByRegex = /\s*,\s*/;
+
+  function addSortOptions() {
+    let container;
+    const select = $('#sort-select');
+    const renderBin = document.createDocumentFragment();
+    const option = $create('option');
+    const optgroup = $create('optgroup');
+    const meta = {
+      desc: ' \uea4d',
+      enabled: t('genericEnabledLabel'),
+      disabled: t('genericDisabledLabel'),
+      dateNew: ` (${t('sortDateNewestFirst')})`,
+      dateOld: ` (${t('sortDateOldestFirst')})`,
+      labelFirst: ` (${t('sortLabelFirst')})`,
+      labelLast: ` (${t('sortLabelLast')})`,
+      groupAsc: t('sortLabelTitleAsc'),
+      groupDesc: t('sortLabelTitleDesc')
+    };
+    const optgroupRegex = /\{\w+\}/;
+    sortSelectOptions.forEach(sort => {
+      if (optgroupRegex.test(sort)) {
+        if (container) {
+          renderBin.appendChild(container);
+        }
+        container = optgroup.cloneNode();
+        container.label = meta[sort.substring(1, sort.length - 1)];
+        return;
       }
-      container = optgroup.cloneNode();
-      container.label = meta[sort.substring(1, sort.length - 1)];
-      return;
+      let lastTag = '';
+      const opt = option.cloneNode();
+      opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
+        if (tagData[val]) {
+          lastTag = val;
+          return acc + (acc !== '' ? ' + ' : '') + tagData[val].text;
+        }
+        if (lastTag.indexOf('date') > -1) return acc + meta[val === 'desc' ? 'dateNew' : 'dateOld'];
+        if (lastTag === 'disabled') return acc + meta[val === 'desc' ? 'enabled' : 'disabled'] + meta['labelFirst'];
+        if (lastTag !== 'title') return acc + meta[val === 'desc' ? 'labelLast' : 'labelFirst'];
+        return acc + (meta[val] || '');
+      }, '');
+      opt.value = sort;
+      container.appendChild(opt);
+    });
+    renderBin.appendChild(container);
+    select.appendChild(renderBin);
+    select.value = prefs.get('manage.newUI.sort');
+  }
+
+  function sortStyles({styles, parser}) {
+    if (!styles) {
+      styles = [...installed.children];
+      parser = 'entry';
+    } else {
+      parser = 'style';
     }
-    let lastTag = '';
-    const opt = option.cloneNode();
-    opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
-      if (tagData[val]) {
-        lastTag = val;
-        return acc + (acc !== '' ? ' + ' : '') + tagData[val].text;
+    const sortBy = prefs.get('manage.newUI.sort').split(sortByRegex); // 'title,asc'
+    const len = sortBy.length;
+    return styles.sort((a, b) => {
+      let types, direction;
+      let result = 0;
+      let indx = 0;
+      // multi-sort
+      while (result === 0 && indx < len) {
+        types = tagData[sortBy[indx++]];
+        direction = sortBy[indx++] === 'asc' ? 1 : -1;
+        result = types.sorter(types.parse[parser](a), types.parse[parser](b)) * direction;
       }
-      if (lastTag.indexOf('date') > -1) return acc + meta[val === 'desc' ? 'dateNew' : 'dateOld'];
-      if (lastTag === 'disabled') return acc + meta[val === 'desc' ? 'enabled' : 'disabled'] + meta['labelFirst'];
-      if (lastTag !== 'title') return acc + meta[val === 'desc' ? 'labelLast' : 'labelFirst'];
-      return acc + (meta[val] || '');
-    }, '');
-    opt.value = sort;
-    container.appendChild(opt);
-  });
-  renderBin.appendChild(container);
-  select.appendChild(renderBin);
-  select.value = prefs.get('manage.newUI.sort');
-}
-
-function sortStyles({styles, parser}) {
-  if (!styles) {
-    styles = [...installed.children];
-    parser = 'entry';
-  } else {
-    parser = 'style';
+      return result;
+    });
   }
-  const sortBy = prefs.get('manage.newUI.sort').split(sortByRegex); // 'title,asc'
-  const len = sortBy.length;
-  return styles.sort((a, b) => {
-    let types, direction;
-    let result = 0;
-    let indx = 0;
-    // multi-sort
-    while (result === 0 && indx < len) {
-      types = tagData[sortBy[indx++]];
-      direction = sortBy[indx++] === 'asc' ? 1 : -1;
-      result = types.sorter(types.parse[parser](a), types.parse[parser](b)) * direction;
-    }
-    return result;
-  });
-}
 
-function manageSort(event) {
-  event.preventDefault();
-  prefs.set('manage.newUI.sort', this.value);
-  debounce(updateSort);
-}
-
-function updateSort() {
-  const renderBin = document.createDocumentFragment();
-  const entries = sortStyles({parser: 'entry'});
-  const isDiffSort = [...installed.children].find((entry, index) => entry.id !== entries[index].id);
-  let index = 0;
-  function moveEntries() {
-    const t0 = performance.now();
-    let moved = 0;
-    while (
-      index < entries.length &&
-      (++moved < 10 || performance.now() - t0 < 10)
-    ) {
-      renderBin.appendChild(entries[index++]);
+  function updateSort() {
+    const renderBin = document.createDocumentFragment();
+    const entries = sortStyles({parser: 'entry'});
+    const isDiffSort = [...installed.children].find((entry, index) => entry.id !== entries[index].id);
+    let index = 0;
+    function moveEntries() {
+      const t0 = performance.now();
+      let moved = 0;
+      while (
+        index < entries.length &&
+        (++moved < 10 || performance.now() - t0 < 10)
+      ) {
+        renderBin.appendChild(entries[index++]);
+      }
+      if (index < entries.length) {
+        requestAnimationFrame(moveEntries);
+        return;
+      }
     }
-    if (index < entries.length) {
-      requestAnimationFrame(moveEntries);
-      return;
+    if (isDiffSort !== undefined) {
+      moveEntries();
+      installed.appendChild(renderBin);
+      updateStripes();
     }
   }
-  if (isDiffSort !== undefined) {
-    moveEntries();
-    installed.appendChild(renderBin);
-    updateStripes();
+
+  function manageSort(event) {
+    event.preventDefault();
+    prefs.set('manage.newUI.sort', this.value);
+    debounce(updateSort);
   }
-}
 
-function showSortHelp(event) {
-  event.preventDefault();
-  messageBox({
-    className: 'help-text',
-    title: t('sortStylesHelpTitle'),
-    contents:
-      $create('div',
-        t('sortStylesHelp').split('\n').map(line =>
-          $create('p', line))),
-    buttons: [t('confirmOK')],
-  });
-}
+  function showSortHelp(event) {
+    event.preventDefault();
+    messageBox({
+      className: 'help-text',
+      title: t('sortStylesHelpTitle'),
+      contents:
+        $create('div',
+          t('sortStylesHelp').split('\n').map(line =>
+            $create('p', line))),
+      buttons: [t('confirmOK')],
+    });
+  }
 
-function sortInit() {
-  $('#sort-select').addEventListener('change', manageSort);
-  $('#sorter-help').onclick = showSortHelp;
-  addSortOptions();
-}
+  function sortInit() {
+    $('#sort-select').addEventListener('change', manageSort);
+    $('#sorter-help').onclick = showSortHelp;
+    addSortOptions();
+  }
+
+  function updateStripes() {
+    let index = 0;
+    [...installed.children].forEach(entry => {
+      const list = entry.classList;
+      if (!list.contains('hidden')) {
+        list.add(index % 2 ? 'odd' : 'even');
+        list.remove(index++ % 2 ? 'even' : 'odd');
+      }
+    });
+  }
+
+  return {sortInit, updateSort, sortStyles, updateStripes};
+});
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index e276c097..3cf85c8c 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -1,6 +1,6 @@
 /* global messageBox */
 /* global ENTRY_ID_PREFIX, newUI */
-/* global filtersSelector, filterAndAppend, updateSort */
+/* global filtersSelector, filterAndAppend, sorter */
 'use strict';
 
 onDOMready().then(() => {
@@ -144,7 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
-    debounce(updateSort);
+    debounce(sorter().updateSort);
   }
 }
 

From d38c3c662ef30d6a3bb1dc081b07f07b0da7afa1 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 19:30:00 -0600
Subject: [PATCH 19/34] Remove (first) sort label, replace (last) with icon

---
 _locales/en/messages.json |  8 --------
 manage/manage.css         | 11 +++--------
 manage/sort.js            |  5 +----
 3 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b74809ca..37cb43ba 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -848,14 +848,6 @@
     "message": "oldest first",
     "description": "Text added to indicate that sorting a date would add the oldest entries at the top"
   },
-  "sortLabelFirst": {
-    "message": "first",
-    "description": "Text added to indicate that entry with a disabled or usercss label will be sorted first (at the top)"
-  },
-  "sortLabelLast": {
-    "message": "last",
-    "description": "Text added to indicate that entry with a disabled or usercss label will be sorted last (at the bottom)"
-  },
   "sortLabelTitleAsc": {
     "message": "Title Ascending",
     "description": "Text added to option group to indicate a block of options that apply a title ascending (A to Z) sort"
diff --git a/manage/manage.css b/manage/manage.css
index f0360979..d5f27649 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -848,7 +848,7 @@ input[id^="manage.newUI"] {
 
 #sort-wrapper .sorter-selection {
   position: relative;
-  max-width: calc(100% - 15px);
+  width: calc(100% - 15px);
 }
 
 #search, #sort-select {
@@ -866,6 +866,7 @@ input[id^="manage.newUI"] {
 
 #sort-select {
   padding-right: 18px;
+  width: 100%;
 }
 
 #search-help, #sorter-help {
@@ -972,13 +973,7 @@ input[id^="manage.newUI"] {
 }
 
 #sort-select {
-  font-family: 'sorticon', arial;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
+  font-family: 'sorticon', Arial;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/manage/sort.js b/manage/sort.js
index 98f61709..2e151888 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -88,8 +88,6 @@ var sorter = (() => {
       disabled: t('genericDisabledLabel'),
       dateNew: ` (${t('sortDateNewestFirst')})`,
       dateOld: ` (${t('sortDateOldestFirst')})`,
-      labelFirst: ` (${t('sortLabelFirst')})`,
-      labelLast: ` (${t('sortLabelLast')})`,
       groupAsc: t('sortLabelTitleAsc'),
       groupDesc: t('sortLabelTitleDesc')
     };
@@ -111,8 +109,7 @@ var sorter = (() => {
           return acc + (acc !== '' ? ' + ' : '') + tagData[val].text;
         }
         if (lastTag.indexOf('date') > -1) return acc + meta[val === 'desc' ? 'dateNew' : 'dateOld'];
-        if (lastTag === 'disabled') return acc + meta[val === 'desc' ? 'enabled' : 'disabled'] + meta['labelFirst'];
-        if (lastTag !== 'title') return acc + meta[val === 'desc' ? 'labelLast' : 'labelFirst'];
+        if (lastTag === 'disabled') return acc + meta[val === 'desc' ? 'enabled' : 'disabled'];
         return acc + (meta[val] || '');
       }, '');
       opt.value = sort;

From ccb4dc083277f34cdcecec8593b819df1b8f7288 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 19:42:27 -0600
Subject: [PATCH 20/34] Use const to define module

---
 manage/sort.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/sort.js b/manage/sort.js
index 2e151888..7d6d6ff7 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -2,7 +2,7 @@
 /* global messageBox */
 'use strict';
 
-var sorter = (() => {
+const sorter = (() => {
 
   const sorterType = {
     alpha: (a, b) => (a < b ? -1 : a === b ? 0 : 1),

From 286778cf9aa85449c66c171f2049d274b7460deb Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 19:53:19 -0600
Subject: [PATCH 21/34] Use modified icon

---
 manage/sort.ttf | Bin 1100 -> 2000 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/manage/sort.ttf b/manage/sort.ttf
index dd665cb7ef3160734df3098582e70d8ac4583c89..055df207593b9fee8ec4191e207a8008ed241e31 100644
GIT binary patch
literal 2000
zcmds2O>7%Q6n?Y2UOP^eA4)=m1KpLIf{GhExGI7oVI<oniY!dsn%#nEHulzb6?;wW
zKmtOt5LA`L-=T-1<cJU_v>*=VW+WsoJs_Z{64xA}A{7aV1Blvuv!48@C<m^*)y#a~
zH*em&ncbZsMnq$%6ryzcT;}cSjU^)gS5T+VBvWa6gbsmU1AqAWT=em1{MdCOb`^ZF
zP_^px%<nNG36$jvuQfHA03_vmRMMq-sj3>Ar-)<&{f&~<sQ3FchIsFxKTuj;zjWl)
z%TK_63;f%%Z52nqdHqfJVoo|$hTy*{e+QlfKU%If*M`scZ-H-vPc1tIi>?snSAGH?
zsak7wX_8K(zYMO`tg8K&k%7POGiV!ir_tOV`SE_t&*P=)D|Wp@^ccq909T0b1?<de
zdF$fn(|^zrYzpk>;-~7MeZSSe)!&rw$S;Ejyk+wajFY?lE)T)8lke<A;+>wUo}$tN
z<n#Dorl7ZTVNa1|VjuBd>0^m!^WmUnzfznHc^-Qe!xrwE2BQSA+Ziv1gxm%5a@unt
zHdqPd^8=N?u|c*Z1M)I0vd)6>{HEb>5^X@Nl#zBjgZIZxp#IiG2fhJM<8vYo!(K5S
z561X3yzDo`-pOXa{QtuEt|AK^3S^Bh82iBNu>QLpN<Q>8_Da6^$_eaRMAK50q{|jT
zqzHuLI*=UE(yly{K5K+ct*y1^i)}5fm93(y%y=z2?6w)zT*?_0)aMM{O_-rwXq)C!
zh@<d07y|dUi3pcP1hk$My$dH_WI=P~V_D+`!)+x)ZX#)hbX`li-K^nulOf$S;ic|o
zij3c?Oo^QR$XPv({=gtg&TtbUm&|sX$IKaF-EFnop*Gebc!#?82#oF(5<<XEAO?0K
z)nTnHf}siPAufdVu#P;<B<3E9EaZ$7GS$r!<o(Ou`Gari5S}SIN=v|lzm0!jjQrd!
z8k>6(;(yhByMMn*K^md^Xp+K+HyZ8GFp3}LFp7fWLy=Kb%r!H_;^Xo0!}`SD6Q2l6
z!QP*}o7=4~+21{dUFp5S#(TeQY;5+CnAE+Skh=Mo@)usbkms4>e521r#(WiH0!zS;
z3M>OB1Xh3zfqgVgYXYm#uL&Ha2k8g?w<|+XMli<!OTbeC%fK;#72xLt_F?Ud0;|y9
z5jco5W0NXWAcv|b4%LV%1*hsb0B6aj60OoQS+oLbmsXc8fP?%G(({P3LJf@L@im&G
zS$+@X?UhEwscCbwAP0?2dt;gyRYH`S7s;X~+9I?iT1P$a<)0Dx&*E-$YE7+V*X$Lm
zX&1Gnb#1=jWUwam{p*C|Z)?Bt6Hy`wr=rXh71v(9Jm+7nRbsK2*QTC5$uA@r!}&Vu
hy&Zl7PNGO)4EF-_4$YmjlyT>qpIrZixBKs>e*na}N7euU

literal 1100
zcmaJ=KWGzC82`PyOPZvT*wVBpRj$N>gT&NItDtaGu}ToCbQ0_}Ig>zg7m^Dm;E+Ka
zT+G_dp$ZP_D2PLFaB|gA0uDl*ouoN`clT;i34V|FzTfZr^S<xBcLxDr8eOQ!-M(}2
zQffB(kd_aeJB6BApO1f80>mQu-ICd?Q=cUFb*xnFJa{{N@t(X*-YZ*XG4-SO3Q%I?
zYh@ayKB}L{4f1p4n%hnQI(d<NuIdy_oX0(KKmSC{Y}eV#De}kUx^331y_@mh<om4g
zr0z6b_DRt$_<pD=L=O@A_mt1HJPWn>iB%Ez<Hkg=?c-tq2YI#c^<k)-bozI3Bzge+
zYW`fLFVrj<a1B?e6No|K5YP|u-l6BwhQC;N-_!4yH@>fcU{q?%rU2_#gOE|&|7{WI
z-arGpj<SO!W-$*e&tzsY3+w7qdNfwk8DVsv4+gqo9QH+jXb5B2r>Ho@V4$LF1cN=x
z+Gk#WTfU#V_6yURe-eBxzKo8vtjf3NnL}Y-aEA!vxsFZ|MnpnSNc=Q%JzxpU;Vf<h
z84)b_FG)GtIUsUL;*H!_V2ZY|hC;j}u}Zuqu}0jIIKnR~Epe3gTM{R58c+SV(c-iu
z=?SqyT#{HNzAmvw{7B*m@0(v=kQ=3aOX37BW4}^xYK~*0f&v`WI33vAR-;*QY<(r0
z!!|55&}0A|+-C(@<R)fKG;Ud?R@H2<sKrKGsKP{JV&sNnyL!p8t%m7ZMSZuUZx)<9
pd&^=YsO_?PiQCvgM<!hAB5k|qaNP_JkPi>Q9>YIj{8j$Je*ieBqDBA!


From 6cca5bbe59a4b4155ba9eb7c54c4d3014e5a0f42 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 24 Dec 2017 05:44:02 +0300
Subject: [PATCH 22/34] fallback to unicode#21E9 (hollow arrow) in FF

---
 manage/manage.css |   2 +-
 manage/sort.js    |   2 +-
 manage/sort.ttf   | Bin 2000 -> 1892 bytes
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index d5f27649..90e3c04b 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -969,7 +969,7 @@ input[id^="manage.newUI"] {
   src: url('sort.ttf?t4i57s') format('truetype');
   font-weight: normal;
   font-style: normal;
-  unicode-range: U+EA4D;
+  unicode-range: U+21E9;
 }
 
 #sort-select {
diff --git a/manage/sort.js b/manage/sort.js
index 7d6d6ff7..a2742f90 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -83,7 +83,7 @@ const sorter = (() => {
     const option = $create('option');
     const optgroup = $create('optgroup');
     const meta = {
-      desc: ' \uea4d',
+      desc: ' \u21E9',
       enabled: t('genericEnabledLabel'),
       disabled: t('genericDisabledLabel'),
       dateNew: ` (${t('sortDateNewestFirst')})`,
diff --git a/manage/sort.ttf b/manage/sort.ttf
index 055df207593b9fee8ec4191e207a8008ed241e31..24bfb20abf45c9f7976411188398c6b606f23792 100644
GIT binary patch
delta 464
zcmXv~Jxc>Y6r9~V?<DwDD2kjR0l}b!C?W(=5aS1eh-h)09x>*GTs%zFh=Cv?L~MjD
z^#|Bk*;t5ZVP|0@S_wi5Q`w45oW%Ixy|**-cJA#xx0YJYItz0Etl8M~4EhiN%m{IC
zad~ifse5$<5Jlp(xaas&rH>clZ{~b_Hyc6+73jAta>Gx0hJ7&#Xff)Uq?7S06|~VW
zM7=SY+TS?6dd+kGi8${job}d+y#t^inn;YgWXz)W$jdZ9uj^%VO{lyPe-gK)w&D&Z
zc!GY<67ZayFWWIj-6amC9WU`?FL1tLj@-GwmB~)t^&A66iF(xEPWU&#0PnLwhhSxV
zX(zK2s!J@If0VA$!V<bV72|ri94@OT(YvB^P_HcmjmK(Qb%PjD)ym>Pgx#oFOCVh4
z`x&(^-n;)l$mI+slr4kmNWQ2u*?etlhgBAQ;q^d6ME2LWt5Wsg4njf-&EUWE-63-)
Sy*WHI9aSf0P-yDXjQj$Dd|bQ$

delta 560
zcmb7BJ4+)`7(MsSIFm(*viJxRHAPUtBI5%WQ4t|ARfz23lF~88%!(676CcYKvW*C9
zAzTYVe}H`~Y=wm_v=FqgT}Tn^c1xRhX0)*N8}8$r?|k2!dv7g#+j`WscL5-pPNwEC
zfEK_!ChpCCNsJ^$`%eIIK)jfDZ4Wd5EkF{Aulemt3?1A;zvU!XyrOI5&c*>P$9%bH
zm%T;<ZR~f*e5kngeWh<>^%M0q;@?ieUT(eG`2p++{uJX58S_B<!{Q`y+;J<r%?phO
z;yQ6;Z9Q*eA2guf6Ng=U*OQ%?WZof;m29{0l*>@xbWZNnTQ67Y;k$Mk@cX5_&4PCc
z46*)(Scl-uNNbZ?O+`f3Gy=*{B@q>x`X#2RdCaIA5&s|-Uc^%U6Wz=6&;n_cUB;LQ
z@e6JRvBwM#?Z@k`QR}#*HWYBQ#YzZ+gR39Huk**-pfg?B@^3Y%{S=>D_$U#?u|&zM
z=U``o$4OYj6C~fqSFiO!sY>!=+;<`&=|&T}!8h`pVRNhW&9bauP0fxaRgc*#n$(mz
F_zbp&V=({#


From 44ef52ad8abc23da264a20745b3c45f82aa612a5 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 20:48:06 -0600
Subject: [PATCH 23/34] Fix sort select alignment in Firefox

---
 manage/manage.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/manage/manage.css b/manage/manage.css
index 90e3c04b..647a73cd 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -869,6 +869,10 @@ input[id^="manage.newUI"] {
   width: 100%;
 }
 
+.firefox #sort-select {
+  padding-top: 0;
+}
+
 #search-help, #sorter-help {
   margin: 4px -5px 0 2px;
 }

From b520e73c99c5e636f803a99798955b5f2242f07f Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 20:51:54 -0600
Subject: [PATCH 24/34] Remove all padding for focused sort select in FF

---
 manage/manage.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/manage.css b/manage/manage.css
index 647a73cd..01d56321 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -870,7 +870,7 @@ input[id^="manage.newUI"] {
 }
 
 .firefox #sort-select {
-  padding-top: 0;
+  padding: 0;
 }
 
 #search-help, #sorter-help {

From cedf2fd691faf27ebde98cf4fd55e1a5708de1bc Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 21:42:57 -0600
Subject: [PATCH 25/34] Fix updateSort

---
 manage/filters.js    |  2 +-
 manage/manage.js     |  2 +-
 manage/sort.js       | 35 ++++++++++++-----------------------
 manage/updater-ui.js |  2 +-
 4 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 01e99b0a..8e128ac0 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -156,7 +156,7 @@ function filterOnChange({target: el, forceRefilter}) {
   if (installed) {
     reapplyFilter();
   }
-  debounce(sorter().updateSort);
+  sorter().updateSort();
 }
 
 
diff --git a/manage/manage.js b/manage/manage.js
index e16696cd..2a3d7940 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -459,7 +459,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
-  debounce(sorter().updateSort);
+  sorter().updateSort();
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
diff --git a/manage/sort.js b/manage/sort.js
index a2742f90..0f1b1b0c 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -144,35 +144,24 @@ const sorter = (() => {
   }
 
   function updateSort() {
-    const renderBin = document.createDocumentFragment();
-    const entries = sortStyles({parser: 'entry'});
-    const isDiffSort = [...installed.children].find((entry, index) => entry.id !== entries[index].id);
-    let index = 0;
-    function moveEntries() {
-      const t0 = performance.now();
-      let moved = 0;
-      while (
-        index < entries.length &&
-        (++moved < 10 || performance.now() - t0 < 10)
-      ) {
-        renderBin.appendChild(entries[index++]);
+    getStylesSafe().then(styles => {
+      const renderBin = document.createDocumentFragment();
+      const entries = sortStyles(styles);
+      const current = [...installed.children];
+      const isDiffSort = entries.length !== current.length ||
+        current.find((entry, index) => entry.id !== entries[index].id);
+      if (isDiffSort) {
+        entries.forEach(entry => renderBin.appendChild(entry));
+        installed.appendChild(renderBin);
+        updateStripes();
       }
-      if (index < entries.length) {
-        requestAnimationFrame(moveEntries);
-        return;
-      }
-    }
-    if (isDiffSort !== undefined) {
-      moveEntries();
-      installed.appendChild(renderBin);
-      updateStripes();
-    }
+    });
   }
 
   function manageSort(event) {
     event.preventDefault();
     prefs.set('manage.newUI.sort', this.value);
-    debounce(updateSort);
+    updateSort();
   }
 
   function showSortHelp(event) {
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index 3cf85c8c..6e88ed31 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -144,7 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
-    debounce(sorter().updateSort);
+    sorter().updateSort();
   }
 }
 

From 5eeb0c82ea811737c9cf04a3f4d54b43473b8d61 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 22:22:39 -0600
Subject: [PATCH 26/34] Fix updateSort part deux

---
 manage/filters.js |  2 +-
 manage/sort.js    | 27 ++++++++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 8e128ac0..6b934a4a 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -155,8 +155,8 @@ function filterOnChange({target: el, forceRefilter}) {
   });
   if (installed) {
     reapplyFilter();
+    sorter().updateSort();
   }
-  sorter().updateSort();
 }
 
 
diff --git a/manage/sort.js b/manage/sort.js
index 0f1b1b0c..df56a00f 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -144,18 +144,23 @@ const sorter = (() => {
   }
 
   function updateSort() {
-    getStylesSafe().then(styles => {
-      const renderBin = document.createDocumentFragment();
-      const entries = sortStyles(styles);
-      const current = [...installed.children];
-      const isDiffSort = entries.length !== current.length ||
-        current.find((entry, index) => entry.id !== entries[index].id);
-      if (isDiffSort) {
-        entries.forEach(entry => renderBin.appendChild(entry));
-        installed.appendChild(renderBin);
-        updateStripes();
-      }
+    if (!installed) return;
+    const current = [...installed.children];
+    const sorted = sortStyles({
+      styles: current.map(entry => ({
+        entry,
+        name: entry.styleNameLowerCase,
+        style: BG.cachedStyles.byId.get(entry.styleId),
+      }))
     });
+    const isDiffSort = sorted.length !== current.length ||
+      current.find((entry, index) => entry !== sorted[index].entry);
+    if (isDiffSort) {
+      const renderBin = document.createDocumentFragment();
+      sorted.forEach(({entry}) => renderBin.appendChild(entry));
+      installed.appendChild(renderBin);
+      updateStripes();
+    }
   }
 
   function manageSort(event) {

From 45231bf8dc970994037b599641fae4451ff3abee Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 24 Dec 2017 07:34:17 +0300
Subject: [PATCH 27/34] embed the font as data URL to improve page load speed

---
 manage/manage.css |   2 +-
 manage/sort.ttf   | Bin 1892 -> 0 bytes
 2 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 manage/sort.ttf

diff --git a/manage/manage.css b/manage/manage.css
index 01d56321..03d18d3e 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -970,7 +970,7 @@ input[id^="manage.newUI"] {
 /* sort font */
 @font-face {
   font-family: 'sorticon';
-  src: url('sort.ttf?t4i57s') format('truetype');
+  src: url('data:application/x-font-ttf;base64,AAEAAAAQAQAABAAARkZUTYJtzGIAAAdIAAAAHEdERUYAJwAKAAAHKAAAAB5PUy8yURpfNAAAAYgAAABgY21hcEPk4dUAAAH4AAABSmN2dCAAFQAAAAAEvAAAAAJmcGdtBlicNgAAA0QAAAFzZ2FzcP//ABAAAAcgAAAACGdseWaLrdd8AAAEzAAAAHxoZWFkD8F3ewAAAQwAAAA2aGhlYQeIA8UAAAFEAAAAJGhtdHgMAP/YAAAB6AAAABBsb2NhAD4AAAAABMAAAAAKbWF4cAIUADsAAAFoAAAAIG5hbWX6WE3YAAAFSAAAAZtwb3N0Qb4dhQAABuQAAAA5cHJlcLgAACsAAAS4AAAABAABAAAAAAAA74lHPl8PPPUAHwQAAAAAANZkpgYAAAAA1mSNgP/Y/5wD7gNcAAAACAACAAAAAAAAAAEAAAPA/8AAAAQA/9gAAAPuAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEABcABQAAAAAAAQAAAAAACgAAAgAAIwAAAAAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAICAgIABAIekh6QPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAEEAAAAAAAAAAQAAAAEAP/YAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAAAh6f//AAAAACHp//8AAd4aAAEAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC4AAAsS7gACFBYsQEBjlm4Af+FuABEHbkACAADX14tuAABLCAgRWlEsAFgLbgAAiy4AAEqIS24AAMsIEawAyVGUlgjWSCKIIpJZIogRiBoYWSwBCVGIGhhZFJYI2WKWS8gsABTWGkgsABUWCGwQFkbaSCwAFRYIbBAZVlZOi24AAQsIEawBCVGUlgjilkgRiBqYWSwBCVGIGphZFJYI4pZL/0tuAAFLEsgsAMmUFhRWLCARBuwQERZGyEhIEWwwFBYsMBEGyFZWS24AAYsICBFaUSwAWAgIEV9aRhEsAFgLbgAByy4AAYqLbgACCxLILADJlNYsEAbsABZioogsAMmU1gjIbCAioobiiNZILADJlNYIyG4AMCKihuKI1kgsAMmU1gjIbgBAIqKG4ojWSCwAyZTWCMhuAFAioobiiNZILgAAyZTWLADJUW4AYBQWCMhuAGAIyEbsAMlRSMhIyFZGyFZRC24AAksS1NYRUQbISFZLQC4AAArABUAAAAAAAAAAAAAAD4AAAAF/9j/nAPuA1wABgAKAA4AEgAWACMAuAAPL7gACy+4AAcvuAATL7gABC+4AAUvuAADL7gABi8wMSUJATMRMxETIRUhFSEVIRUhFSEVMxUjAgr++f7V6ICyAfz+BAGG/noBEf7vm5uc/wABAALA/UACwFZbVlpXWlYAAAAAAAAOAK4AAQAAAAAAAQAHABAAAQAAAAAAAgAHACgAAQAAAAAAAwAHAEAAAQAAAAAABAAHAFgAAQAAAAAABQALAHgAAQAAAAAABgAHAJQAAQAAAAAACgAaANIAAwABBAkAAQAOAAAAAwABBAkAAgAOABgAAwABBAkAAwAOADAAAwABBAkABAAOAEgAAwABBAkABQAWAGAAAwABBAkABgAOAIQAAwABBAkACgA0AJwAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAaQBjAG8AbQBvAG8AbgAAaWNvbW9vbgAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAABGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABAAAAQIAAgEDBmdseXBoMQd1bmkyMUU5AAAAAAAAAf//AA8AAQAAAAwAAAAWAAAAAgABAAEAAwABAAQAAAACAAAAAAAAAAEAAAAA1aSY2wAAAADWZKYGAAAAANZkjYA=') format('truetype');
   font-weight: normal;
   font-style: normal;
   unicode-range: U+21E9;
diff --git a/manage/sort.ttf b/manage/sort.ttf
deleted file mode 100644
index 24bfb20abf45c9f7976411188398c6b606f23792..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1892
zcmds2+lw1j82`@9WU`x<y;!%F%~sD4SC^V@nr<mnr9@29U6;jeQ{qe&cW0An64_ix
zvbw7kf>@~|ULJf<b{~sx%IH%Bk@(<SpM=$dAP9ZvBD7C}icS2Tnb`{q`ww`+ch2v-
z{pOo5=bRx%L_?SqqICN5+&kr4OGLqGSjR3TQ)zmVLeM9mKl)-OcKYJz!WklV1NvgF
zY}TH?^ZO?BzaTH<UT<<5frpguFiBTyg|ez|oF$Tz@HYx(qt@%u5coL!eTC(<s~>#%
z%QeK`f_|-NnfbvV-gpbKhoPS>!VtV6{|FuV^mwt{Ts=&^+tBYqA6l;FOgaxlN(WP@
zY_8U%hv^yki_m$+EL;ERbBGU2!?s?lHk!|UfBZU;dI$b<wYpVn6Fr4|Ea-sf1;+jN
zFPvW(eD+Uz3{AoKIsb*~tsk~}w|g7%J^2;reIyAh2J+-iuOlc#b@IJ!Cf6$_k6WQf
zDB#+>C!w>Th`1IRA)g4Z^tmLu@v*nEKWK{eyAit+Lko8X$Do9^rER%2B;*by;Pl_c
z4dcYTHxY$wS4lFUkTE|t2~A{;A!q`t>Q;>cwJrQ>81Bk`8{Oq*=*#wlnCOO(y<^+C
z*Y>}|*gVnMHucTxUo-ZR(Pq8tZAu>h7CS^<c=cqPSd{ZrDe169C{h%L6B>{l<!MJA
zPhZj_2DiCAlec-A7tOq*jJqowmTkniLm9n<`LeD#2_w7%EyH*kJc{5!3c_sz46peN
zSY1=>0fGY2S?<VB%<C6*r<DvliKG$MG@f!g^SaYXhBd=Ll)6(XDt^0k%&$3!n$;8V
z_jxQC-ARNUGHhFLX7q^Wv}`+U<2`)6O`UxPM*9s3-+)el1D!~<S!*6-SRz_j7$RCk
zL!Cwv&+d=TX7m&))r^zmo?G{>@wbz>2Ld~%Q^l<{Ko8MToUS$v#@ciU5`-LqD3Aa|
zhN!Vq@$r5(H9R$ZL>t-tO^rmPQ1|cd=H1pe?BA}!-s`@}hP(II*Ef3D^HS$QLh58+
z&R%)xO4ci3fWGn%1EU~rIdAVvz!N@}ffGJffOQ`S=n$>?ScUylABSj^eiElr>4#+i
zkMXbse9Xr(@F^cFz|%es;N2H}tit}Tk3)2ZHmF27s!|zJr3z6gS1nho0GG(30<F+8
znN){r6;_r_fP>->vS-0lrv~x_Kc_fNqDsnI^+u^$;qgf*2j!;SoF=jgV5zuFCN;6<
zVOyd#%rkENbAJ7k_;yt*O<u4nR^4n`dA_v9XL8j!yc2x;ZYAdZU3+F+inzTbCad@)
v)r#@pN~Lr<o;v4+Fx-BF?mr^FN=G3QG$#6q8*-Q3<=wpb*{>pP?>FN=Y1%*B


From d800f072f9d198596bef1f04ffccb6ad99f6094d Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 22:45:20 -0600
Subject: [PATCH 28/34] Clean up sort function & variable names

---
 manage/filters.js    |  2 +-
 manage/manage.js     |  6 +++---
 manage/sort.js       | 36 ++++++++++++++++++------------------
 manage/updater-ui.js |  2 +-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 6b934a4a..82f1dcfe 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -155,7 +155,7 @@ function filterOnChange({target: el, forceRefilter}) {
   });
   if (installed) {
     reapplyFilter();
-    sorter().updateSort();
+    sorter().update();
   }
 }
 
diff --git a/manage/manage.js b/manage/manage.js
index 2a3d7940..6a51c22b 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -85,7 +85,7 @@ function initGlobalEvents() {
 
   // N.B. triggers existing onchange listeners
   setupLivePrefs();
-  sorter().sortInit();
+  sorter().init();
 
   $$('[id^="manage.newUI"]')
     .forEach(el => (el.oninput = (el.onchange = switchUI)));
@@ -108,7 +108,7 @@ function initGlobalEvents() {
 
 
 function showStyles(styles = []) {
-  const sorted = sorter().sortStyles({
+  const sorted = sorter().sort({
     parser: 'style',
     styles: styles.map(style => ({
       style,
@@ -459,7 +459,7 @@ function handleUpdate(style, {reason, method} = {}) {
     handleUpdateInstalled(entry, reason);
   }
   filterAndAppend({entry});
-  sorter().updateSort();
+  sorter().update();
   if (!entry.matches('.hidden') && reason !== 'import') {
     animateElement(entry);
     scrollElementIntoView(entry);
diff --git a/manage/sort.js b/manage/sort.js
index df56a00f..fb47962d 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -27,7 +27,7 @@ const sorter = (() => {
       sorter: sorterType.number
     },
     disabled: {
-      text: '', // added as either "enabled" or "disabled" by the addSortOptions function
+      text: '', // added as either "enabled" or "disabled" by the addOptions function
       parse: {
         style: ({style}) => (style.enabled ? 1 : 0),
         entry: entry => (entry.classList.contains('enabled') ? 1 : 0)
@@ -54,7 +54,7 @@ const sorter = (() => {
 
   // Adding (assumed) most commonly used ('title,asc' should always be first)
   // whitespace before & after the comma is ignored
-  const sortSelectOptions = [
+  const selectOptions = [
     '{groupAsc}',
     'title,asc',
     'dateInstalled,desc, title,asc',
@@ -74,9 +74,9 @@ const sorter = (() => {
     'disabled,desc, usercss,asc, title,desc'
   ];
 
-  const sortByRegex = /\s*,\s*/;
+  const splitRegex = /\s*,\s*/;
 
-  function addSortOptions() {
+  function addOptions() {
     let container;
     const select = $('#sort-select');
     const renderBin = document.createDocumentFragment();
@@ -92,7 +92,7 @@ const sorter = (() => {
       groupDesc: t('sortLabelTitleDesc')
     };
     const optgroupRegex = /\{\w+\}/;
-    sortSelectOptions.forEach(sort => {
+    selectOptions.forEach(sort => {
       if (optgroupRegex.test(sort)) {
         if (container) {
           renderBin.appendChild(container);
@@ -103,7 +103,7 @@ const sorter = (() => {
       }
       let lastTag = '';
       const opt = option.cloneNode();
-      opt.textContent = sort.split(sortByRegex).reduce((acc, val) => {
+      opt.textContent = sort.split(splitRegex).reduce((acc, val) => {
         if (tagData[val]) {
           lastTag = val;
           return acc + (acc !== '' ? ' + ' : '') + tagData[val].text;
@@ -120,14 +120,14 @@ const sorter = (() => {
     select.value = prefs.get('manage.newUI.sort');
   }
 
-  function sortStyles({styles, parser}) {
+  function sort({styles, parser}) {
     if (!styles) {
       styles = [...installed.children];
       parser = 'entry';
     } else {
       parser = 'style';
     }
-    const sortBy = prefs.get('manage.newUI.sort').split(sortByRegex); // 'title,asc'
+    const sortBy = prefs.get('manage.newUI.sort').split(splitRegex); // 'title,asc'
     const len = sortBy.length;
     return styles.sort((a, b) => {
       let types, direction;
@@ -143,10 +143,10 @@ const sorter = (() => {
     });
   }
 
-  function updateSort() {
+  function update() {
     if (!installed) return;
     const current = [...installed.children];
-    const sorted = sortStyles({
+    const sorted = sort({
       styles: current.map(entry => ({
         entry,
         name: entry.styleNameLowerCase,
@@ -163,13 +163,13 @@ const sorter = (() => {
     }
   }
 
-  function manageSort(event) {
+  function manageChange(event) {
     event.preventDefault();
     prefs.set('manage.newUI.sort', this.value);
-    updateSort();
+    update();
   }
 
-  function showSortHelp(event) {
+  function showHelp(event) {
     event.preventDefault();
     messageBox({
       className: 'help-text',
@@ -182,10 +182,10 @@ const sorter = (() => {
     });
   }
 
-  function sortInit() {
-    $('#sort-select').addEventListener('change', manageSort);
-    $('#sorter-help').onclick = showSortHelp;
-    addSortOptions();
+  function init() {
+    $('#sort-select').addEventListener('change', manageChange);
+    $('#sorter-help').onclick = showHelp;
+    addOptions();
   }
 
   function updateStripes() {
@@ -199,5 +199,5 @@ const sorter = (() => {
     });
   }
 
-  return {sortInit, updateSort, sortStyles, updateStripes};
+  return {init, update, sort, updateStripes};
 });
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index 6e88ed31..2117d901 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -144,7 +144,7 @@ function reportUpdateState(state, style, details) {
   }
   if (filtersSelector.hide) {
     filterAndAppend({entry});
-    sorter().updateSort();
+    sorter().update();
   }
 }
 

From fb34c3f02c9577c925776360c3cf8e91fe936117 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 22:57:20 -0600
Subject: [PATCH 29/34] Remove style update labels on sort

---
 manage/sort.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/sort.js b/manage/sort.js
index fb47962d..e19b2353 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -194,7 +194,7 @@ const sorter = (() => {
       const list = entry.classList;
       if (!list.contains('hidden')) {
         list.add(index % 2 ? 'odd' : 'even');
-        list.remove(index++ % 2 ? 'even' : 'odd');
+        list.remove(index++ % 2 ? 'even' : 'odd', 'no-update');
       }
     });
   }

From 1a805ee34fce082c791ee169fead21b1e5a3c28a Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 23 Dec 2017 23:17:27 -0600
Subject: [PATCH 30/34] Revert fb34c3f02c9577c925

---
 manage/sort.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/sort.js b/manage/sort.js
index e19b2353..fb47962d 100644
--- a/manage/sort.js
+++ b/manage/sort.js
@@ -194,7 +194,7 @@ const sorter = (() => {
       const list = entry.classList;
       if (!list.contains('hidden')) {
         list.add(index % 2 ? 'odd' : 'even');
-        list.remove(index++ % 2 ? 'even' : 'odd', 'no-update');
+        list.remove(index++ % 2 ? 'even' : 'odd');
       }
     });
   }

From 41dd9b9c4746c95b01823cb7bfe87c12309cee9b Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 24 Dec 2017 09:42:07 +0300
Subject: [PATCH 31/34] load visible favicons immediately, lazy-load the rest

---
 manage/manage.css |  4 ++++
 manage/manage.js  | 48 +++++++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index 03d18d3e..1e7954e4 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -312,6 +312,7 @@ select {
 
 .newUI .entry {
   display: table-row;
+  contain: strict;
 }
 
 .newUI .entry.odd {
@@ -323,6 +324,7 @@ select {
   margin: 0;
   display: table-cell;
   vertical-align: middle;
+  contain: content;
 }
 /************ checkbox & select************/
 
@@ -591,6 +593,7 @@ select {
   box-sizing: border-box;
   padding-right: 1rem;
   line-height: 18px;
+  contain: layout style;
 }
 
 .newUI .applies-to .expander {
@@ -629,6 +632,7 @@ select {
   backface-visibility: hidden;
   opacity: .25;
   display: none;
+  contain: layout style size;
 }
 
 .newUI .has-favicons .target {
diff --git a/manage/manage.js b/manage/manage.js
index 6a51c22b..532b0d64 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -140,6 +140,9 @@ function showStyles(styles = []) {
       renderBin.appendChild(createStyleElement(sorted[index++]));
     }
     filterAndAppend({container: renderBin});
+    if (newUI.enabled && newUI.favicons) {
+      debounce(handleEvent.loadFavicons);
+    }
     if (index < sorted.length) {
       requestAnimationFrame(renderStyles);
       return;
@@ -147,9 +150,6 @@ function showStyles(styles = []) {
     if ('scrollY' in (history.state || {}) && !sessionStorage.justEditedStyleId) {
       setTimeout(window.scrollTo, 0, 0, history.state.scrollY);
     }
-    if (newUI.enabled && newUI.favicons) {
-      debounce(handleEvent.loadFavicons, 16);
-    }
     if (sessionStorage.justEditedStyleId) {
       const entry = $(ENTRY_ID_PREFIX + sessionStorage.justEditedStyleId);
       delete sessionStorage.justEditedStyleId;
@@ -215,9 +215,7 @@ function createStyleElement({style, name, index}) {
     $('.actions', entry).appendChild(template.configureIcon.cloneNode(true));
   }
 
-  // name being supplied signifies we're invoked by showStyles()
-  // which debounces its main loop thus loading the postponed favicons
-  createStyleTargetsElement({entry, style, postponeFavicons: name});
+  createStyleTargetsElement({entry, style});
 
   return entry;
 }
@@ -250,7 +248,7 @@ function addEntryTitle(link) {
 }
 
 
-function createStyleTargetsElement({entry, style, postponeFavicons}) {
+function createStyleTargetsElement({entry, style}) {
   const parts = createStyleElement.parts;
   const targets = parts.targets.cloneNode(true);
   let container = targets;
@@ -300,9 +298,6 @@ function createStyleTargetsElement({entry, style, postponeFavicons}) {
     if (numTargets > newUI.targets) {
       $('.applies-to', entry).classList.add('has-more');
     }
-    if (numIcons && !postponeFavicons) {
-      debounce(handleEvent.loadFavicons);
-    }
   }
   const entryTargets = $('.targets', entry);
   if (numTargets) {
@@ -425,13 +420,34 @@ Object.assign(handleEvent, {
     this.closest('.applies-to').classList.toggle('expanded');
   },
 
-  loadFavicons(container = document.body) {
-    for (const img of $$('img', container)) {
-      if (img.dataset.src) {
-        img.src = img.dataset.src;
-        delete img.dataset.src;
+  loadFavicons({all = false} = {}) {
+    if (!installed.firstElementChild) return;
+    let favicons = [];
+    if (all) {
+      favicons = $$('img[data-src]', installed);
+    } else {
+      const {left, top} = installed.firstElementChild.getBoundingClientRect();
+      const x = Math.max(0, left);
+      const y = Math.max(0, top);
+      const first = document.elementFromPoint(x, y);
+      const lastOffset = first.offsetTop + window.innerHeight;
+      const numTargets = prefs.get('manage.newUI.targets');
+      let entry = first && first.closest('.entry') || installed.children[0];
+      while (entry && entry.offsetTop <= lastOffset) {
+        favicons.push(...$$('img', entry).slice(0, numTargets).filter(img => img.dataset.src));
+        entry = entry.nextElementSibling;
       }
     }
+    let i = 0;
+    for (const img of favicons) {
+      img.src = img.dataset.src;
+      delete img.dataset.src;
+      // loading too many icons at once will block the page while the new layout is recalculated
+      if (++i > 100) break;
+    }
+    if ($('img[data-src]', installed)) {
+      debounce(handleEvent.loadFavicons, 1, {all: true});
+    }
   },
 
   config(event, {styleMeta}) {
@@ -558,7 +574,7 @@ function switchUI({styleOnly} = {}) {
       for (const style of styles) {
         const entry = $(ENTRY_ID_PREFIX + style.id);
         if (entry) {
-          createStyleTargetsElement({entry, style, postponeFavicons: true});
+          createStyleTargetsElement({entry, style});
         }
       }
       debounce(handleEvent.loadFavicons);

From 72ce4a15d60008d1e542170f7a041af302614d13 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 24 Dec 2017 10:03:13 +0300
Subject: [PATCH 32/34] render 20+ styles at once

so that the page on a typical 1080p display is completely filled in initial frame at 200ms
---
 manage/manage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/manage/manage.js b/manage/manage.js
index 532b0d64..20f4a5b6 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -135,7 +135,7 @@ function showStyles(styles = []) {
     while (
       index < sorted.length &&
       // eslint-disable-next-line no-unmodified-loop-condition
-      (shouldRenderAll || ++rendered < 10 || performance.now() - t0 < 10)
+      (shouldRenderAll || ++rendered < 20 || performance.now() - t0 < 10)
     ) {
       renderBin.appendChild(createStyleElement(sorted[index++]));
     }

From b85edba2b26dad7da74219741d63bcd6116746ee Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 24 Dec 2017 08:32:58 -0600
Subject: [PATCH 33/34] Fix homepage link & update labels being hidden

---
 manage/manage.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index 1e7954e4..79d50d6d 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -324,7 +324,7 @@ select {
   margin: 0;
   display: table-cell;
   vertical-align: middle;
-  contain: content;
+  contain: layout;
 }
 /************ checkbox & select************/
 
@@ -459,9 +459,18 @@ select {
   color: hsla(180, 100%, 15%, 1);
 }
 
-.newUI .homepage:not([href=""]) {
-  position: absolute;
-  margin-left: -28px;
+.newUI .style-name:after {
+  text-indent: 1.2rem;
+}
+
+.newUI .actions:after {
+  text-indent: -25px;
+}
+
+.newUI .actions .homepage[href=""] {
+  display: inline-block;
+  visibility: hidden;
+  height: 0;
 }
 
 .newUI .actions {

From edabcab83608bc6135ba06d3c11568a9e8f518ba Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 24 Dec 2017 08:35:47 -0600
Subject: [PATCH 34/34] Fix performance

---
 manage/manage.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/manage/manage.css b/manage/manage.css
index 79d50d6d..d78ad39b 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -324,8 +324,13 @@ select {
   margin: 0;
   display: table-cell;
   vertical-align: middle;
+  contain: contents;
+}
+
+.newUI .entry .actions {
   contain: layout;
 }
+
 /************ checkbox & select************/
 
 .newUI .checker {