feat: hide native frames and add toggle to view them

Closes: #57
poppinss · Jan 17, 2025 · 9a627dd · 9a627dd
1 parent de74a5a
commit 9a627dd
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 31 deletions.
diff --git a/src/public/error_stack/script.js b/src/public/error_stack/script.js
@@ -32,13 +32,28 @@ function toggleFrameSource(parent) {
   }
 }
 
+function toggleAllFrames() {
+  const wrapper = document.querySelector('#stack-frames-wrapper')
+  const indicator = document.querySelector('#all-frames-toggle input[type="checkbox"]')
+  if (indicator.checked) {
+    wrapper.classList.add('display-all')
+  } else {
+    wrapper.classList.remove('display-all')
+  }
+}
+
 window.addEventListener('DOMContentLoaded', () => {
   document.querySelector('#formatted-frames-toggle').addEventListener('click', function () {
     showFormattedFrames(this)
   })
   document.querySelector('#raw-frames-toggle').addEventListener('click', function () {
     showRawFrames(this)
   })
+  document
+    .querySelector('#all-frames-toggle input[type="checkbox"]')
+    .addEventListener('change', function () {
+      toggleAllFrames()
+    })
 
   document.querySelectorAll('button[class="stack-frame-location"]').forEach((sfl) => {
     sfl.addEventListener('click', function (e) {

diff --git a/src/public/error_stack/style.css b/src/public/error_stack/style.css
@@ -15,27 +15,49 @@ html.dark {
   --switch-border: var(--slate-7);
 }
 
-#stack-frames {
-  list-style: none;
+#stack-frames-wrapper {
   border: 1px solid var(--border);
   border-radius: var(--radius);
 }
 
+#stack-frames-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+#all-frames-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  user-select: none;
+}
+
+#stack-frames {
+  list-style: none;
+}
+
 .stack-frame {
   border-top: 1px solid var(--border);
   font-size: 14px;
 }
-.stack-frame:first-child {
-  border-top: none;
-}
 .stack-frame.stack-frame-native {
+  display: none;
   font-style: italic;
 }
 .stack-frame.stack-frame-native a,
 .stack-frame.stack-frame-native code {
   color: var(--muted-fg);
 }
 
+#stack-frames-wrapper.display-all .stack-frame.stack-frame-native {
+  display: block;
+}
+
 .stack-frame-contents {
   background: var(--frame-bg);
   display: flex;
@@ -46,9 +68,6 @@ html.dark {
 .stack-frame:not(.stack-frame-native) .stack-frame-contents:hover {
   background: var(--card-bg);
 }
-.stack-frame:first-child .stack-frame-contents {
-  border-radius: var(--radius) var(--radius) 0 0;
-}
 .stack-frame:last-child:not(.expanded) .stack-frame-contents {
   border-radius: 0 0 var(--radius) var(--radius);
 }
@@ -132,8 +151,6 @@ html.dark {
 
 #stack-frames-raw {
   --pre-bg-color: transparent;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
 }
 #stack-frames-formatted,
 #stack-frames-raw {

diff --git a/src/templates/error_stack/main.ts b/src/templates/error_stack/main.ts
@@ -199,29 +199,43 @@ export class ErrorStack extends BaseComponent<ErrorStackProps> {
               Stack Trace
             </h3>
           </div>
-          <div>
-            <div class="toggle-switch">
-              <button id="formatted-frames-toggle" class="active"> Pretty </button>
-              <button id="raw-frames-toggle"> Raw </button>
-            </div>
-          </div>
         </div>
         <div class="card-body">
-          <div id="stack-frames-formatted" class="visible">
-            <ul id="stack-frames">
-              ${frames.join('\n')}
-            </ul>
-          </div>
-          <div id="stack-frames-raw">
-            ${dump(props.error.raw, {
-              styles: themes.cssVariables,
-              expand: true,
-              cspNonce: props.cspNonce,
-              inspectObjectPrototype: false,
-              inspectStaticMembers: false,
-              inspectArrayPrototype: false,
-            })}
-          </div>
+          <div id="stack-frames-wrapper">
+            <div id="stack-frames-header">
+              <div id="all-frames-toggle-wrapper">
+                <label id="all-frames-toggle">
+                  <input type="checkbox" />
+                  <span> View All Frames </span>
+                </label>
+              </div>
+
+              <div>
+                <div class="toggle-switch">
+                  <button id="formatted-frames-toggle" class="active"> Pretty </button>
+                  <button id="raw-frames-toggle"> Raw </button>
+                </div>
+              </div>
+            </div>
+
+            <div id="stack-frames-body">
+              <div id="stack-frames-formatted" class="visible">
+                <ul id="stack-frames">
+                  ${frames.join('\n')}
+                </ul>
+              </div>
+              <div id="stack-frames-raw">
+                ${dump(props.error.raw, {
+                  styles: themes.cssVariables,
+                  expand: true,
+                  cspNonce: props.cspNonce,
+                  inspectObjectPrototype: false,
+                  inspectStaticMembers: false,
+                  inspectArrayPrototype: false,
+                })}
+              </div>
+            </div>
+          <div>
         </div>
       </div>
     </section>`