Build & save injection order values

manage/manage-actions.js

@@ -54,7 +54,10 @@ function onRuntimeMessage(msg) {
     default:
       return;
   }
-  setTimeout(sorter.updateStripes, 0, {onlyWhenColumnsChanged: true});
+  setTimeout(() => {
+    sorter.updateStripes({onlyWhenColumnsChanged: true});
+    updateInjectionOrder();
+  }, 0, );
 }
 
 
@@ -395,6 +398,7 @@ function handleDelete(id) {
       btnApply.dataset.value = Number(btnApply.dataset.value) - 1;
     }
     showFiltersStats();
+    updateInjectionOrder();
   }
 }
 
@@ -487,17 +491,17 @@ function removeSelection() {
 }
 
 function updateInjectionOrder() {
+  if (installed.dataset.sort === 'order') {
     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;
+      UI.injectionXref[entry.styleMeta.id] = index + 1;
     });
     sorter.update();
-
     // TODO: Update database
+  }
 }
 
 function lazyLoad() {

manage/manage-ui.js

@@ -17,6 +17,8 @@ const UI = {
   faviconsGray: prefs.get('manage.newUI.faviconsGray'),
   targets: prefs.get('manage.newUI.targets'),
 
+  injectionXref: {},
+
   labels: {
     'usercss': {
       is: ({style}) => typeof style.usercssData !== 'undefined',
@@ -44,6 +46,18 @@ const UI = {
 
   showStyles: (styles = [], matchUrlIds) => {
     UI.addHeaderLabels();
+
+    // map injection order of styles
+    if (styles && styles.length && !styles.every(s => s.injectionOrder)) {
+      UI.injectionXref = styles
+        .sort((a, b) => ((a.injectionOrder || a.id) - (b.injectionOrder || b.id)))
+        .map((s, index) => (s.injectionOrder = index + 1))
+        .reduce((acc, s) => {
+          acc[s.id] = s.injectionOrder;
+          return acc;
+        }, {});
+    }
+
     const sorted = sorter.sort({
       styles: styles.map(style => ({
         style,
@@ -138,7 +152,7 @@ const UI = {
       (style.updateUrl ? ' updatable' : '') +
       (style.usercssData ? ' usercss' : '');
 
-    $('.entry-id', entry).textContent = style.injectionOrder || style.id;
+    $('.entry-id', entry).textContent = style.injectionOrder ||  UI.injectionXref[style.id];
     let el = $('.entry-homepage', entry);
     el.classList.toggle('invisible', !style.url);
     el.href = style.url || '';

manage/manage.css

@@ -120,6 +120,7 @@ a:hover {
   100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
 }
 
+.entry-header a:hover .svg-icon,
 .entry a:hover .svg-icon,
 .svg-icon:hover {
   fill: var(--entry-icon-hover-color);