From e2c0a4eca4f9174ec0b82509ad99261be620784d Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Thu, 30 Dec 2021 16:22:25 +0800
Subject: [PATCH] Change: use messageBoxProxy

---
 execution-order/execution-order.css |  8 +-------
 manage/manage.css                   | 11 +++++------
 manage/manage.js                    | 28 +++++++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/execution-order/execution-order.css b/execution-order/execution-order.css
index 328b83a7..823e4396 100644
--- a/execution-order/execution-order.css
+++ b/execution-order/execution-order.css
@@ -2,16 +2,11 @@ html, body {
   margin: 0;
   padding: 0;
 }
-#main {
-  display: grid;
-  grid-template-columns: min-content minmax(0, 1fr);
-  height: 100vh;
-}
 #main.ready {
   animation: slidein .25s ease-in-out;
 }
 .closer {
-  max-height: 100vh;
+  display: none;
 }
 .closer::after {
   content: "\bb";
@@ -28,7 +23,6 @@ li {
   position: relative;
   user-select: none;
   border: 1px solid silver;
-  border-left: 0;
   padding: 0.3em 0;
   background: white;
   white-space: nowrap;
diff --git a/manage/manage.css b/manage/manage.css
index 63608f3d..d832d396 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -980,14 +980,13 @@ a:hover {
   animation: fadeout .25s ease-in-out;
 }
 
+.execution-order-dialog > div {
+  height: 100%;
+}
 #stylus-execution-order {
-  position: fixed;
-  height: 100vh;
+  display: block;
   border: 0;
-  top: 0;
-  right: 0;
-  max-width: 400px;
-  width: 90%;
+  height: 100%;
 }
 #stylus-execution-order.fadeout {
   animation: slideout .25s ease-in-out;
diff --git a/manage/manage.js b/manage/manage.js
index 33567b31..36a2a9dd 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -14,6 +14,7 @@
   setupLivePrefs
   waitForSelector
   waitForSheet
+  messageBoxProxy
 */// dom.js
 'use strict';
 
@@ -110,7 +111,7 @@ router.watch(
 );
 router.watch(
   {hash: '#stylus-execution-order'},
-  Embed(() => $create('iframe', {
+  EmbedDialog(() => $create('iframe', {
     id: 'stylus-execution-order',
     src: '/execution-order/execution-order.html',
   }))
@@ -137,6 +138,31 @@ function onRuntimeMessage(msg) {
   setTimeout(sorter.updateStripes, 0, {onlyWhenColumnsChanged: true});
 }
 
+function EmbedDialog(El) {
+  let shown = false;
+  return toggle;
+
+  function toggle(state) {
+    if (state && !shown) {
+      messageBoxProxy.show({
+        title: t('manageExecutionOrder'),
+        contents: El(),
+        className: 'execution-order-dialog center-dialog',
+        blockScroll: true,
+      })
+        .then(() => {
+          shown = false;
+          router.updateHash('');
+        });
+      shown = true;
+    } else if (!state && shown) {
+      // FIXME: close the dialog
+      // messageBoxProxy.close();
+      shown = false;
+    }
+  }
+}
+
 function Embed(El) {
   let el;
   return toggle;