Remove injection order code (for now)

_locales/en/messages.json

@@ -1271,10 +1271,6 @@
   "shortcutsNote": {
     "message": "Define keyboard shortcuts"
   },
-  "sortColumnInjection": {
-    "message": "injection order",
-    "description": "Column name seen in the tooltip when hovering over the header; used to replace the 'sortLabel` placeholder"
-  },
   "sortColumnEnabled": {
     "message": "enabled styles",
     "description": "Column name seen in the tooltip when hovering over the header; used to replace the 'sortLabel` placeholder"
@@ -1304,10 +1300,6 @@
     },
     "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\nchange the style injection order",
-    "description": "Tooltip shown on manage page while hovering over the sort column header"
-  },
   "styleBadRegexp": {
     "message": "Regexp is invalid.",
     "description": "Validation message for a bad regexp in a style"

manage.html

@@ -40,12 +40,6 @@
           </svg>
         </label>
       </div>
-      <div class="entry-col entry-id"></div>
-      <div class="entry-col entry-sort" draggable="true">
-        <svg class="svg-icon sort" viewBox="0 0 24 24">
-          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
-        </svg>
-      </div>
       <div class="entry-col entry-state">
         <label class="checkmate" tabindex="0">
           <input class="entry-state-toggle" type="checkbox">
@@ -182,7 +176,6 @@
   <script src="manage/manage-ui.js"></script>
   <script src="manage/manage-actions.js"></script>
   <script src="manage/bulk-actions.js"></script>
-  <script data-src="manage/draggable.js"></script>
 
   <script data-src="vendor-overwrites/colorpicker/colorconverter.js"></script>
   <script data-src="vendor-overwrites/colorpicker/colorpicker.js"></script>
@@ -492,10 +485,6 @@
         <path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/>
       </svg>
     </div>
-    <div class="entry-col header-id">
-      <a href="#" class="sortable tt-se" data-type="order" i18n-data-title="sortLabel;sortColumnInjection">#<span></span></a>
-    </div>
-    <div class="entry-col header-sort center-text tt-se" i18n-text="sortHeader" i18n-data-title="sortHeaderOrderLabel"></div>
     <a href="#" class="entry-col sortable header-state center-text tt-se" i18n-text="genericEnabledLabel" i18n-data-title="sortLabel;sortColumnEnabled" data-type="enabled"><span></span></a>
     <div class="entry-col header-name">
       <a href="#" class="sortable tt-se" i18n-text="genericName" i18n-data-title="sortLabel;sortColumnName" data-type="title"><span></span></a>

manage/draggable.js

@@ -1,58 +0,0 @@
-/* global $$ installed updateInjectionOrder */
-'use strict';
-
-// Polyfill for mobile? - https://caniuse.com/#feat=dragndrop
-(() => {
-  let dragged = null;
-
-  function isEnabled() {
-    return installed.dataset.sort === 'order';
-  }
-
-  function cleanup() {
-    $$('.entry.dragging').forEach(el => {
-      el.classList.remove('dragging');
-    });
-    if (isEnabled() && $('body').classList.contains('dragging')) {
-      updateInjectionOrder();
-    }
-    $('body').classList.remove('dragging');
-  }
-
-  document.addEventListener('dragstart', event => {
-    if (isEnabled()) {
-      const el = event.target && event.target.closest('.entry');
-      if (el) {
-        dragged = el;
-        el.classList.add('dragging');
-        $('body').classList.add('dragging');
-      }
-    } else {
-      cleanup();
-      return false;
-    }
-  }, false);
-
-  document.addEventListener('dragend', () => {
-    cleanup();
-  });
-
-  document.addEventListener('dragenter', event => {
-    if (isEnabled()) {
-      const el = event.target && event.target.closest('.entry, .entry-header');
-      if (el && dragged) {
-        // Insert after the target; keeps header at top
-        el.after(dragged);
-      }
-    }
-  }, false);
-
-  document.addEventListener('drop', event => {
-    event.preventDefault();
-    cleanup();
-    if (dragged) {
-      dragged = null;
-    }
-  }, false);
-
-})();

manage/manage-actions.js

@@ -10,7 +10,6 @@ global messageBox getStyleWithNoCode
   scrollElementIntoView FIREFOX
   UI bulk
 */
-/* exported updateInjectionOrder */
 'use strict';
 
 let installed;
@@ -56,8 +55,7 @@ function onRuntimeMessage(msg) {
   }
   setTimeout(() => {
     sorter.updateStripes({onlyWhenColumnsChanged: true});
-    updateInjectionOrder();
+  }, 0);
-  }, 0, );
 }
 
 
@@ -408,7 +406,6 @@ function handleDelete(id) {
       btnApply.dataset.value = Number(btnApply.dataset.value) - 1;
     }
     showFiltersStats();
-    updateInjectionOrder();
   }
 }
 
@@ -442,10 +439,13 @@ function switchUI({styleOnly} = {}) {
 
   const missingFavicons = UI.favicons && !$('.entry-applies-to img[src]');
   if (changed.targets) {
-    for (const targets of $$('.entry .targets')) {
+    for (const targetWrapper of $$('.entry .targets')) {
-      $$('.target', targets).forEach((el, indx) => {
+      const targets = $$('.target', targetWrapper);
-        el.classList.toggle('extra', indx >= UI.targets);
+      targets.forEach((target, indx) => {
+        target.classList.toggle('extra', indx >= UI.targets);
       });
+      $('.applies-to-extra-expander', targetWrapper)
+        .classList.toggle('hidden', targets.length <= UI.targets);
     }
     return;
   }
@@ -488,20 +488,6 @@ function removeSelection() {
   }
 }
 
-function updateInjectionOrder() {
-  if (installed.dataset.sort === 'order') {
-    const entries = [...installed.children];
-    entries.shift(); // remove header
-    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() {
   setTimeout(() => {
     $$('link[data-href]').forEach(link => {

manage/manage-ui.js

@@ -17,8 +17,6 @@ const UI = {
   faviconsGray: prefs.get('manage.newUI.faviconsGray'),
   targets: prefs.get('manage.newUI.targets'),
 
-  injectionXref: {},
-
   labels: {
     'usercss': {
       is: ({style}) => typeof style.usercssData !== 'undefined',
@@ -47,17 +45,6 @@ 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,
@@ -152,7 +139,6 @@ const UI = {
       (style.updateUrl ? ' updatable' : '') +
       (style.usercssData ? ' usercss' : '');
 
-    $('.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

@@ -2,7 +2,7 @@
   --header-icon-size: 20px;
   --entry-icon-size: 20px;
   --favicon-size: 16px;
-  --narrow-column: 75px;
+  --narrow-column: 60px;
   --header-height: 40px;
   --toolbar-height: 60px;
   --entry-height: 30px;
@@ -186,7 +186,7 @@ a:hover {
 #installed .entry,
 #installed .entry-header {
   width: 100%;
-  height: var(--entry-height);
+  line-height: var(--entry-height);
   display: flex;
   flex: 0 0 var(--narrow-column);
   flex-flow: row nowrap;
@@ -227,7 +227,6 @@ body.all-styles-hidden-by-filters #installed:after {
 .center-text,
 .entry-filter,
 .entry-state,
-.entry-sort,
 .entry-last-update {
   text-align: center;
   justify-content: center;
@@ -331,10 +330,6 @@ body.all-styles-hidden-by-filters #installed:after {
   color: #000;
 }
 
-.entry-sort {
-  cursor: move;
-}
-
 .targets {
   flex-wrap: wrap;
 }
@@ -361,8 +356,6 @@ body.all-styles-hidden-by-filters #installed:after {
   width: var(--favicon-size);
 }
 
-.header-sort,
-.entry-sort,
 #installed:not(.has-favicons) .targets img,
 #installed.has-favicons .targets img:not([src]),
 #installed.has-favicons .targets img[src] + svg {
@@ -389,15 +382,6 @@ body.all-styles-hidden-by-filters #installed:after {
   pointer-events: none;
 }
 
-body.dragging .entry:not(.dragging) .entry-name:before {
-  /* hide the sustained hover */
-  background-image: none !important;
-}
-
-.entry.dragging {
-  background: linear-gradient(to right, hsla(255, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
-}
-
 .entry.enabled .entry-name:hover .style-name {
   color: hsla(180, 100%, 15%, 1);
 }
@@ -435,7 +419,6 @@ body.dragging .entry:not(.dragging) .entry-name:before {
 
 .disabled .entry-name,
 .disabled .entry-actions,
-.disabled .entry-sort,
 .disabled .entry-version,
 .disabled .entry-last-update {
   opacity: 0.6;
@@ -480,7 +463,6 @@ a svg, .svg-icon.sort {
 }
 
 #installed[data-sort="order"] .header-sort,
-#installed[data-sort="order"] .entry-sort,
 /* Update icons */
 .can-update .update,
 .no-update:not(.update-problem):not(.update-done) .up-to-date,
@@ -583,9 +565,6 @@ a svg, .svg-icon.sort {
 .entry.hide-extra .target.extra {
   display: none;
 }
-.entry:not(.hide-extra) {
-  height: auto !important;
-}
 
 #faviconsHelp {
   overflow-y: auto;

manage/sort.js

@@ -25,11 +25,6 @@ const sorter = (() => {
       parse: ({name}) => name,
       sorter: sorterType.alpha
     },
-    order: {
-      text: '#',
-      parse: ({style}) => style.injectionOrder || style.id,
-      sorter: sorterType.number,
-    },
     usercss: {
       text: 'Usercss',
       parse: ({style}) => style.usercssData ? 0 : 1,