From f2b4480d766d9ad83fde6af129d01032c6d88f23 Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Tue, 29 Apr 2025 05:17:04 +0530 Subject: [PATCH] blueslip: Decouple blueslip error overlay from popup alerts. --- templates/zerver/app/index.html | 2 + templates/zerver/portico.html | 2 +- web/src/alert_popup.ts | 10 +- web/src/blueslip_stacktrace.ts | 2 +- web/styles/alerts.css | 239 +++++++++++++++++--------------- web/styles/dark_theme.css | 54 ++++---- 6 files changed, 171 insertions(+), 138 deletions(-) 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 --> +
+ -
+
{% 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%); } } }