Show/hide all

events/templates/events/event_detail.html

@@ -22,6 +22,12 @@
 
 <div class="p-4 bg-slate-50">
 
+<div class="flex place-content-end">
+    <div class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 cursor-pointer" onclick="showAllFrames()">Show all</div>
+    <div class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 cursor-pointer" onclick="showInAppFrames()">Show in-app</div>
+    <div class="font-bold text-slate-500 border-slate-300 pl-2 pr-2 mr-2 border-2 rounded-md hover:bg-slate-200 cursor-pointer" onclick="hideAllFrames()">Hide all</div>
+</div>
+
 {# <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"> }#}
@@ -32,11 +38,11 @@
         
         <div class="bg-white w-full font-mono">
 
-            <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)">
+            <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 %} cursor-pointer" 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="js-frame-details hidden">
+            <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} {% if not forloop.last %}hidden{% else %}xl:flex{% endif %}"> {# todo this still shows the last frame of non-last exceptions, I just want the very last one #}
                 <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 %}

static/js/issue.js

@@ -2,7 +2,6 @@
 
 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
@@ -11,3 +10,30 @@ function toggleFrameVisibility(frameHeader) {
         frameDetails.classList.remove("xl:flex");  // this appears to be necessary, not sure why
     }
 }
+
+
+function showAllFrames(frameHeader) {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        frameDetails.classList.remove("hidden");
+        frameDetails.classList.add("xl:flex");
+    });
+}
+
+function showInAppFrames(frameHeader) {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        if (frameDetails.classList.contains("js-in-app")) {
+            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
+        }
+    });
+}
+
+function hideAllFrames(frameHeader) {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        frameDetails.classList.add("hidden");
+        frameDetails.classList.remove("xl:flex");  // this appears to be necessary, not sure why
+    });
+}

theme/static/css/dist/styles.css

@@ -900,14 +900,26 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .list-decimal {
   list-style-type: decimal;
 }
 
+.place-content-end {
+  place-content: end;
+}
+
 .content-start {
   align-content: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -916,10 +928,26 @@ select {
   justify-content: center;
 }
 
+.justify-items-end {
+  justify-items: end;
+}
+
 .whitespace-pre {
   white-space: pre;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -973,6 +1001,11 @@ select {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-slate-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1065,6 +1098,14 @@ select {
   padding-bottom: 1.25rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1143,6 +1184,11 @@ select {
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }