@ng-prism/plugin-perf 21.6.0 → 21.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle/bundle-section.component.d.ts +4 -5
- package/dist/bundle/bundle-section.component.d.ts.map +1 -1
- package/dist/bundle/bundle-section.component.js +204 -197
- package/dist/memory/memory-section.component.d.ts +2 -1
- package/dist/memory/memory-section.component.d.ts.map +1 -1
- package/dist/memory/memory-section.component.js +141 -181
- package/dist/perf-panel.component.d.ts.map +1 -1
- package/dist/perf-panel.component.js +90 -128
- package/dist/render/render-section.component.d.ts +1 -1
- package/dist/render/render-section.component.d.ts.map +1 -1
- package/dist/render/render-section.component.js +110 -117
- package/dist/render/sparkline.component.d.ts.map +1 -1
- package/dist/render/sparkline.component.js +12 -12
- package/package.json +1 -1
|
@@ -6,99 +6,81 @@ import { BundleSectionComponent } from './bundle/bundle-section.component.js';
|
|
|
6
6
|
import { RenderSectionComponent } from './render/render-section.component.js';
|
|
7
7
|
import { MemorySectionComponent } from './memory/memory-section.component.js';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
|
-
function
|
|
10
|
-
i0.ɵɵelementStart(0, "
|
|
9
|
+
function PerfPanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
10
|
+
i0.ɵɵelementStart(0, "span", 3);
|
|
11
11
|
i0.ɵɵtext(1);
|
|
12
12
|
i0.ɵɵelementEnd();
|
|
13
13
|
} if (rf & 2) {
|
|
14
14
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
15
15
|
i0.ɵɵadvance();
|
|
16
|
-
i0.ɵɵtextInterpolate1("
|
|
16
|
+
i0.ɵɵtextInterpolate1("", ctx_r0.renderService.cdRunCount(), " CD runs");
|
|
17
17
|
} }
|
|
18
|
-
function
|
|
18
|
+
function PerfPanelComponent_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
19
19
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
20
|
-
i0.ɵɵelementStart(0, "button",
|
|
21
|
-
i0.ɵɵlistener("click", function
|
|
22
|
-
i0.ɵɵ
|
|
23
|
-
i0.ɵɵtext(2, "\u23F8");
|
|
24
|
-
i0.ɵɵelementEnd();
|
|
25
|
-
i0.ɵɵtext(3, " Pause ");
|
|
20
|
+
i0.ɵɵelementStart(0, "button", 10);
|
|
21
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.renderService.stopRecording()); });
|
|
22
|
+
i0.ɵɵtext(1, " \u23F8 Pause ");
|
|
26
23
|
i0.ɵɵelementEnd();
|
|
27
24
|
} }
|
|
28
|
-
function
|
|
25
|
+
function PerfPanelComponent_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
29
26
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
30
|
-
i0.ɵɵelementStart(0, "button",
|
|
31
|
-
i0.ɵɵlistener("click", function
|
|
32
|
-
i0.ɵɵ
|
|
33
|
-
i0.ɵɵtext(2, "\u25B6");
|
|
34
|
-
i0.ɵɵelementEnd();
|
|
35
|
-
i0.ɵɵtext(3, " Profile ");
|
|
27
|
+
i0.ɵɵelementStart(0, "button", 10);
|
|
28
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.renderService.startRecording()); });
|
|
29
|
+
i0.ɵɵtext(1, " \u25B6 Profile ");
|
|
36
30
|
i0.ɵɵelementEnd();
|
|
37
31
|
} }
|
|
38
|
-
function
|
|
39
|
-
i0.ɵɵelementStart(0, "
|
|
40
|
-
i0.ɵɵelement(1, "
|
|
32
|
+
function PerfPanelComponent_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
33
|
+
i0.ɵɵelementStart(0, "span", 11);
|
|
34
|
+
i0.ɵɵelement(1, "span", 12);
|
|
41
35
|
i0.ɵɵtext(2);
|
|
42
36
|
i0.ɵɵelementEnd();
|
|
43
37
|
} if (rf & 2) {
|
|
44
38
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
45
39
|
i0.ɵɵadvance(2);
|
|
46
|
-
i0.ɵɵtextInterpolate1(" live \u00B7 ", ctx_r0.renderService.sampleCount(), " samples
|
|
40
|
+
i0.ɵɵtextInterpolate1(" live \u00B7 ", ctx_r0.renderService.sampleCount(), " samples");
|
|
47
41
|
} }
|
|
48
|
-
function
|
|
42
|
+
function PerfPanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
49
43
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
50
|
-
i0.ɵɵelementStart(0, "div",
|
|
51
|
-
i0.ɵɵconditionalCreate(1,
|
|
52
|
-
i0.ɵɵelementStart(3, "button",
|
|
53
|
-
i0.ɵɵlistener("click", function
|
|
54
|
-
i0.ɵɵ
|
|
55
|
-
i0.ɵɵtext(5, "\u2715");
|
|
56
|
-
i0.ɵɵelementEnd();
|
|
57
|
-
i0.ɵɵtext(6, " Clear ");
|
|
44
|
+
i0.ɵɵelementStart(0, "div", 4);
|
|
45
|
+
i0.ɵɵconditionalCreate(1, PerfPanelComponent_Conditional_9_Conditional_1_Template, 2, 0, "button", 9)(2, PerfPanelComponent_Conditional_9_Conditional_2_Template, 2, 0, "button", 9);
|
|
46
|
+
i0.ɵɵelementStart(3, "button", 10);
|
|
47
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.renderService.clear()); });
|
|
48
|
+
i0.ɵɵtext(4, " \u2715 Clear ");
|
|
58
49
|
i0.ɵɵelementEnd();
|
|
59
|
-
i0.ɵɵ
|
|
60
|
-
i0.ɵɵconditionalCreate(8, PerfPanelComponent_Conditional_15_Conditional_8_Template, 3, 1, "div", 14);
|
|
50
|
+
i0.ɵɵconditionalCreate(5, PerfPanelComponent_Conditional_9_Conditional_5_Template, 3, 1, "span", 11);
|
|
61
51
|
i0.ɵɵelementEnd();
|
|
62
52
|
} if (rf & 2) {
|
|
63
53
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
64
54
|
i0.ɵɵadvance();
|
|
65
55
|
i0.ɵɵconditional(ctx_r0.renderService.isRecording() ? 1 : 2);
|
|
66
|
-
i0.ɵɵadvance(
|
|
67
|
-
i0.ɵɵconditional(ctx_r0.renderService.isRecording() ?
|
|
56
|
+
i0.ɵɵadvance(4);
|
|
57
|
+
i0.ɵɵconditional(ctx_r0.renderService.isRecording() ? 5 : -1);
|
|
68
58
|
} }
|
|
69
|
-
function
|
|
59
|
+
function PerfPanelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
70
60
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
71
|
-
i0.ɵɵelementStart(0, "div",
|
|
72
|
-
i0.ɵɵlistener("click", function
|
|
73
|
-
i0.ɵɵ
|
|
74
|
-
i0.ɵɵtext(3, "\u25B6");
|
|
75
|
-
i0.ɵɵelementEnd();
|
|
76
|
-
i0.ɵɵtext(4, " Snapshot ");
|
|
77
|
-
i0.ɵɵelementEnd();
|
|
78
|
-
i0.ɵɵelementStart(5, "button", 11);
|
|
79
|
-
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.memoryService.clear()); });
|
|
80
|
-
i0.ɵɵelementStart(6, "i", 12);
|
|
81
|
-
i0.ɵɵtext(7, "\u2715");
|
|
82
|
-
i0.ɵɵelementEnd();
|
|
83
|
-
i0.ɵɵtext(8, " Clear ");
|
|
84
|
-
i0.ɵɵelementEnd();
|
|
85
|
-
i0.ɵɵelement(9, "div", 13);
|
|
61
|
+
i0.ɵɵelementStart(0, "div", 4)(1, "button", 10);
|
|
62
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.captureMemorySnapshots()); });
|
|
63
|
+
i0.ɵɵtext(2, " \u25B6 Snapshot ");
|
|
86
64
|
i0.ɵɵelementEnd();
|
|
65
|
+
i0.ɵɵelementStart(3, "button", 10);
|
|
66
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.memoryService.clear()); });
|
|
67
|
+
i0.ɵɵtext(4, " \u2715 Clear ");
|
|
68
|
+
i0.ɵɵelementEnd()();
|
|
87
69
|
} }
|
|
88
|
-
function
|
|
89
|
-
i0.ɵɵelement(0, "perf-bundle-section",
|
|
70
|
+
function PerfPanelComponent_Case_12_Template(rf, ctx) { if (rf & 1) {
|
|
71
|
+
i0.ɵɵelement(0, "perf-bundle-section", 6);
|
|
90
72
|
} if (rf & 2) {
|
|
91
73
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
92
74
|
i0.ɵɵproperty("metrics", ctx_r0.bundleMetrics())("warnKb", ctx_r0.thresholds.bundleWarnKb)("critKb", ctx_r0.thresholds.bundleCritKb);
|
|
93
75
|
} }
|
|
94
|
-
function
|
|
95
|
-
i0.ɵɵelement(0, "perf-render-section",
|
|
76
|
+
function PerfPanelComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
|
|
77
|
+
i0.ɵɵelement(0, "perf-render-section", 7);
|
|
96
78
|
} if (rf & 2) {
|
|
97
79
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
98
80
|
i0.ɵɵproperty("renderService", ctx_r0.renderService)("warnMs", ctx_r0.thresholds.renderWarnMs)("critMs", ctx_r0.thresholds.renderCritMs);
|
|
99
81
|
} }
|
|
100
|
-
function
|
|
101
|
-
i0.ɵɵelement(0, "perf-memory-section",
|
|
82
|
+
function PerfPanelComponent_Case_14_Template(rf, ctx) { if (rf & 1) {
|
|
83
|
+
i0.ɵɵelement(0, "perf-memory-section", 8);
|
|
102
84
|
} if (rf & 2) {
|
|
103
85
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
104
86
|
i0.ɵɵproperty("memoryService", ctx_r0.memoryService);
|
|
@@ -118,54 +100,45 @@ export class PerfPanelComponent {
|
|
|
118
100
|
return comp?.meta?.showcaseConfig?.meta?.perf?.bundle ?? null;
|
|
119
101
|
}, ...(ngDevMode ? [{ debugName: "bundleMetrics" }] : []));
|
|
120
102
|
static ɵfac = function PerfPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerfPanelComponent)(); };
|
|
121
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls:
|
|
103
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 15, vars: 10, consts: [[1, "prism-perf-panel"], [1, "prism-subtabs"], [1, "prism-st-tab", 3, "click"], [1, "prism-perf-cd-badge"], [1, "prism-perf-toolbar"], [1, "prism-perf-content"], [3, "metrics", "warnKb", "critKb"], [3, "renderService", "warnMs", "critMs"], [3, "memoryService"], [1, "prism-tool-btn"], [1, "prism-tool-btn", 3, "click"], [1, "prism-perf-status"], [1, "prism-perf-status-dot"]], template: function PerfPanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
122
104
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
|
|
123
105
|
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_2_listener() { return ctx.activeTab.set("bundle"); });
|
|
124
|
-
i0.ɵɵ
|
|
125
|
-
i0.ɵɵtext(4, "\uD83D\uDCE6");
|
|
106
|
+
i0.ɵɵtext(3, " Bundle ");
|
|
126
107
|
i0.ɵɵelementEnd();
|
|
127
|
-
i0.ɵɵ
|
|
108
|
+
i0.ɵɵelementStart(4, "button", 2);
|
|
109
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_4_listener() { return ctx.activeTab.set("render"); });
|
|
110
|
+
i0.ɵɵtext(5, " Render ");
|
|
128
111
|
i0.ɵɵelementEnd();
|
|
129
112
|
i0.ɵɵelementStart(6, "button", 2);
|
|
130
|
-
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_6_listener() { return ctx.activeTab.set("
|
|
131
|
-
i0.ɵɵ
|
|
132
|
-
i0.ɵɵtext(8, "\u23F1");
|
|
133
|
-
i0.ɵɵelementEnd();
|
|
134
|
-
i0.ɵɵtext(9, " Render ");
|
|
135
|
-
i0.ɵɵelementEnd();
|
|
136
|
-
i0.ɵɵelementStart(10, "button", 2);
|
|
137
|
-
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_10_listener() { return ctx.activeTab.set("memory"); });
|
|
138
|
-
i0.ɵɵelementStart(11, "span", 3);
|
|
139
|
-
i0.ɵɵtext(12, "\uD83E\uDDE0");
|
|
140
|
-
i0.ɵɵelementEnd();
|
|
141
|
-
i0.ɵɵtext(13, " Memory ");
|
|
113
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_6_listener() { return ctx.activeTab.set("memory"); });
|
|
114
|
+
i0.ɵɵtext(7, " Memory ");
|
|
142
115
|
i0.ɵɵelementEnd();
|
|
143
|
-
i0.ɵɵconditionalCreate(
|
|
116
|
+
i0.ɵɵconditionalCreate(8, PerfPanelComponent_Conditional_8_Template, 2, 1, "span", 3);
|
|
144
117
|
i0.ɵɵelementEnd();
|
|
145
|
-
i0.ɵɵconditionalCreate(
|
|
146
|
-
i0.ɵɵconditionalCreate(
|
|
147
|
-
i0.ɵɵelementStart(
|
|
148
|
-
i0.ɵɵconditionalCreate(
|
|
118
|
+
i0.ɵɵconditionalCreate(9, PerfPanelComponent_Conditional_9_Template, 6, 2, "div", 4);
|
|
119
|
+
i0.ɵɵconditionalCreate(10, PerfPanelComponent_Conditional_10_Template, 5, 0, "div", 4);
|
|
120
|
+
i0.ɵɵelementStart(11, "div", 5);
|
|
121
|
+
i0.ɵɵconditionalCreate(12, PerfPanelComponent_Case_12_Template, 1, 3, "perf-bundle-section", 6)(13, PerfPanelComponent_Case_13_Template, 1, 3, "perf-render-section", 7)(14, PerfPanelComponent_Case_14_Template, 1, 1, "perf-memory-section", 8);
|
|
149
122
|
i0.ɵɵelementEnd()();
|
|
150
123
|
} if (rf & 2) {
|
|
151
124
|
let tmp_6_0;
|
|
152
125
|
i0.ɵɵadvance(2);
|
|
153
|
-
i0.ɵɵclassProp("active", ctx.activeTab() === "bundle");
|
|
154
|
-
i0.ɵɵadvance(
|
|
155
|
-
i0.ɵɵclassProp("active", ctx.activeTab() === "render");
|
|
156
|
-
i0.ɵɵadvance(
|
|
157
|
-
i0.ɵɵclassProp("active", ctx.activeTab() === "memory");
|
|
158
|
-
i0.ɵɵadvance(
|
|
159
|
-
i0.ɵɵconditional(ctx.renderService.cdRunCount() > 0 ?
|
|
126
|
+
i0.ɵɵclassProp("prism-st-tab--active", ctx.activeTab() === "bundle");
|
|
127
|
+
i0.ɵɵadvance(2);
|
|
128
|
+
i0.ɵɵclassProp("prism-st-tab--active", ctx.activeTab() === "render");
|
|
129
|
+
i0.ɵɵadvance(2);
|
|
130
|
+
i0.ɵɵclassProp("prism-st-tab--active", ctx.activeTab() === "memory");
|
|
131
|
+
i0.ɵɵadvance(2);
|
|
132
|
+
i0.ɵɵconditional(ctx.renderService.cdRunCount() > 0 ? 8 : -1);
|
|
160
133
|
i0.ɵɵadvance();
|
|
161
|
-
i0.ɵɵconditional(ctx.activeTab() === "render" ?
|
|
134
|
+
i0.ɵɵconditional(ctx.activeTab() === "render" ? 9 : -1);
|
|
162
135
|
i0.ɵɵadvance();
|
|
163
|
-
i0.ɵɵconditional(ctx.activeTab() === "memory" ?
|
|
136
|
+
i0.ɵɵconditional(ctx.activeTab() === "memory" ? 10 : -1);
|
|
164
137
|
i0.ɵɵadvance(2);
|
|
165
|
-
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ?
|
|
138
|
+
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 12 : tmp_6_0 === "render" ? 13 : tmp_6_0 === "memory" ? 14 : -1);
|
|
166
139
|
} }, dependencies: [BundleSectionComponent,
|
|
167
140
|
RenderSectionComponent,
|
|
168
|
-
MemorySectionComponent], styles: [".prism-perf-panel[_ngcontent-%COMP%] {
|
|
141
|
+
MemorySectionComponent], styles: [".prism-perf-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 340px;\n }\n\n .prism-subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .prism-st-tab[_ngcontent-%COMP%] {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n border-radius: 6px 6px 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n background: transparent;\n border: none;\n font-family: var(--font-sans);\n transition: color var(--dur-fast);\n }\n .prism-st-tab[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n .prism-st-tab--active[_ngcontent-%COMP%] { color: var(--prism-text); }\n .prism-st-tab--active[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--prism-primary);\n border-radius: 1px;\n }\n\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\n margin-left: auto;\n font-family: var(--font-mono, 'JetBrains Mono', monospace);\n font-size: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n height: 24px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: 5px;\n }\n\n .prism-perf-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 24px 0;\n }\n .prism-tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 11.5px;\n color: var(--prism-text-muted);\n transition: all 0.12s;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .prism-tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n\n .prism-perf-status[_ngcontent-%COMP%] {\n margin-left: auto;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: var(--font-mono);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .prism-perf-status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--prism-success);\n box-shadow: 0 0 6px var(--prism-success);\n animation: _ngcontent-%COMP%_prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes _ngcontent-%COMP%_prism-perf-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .prism-perf-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n }"], changeDetection: 0 });
|
|
169
142
|
}
|
|
170
143
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
|
|
171
144
|
type: Component,
|
|
@@ -175,75 +148,64 @@ export class PerfPanelComponent {
|
|
|
175
148
|
MemorySectionComponent,
|
|
176
149
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
177
150
|
<div class="prism-perf-panel">
|
|
178
|
-
<div class="prism-
|
|
151
|
+
<div class="prism-subtabs">
|
|
179
152
|
<button
|
|
180
|
-
class="prism-
|
|
181
|
-
[class.active]="activeTab() === 'bundle'"
|
|
153
|
+
class="prism-st-tab"
|
|
154
|
+
[class.prism-st-tab--active]="activeTab() === 'bundle'"
|
|
182
155
|
(click)="activeTab.set('bundle')"
|
|
183
156
|
>
|
|
184
|
-
|
|
157
|
+
Bundle
|
|
185
158
|
</button>
|
|
186
159
|
<button
|
|
187
|
-
class="prism-
|
|
188
|
-
[class.active]="activeTab() === 'render'"
|
|
160
|
+
class="prism-st-tab"
|
|
161
|
+
[class.prism-st-tab--active]="activeTab() === 'render'"
|
|
189
162
|
(click)="activeTab.set('render')"
|
|
190
163
|
>
|
|
191
|
-
|
|
164
|
+
Render
|
|
192
165
|
</button>
|
|
193
166
|
<button
|
|
194
|
-
class="prism-
|
|
195
|
-
[class.active]="activeTab() === 'memory'"
|
|
167
|
+
class="prism-st-tab"
|
|
168
|
+
[class.prism-st-tab--active]="activeTab() === 'memory'"
|
|
196
169
|
(click)="activeTab.set('memory')"
|
|
197
170
|
>
|
|
198
|
-
|
|
171
|
+
Memory
|
|
199
172
|
</button>
|
|
200
173
|
@if (renderService.cdRunCount() > 0) {
|
|
201
|
-
<
|
|
202
|
-
{{ renderService.cdRunCount() }} CD runs
|
|
203
|
-
|
|
174
|
+
<span class="prism-perf-cd-badge"
|
|
175
|
+
>{{ renderService.cdRunCount() }} CD runs</span
|
|
176
|
+
>
|
|
204
177
|
}
|
|
205
178
|
</div>
|
|
206
179
|
|
|
207
180
|
@if (activeTab() === 'render') {
|
|
208
181
|
<div class="prism-perf-toolbar">
|
|
209
182
|
@if (renderService.isRecording()) {
|
|
210
|
-
<button
|
|
211
|
-
|
|
212
|
-
(click)="renderService.stopRecording()"
|
|
213
|
-
>
|
|
214
|
-
<i class="prism-perf-btn-icon">⏸</i> Pause
|
|
183
|
+
<button class="prism-tool-btn" (click)="renderService.stopRecording()">
|
|
184
|
+
⏸ Pause
|
|
215
185
|
</button>
|
|
216
186
|
} @else {
|
|
217
|
-
<button
|
|
218
|
-
|
|
219
|
-
(click)="renderService.startRecording()"
|
|
220
|
-
>
|
|
221
|
-
<i class="prism-perf-btn-icon">▶</i> Profile
|
|
187
|
+
<button class="prism-tool-btn" (click)="renderService.startRecording()">
|
|
188
|
+
▶ Profile
|
|
222
189
|
</button>
|
|
223
190
|
}
|
|
224
|
-
<button class="prism-
|
|
225
|
-
|
|
191
|
+
<button class="prism-tool-btn" (click)="renderService.clear()">
|
|
192
|
+
✕ Clear
|
|
226
193
|
</button>
|
|
227
|
-
<div class="prism-perf-toolbar-spacer"></div>
|
|
228
194
|
@if (renderService.isRecording()) {
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
195
|
+
<span class="prism-perf-status"
|
|
196
|
+
><span class="prism-perf-status-dot"></span> live ·
|
|
197
|
+
{{ renderService.sampleCount() }} samples</span
|
|
198
|
+
>
|
|
233
199
|
}
|
|
234
200
|
</div>
|
|
235
201
|
} @if (activeTab() === 'memory') {
|
|
236
202
|
<div class="prism-perf-toolbar">
|
|
237
|
-
<button
|
|
238
|
-
|
|
239
|
-
(click)="captureMemorySnapshots()"
|
|
240
|
-
>
|
|
241
|
-
<i class="prism-perf-btn-icon">▶</i> Snapshot
|
|
203
|
+
<button class="prism-tool-btn" (click)="captureMemorySnapshots()">
|
|
204
|
+
▶ Snapshot
|
|
242
205
|
</button>
|
|
243
|
-
<button class="prism-
|
|
244
|
-
|
|
206
|
+
<button class="prism-tool-btn" (click)="memoryService.clear()">
|
|
207
|
+
✕ Clear
|
|
245
208
|
</button>
|
|
246
|
-
<div class="prism-perf-toolbar-spacer"></div>
|
|
247
209
|
</div>
|
|
248
210
|
}
|
|
249
211
|
|
|
@@ -265,6 +227,6 @@ export class PerfPanelComponent {
|
|
|
265
227
|
} }
|
|
266
228
|
</div>
|
|
267
229
|
</div>
|
|
268
|
-
`, styles: ["\n .prism-perf-panel {
|
|
230
|
+
`, styles: ["\n .prism-perf-panel {\n display: flex;\n flex-direction: column;\n height: 340px;\n }\n\n .prism-subtabs {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .prism-st-tab {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-text-muted);\n border-radius: 6px 6px 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n background: transparent;\n border: none;\n font-family: var(--font-sans);\n transition: color var(--dur-fast);\n }\n .prism-st-tab:hover { color: var(--prism-text-2); }\n .prism-st-tab--active { color: var(--prism-text); }\n .prism-st-tab--active::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--prism-primary);\n border-radius: 1px;\n }\n\n .prism-perf-cd-badge {\n margin-left: auto;\n font-family: var(--font-mono, 'JetBrains Mono', monospace);\n font-size: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n height: 24px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: 5px;\n }\n\n .prism-perf-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 24px 0;\n }\n .prism-tool-btn {\n height: 24px;\n padding: 0 9px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 11.5px;\n color: var(--prism-text-muted);\n transition: all 0.12s;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .prism-tool-btn:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n\n .prism-perf-status {\n margin-left: auto;\n font-size: 11px;\n color: var(--prism-text-muted);\n font-family: var(--font-mono);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .prism-perf-status-dot {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--prism-success);\n box-shadow: 0 0 6px var(--prism-success);\n animation: prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes prism-perf-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .prism-perf-content {\n flex: 1;\n overflow-y: auto;\n }\n "] }]
|
|
269
231
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
270
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber:
|
|
232
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber: 227 }); })();
|
|
@@ -6,7 +6,7 @@ export declare class RenderSectionComponent {
|
|
|
6
6
|
readonly critMs: import("@angular/core").InputSignal<number>;
|
|
7
7
|
readonly initialClass: import("@angular/core").Signal<"warn" | "" | "crit">;
|
|
8
8
|
formatMs(value: number | null): string;
|
|
9
|
-
colorFor(value: number): string;
|
|
9
|
+
colorFor(value: number | null): string;
|
|
10
10
|
static ɵfac: i0.ɵɵFactoryDeclaration<RenderSectionComponent, never>;
|
|
11
11
|
static ɵcmp: i0.ɵɵComponentDeclaration<RenderSectionComponent, "perf-render-section", never, { "renderService": { "alias": "renderService"; "required": true; "isSignal": true; }; "warnMs": { "alias": "warnMs"; "required": false; "isSignal": true; }; "critMs": { "alias": "critMs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-section.component.d.ts","sourceRoot":"","sources":["../../src/render/render-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAGlE,
|
|
1
|
+
{"version":3,"file":"render-section.component.d.ts","sourceRoot":"","sources":["../../src/render/render-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAGlE,qBA+Ha,sBAAsB;IACjC,QAAQ,CAAC,aAAa,yDAAuC;IAC7D,QAAQ,CAAC,MAAM,8CAAY;IAC3B,QAAQ,CAAC,MAAM,8CAAa;IAE5B,QAAQ,CAAC,YAAY,uDAMlB;IAEH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;IAKtC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;yCAlB3B,sBAAsB;2CAAtB,sBAAsB;CAwBlC"}
|