blueslip: Decouple blueslip error overlay from popup alerts.

templates/zerver/app/index.html

@@ -205,6 +205,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1943053 -->
     </div>
 </div>
 
+<div class="blueslip-error-container"></div>
+
 <div id="navbar-fixed-container">
     <div id="navbar_alerts_wrapper" class="banner-wrapper"></div>
     <div id="header-container"></div>

templates/zerver/portico.html

@@ -20,7 +20,7 @@ hence the name.
             </div>
         </div>
     </div>
-    <div class="alert-box"></div>
+    <div class="blueslip-error-container"></div>
     {% if not isolated_page and not skip_footer %}
     {% include 'zerver/footer.html' %}
     {% endif %}

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);
+});

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 = $("<div>").addClass("stacktrace").html(render_blueslip_stacktrace({errors}));
-    $(".alert-box").append($alert);
+    $(".blueslip-error-container").append($alert);
     $alert.addClass("show");
 }

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,9 +66,105 @@
     justify-content: center;
     gap: 5px;
 
+    .alert {
+        @extend .alert-animations;
+
+        box-sizing: border-box;
+        max-width: 900px;
+        width: 100%;
+        border-radius: 4px;
+        background-color: hsl(0deg 0% 100%);
+        pointer-events: auto;
+
+        position: relative;
+
+        /* gives room for the error icon and the exit button. */
+        padding: 10px 50px;
+
+        text-shadow: none;
+
+        color: var(--color-alert-red);
+        border: 1px solid var(--color-alert-red);
+        box-shadow: 0 0 2px var(--color-alert-red);
+
+        &::before {
+            float: left;
+            margin-left: -38px;
+
+            font-family: FontAwesome;
+            font-size: 1.3em;
+            line-height: 1;
+            overflow: hidden;
+            content: "\f071";
+
+            color: hsl(16deg 60% 55%);
+        }
+
+        &::after {
+            clear: both;
+            content: "";
+            display: table;
+        }
+
+        &.alert-error {
+            color: var(--color-alert-error-red);
+            border: 1px solid var(--color-alert-error-red);
+            box-shadow: 0 0 2px var(--color-alert-error-red);
+
+            &::before {
+                color: var(--color-alert-error-red);
+            }
+        }
+
+        .exit {
+            float: right;
+            margin: -10px -50px -10px 0;
+            padding: 13px 10px;
+
+            font-size: 2.5em;
+            font-weight: 300;
+            line-height: 1ex;
+            overflow: hidden;
+
+            cursor: pointer;
+
+            &::after {
+                content: "\d7";
+            }
+        }
+    }
+}
+
+.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%);
@@ -175,75 +265,6 @@
     }
 }
 
-    .alert {
-        @extend .alert-animations;
-
-        box-sizing: border-box;
-        max-width: 900px;
-        width: 100%;
-        border-radius: 4px;
-        background-color: hsl(0deg 0% 100%);
-        pointer-events: auto;
-
-        position: relative;
-
-        /* gives room for the error icon and the exit button. */
-        padding: 10px 50px;
-
-        text-shadow: none;
-
-        color: var(--color-alert-red);
-        border: 1px solid var(--color-alert-red);
-        box-shadow: 0 0 2px var(--color-alert-red);
-
-        &::before {
-            float: left;
-            margin-left: -38px;
-
-            font-family: FontAwesome;
-            font-size: 1.3em;
-            line-height: 1;
-            overflow: hidden;
-            content: "\f071";
-
-            color: hsl(16deg 60% 55%);
-        }
-
-        &::after {
-            clear: both;
-            content: "";
-            display: table;
-        }
-
-        &.alert-error {
-            color: var(--color-alert-error-red);
-            border: 1px solid var(--color-alert-error-red);
-            box-shadow: 0 0 2px var(--color-alert-error-red);
-
-            &::before {
-                color: var(--color-alert-error-red);
-            }
-        }
-
-        .exit {
-            float: right;
-            margin: -10px -50px -10px 0;
-            padding: 13px 10px;
-
-            font-size: 2.5em;
-            font-weight: 300;
-            line-height: 1ex;
-            overflow: hidden;
-
-            cursor: pointer;
-
-            &::after {
-                content: "\d7";
-            }
-        }
-    }
-}
-
 /* animation section */
 @keyframes fadeIn {
     0% {

web/styles/dark_theme.css

@@ -318,9 +318,12 @@
         .alert.alert-error::before {
             color: hsl(0deg 75% 65%);
         }
+    }
 
     .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%);
@@ -350,7 +353,6 @@
             }
         }
     }
-    }
 
     #user-profile-modal {
         #default-section {