diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 338f4bcb..6780c0d3 100644 --- a/_locales/en/messages.json +++ b/_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" diff --git a/manage.html b/manage.html index 58f29486..54590405 100644 --- a/manage.html +++ b/manage.html @@ -40,12 +40,6 @@ -
-
- - - -
-
- # -
-
diff --git a/manage/draggable.js b/manage/draggable.js deleted file mode 100644 index a11e661b..00000000 --- a/manage/draggable.js +++ /dev/null @@ -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); - -})(); diff --git a/manage/manage-actions.js b/manage/manage-actions.js index 03e00ceb..8d103fe0 100644 --- a/manage/manage-actions.js +++ b/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')) { - $$('.target', targets).forEach((el, indx) => { - el.classList.toggle('extra', indx >= UI.targets); + for (const targetWrapper of $$('.entry .targets')) { + const targets = $$('.target', targetWrapper); + 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 => { diff --git a/manage/manage-ui.js b/manage/manage-ui.js index 6df393f2..fe6dd057 100644 --- a/manage/manage-ui.js +++ b/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 || ''; diff --git a/manage/manage.css b/manage/manage.css index 147ef5ef..bfb0024f 100644 --- a/manage/manage.css +++ b/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; diff --git a/manage/sort.js b/manage/sort.js index 2048050f..d553cc14 100644 --- a/manage/sort.js +++ b/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,