Skip to content

Commit f2dbe38

Browse files
lmajanolmajano
committed
much better ui
1 parent e8e6786 commit f2dbe38

3 files changed

Lines changed: 78 additions & 65 deletions

File tree

‎system/exceptions/Whoops.cfm‎

Lines changed: 22 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -341,61 +341,29 @@ An enhanced error reporting and debugging tool for ColdBox Framework
341341
<div>
342342
<h2 class="details-heading">
343343
Exception Details
344-
<!--- Only Show Code Preview Button in Debug Mode --->
345-
<cfif stackFrames gt 0 AND local.inDebugMode>
346-
<a href="javascript:void(0);" onclick="toggleCodePreview()" class="button button-icononly" style="margin-left: auto;" title="Toggle Code Preview">
347-
<i id="codetoggle-up" data-eva="arrowhead-up-outline"></i>
348-
<i id="codetoggle-down" class="hidden" data-eva="arrowhead-down-outline"></i>
349-
</a>
350-
</cfif>
344+
<div class="control-bar">
345+
<select id="scope-filter" onchange="filterScopesFromDropdown(this)" class="scope-dropdown" title="Filter Scopes">
346+
<option value="">📊 Show All Scopes</option>
347+
<option value="eventdetails">❌ Error Details</option>
348+
<option value="serverinfo_scope">🏗️ Server Info</option>
349+
<option value="database_scope">🗄️ Database</option>
350+
<option value="rc_scope">📨 Request Collection (RC)</option>
351+
<option value="prc_scope">📬 Private Request Collection (PRC)</option>
352+
<option value="headers_scope">📋 Headers</option>
353+
<option value="session_scope">👤 Session</option>
354+
<option value="application_scope">🏢 Application</option>
355+
<option value="cookies_scope">🍪 Cookies</option>
356+
<option value="stacktrace_scope">📚 Stacktrace</option>
357+
</select>
358+
<!--- Only Show Code Preview Button in Debug Mode --->
359+
<cfif stackFrames gt 0 AND local.inDebugMode>
360+
<a href="javascript:void(0);" onclick="toggleCodePreview()" class="button button-icononly" title="Toggle Code Preview">
361+
<i id="codetoggle-up" data-eva="arrowhead-up-outline"></i>
362+
<i id="codetoggle-down" class="hidden" data-eva="arrowhead-down-outline"></i>
363+
</a>
364+
</cfif>
365+
</div>
351366
</h2>
352-
<div class="data-filter" title="Filter Scopes">
353-
<i data-eva="funnel-outline" fill="white"></i>
354-
<a
355-
class="button all active"
356-
href="javascript:void(0);"
357-
onclick="filterScopes( this, '' );">📊 All</a>
358-
<a
359-
class="button eventdetails"
360-
href="javascript:void(0);"
361-
onclick="filterScopes( this, 'eventdetails' );">❌ Error</a>
362-
<a
363-
class="button serverinfo_scope"
364-
href="javascript:void(0);"
365-
onclick="filterScopes( this, 'serverinfo_scope' );">🏗️ Server info</a>
366-
<a
367-
class="button database_scope"
368-
href="javascript:void(0);"
369-
onclick="filterScopes( this, 'database_scope' );">🗄️ Database</a>
370-
<a
371-
class="button rc_scope"
372-
href="javascript:void(0);"
373-
onclick="filterScopes( this, 'rc_scope' );">📨 RC</a>
374-
<a
375-
class="button prc_scope"
376-
href="javascript:void(0);"
377-
onclick="filterScopes( this, 'prc_scope' );">📬 PRC</a>
378-
<a
379-
class="button headers_scope"
380-
href="javascript:void(0);"
381-
onclick="filterScopes( this, 'headers_scope' );">📋 Headers</a>
382-
<a
383-
class="button session_scope"
384-
href="javascript:void(0);"
385-
onclick="filterScopes( this, 'session_scope' );">👤 Session</a>
386-
<a
387-
class="button application_scope"
388-
href="javascript:void(0);"
389-
onclick="filterScopes( this, 'application_scope' );">🏢 Application</a>
390-
<a
391-
class="button cookies_scope"
392-
href="javascript:void(0);"
393-
onclick="filterScopes( this, 'cookies_scope' );">🍪 Cookies</a>
394-
<a
395-
class="button stacktrace_scope"
396-
href="javascript:void(0);"
397-
onclick="filterScopes( this, 'stacktrace_scope' );">📚 Stacktrace</a>
398-
</div>
399367
</div>
400368

401369
<!----------------------------------------------------------------------------------------->

‎system/exceptions/css/whoops.css‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,7 @@ a.button-icononly {
515515
padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-lg);
516516
display: flex;
517517
align-items: center;
518+
justify-content: space-between;
518519
gap: var(--spacing-sm);
519520
background: var(--bg-panel);
520521
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -523,21 +524,41 @@ a.button-icononly {
523524
z-index: 5;
524525
}
525526

526-
/* Data Filter */
527-
.data-filter {
527+
.control-bar {
528528
display: flex;
529529
align-items: center;
530-
gap: var(--spacing-sm);
531-
padding: var(--spacing-lg);
530+
gap: var(--spacing-md);
531+
margin-left: auto;
532+
}
533+
534+
.scope-dropdown {
535+
background: var(--bg-darker);
536+
color: var(--text-light);
537+
border: 1px solid rgba(255, 255, 255, 0.2);
538+
border-radius: 6px;
539+
padding: var(--spacing-xs) var(--spacing-sm);
540+
font-size: var(--text-xs);
541+
font-family: var(--font-ui);
542+
min-width: 180px;
543+
cursor: pointer;
544+
transition: all var(--transition-fast);
545+
}
546+
547+
.scope-dropdown:hover {
548+
border-color: var(--accent-teal);
532549
background: var(--bg-panel);
533-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
534-
font-size: var(--text-sm);
535-
flex-wrap: wrap;
536550
}
537551

538-
.data-filter i {
539-
margin-right: var(--spacing-sm);
540-
opacity: 0.8;
552+
.scope-dropdown:focus {
553+
outline: 2px solid var(--accent-teal);
554+
outline-offset: 2px;
555+
border-color: var(--accent-teal);
556+
}
557+
558+
.scope-dropdown option {
559+
background: var(--bg-darker);
560+
color: var(--text-light);
561+
padding: var(--spacing-xs);
541562
}
542563

543564
/* Data Tables */
@@ -552,7 +573,7 @@ a.button-icononly {
552573
font-size: 1rem;
553574
color: var(--success-green);
554575
font-weight: 600;
555-
margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
576+
margin: var(--spacing-lg) 0 var(--spacing-sm) var(--spacing-sm);
556577
padding-bottom: var(--spacing-sm);
557578
border-bottom: 2px solid rgba(192, 209, 76, 0.3);
558579
}

‎system/exceptions/js/whoops.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,30 @@ function filterScopes(linkEl, filterID ) {
162162
document.getElementById('request-info-details').scrollTop = 0;
163163
}
164164

165+
/**
166+
* Handles dropdown-based filtering for scope sections
167+
* @param {HTMLSelectElement} selectEl - The dropdown select element
168+
*/
169+
function filterScopesFromDropdown(selectEl) {
170+
var filterID = selectEl.value;
171+
var sections = document.querySelectorAll('div.data-table');
172+
173+
if(filterID != ""){
174+
// Hide all sections and show only the selected one
175+
for (var i = 0; i < sections.length; i++){
176+
sections[i].classList.add('hidden');
177+
}
178+
document.getElementById(filterID).classList.remove('hidden');
179+
} else {
180+
// Show all sections when no filter is selected
181+
for (var i = 0; i < sections.length; i++){
182+
sections[i].classList.remove('hidden');
183+
}
184+
}
185+
// Reset scroll position to top after filtering
186+
document.getElementById('request-info-details').scrollTop = 0;
187+
}
188+
165189
/**
166190
* Copies the text content of a specified element to the system clipboard
167191
* Supports both Internet Explorer and modern browsers with different clipboard APIs

0 commit comments

Comments
 (0)