Add debugging console
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
@if (debugging.enabled()) {
|
||||
@if (showLauncher()) {
|
||||
@if (launcherVariant() === 'floating') {
|
||||
<button
|
||||
type="button"
|
||||
class="fixed bottom-4 right-4 z-[80] inline-flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-lg transition-colors hover:bg-secondary"
|
||||
[class.bg-primary]="isOpen()"
|
||||
[class.text-primary-foreground]="isOpen()"
|
||||
[class.border-primary/50]="isOpen()"
|
||||
(click)="toggleConsole()"
|
||||
[attr.aria-expanded]="isOpen()"
|
||||
aria-label="Toggle debug console"
|
||||
title="Toggle debug console"
|
||||
>
|
||||
<ng-icon
|
||||
name="lucideBug"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
|
||||
@if (badgeCount() > 0) {
|
||||
<span
|
||||
class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold shadow-sm"
|
||||
[class.bg-destructive]="hasErrors()"
|
||||
[class.text-destructive-foreground]="hasErrors()"
|
||||
[class.bg-secondary]="!hasErrors()"
|
||||
[class.text-foreground]="!hasErrors()"
|
||||
>
|
||||
{{ formatBadgeCount(badgeCount()) }}
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
} @else if (launcherVariant() === 'compact') {
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex h-7 w-7 items-center justify-center rounded-lg transition-opacity hover:opacity-90"
|
||||
[class.bg-primary/20]="isOpen()"
|
||||
[class.text-primary]="isOpen()"
|
||||
[class.bg-secondary]="!isOpen()"
|
||||
[class.text-foreground]="!isOpen()"
|
||||
(click)="toggleConsole()"
|
||||
[attr.aria-expanded]="isOpen()"
|
||||
aria-label="Toggle debug console"
|
||||
title="Toggle debug console"
|
||||
>
|
||||
<ng-icon
|
||||
name="lucideBug"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
|
||||
@if (badgeCount() > 0) {
|
||||
<span
|
||||
class="absolute -right-1 -top-1 rounded-full px-1 py-0 text-[9px] font-semibold leading-tight shadow-sm"
|
||||
[class.bg-destructive]="hasErrors()"
|
||||
[class.text-destructive-foreground]="hasErrors()"
|
||||
[class.bg-secondary]="!hasErrors()"
|
||||
[class.text-foreground]="!hasErrors()"
|
||||
>
|
||||
{{ formatBadgeCount(badgeCount()) }}
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-secondary"
|
||||
[class.bg-secondary]="isOpen()"
|
||||
[class.text-foreground]="isOpen()"
|
||||
[class.text-muted-foreground]="!isOpen()"
|
||||
(click)="toggleConsole()"
|
||||
[attr.aria-expanded]="isOpen()"
|
||||
aria-label="Toggle debug console"
|
||||
title="Toggle debug console"
|
||||
>
|
||||
<ng-icon
|
||||
name="lucideBug"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
|
||||
@if (badgeCount() > 0) {
|
||||
<span
|
||||
class="absolute -right-1 -top-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none shadow-sm"
|
||||
[class.bg-destructive]="hasErrors()"
|
||||
[class.text-destructive-foreground]="hasErrors()"
|
||||
[class.bg-secondary]="!hasErrors()"
|
||||
[class.text-foreground]="!hasErrors()"
|
||||
>
|
||||
{{ formatBadgeCount(badgeCount()) }}
|
||||
</span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
@if (showPanel() && isOpen()) {
|
||||
<div class="pointer-events-none fixed inset-0 z-[79]">
|
||||
<section
|
||||
class="pointer-events-auto absolute flex min-h-0 flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl"
|
||||
[class.bottom-20]="!detached()"
|
||||
[class.right-4]="!detached()"
|
||||
[style.height.px]="panelHeight()"
|
||||
[style.width.px]="panelWidth()"
|
||||
[style.left.px]="detached() ? panelLeft() : null"
|
||||
[style.top.px]="detached() ? panelTop() : null"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="group absolute inset-y-0 left-0 z-[1] w-3 cursor-col-resize bg-transparent"
|
||||
(mousedown)="startWidthResize($event)"
|
||||
aria-label="Resize debug console width"
|
||||
>
|
||||
<span
|
||||
class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
|
||||
></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="group relative h-3 w-full cursor-row-resize bg-transparent"
|
||||
(mousedown)="startResize($event)"
|
||||
aria-label="Resize debug console"
|
||||
>
|
||||
<span
|
||||
class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
|
||||
></span>
|
||||
</button>
|
||||
|
||||
@if (detached()) {
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-8 w-full cursor-move items-center justify-center border-b border-border bg-background/70 px-4 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground transition-colors hover:bg-background"
|
||||
(mousedown)="startDrag($event)"
|
||||
aria-label="Move debug console"
|
||||
>
|
||||
Drag to move
|
||||
</button>
|
||||
}
|
||||
|
||||
<app-debug-console-toolbar
|
||||
[activeTab]="activeTab()"
|
||||
[detached]="detached()"
|
||||
[searchTerm]="searchTerm()"
|
||||
[selectedSource]="selectedSource()"
|
||||
[sourceOptions]="sourceOptions()"
|
||||
[levelState]="levelState()"
|
||||
[levelCounts]="levelCounts()"
|
||||
[visibleCount]="visibleCount()"
|
||||
[autoScroll]="autoScroll()"
|
||||
[networkSummary]="networkSummary()"
|
||||
(activeTabChange)="setActiveTab($event)"
|
||||
(detachToggled)="toggleDetached()"
|
||||
(searchTermChange)="updateSearchTerm($event)"
|
||||
(selectedSourceChange)="updateSelectedSource($event)"
|
||||
(levelToggled)="toggleLevel($event)"
|
||||
(autoScrollToggled)="toggleAutoScroll()"
|
||||
(clearRequested)="clearLogs()"
|
||||
(closeRequested)="closeConsole()"
|
||||
/>
|
||||
|
||||
@if (activeTab() === 'logs') {
|
||||
<app-debug-console-entry-list
|
||||
class="min-h-0 flex-1 overflow-hidden"
|
||||
[entries]="filteredEntries()"
|
||||
[autoScroll]="autoScroll()"
|
||||
/>
|
||||
} @else {
|
||||
<app-debug-console-network-map
|
||||
class="min-h-0 flex-1 overflow-hidden"
|
||||
[snapshot]="networkSnapshot()"
|
||||
/>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user