diff --git a/src/browser/base/content/zen-panels/popups.inc b/src/browser/base/content/zen-panels/popups.inc
index bc9abc04e3..2ff92383d4 100644
--- a/src/browser/base/content/zen-panels/popups.inc
+++ b/src/browser/base/content/zen-panels/popups.inc
@@ -30,10 +30,11 @@
-
+
+
diff --git a/src/zen/boosts/ZenBoostsEditor.mjs b/src/zen/boosts/ZenBoostsEditor.mjs
index c65b45e16e..7254ac3fda 100644
--- a/src/zen/boosts/ZenBoostsEditor.mjs
+++ b/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"],
});
diff --git a/src/zen/space-routing/ZenSpaceRoutingDialog.mjs b/src/zen/space-routing/ZenSpaceRoutingDialog.mjs
index 3bdb6324f9..786a4fc015 100644
--- a/src/zen/space-routing/ZenSpaceRoutingDialog.mjs
+++ b/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;
diff --git a/src/zen/space-routing/ZenSpaceRoutingManager.sys.mjs b/src/zen/space-routing/ZenSpaceRoutingManager.sys.mjs
index 9109e89245..b5d07c7a3e 100644
--- a/src/zen/space-routing/ZenSpaceRoutingManager.sys.mjs
+++ b/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;
}
/**
diff --git a/src/zen/space-routing/zen-space-routing.css b/src/zen/space-routing/zen-space-routing.css
index 31aea297e6..172263809f 100644
--- a/src/zen/space-routing/zen-space-routing.css
+++ b/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;
diff --git a/src/zen/space-routing/zen-space-routing.inc.xhtml b/src/zen/space-routing/zen-space-routing.inc.xhtml
index dfda342298..7b4cdc8581 100644
--- a/src/zen/space-routing/zen-space-routing.inc.xhtml
+++ b/src/zen/space-routing/zen-space-routing.inc.xhtml
@@ -18,10 +18,10 @@
dialogroot="true"
>
-
-
-
-
-
-
-
-
-
-
-
-
-# All rules will be injected here later
+
+
+
+
+
+
+
-
-
+# All rules will be injected here later
+
+