From d22df7fd3cdf9ec24d121dd6eeb6191b1b83d0c0 Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Thu, 16 Nov 2023 22:36:04 +0100
Subject: [PATCH] Show/hide stack frames

---
 events/templates/events/event_detail.html | 56 +++++++++++++----------
 static/js/issue.js                        | 13 ++++++
 theme/static/css/dist/styles.css          |  8 ++++
 theme/templates/base.html                 |  6 ++-
 4 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 static/js/issue.js

diff --git a/events/templates/events/event_detail.html b/events/templates/events/event_detail.html
index caa5ece..fde92f9 100644
--- a/events/templates/events/event_detail.html
+++ b/events/templates/events/event_detail.html
@@ -1,4 +1,5 @@
 {% extends "events/base.html" %}
+{% load static %}
 
 {% block content %}
 <div class="m-4">
@@ -24,46 +25,47 @@
 {# <div class="font-bold">Stacktrace:</div> I think this is obvious?#}
 {% for exception in exceptions %}
     {# option: make multi-exception stacktraces more clear <div class="border-l-4 border-cyan-500 pl-4"> }#}
-    <h1 class="text-2xl {% if forloop.counter0 > 0 %}mt-4{% endif %}">{{ exception.type }}</h1>  {# potentially: hide this whole block if there is only a single exception #}
-    <div class="text-lg">{{ exception.value }}</div>
+    <h1 class="text-2xl font-bold {% if forloop.counter0 > 0 %}mt-4{% endif %}">{{ exception.type }}</h1>  {# potentially: hide this whole block if there is only a single exception #}
+    <div class="text-lg mb-4">{{ exception.value }}</div>
 
     {% for frame in exception.stacktrace.frames %}
         
-        <div class="xl:flex">
+        <div class="bg-white w-full font-mono">
 
-        <div class="mt-4 mb-4 bg-white xl:w-1/2">
+            <div class="pl-4 pt-2 pb-2 border-t-2 {% if frame.in_app %}bg-slate-300 border-slate-500{% else %}bg-white border-slate-300{% endif %}" onclick="toggleFrameVisibility(this)">
+                <span class="font-bold">{{ frame.filename }}</span> in <span class="font-bold">{{ frame.function }}</span> line <span class="font-bold">{{ frame.lineno }}</span>.
+            </div>
 
-            <div class="font-mono">
-                <div class="pl-4 pt-2 pb-2 border-b-2 {% if frame.in_app %}bg-slate-300 border-slate-500{% else %}bg-white border-slate-300{% endif %}">
-                    <span class="font-bold">{{ frame.filename }}</span> in <span class="font-bold">{{ frame.function }}</span> line <span class="font-bold">{{ frame.lineno }}</span>.
+            <div class="js-frame-details hidden">
+                <div class="xl:w-1/2">
+                    <ol class="list-decimal ml-16 mt-6 mb-6" start="100">
+                    {% for line in frame.pre_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
+                    <li><div class="whitespace-pre font-bold bg-slate-300 w-full">{{ frame.context_line }} {# leave space to avoid collapse #}</div></li>
+                    {% for line in frame.post_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
+                    </ol>
                 </div>
 
-                <ol class="list-decimal ml-16 mt-6 mb-6" start="100">
-                {% for line in frame.pre_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
-                <li><div class="whitespace-pre font-bold bg-slate-300 w-full">{{ frame.context_line }} {# leave space to avoid collapse #}</div></li>
-                {% for line in frame.post_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
-                </ol>
+                <div class="xl:w-1/2">
+                    <div class="flex">
+                        <div class="w-1/4 pt-2 pl-2 font-bold border-b-2 border-slate-500">Variable</div>
+                        <div class="w-3/4 pt-2 font-bold border-b-2 border-slate-500">Value</div>
+                    </div>
+                    {% for var, value in frame.vars.items %}
+                    <div class="flex {% if forloop.last %}mb-4{% endif %}">
+                        <div class="w-1/4 pl-2 {% if not forloop.counter|divisibleby:2 %}bg-slate-200{% endif %}">{{ var }}</div>
+                        <div class="w-3/4 {% if not forloop.counter|divisibleby:2 %}bg-slate-200{% endif %}">{{ value }}</div>
+                    </div>
+                    {% endfor %} 
+                </div>
             </div>
 
         </div>
-        <div class="mt-4 xl:ml-4 mb-12 p-4 bg-white xl:w-1/2">
-            
-            {% for var, value in frame.vars.items %}
-            <div class="flex">
-                <div class="w-1/4 pl-2 {% if not forloop.counter|divisibleby:2 %}bg-slate-200{% endif %}">{{ var }}</div>
-                <div class="w-3/4 {% if not forloop.counter|divisibleby:2 %}bg-slate-200{% endif %}">{{ value }}</div>
-            </div>
-            {% endfor %} 
-
-        </div>
-
-        </div>
 
     {% endfor %}
     {# </div> #} {# per-exception div in the multi-exception case #}
 
     {% if not forloop.last %}
-        <div class="italic">During handling of the above exception, another exception occurred:</div>
+        <div class="italic pt-4">During handling of the above exception, another exception occurred:</div>
         {# note: the above is specific to Python. In Python there's also "The above exception was the direct cause of the following exception:" (raise ... from) but we cannot distinguish those at this level because the info is lost #}
     {% endif %}
 
@@ -129,3 +131,7 @@ Issue grouper: <span class="font-mono whitespace-pre">"{{ issue_grouper }}"</spa
 <div class="p-4 bg-slate-200 border-b-2">Event 55 out of 55 which occured at <span class="font-bold">{{ event.timestamp }}</span> (most recent)</div>
 </div>  {# the border #}
 {% endblock %}
+
+{% block extra_js %}
+    <script src="{% static 'js/issue.js' %}"></script>
+{% endblock %}
diff --git a/static/js/issue.js b/static/js/issue.js
new file mode 100644
index 0000000..bdd398c
--- /dev/null
+++ b/static/js/issue.js
@@ -0,0 +1,13 @@
+"use strict";
+
+function toggleFrameVisibility(frameHeader) {
+    const frameDetails = frameHeader.parentNode.querySelector(".js-frame-details");
+    console.log("FD", frameDetails);
+    if (frameDetails.classList.contains("hidden")) {
+        frameDetails.classList.remove("hidden");
+        frameDetails.classList.add("xl:flex");  // add back
+    } else {
+        frameDetails.classList.add("hidden");
+        frameDetails.classList.remove("xl:flex");  // this appears to be necessary, not sure why
+    }
+}
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index b261a0f..4972f12 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -755,6 +755,10 @@ select {
   visibility: visible;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .collapse {
   visibility: collapse;
 }
@@ -940,6 +944,10 @@ select {
   border-left-width: 4px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-slate-300 {
   --tw-border-opacity: 1;
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 7a9a3f9..9ab6b27 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -1,10 +1,10 @@
-{% load static tailwind_tags %}
-<!DOCTYPE html>
+{% load static tailwind_tags %}<!DOCTYPE html>
 <html lang="en">
 	<head>
     <title>{% block title %}Bugsink{% endblock %}</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+        
 		{% tailwind_css %}
 	</head>
 
@@ -17,5 +17,7 @@
         <div>
             {% block content %}{% endblock %}
         </div>
+
+    {% block extra_js %}{% endblock %}
     </body>
 </html>