diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index 25cceb3d03..00204cb694 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -205,6 +205,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1943053 -->
+
+
diff --git a/templates/zerver/portico.html b/templates/zerver/portico.html
index ef2433022b..75dc60dc6d 100644
--- a/templates/zerver/portico.html
+++ b/templates/zerver/portico.html
@@ -20,7 +20,7 @@ hence the name.
-
+
{% if not isolated_page and not skip_footer %}
{% include 'zerver/footer.html' %}
{% endif %}
diff --git a/web/src/alert_popup.ts b/web/src/alert_popup.ts
index e13b052ae9..04ea102437 100644
--- a/web/src/alert_popup.ts
+++ b/web/src/alert_popup.ts
@@ -9,6 +9,14 @@ $("body").on("click", ".alert-box .exit", function () {
}, 300);
});
-$(".alert-box").on("click", ".stackframe", function () {
+$(".blueslip-error-container").on("click", ".stackframe", function () {
$(this).siblings(".code-context").toggle("fast");
});
+
+$(".blueslip-error-container").on("click", ".exit", function () {
+ const $stacktrace = $(this).closest(".stacktrace");
+ $stacktrace.addClass("fade-out");
+ setTimeout(() => {
+ $stacktrace.removeClass("fade-out show");
+ }, 300);
+});
diff --git a/web/src/blueslip_stacktrace.ts b/web/src/blueslip_stacktrace.ts
index 5e98960533..9f4509a276 100644
--- a/web/src/blueslip_stacktrace.ts
+++ b/web/src/blueslip_stacktrace.ts
@@ -161,6 +161,6 @@ export async function display_stacktrace(ex: unknown, message?: string): Promise
} while (ex !== undefined && ex !== null);
const $alert = $("").addClass("stacktrace").html(render_blueslip_stacktrace({errors}));
- $(".alert-box").append($alert);
+ $(".blueslip-error-container").append($alert);
$alert.addClass("show");
}
diff --git a/web/styles/alerts.css b/web/styles/alerts.css
index 8072e95952..7a083fd211 100644
--- a/web/styles/alerts.css
+++ b/web/styles/alerts.css
@@ -39,12 +39,6 @@
/* alert box component changes */
#alert-popup-container {
- /* We define this variable in web/styles/app_variables.css,
- but we need to redefine it here since this is shared
- with portico.
- TODO: Remove this once we remove the alert box component,
- after the migration to the new banners is complete. */
- --popup-banner-translate-y-distance: 100px;
/* Ensure alert box remains in viewport, regardless of scroll
position in message list. */
position: fixed;
@@ -72,109 +66,6 @@
justify-content: center;
gap: 5px;
- .stacktrace {
- @extend .alert-display, .alert-animations;
-
- pointer-events: auto;
- font-size: 1rem;
- color: hsl(0deg 80% 40%);
-
- padding: 1rem 0;
-
- background-color: hsl(0deg 100% 98%);
- border-radius: 4px;
- border: 1px solid hsl(0deg 80% 40%);
- box-shadow: 0 0 2px hsl(0deg 80% 40%);
-
- .stacktrace-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .message {
- flex: 1 1 auto;
- }
-
- .warning-symbol,
- .exit {
- flex: 0 0 auto;
- font-size: 1.3rem;
- padding: 0 1rem;
- }
-
- .exit::after {
- cursor: pointer;
- font-size: 2.3rem;
- content: "\d7";
- line-height: 0.5;
- }
- }
-
- .stacktrace-more-info {
- font-size: 0.85rem;
- white-space: pre;
- font-family: "Source Code Pro", monospace;
- margin-left: 3.3rem;
- margin-bottom: 0.5rem;
- padding: 0.5rem;
- background-color: hsl(0deg 7% 98%);
- }
-
- .stacktrace-content {
- font-family: "Source Code Pro", monospace;
- font-size: 0.85rem;
-
- margin-bottom: 0.5rem;
-
- .stackframe {
- padding-left: calc(3.3rem - 14px);
- padding-right: 1rem;
- }
- }
-
- .expand {
- cursor: pointer;
- color: hsl(0deg 32% 83%);
-
- &:hover {
- color: hsl(0deg 0% 20%);
- }
- }
-
- .subtle {
- color: hsl(0deg 7% 45%);
- }
-
- .code-context {
- color: hsl(0deg 7% 15%);
- background-color: hsl(0deg 7% 98%);
- box-shadow:
- inset 0 11px 10px -10px hsl(0deg 7% 70%),
- inset 0 -11px 10px -10px hsl(0deg 7% 70%);
-
- margin-top: 1em;
- margin-bottom: 1em;
-
- .code-context-content {
- padding: 1rem 0;
- white-space: pre;
- overflow-x: auto;
- }
-
- .line-number {
- width: 3rem;
- display: inline-block;
- text-align: right;
- color: hsl(0deg 7% 35%);
- }
-
- .focus-line {
- background-color: hsl(0deg 7% 90%);
- width: 100%;
- }
- }
- }
-
.alert {
@extend .alert-animations;
@@ -244,6 +135,136 @@
}
}
+.blueslip-error-container {
+ /* We define this variable here since this is shared
+ with portico. */
+ --blueslip-overlay-translate-y-distance: 100px;
+ position: fixed;
+ /* Offset to account for the top padding + 5px from the top. */
+ top: calc(5px + (-1 * var(--blueslip-overlay-translate-y-distance)));
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 900px;
+ z-index: 230;
+ max-height: 100%;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ /* Set top padding to account for the translate-y motion of the
+ animation to prevent the vertical scroll bar from appearing. */
+ padding-top: var(--blueslip-overlay-translate-y-distance);
+ display: flex;
+ /* Using column-reverse flex direction enables a stack-like
+ behavior where the most recent error is always on top. */
+ flex-direction: column-reverse;
+ gap: 5px;
+}
+
+.stacktrace {
+ @extend .alert-display, .alert-animations;
+
+ box-sizing: border-box;
+ width: 100%;
+ pointer-events: auto;
+ font-size: 1rem;
+ color: hsl(0deg 80% 40%);
+
+ padding: 1rem 0;
+
+ background-color: hsl(0deg 100% 98%);
+ border-radius: 4px;
+ border: 1px solid hsl(0deg 80% 40%);
+ box-shadow: 0 0 2px hsl(0deg 80% 40%);
+
+ .stacktrace-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .message {
+ flex: 1 1 auto;
+ }
+
+ .warning-symbol,
+ .exit {
+ flex: 0 0 auto;
+ font-size: 1.3rem;
+ padding: 0 1rem;
+ }
+
+ .exit::after {
+ cursor: pointer;
+ font-size: 2.3rem;
+ content: "\d7";
+ line-height: 0.5;
+ }
+ }
+
+ .stacktrace-more-info {
+ font-size: 0.85rem;
+ white-space: pre;
+ font-family: "Source Code Pro", monospace;
+ margin-left: 3.3rem;
+ margin-bottom: 0.5rem;
+ padding: 0.5rem;
+ background-color: hsl(0deg 7% 98%);
+ }
+
+ .stacktrace-content {
+ font-family: "Source Code Pro", monospace;
+ font-size: 0.85rem;
+
+ margin-bottom: 0.5rem;
+
+ .stackframe {
+ padding-left: calc(3.3rem - 14px);
+ padding-right: 1rem;
+ }
+ }
+
+ .expand {
+ cursor: pointer;
+ color: hsl(0deg 32% 83%);
+
+ &:hover {
+ color: hsl(0deg 0% 20%);
+ }
+ }
+
+ .subtle {
+ color: hsl(0deg 7% 45%);
+ }
+
+ .code-context {
+ color: hsl(0deg 7% 15%);
+ background-color: hsl(0deg 7% 98%);
+ box-shadow:
+ inset 0 11px 10px -10px hsl(0deg 7% 70%),
+ inset 0 -11px 10px -10px hsl(0deg 7% 70%);
+
+ margin-top: 1em;
+ margin-bottom: 1em;
+
+ .code-context-content {
+ padding: 1rem 0;
+ white-space: pre;
+ overflow-x: auto;
+ }
+
+ .line-number {
+ width: 3rem;
+ display: inline-block;
+ text-align: right;
+ color: hsl(0deg 7% 35%);
+ }
+
+ .focus-line {
+ background-color: hsl(0deg 7% 90%);
+ width: 100%;
+ }
+ }
+}
+
/* animation section */
@keyframes fadeIn {
0% {
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 942b6a6be8..9cca6182c1 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -318,36 +318,38 @@
.alert.alert-error::before {
color: hsl(0deg 75% 65%);
}
+ }
- .stacktrace {
- color: hsl(314deg 22% 85%);
+ .stacktrace {
+ color: hsl(314deg 22% 85%);
+ background-color: hsl(318deg 12% 21%);
+ border: 1px solid hsl(0deg 75% 65%);
- .expand {
- color: hsl(318deg 14% 36%);
+ .expand {
+ color: hsl(318deg 14% 36%);
+ }
+
+ .subtle {
+ color: hsl(314deg 19% 63%);
+ }
+
+ .stacktrace-more-info {
+ background-color: hsl(312deg 7% 14%);
+ }
+
+ .code-context {
+ color: hsl(314deg 27% 82%);
+ background-color: hsl(312deg 7% 14%);
+ box-shadow:
+ inset 0 11px 10px -10px hsl(0deg 0% 6%),
+ inset 0 -11px 10px -10px hsl(0deg 0% 6%);
+
+ .line-number {
+ color: hsl(318deg 14% 44%);
}
- .subtle {
- color: hsl(314deg 19% 63%);
- }
-
- .stacktrace-more-info {
- background-color: hsl(312deg 7% 14%);
- }
-
- .code-context {
- color: hsl(314deg 27% 82%);
- background-color: hsl(312deg 7% 14%);
- box-shadow:
- inset 0 11px 10px -10px hsl(0deg 0% 6%),
- inset 0 -11px 10px -10px hsl(0deg 0% 6%);
-
- .line-number {
- color: hsl(318deg 14% 44%);
- }
-
- .focus-line {
- background-color: hsl(307deg 9% 19%);
- }
+ .focus-line {
+ background-color: hsl(307deg 9% 19%);
}
}
}