From 2de91c998c9cf1df53d0e9a2d335a3f3bf02707d Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Sat, 30 Mar 2024 22:40:46 +0100
Subject: [PATCH] Show-raise; bigger show x buttons

---
 issues/templates/issues/issue_stacktrace.html |  9 +++++----
 static/js/issue_stacktrace.js                 | 12 ++++++++++++
 theme/static/css/dist/styles.css              |  8 ++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/issues/templates/issues/issue_stacktrace.html b/issues/templates/issues/issue_stacktrace.html
index b31ee9e..6cd2ff1 100644
--- a/issues/templates/issues/issue_stacktrace.html
+++ b/issues/templates/issues/issue_stacktrace.html
@@ -17,9 +17,10 @@
         {% if forloop.counter0 == 0 %}
         <div class="ml-auto flex-none">
             <div class="flex place-content-end">
-                <button class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="showAllFrames()">Show all</button>
-                <button class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="showInAppFrames()">Show in-app</button>
-                <button class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="hideAllFrames()">Hide all</button>
+                <button class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="showAllFrames()">Show all</button>
+                <button class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="showInAppFrames()">Show in-app</button>
+                <button class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="showRaisingFrame()">Show raise</button>
+                <button class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 active:ring" onclick="hideAllFrames()">Hide all</button>
             </div>
         </div>
         {% endif %}
@@ -47,7 +48,7 @@
                 </div>
             </div> {# per frame header div #}
 
-            <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} border-slate-400 overflow-hidden transition-all" 
+            <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} border-slate-400 overflow-hidden transition-all {% if forloop.parentloop.last and forloop.last %}js-raising-frame{% endif %}" 
                 {% if not forloop.parentloop.last or not forloop.last %}data-collapsed="true" style="height: 0px"{% endif %}> {# collapsable part #}
 
                 <div class="pl-6 pr-6 pt-8 {% if not forloop.last %}border-b-2 border-slate-400{% endif %}">{# convience div for padding & border; the border is basically the top-border of the next header #}
diff --git a/static/js/issue_stacktrace.js b/static/js/issue_stacktrace.js
index 337ffa5..f922c35 100644
--- a/static/js/issue_stacktrace.js
+++ b/static/js/issue_stacktrace.js
@@ -119,6 +119,18 @@ function showInAppFrames() {
     });
 }
 
+function showRaisingFrame() {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        if (frameDetails.classList.contains("js-raising-frame")) {
+            expandSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.add("rotate-180");
+        } else {
+            collapseSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.remove("rotate-180");
+        }
+    });
+}
+
 function hideAllFrames() {
     document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
         collapseSection(frameDetails);
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index cb1b220..1966e2d 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -1303,6 +1303,14 @@ select {
   padding-top: 2rem;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .text-left {
   text-align: left;
 }