Change: use messageBoxProxy

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;

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;
+  display: block;
-  height: 100vh;
   border: 0;
-  top: 0;
+  height: 100%;
-  right: 0;
-  max-width: 400px;
-  width: 90%;
 }
 #stylus-execution-order.fadeout {
   animation: slideout .25s ease-in-out;

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;