Remove injection order code (for now)
This commit is contained in:
Rob Garrison
parent
7d7e7e9f72
commit
71baf445e0
|
|
@ -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"
|
||||
|
|
|
|||
11
manage.html
11
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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
})();
|
||||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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 || '';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user