blueslip: Show more-info context in alert popup, if we have it.

web/src/blueslip_stacktrace.ts

@@ -128,8 +128,13 @@ export async function display_stacktrace(ex: Error): Promise<void> {
                 };
             }),
         );
+        let more_info: string | undefined;
+        if (ex instanceof BlueslipError) {
+            more_info = JSON.stringify(ex.more_info, null, 4);
+        }
         errors.push({
             message: exception_msg(ex),
+            more_info,
             stackframes,
         });
 

web/styles/alerts.css

@@ -77,6 +77,16 @@ $alert-error-red: hsl(0deg 80% 40%);
             }
         }
 
+        .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;

web/styles/dark_theme.css

@@ -1218,6 +1218,10 @@
                 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%);

web/templates/blueslip_stacktrace.hbs

@@ -8,6 +8,9 @@
             <div class="exit"></div>
         {{/if}}
     </div>
+    {{#if more_info}}
+        <div class="stacktrace-more-info">{{more_info}}</div>
+    {{/if}}
     <div class="stacktrace-content">
         {{#each stackframes}}
             <div data-full-path="{{ full_path }}" data-line-no="{{ line_number }}">