give history log a navigatable #hash

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')],
   });

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;

manage.html

@@ -273,7 +273,7 @@
           <button id="check-all-updates" i18n="checkAllUpdates">
             <span id="update-progress"></span>
           </button>
-          <a id="update-history" i18n="title:genericHistoryLabel" tabindex="0">
+          <a id="update-history-button" i18n="title:genericHistoryLabel" tabindex="0">
             <svg class="svg-icon" viewBox="0 0 20 20" i18n="alt:helpAlt">
               <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
             </svg>

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;
 }
 

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);
-  }
-}

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 */