diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js
index 6d325697..f7827db5 100644
--- a/injection-order/injection-order.js
+++ b/injection-order/injection-order.js
@@ -5,7 +5,7 @@
'use strict';
/* exported InjectionOrder */
-async function InjectionOrder(show = true) {
+async function InjectionOrder(show, el, selector) {
if (!show) {
return messageBoxProxy.close();
}
@@ -27,7 +27,7 @@ async function InjectionOrder(show = true) {
await messageBoxProxy.show({
title: t('styleInjectionOrder'),
contents: $create('fragment', Object.entries(groups).map(makeList)),
- className: 'injection-order center-dialog',
+ className: 'center-dialog ' + selector.slice(1),
blockScroll: true,
buttons: [t('confirmClose')],
});
diff --git a/js/router.js b/js/router.js
index fa3121f9..1fd3d7dc 100644
--- a/js/router.js
+++ b/js/router.js
@@ -1,3 +1,4 @@
+/* global $ */// dom.js
/* global deepEqual */// toolbox.js
/* global msg */
'use strict';
@@ -10,6 +11,18 @@ const router = {
return new URLSearchParams(location.search).get(key);
},
+ makeToggle(hashId, showHide, deps) {
+ const hash = '#' + hashId;
+ const selector = '.' + hash.slice(1);
+ router.watch({hash}, async state => {
+ const el = $(selector);
+ if (!state === !el) return;
+ if (state && deps) await require(deps);
+ await showHide(state, el, selector);
+ });
+ return router.updateHash.bind(router, hash);
+ },
+
push(url) {
const state = history.state || {};
state.buffer = router.buffer;
diff --git a/manage.html b/manage.html
index ff5df44e..7c8803be 100644
--- a/manage.html
+++ b/manage.html
@@ -273,7 +273,7 @@
-
+
diff --git a/manage/manage.css b/manage/manage.css
index 1561006e..eae810f5 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -954,7 +954,7 @@ button .svg-icon,
margin: .5em 1.25em 0;
}
-.update-history-log {
+.update-history {
font-size: 11px;
white-space: pre;
overflow-x: hidden;
@@ -976,7 +976,7 @@ button .svg-icon,
-moz-osx-font-smoothing: grayscale;
}
-#stylus-embedded-options {
+.stylus-options {
position: fixed;
top: 0;
left: 0;
@@ -988,7 +988,7 @@ button .svg-icon,
animation: fadein .25s ease-in-out;
}
-#stylus-embedded-options.fadeout {
+.stylus-options.fadeout {
animation: fadeout .25s ease-in-out;
}
diff --git a/manage/manage.js b/manage/manage.js
index 8dca7f9c..84abe0b7 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -50,9 +50,19 @@ newUI.renderClass();
installed.on('click', Events.entryClicked);
installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true});
installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true});
- $('#manage-options-button').onclick = () => router.updateHash('#stylus-options');
- $('#injection-order-button').onclick = () => router.updateHash('#injection-order');
- $('#sync-styles').onclick = () => router.updateHash('#stylus-options');
+ $('#sync-styles').onclick =
+ $('#manage-options-button').onclick =
+ router.makeToggle('stylus-options', toggleEmbeddedOptions);
+ $('#injection-order-button').onclick =
+ router.makeToggle('injection-order', (...args) => InjectionOrder(...args), [
+ '/vendor/draggable-list/draggable-list.iife.min.js',
+ '/injection-order/injection-order.css',
+ '/injection-order/injection-order', /* global InjectionOrder */
+ ]);
+ $('#update-history-button').onclick =
+ router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [
+ '/manage/updater-ui', /* global showUpdateHistory */
+ ]);
$$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external));
window.on('pageshow', handleVisibilityChange);
window.on('pagehide', handleVisibilityChange);
@@ -91,8 +101,6 @@ newUI.renderClass();
msg.onExtension(onRuntimeMessage);
window.on('closeOptions', () => router.updateHash(''));
-router.watch({hash: '#stylus-options'}, toggleEmbeddedOptions);
-router.watch({hash: '#injection-order'}, toggleInjectionOrder);
function onRuntimeMessage(msg) {
switch (msg.method) {
@@ -115,32 +123,13 @@ function onRuntimeMessage(msg) {
setTimeout(sorter.updateStripes, 0, {onlyWhenColumnsChanged: true});
}
-async function toggleEmbeddedOptions(state) {
- const el = $('#stylus-embedded-options') ||
- state && $.root.appendChild($create('iframe', {
- id: 'stylus-embedded-options',
- src: '/options.html',
- }));
- if (state) {
- el.focus();
- } else if (el) {
+async function toggleEmbeddedOptions(show, el, selector) {
+ if (show) {
+ $.root.appendChild($create('iframe' + selector, {src: '/options.html'}))
+ .focus();
+ } else {
el.contentDocument.body.classList.add('scaleout');
await animateElement(el, 'fadeout');
el.remove();
}
}
-
-async function toggleInjectionOrder(state) {
- const shown = $('.injection-order');
- if (state && !shown) {
- await require([
- '/vendor/draggable-list/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 InjectionOrder(false);
- }
-}
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index d411d395..f4edce34 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -10,7 +10,6 @@
$('#check-all-updates').onclick = checkUpdateAll;
$('#check-all-updates-force').onclick = checkUpdateAll;
$('#apply-all-updates').onclick = applyUpdateAll;
-$('#update-history').onclick = showUpdateHistory;
function applyUpdateAll() {
const btnApply = $('#apply-all-updates');
@@ -215,9 +214,12 @@ function renderUpdatesOnlyFilter({show, check} = {}) {
btnApply.dataset.value = numUpdatable;
}
-async function showUpdateHistory(event) {
- event.preventDefault();
- const log = $create('.update-history-log');
+/* exported showUpdateHistory */
+async function showUpdateHistory(show, el, selector) {
+ if (!show) {
+ return messageBoxProxy.close();
+ }
+ const log = $create(selector);
let scroller, toggler;
let deleted = false;
await require(['/js/storage-util']); /* global chromeLocal */