paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-22 20:42:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

blueslip: Decouple blueslip error overlay from popup alerts.

Browse Source
This commit is contained in:
Sayam Samal
2025-04-29 05:17:04 +05:30
committed by Tim Abbott
parent 9008e35acb
commit f2b4480d76
6 changed files with 171 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/zerver/app/index.html
View File

@@ -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>

2
templates/zerver/portico.html
View File

@@ -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 %}

10
web/src/alert_popup.ts
View File

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

2
web/src/blueslip_stacktrace.ts
View File

@@ -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");
}

239
web/styles/alerts.css
View File

@@ -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% {

54
web/styles/dark_theme.css
View File

@@ -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%);
}
}
}