diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 3be04358..84649365 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1668,7 +1668,12 @@
"message": "Custom included sites"
},
"styleInjectionOrder": {
- "message": "Style injection order"
+ "message": "Style injection order",
+ "description": "Tooltip for the button in the manager to open the dialog and also the title of this dialog"
+ },
+ "styleInjectionOrderHint": {
+ "message": "Drag'n'drop a style to change its position. Styles are injected sequentially in the order shown below so a style further down the list can override the earlier styles.",
+ "description": "Hint in the injection order dialog in the manager"
},
"styleExcludeLabel": {
"message": "Custom excluded sites"
diff --git a/injection-order/injection-order.css b/injection-order/injection-order.css
index 4b78054e..bdd57965 100644
--- a/injection-order/injection-order.css
+++ b/injection-order/injection-order.css
@@ -1,40 +1,56 @@
-html, body {
- margin: 0;
+#message-box.injection-order > div {
+ height: 100%;
+ width: 40em;
+ max-width: 80vw;
+}
+#message-box.injection-order #message-box-contents {
padding: 0;
+ overflow: hidden;
}
-ol {
- list-style: none;
- margin: 0;
- padding: .75rem 0;
- font-size: 16px;
+.injection-order header {
+ padding: 1rem 1rem 0;
+ content: attr(data-hint);
+}
+.injection-order ol {
+ height: 100%;
+ padding: 0;
+ font-size: 14px;
overflow-y: auto;
- background: rgba(255, 2555, 255, 0.7)
}
-li {
- position: relative;
+.injection-order a {
+ display: block;
user-select: none;
padding: 0.3em .5em;
- background: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: move;
+ color: #000;
+ text-decoration: none;
}
-li:not(:first-child) {
+.injection-order a.enabled {
+ font-weight: bold;
+}
+.injection-order a:active {
+ background: white;
+}
+.injection-order a:hover {
+ text-decoration: underline;
+}
+.injection-order a:not(:first-child) {
border-top: 1px solid rgba(128, 128, 128, .25);
}
-.draggable-list-dragging li {
+.injection-order a::before {
+ content: "\2261";
+ padding: 0.6em;
+ font-weight: normal;
+}
+.injection-order .draggable-list-dragging a {
transition: transform .25s ease-in-out;
z-index: 1;
}
-li.draggable-list-target {
+.injection-order a.draggable-list-target {
transition: none;
z-index: 100;
position: relative;
}
-.dragger::before {
- content: "\2261"
-}
-.dragger {
- padding: 0.6em;
-}
diff --git a/injection-order/injection-order.html b/injection-order/injection-order.html
deleted file mode 100644
index 915fd0d3..00000000
--- a/injection-order/injection-order.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
- Stylus
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js
index 2c3cb854..50b1fb4b 100644
--- a/injection-order/injection-order.js
+++ b/injection-order/injection-order.js
@@ -1,34 +1,47 @@
-/* global $ $create */// dom.js
+/* global $create messageBoxProxy */// dom.js
/* global API */// msg.js
/* global DraggableList */
/* global prefs */
+/* global t */// localization.js
'use strict';
-(async () => {
- const list = (await getOrderedStyles()).map(style => ({
- el: $create('li', [$create('span.dragger'), style.name]),
- style,
- }));
- const ol = $('#style-list');
+/* exported InjectionOrder */
+async function InjectionOrder(show = true) {
+ if (!show) {
+ return messageBoxProxy.close();
+ }
+ const entries = (await getOrderedStyles()).map(makeEntry);
+ const ol = $create('ol');
let maxTranslateY;
- ol.append(...list.map(l => l.el));
- ol.on('d:dragstart', e => {
- e.detail.origin.dataTransfer.setDragImage(new Image(), 0, 0);
- maxTranslateY = ol.scrollHeight - e.detail.dragTarget.offsetHeight - e.detail.dragTarget.offsetTop;
+ ol.append(...entries.map(l => l.el));
+ ol.on('d:dragstart', ({detail: d}) => {
+ d.origin.dataTransfer.setDragImage(new Image(), 0, 0);
+ maxTranslateY = ol.scrollHeight - d.dragTarget.offsetHeight - d.dragTarget.offsetTop;
});
- ol.on('d:dragmove', e => {
- e.detail.origin.dataTransfer.dropEffect = 'move';
- const y = Math.min(e.detail.currentPos.y - e.detail.startPos.y, maxTranslateY);
- e.detail.dragTarget.style.transform = `translateY(${y}px)`;
+ ol.on('d:dragmove', ({detail: d}) => {
+ d.origin.dataTransfer.dropEffect = 'move';
+ const y = Math.min(d.currentPos.y - d.startPos.y, maxTranslateY);
+ d.dragTarget.style.transform = `translateY(${y}px)`;
});
- ol.on('d:dragend', e => {
- const [item] = list.splice(e.detail.originalIndex, 1);
- list.splice(e.detail.spliceIndex, 0, item);
- ol.insertBefore(e.detail.dragTarget, e.detail.insertBefore);
- prefs.set('injectionOrder', list.map(l => l.style._id));
+ ol.on('d:dragend', ({detail: d}) => {
+ const [item] = entries.splice(d.originalIndex, 1);
+ entries.splice(d.spliceIndex, 0, item);
+ ol.insertBefore(d.dragTarget, d.insertBefore);
+ prefs.set('injectionOrder', entries.map(l => l.style._id));
});
new DraggableList(ol, {scrollContainer: ol});
+ await messageBoxProxy.show({
+ title: t('styleInjectionOrder'),
+ contents: $create('fragment', [
+ $create('header', t('styleInjectionOrderHint')),
+ ol,
+ ]),
+ className: 'injection-order center-dialog',
+ blockScroll: true,
+ buttons: [t('confirmClose')],
+ });
+
async function getOrderedStyles() {
const [styles] = await Promise.all([
API.styles.getAll(),
@@ -44,7 +57,6 @@
const s = uuidIndex.get(uid);
if (s) {
uuidIndex.delete(uid);
-
orderedStyles.push(s);
styleSet.delete(s);
}
@@ -52,4 +64,15 @@
orderedStyles.push(...styleSet);
return orderedStyles;
}
-})();
+
+ function makeEntry(style) {
+ return {
+ style,
+ el: $create('a', {
+ className: style.enabled ? 'enabled' : '',
+ href: '/edit.html?id=' + style.id,
+ target: '_blank',
+ }, style.name),
+ };
+ }
+}
diff --git a/js/dlg/message-box.css b/js/dlg/message-box.css
index ea551e53..48874cb0 100644
--- a/js/dlg/message-box.css
+++ b/js/dlg/message-box.css
@@ -173,21 +173,6 @@
right: auto;
}
-#message-box.injection-order-dialog > div {
- height: 100%;
- width: 40em;
- max-width: 80vw;
-}
-#message-box.injection-order-dialog #message-box-contents {
- padding: 0;
-}
-#injection-order {
- display: block;
- border: 0;
- height: 100%;
- width: 100%;
-}
-
@keyframes fadein {
from {
opacity: 0;
diff --git a/manage/manage.js b/manage/manage.js
index 6904f77f..95f980bf 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -11,7 +11,6 @@
$$
$create
animateElement
- messageBoxProxy
setupLivePrefs
waitForSelector
waitForSheet
@@ -142,20 +141,16 @@ async function toggleEmbeddedOptions(state) {
}
async function toggleInjectionOrder(state) {
- const sel = 'iframe#injection-order';
- const shown = $(sel);
+ const shown = $('.injection-order');
if (state && !shown) {
- await messageBoxProxy.show({
- title: t('styleInjectionOrder'),
- contents: $create(sel, {
- src: '/injection-order/injection-order.html',
- }),
- className: 'injection-order-dialog center-dialog',
- blockScroll: true,
- buttons: [t('confirmClose')],
- });
+ await require([
+ '/vendor/@eight04/draggable-list/dist/draggable-list.iife.min.js',
+ '/injection-order/injection-order.css',
+ '/injection-order/injection-order', /* global InjectionOrder */
+ ]);
+ await InjectionOrder();
router.updateHash('');
} else if (!state && shown) {
- await messageBoxProxy.close();
+ await InjectionOrder(false);
}
}