mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
77b5eed024
Extract all colors from the stylesheets, reduce their number by merging the similar ones and organize them into themes represented by CSS variables. PR Close #60374
62 lines
1.9 KiB
HTML
62 lines
1.9 KiB
HTML
<div class="profiler-wrapper">
|
|
<mat-card>
|
|
@if (state() === 'idle') {
|
|
<button
|
|
mat-icon-button
|
|
color="primary"
|
|
(click)="startRecording()"
|
|
class="profiler-control start-recording-button"
|
|
matTooltip="Start recording"
|
|
>
|
|
<mat-icon> circle </mat-icon>
|
|
</button>
|
|
} @else if (state() === 'recording') {
|
|
<button
|
|
mat-icon-button
|
|
(click)="stopRecording()"
|
|
class="profiler-control recording-button"
|
|
matTooltip="Stop recording"
|
|
>
|
|
<mat-icon> circle </mat-icon>
|
|
</button>
|
|
} @else if (state() === 'visualizing') {
|
|
<button
|
|
mat-icon-button
|
|
color="primary"
|
|
(click)="discardRecording()"
|
|
class="profiler-control discard-button"
|
|
matTooltip="Clear recording"
|
|
>
|
|
<mat-icon> not_interested </mat-icon>
|
|
</button>
|
|
}
|
|
<p class="instructions" [class.hidden]="state() !== 'idle'">
|
|
<span>
|
|
Click the record button to start a new recording, or upload a JSON file containing profiler
|
|
data.
|
|
</span>
|
|
<br />
|
|
<span>
|
|
<input
|
|
type="file"
|
|
(change)="importProfilerResults($event)"
|
|
placeholder="Upload file"
|
|
accept=".json"
|
|
/>
|
|
</span>
|
|
</p>
|
|
<p class="instructions" [class.hidden]="state() !== 'recording'">
|
|
Interact to preview change detection. Clicking stop ends this Profiler recording.
|
|
</p>
|
|
<p class="instructions" [class.hidden]="state() !== 'visualizing'">
|
|
Click Save Profile to save your recording or click refresh to clear the current recording.
|
|
</p>
|
|
</mat-card>
|
|
<div id="profiler-content-wrapper">
|
|
@if (state() !== 'idle') {
|
|
<div class="visualization">
|
|
<ng-recording-timeline [stream]="stream" (exportProfile)="exportProfilerResults()" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|