WIP: sort injection order

_locales/en/messages.json

@@ -1258,9 +1258,17 @@
     "description": "Title of sort column, indicating that the style can be manually sorted by dragging & dropping"
   },
   "sortLabel": {
-    "message": "Click to sort; Shift + click to sort multiple columns",
+    "message": "Click to sort by \"$name$\";\nUse shift + click to sort by multiple items",
+    "placeholders": {
+      "name": {
+        "content": "$1"
+      }
+    },
     "description": "Title added to links in the manager page header to inform the user on how to sort the columns"
   },
+  "sortHeaderOrderLabel": {
+    "message": "Click and drag the icon to change the style injection order"
+  },
   "styleBadRegexp": {
     "message": "Regexp is invalid.",
     "description": "Validation message for a bad regexp in a style"

manage.html

@@ -380,15 +380,15 @@
         </svg>
       </a>
     </div>
-    <a href="#" class="entry-col sortable header-id" data-type="order" i18n-title="sortLabel">#</a>
-    <a href="#" class="entry-col sortable header-state center-text" i18n-text="genericEnabledLabel" i18n-title="sortLabel" data-type="disabled"></a>
+    <a href="#" class="entry-col sortable header-id" data-type="order" i18n-title="sortLabel;injection order">#</a>
+    <a href="#" class="entry-col sortable header-state center-text" i18n-text="genericEnabledLabel" i18n-title="sortLabel;enabled styles" data-type="disabled"></a>
     <div class="entry-col header-name">
-      <a href="#" class="sortable" i18n-text="genericName" i18n-title="sortLabel" data-type="title"></a>
+      <a href="#" class="sortable" i18n-text="genericName" i18n-title="sortLabel;style name" data-type="title"></a>
     </div>
     <div class="entry-col header-actions" i18n-text="optionsActions"></div>
-    <div class="entry-col header-sort center-text" i18n-text="sortHeader" i18n-title="sortOrderLabel"></div>
-    <a href="#" class="entry-col sortable header-version" i18n-title="sortLabel" data-type="version">v#</a>
-    <a href="#" class="entry-col sortable header-last-update center-text" i18n-text="searchResultUpdated" i18n-title="sortLabel" data-type="dateUpdated"></a>
+    <div class="entry-col header-sort center-text" i18n-text="sortHeader" i18n-title="sortHeaderOrderLabel"></div>
+    <a href="#" class="entry-col sortable header-version" i18n-title="sortLabel;style version" data-type="version">v#</a>
+    <a href="#" class="entry-col sortable header-last-update center-text" i18n-text="searchResultUpdated" i18n-title="sortLabel;last updated" data-type="dateUpdated"></a>
     <div class="entry-col header-applies-to" i18n-text="appliesLabel"></div>
   </header>
 </div>

manage/draggable.js

@@ -1,4 +1,4 @@
-/* global UI $$ */
+/* global UI $$ updateInjectionOrder */
 'use strict';
 
 // Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
@@ -10,6 +10,7 @@
       el.classList.remove('dragging');
     });
     $('body').classList.remove('dragging');
+    updateInjectionOrder();
   }
 
   document.addEventListener('dragstart', event => {

manage/manage-actions.js

@@ -5,11 +5,12 @@ global messageBox getStyleWithNoCode
   objectDiff
   configDialog
   sorter msg prefs API onDOMready $ $$ setupLivePrefs
-  URLS enforceInputRange t formatDate
+  URLS enforceInputRange t
   getOwnTab getActiveTab openURL animateElement sessionStorageHash debounce
   scrollElementIntoView FIREFOX
   UI
 */
+/* exported updateInjectionOrder */
 'use strict';
 
 let installed;
@@ -445,6 +446,20 @@ function removeSelection() {
   }
 }
 
+function updateInjectionOrder() {
+  const entries = [...installed.children];
+  entries.shift(); // remove header
+  console.log(entries[1].styleMeta.id, entries[1].styleMeta.injectionOrder)
+
+  entries.forEach((entry, index) => {
+    entry.styleMeta.injectionOrder = index + 1;
+    $('.entry-id', entry).textContent = index + 1;
+  });
+  sorter.update();
+
+  // TODO: Update database
+}
+
 function lazyLoad() {
   setTimeout(() => {
     $$('link[data-href]').forEach(link => {

manage/manage-ui.js

@@ -141,7 +141,7 @@ const UI = {
       (style.updateUrl ? ' updatable' : '') +
       (style.usercssData ? ' usercss' : '');
 
-    $('.entry-id', entry).textContent = style.sortOrder || style.id;
+    $('.entry-id', entry).textContent = style.injectionOrder || style.id;
     let el = $('.entry-homepage', entry);
     el.classList.toggle('invisible', !style.url);
     el.href = style.url || '';
@@ -282,12 +282,13 @@ const UI = {
     const label = document.createElement('a');
     labels.className = 'header-labels';
     label.className = 'header-label sortable';
-    label.title = t('sortLabel');
     label.href = '#';
     Object.keys(UI.labels).forEach(item => {
       const newLabel = label.cloneNode(true);
+      const text = UI.labels[item].text;
       newLabel.dataset.type = item;
-      newLabel.textContent = UI.labels[item].text;
+      newLabel.textContent = text;
+      newLabel.title = t('sortLabel', text);
       labels.appendChild(newLabel);
     });
     header.appendChild(labels);

manage/sort.js

@@ -26,7 +26,7 @@ const sorter = (() => {
     },
     order: {
       text: '#',
-      parse: ({style}) => style.id,
+      parse: ({style}) => style.injectionOrder || style.id,
       sorter: sorterType.number,
     },
     usercss: {