gh-14044: Change to use gDialogBox instead of openDialog (gh-14054)

Co-authored-by: mr. m <mr.m@tuta.com>

src/browser/base/content/zen-panels/popups.inc

@@ -30,10 +30,11 @@
   <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>
   <menuitem id="context_zenUnloadWorkspace" data-l10n-id="zen-workspaces-panel-unload" command="cmd_zenUnloadWorkspace"/>
   <menuitem id="context_zenUnloadAllOtherWorkspace" data-l10n-id="zen-workspaces-panel-unload-others" command="cmd_zenUnloadAllOtherWorkspace"/>
-  <menuitem id="context_zenSpaceRoutingSettings" data-l10n-id="zen-space-routing-settings" command="cmd_zenOpenSpaceRoutingSettings"/>
   <menuseparator/>
   <menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation"/>
   <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
+  <menuseparator/>
+  <menuitem id="context_zenSpaceRoutingSettings" data-l10n-id="zen-space-routing-settings" command="cmd_zenOpenSpaceRoutingSettings"/>
 </menupopup>
 
 <menupopup id="zenFolderActions">

src/zen/boosts/ZenBoostsEditor.mjs

@@ -218,7 +218,7 @@ export class nsZenBoostEditor {
     const editor = new Editor({
       mode: Editor.modes.css,
       lineNumbers: true,
-      theme: "mozilla",
+      theme: this.isDarkMode ? "mozilla" : "default",
       readOnly: false,
       gutters: ["CodeMirror-linenumbers"],
     });

src/zen/space-routing/ZenSpaceRoutingDialog.mjs

@@ -196,8 +196,18 @@ export class nsZenSpaceRoutingDialog {
     bottomRow.append(bottomLabelContainer, openInMenulist);
 
     root.append(topRow, bottomRow);
+
+    root.style.display = "none";
     container.appendChild(root);
 
+    // Wait for l10n to catch up and then show the element to avoid flickering.
+    this.editorWindow.promiseDocumentFlushed(() =>
+      this.editorWindow.requestAnimationFrame(() => {
+        root.style.display = "";
+        input.focus();
+      })
+    );
+
     removeButton.addEventListener("click", () => {
       this.onRemoveRoutePressed(route.id, root);
     });
@@ -212,8 +222,6 @@ export class nsZenSpaceRoutingDialog {
       this.onRouteOpenInChange(e.target.value, route.id)
     );
 
-    input.focus();
-
     this.updateShowNoRouteText();
 
     return root;

src/zen/space-routing/ZenSpaceRoutingManager.sys.mjs

@@ -254,16 +254,16 @@ class nsZenSpaceRoutingManager {
    * @param {Window} parentWindow - The parent browser window
    * @returns {Window|null} The instanced editor window
    */
-  openSpaceRoutingDialog(parentWindow) {
-    const control = parentWindow.openDialog(
+  async openSpaceRoutingDialog(parentWindow) {
+    await parentWindow.gDialogBox.open(
       "chrome://browser/content/zen-components/windows/zen-space-routing.xhtml",
-      "",
-      "centerscreen,modal,dependent,resizable=no,titlebar=no",
-      { parentWindow }
+      {
+        features: "resizable=no",
+        sizeTo: "available",
+        allowDuplicateDialogs: false,
+        parentWindow,
+      }
     );
-
-    control.focus();
-    return control;
   }
 
   /**

src/zen/space-routing/zen-space-routing.css

@@ -1,17 +1,13 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
+/* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace html "http://www.w3.org/1999/xhtml";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 :root {
-  background: none;
-  appearance: none;
-  border: none;
-  outline: none;
-  color-scheme: light dark;
+  --background-color-canvas: light-dark(white, #212223) !important;
 
-  --sr-background: light-dark(white, #212223);
   --select-background-color: light-dark(#eceef0, #3e3f43);
   --input-background-color: light-dark(#f1f2f4, #2c2d31);
   --hr-color: light-dark(#cdced4, #313235);
@@ -36,11 +32,7 @@
   display: none !important;
 }
 
-#zen-space-routing-dialog-container {
-  background-color: var(--sr-background);
-  padding: 0;
-  margin: 24px;
-
+window {
   height: var(--sr-height);
   max-height: var(--sr-height);
   min-height: var(--sr-height);
@@ -92,20 +84,22 @@
   }
 
   & p {
-    font-weight: bold;
     font-size: small;
-
+    opacity: 0.8;
     color: var(--text-color);
   }
 }
 
-.hr {
-  color: var(--hr-color);
+#sr-new-route {
+  padding: 4px 6px !important;
+}
+
+html|hr {
+  border-color: var(--hr-color) !important;
   padding: 0;
   margin: 0;
-  margin-left: 32px;
-  margin-right: 32px;
-  border-style: solid;
+  margin-left: 22px;
+  margin-right: 22px;
   border-width: 0.5px;
 }
 
@@ -126,13 +120,14 @@ p {
 
 .select {
   width: 150px;
+  min-height: unset;
   height: 26px;
   padding: 4px;
 }
 
 .select,
 .select * {
-  background-color: var(--select-background-color);
+  background-color: var(--select-background-color) !important;
   color: var(--text-color);
   margin: 0;
 
@@ -178,7 +173,7 @@ menulist {
 }
 
 .sr-rule-bottom {
-  margin-left: 85px;
+  margin-left: 87px;
 }
 
 .input,
@@ -201,9 +196,10 @@ menulist {
 }
 
 button {
-  user-select: none !important;
+  background-color: var(--select-background-color) !important;
+  min-height: unset !important;
 
-  padding: 2px;
+  padding: 2px !important;
   display: flex;
   justify-content: center;
 
@@ -217,38 +213,31 @@ button {
 .sr-remove,
 .close-icon {
   & hbox {
-    display: initial;
-    padding: 0;
-    margin: 0;
+    display: flex;
   }
 
   opacity: 0.5;
-
-  &:hover {
-    opacity: 0.8;
-  }
-
-  transition: 0.2s opacity cubic-bezier(0.075, 0.82, 0.165, 1);
-
   appearance: none !important;
-  background: none;
   border: none !important;
 
-  aspect-ratio: 1;
-  height: 24px;
+  height: 32px;
+  width: 32px;
   padding: 3px;
-  width: 24px;
 
   min-width: 0 !important;
   color: var(--text-color-secondary);
 
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
+
+  &:not(:hover) {
+    background: none !important;
+  }
 }
 
 #sr-header {
   width: 100%;
-  padding: var(--content-padding);
+  padding: var(--content-padding) 20px;
   align-items: center;
 
   display: flex;
@@ -285,7 +274,7 @@ button {
 #sr-content {
   width: 100%;
   overflow: scroll;
-  padding: var(--content-padding);
+  padding: 20px var(--content-padding);
   flex-grow: 1;
 
   display: flex;

src/zen/space-routing/zen-space-routing.inc.xhtml

@@ -18,10 +18,10 @@
   dialogroot="true"
 >
   <linkset>
-    <html:link rel="stylesheet" href="chrome://global/skin/commonDialog.css" />
     <html:link
       rel="stylesheet"
-      href="chrome://global/content/commonDialog.css"
+      href="chrome://browser/content/zen-styles/zen-space-routing.css"
+      type="text/css"
     />
     <html:link
       rel="stylesheet"
@@ -33,21 +33,11 @@
       href="chrome://browser/content/zen-styles/zen-theme.css"
       type="text/css"
     />
-    <html:link
-      rel="stylesheet"
-      href="chrome://browser/content/zen-styles/zen-space-routing.css"
-      type="text/css"
-    />
     <html:link
       rel="stylesheet"
       href="chrome://browser/skin/zen-icons/icons.css"
       type="text/css"
     />
-    <html:link
-      rel="stylesheet"
-      href="chrome://browser/content/zen-styles/zen-animations.css"
-      type="text/css"
-    />
     <html:link
       rel="stylesheet"
       type="text/css"
@@ -56,42 +46,40 @@
     <html:link rel="localization" href="browser/zen-space-routing.ftl" />
   </linkset>
 
-  <vbox
-    id="zen-space-routing-dialog-container"
-    class="dialogBox"
-    role="dialog"
-  >
-    <vbox id="sr-container">
-      <hbox id="sr-header">
-        <h3 data-l10n-id="zen-space-routing-dialog-title"></h3>
-        <html:div class="sr-left">
-          <button
-            id="sr-new-route"
-            data-l10n-id="zen-space-routing-new-route"
-          ></button>
-          <button class="close-icon" data-l10n-id="zen-space-routing-close-button" id="sr-close"></button>
-        </html:div>
-      </hbox>
-      <html:hr class="hr"></html:hr>
-      <vbox id="sr-content">
-        <vbox id="sr-empty-content">
-          <image class="sr-airplane"></image>
-          <p data-l10n-id="zen-space-routing-rulepanel-placeholder"></p>
-        </vbox>
-# All rules will be injected here later
+  <vbox id="sr-container">
+    <hbox id="sr-header">
+      <h3 data-l10n-id="zen-space-routing-dialog-title"></h3>
+      <html:div class="sr-left">
+        <button
+          id="sr-new-route"
+          data-l10n-id="zen-space-routing-new-route"
+        ></button>
+        <button
+          class="close-icon"
+          data-l10n-id="zen-space-routing-close-button"
+          id="sr-close"
+        ></button>
+      </html:div>
+    </hbox>
+    <html:hr />
+    <vbox id="sr-content">
+      <vbox id="sr-empty-content">
+        <image class="sr-airplane"></image>
+        <p data-l10n-id="zen-space-routing-rulepanel-placeholder"></p>
       </vbox>
-      <html:hr class="hr"></html:hr>
-      <hbox id="sr-footer">
-        <h4 data-l10n-id="zen-space-routing-external-default"></h4>
-        <html:div class="sr-left">
-          <menulist class="select" id="sr-default-external-open-in">
-            <menupopup id="sr-default-external-open-in-popup">
-# Select open in types will be injected here
-            </menupopup>
-          </menulist>
-        </html:div>
-      </hbox>
+# All rules will be injected here later
     </vbox>
+    <html:hr />
+    <hbox id="sr-footer">
+      <h4 data-l10n-id="zen-space-routing-external-default"></h4>
+      <html:div class="sr-left">
+        <menulist class="select" id="sr-default-external-open-in">
+          <menupopup id="sr-default-external-open-in-popup">
+# Select open in types will be injected here
+          </menupopup>
+        </menulist>
+      </html:div>
+    </hbox>
   </vbox>
 
   <script>