@ng-prism/plugin-perf 21.7.0 → 21.7.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAKpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,
|
|
1
|
+
{"version":3,"file":"perf-panel.component.d.ts","sourceRoot":"","sources":["../src/perf-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAKpE,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE7C,qBA6Ma,kBAAkB;IAC7B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,QAAQ,CAAC,SAAS,iDAA4B;IAC9C,QAAQ,CAAC,aAAa,oBAAmC;IACzD,QAAQ,CAAC,aAAa,oBAAmC;IAEzD,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAsB;IAEzD,sBAAsB,IAAI,IAAI;IAK9B,QAAQ,CAAC,aAAa,uDAOnB;yCArBQ,kBAAkB;2CAAlB,kBAAkB;CAsB9B"}
|
|
@@ -6,84 +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.ɵɵ
|
|
11
|
-
i0.ɵɵtext(1);
|
|
12
|
-
i0.ɵɵelementEnd();
|
|
13
|
-
} if (rf & 2) {
|
|
14
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
15
|
-
i0.ɵɵadvance();
|
|
16
|
-
i0.ɵɵtextInterpolate1("", ctx_r0.renderService.cdRunCount(), " CD runs");
|
|
17
|
-
} }
|
|
18
|
-
function PerfPanelComponent_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
19
|
-
const _r3 = i0.ɵɵgetCurrentView();
|
|
9
|
+
function PerfPanelComponent_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
20
11
|
i0.ɵɵelementStart(0, "button", 10);
|
|
21
|
-
i0.ɵɵlistener("click", function
|
|
12
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.renderService.stopRecording()); });
|
|
22
13
|
i0.ɵɵtext(1, " \u23F8 Pause ");
|
|
23
14
|
i0.ɵɵelementEnd();
|
|
24
15
|
} }
|
|
25
|
-
function
|
|
16
|
+
function PerfPanelComponent_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
26
17
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
27
18
|
i0.ɵɵelementStart(0, "button", 10);
|
|
28
|
-
i0.ɵɵlistener("click", function
|
|
19
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.renderService.startRecording()); });
|
|
29
20
|
i0.ɵɵtext(1, " \u25B6 Profile ");
|
|
30
21
|
i0.ɵɵelementEnd();
|
|
31
22
|
} }
|
|
32
|
-
function
|
|
23
|
+
function PerfPanelComponent_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
33
24
|
i0.ɵɵelementStart(0, "span", 11);
|
|
34
25
|
i0.ɵɵelement(1, "span", 12);
|
|
35
26
|
i0.ɵɵtext(2);
|
|
36
27
|
i0.ɵɵelementEnd();
|
|
37
28
|
} if (rf & 2) {
|
|
38
|
-
const
|
|
29
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
39
30
|
i0.ɵɵadvance(2);
|
|
40
|
-
i0.ɵɵtextInterpolate1(" live \u00B7 ",
|
|
31
|
+
i0.ɵɵtextInterpolate1(" live \u00B7 ", ctx_r2.renderService.sampleCount(), " samples ");
|
|
41
32
|
} }
|
|
42
33
|
function PerfPanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
43
|
-
const
|
|
44
|
-
i0.ɵɵ
|
|
45
|
-
i0.ɵɵ
|
|
46
|
-
i0.ɵɵ
|
|
47
|
-
i0.ɵɵ
|
|
48
|
-
i0.ɵɵtext(4, " \u2715 Clear ");
|
|
49
|
-
i0.ɵɵelementEnd();
|
|
50
|
-
i0.ɵɵconditionalCreate(5, PerfPanelComponent_Conditional_9_Conditional_5_Template, 3, 1, "span", 11);
|
|
34
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
35
|
+
i0.ɵɵconditionalCreate(0, PerfPanelComponent_Conditional_9_Conditional_0_Template, 2, 0, "button", 9)(1, PerfPanelComponent_Conditional_9_Conditional_1_Template, 2, 0, "button", 9);
|
|
36
|
+
i0.ɵɵelementStart(2, "button", 10);
|
|
37
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_9_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.renderService.clear()); });
|
|
38
|
+
i0.ɵɵtext(3, " \u2715 Clear ");
|
|
51
39
|
i0.ɵɵelementEnd();
|
|
40
|
+
i0.ɵɵconditionalCreate(4, PerfPanelComponent_Conditional_9_Conditional_4_Template, 3, 1, "span", 11);
|
|
52
41
|
} if (rf & 2) {
|
|
53
|
-
const
|
|
54
|
-
i0.ɵɵ
|
|
55
|
-
i0.ɵɵconditional(ctx_r0.renderService.isRecording() ? 1 : 2);
|
|
42
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
43
|
+
i0.ɵɵconditional(ctx_r2.renderService.isRecording() ? 0 : 1);
|
|
56
44
|
i0.ɵɵadvance(4);
|
|
57
|
-
i0.ɵɵconditional(
|
|
45
|
+
i0.ɵɵconditional(ctx_r2.renderService.isRecording() ? 4 : -1);
|
|
58
46
|
} }
|
|
59
47
|
function PerfPanelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
60
48
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
61
|
-
i0.ɵɵelementStart(0, "
|
|
62
|
-
i0.ɵɵlistener("click", function
|
|
63
|
-
i0.ɵɵtext(
|
|
49
|
+
i0.ɵɵelementStart(0, "button", 10);
|
|
50
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.captureMemorySnapshots()); });
|
|
51
|
+
i0.ɵɵtext(1, " \u25B6 Snapshot ");
|
|
52
|
+
i0.ɵɵelementEnd();
|
|
53
|
+
i0.ɵɵelementStart(2, "button", 10);
|
|
54
|
+
i0.ɵɵlistener("click", function PerfPanelComponent_Conditional_10_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.memoryService.clear()); });
|
|
55
|
+
i0.ɵɵtext(3, " \u2715 Clear ");
|
|
64
56
|
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()();
|
|
69
57
|
} }
|
|
70
|
-
function
|
|
71
|
-
i0.ɵɵ
|
|
58
|
+
function PerfPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
59
|
+
i0.ɵɵelementStart(0, "span", 4);
|
|
60
|
+
i0.ɵɵtext(1);
|
|
61
|
+
i0.ɵɵelementEnd();
|
|
72
62
|
} if (rf & 2) {
|
|
73
|
-
const
|
|
74
|
-
i0.ɵɵ
|
|
63
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
64
|
+
i0.ɵɵadvance();
|
|
65
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r2.renderService.cdRunCount(), " CD runs ");
|
|
75
66
|
} }
|
|
76
67
|
function PerfPanelComponent_Case_13_Template(rf, ctx) { if (rf & 1) {
|
|
77
|
-
i0.ɵɵelement(0, "perf-
|
|
68
|
+
i0.ɵɵelement(0, "perf-bundle-section", 6);
|
|
78
69
|
} if (rf & 2) {
|
|
79
|
-
const
|
|
80
|
-
i0.ɵɵproperty("
|
|
70
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
71
|
+
i0.ɵɵproperty("metrics", ctx_r2.bundleMetrics())("warnKb", ctx_r2.thresholds.bundleWarnKb)("critKb", ctx_r2.thresholds.bundleCritKb);
|
|
81
72
|
} }
|
|
82
73
|
function PerfPanelComponent_Case_14_Template(rf, ctx) { if (rf & 1) {
|
|
74
|
+
i0.ɵɵelement(0, "perf-render-section", 7);
|
|
75
|
+
} if (rf & 2) {
|
|
76
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
77
|
+
i0.ɵɵproperty("renderService", ctx_r2.renderService)("warnMs", ctx_r2.thresholds.renderWarnMs)("critMs", ctx_r2.thresholds.renderCritMs);
|
|
78
|
+
} }
|
|
79
|
+
function PerfPanelComponent_Case_15_Template(rf, ctx) { if (rf & 1) {
|
|
83
80
|
i0.ɵɵelement(0, "perf-memory-section", 8);
|
|
84
81
|
} if (rf & 2) {
|
|
85
|
-
const
|
|
86
|
-
i0.ɵɵproperty("memoryService",
|
|
82
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
83
|
+
i0.ɵɵproperty("memoryService", ctx_r2.memoryService);
|
|
87
84
|
} }
|
|
88
85
|
export class PerfPanelComponent {
|
|
89
86
|
activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
|
|
@@ -100,7 +97,7 @@ export class PerfPanelComponent {
|
|
|
100
97
|
return comp?.meta?.showcaseConfig?.meta?.perf?.bundle ?? null;
|
|
101
98
|
}, ...(ngDevMode ? [{ debugName: "bundleMetrics" }] : []));
|
|
102
99
|
static ɵfac = function PerfPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerfPanelComponent)(); };
|
|
103
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls:
|
|
100
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerfPanelComponent, selectors: [["prism-perf-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 16, vars: 10, consts: [[1, "prism-perf-panel"], [1, "prism-subtabs"], [1, "prism-st-tab", 3, "click"], [1, "prism-subtabs-actions"], [1, "prism-perf-cd-badge"], [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) {
|
|
104
101
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
|
|
105
102
|
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_2_listener() { return ctx.activeTab.set("bundle"); });
|
|
106
103
|
i0.ɵɵtext(3, " Bundle ");
|
|
@@ -113,12 +110,13 @@ export class PerfPanelComponent {
|
|
|
113
110
|
i0.ɵɵlistener("click", function PerfPanelComponent_Template_button_click_6_listener() { return ctx.activeTab.set("memory"); });
|
|
114
111
|
i0.ɵɵtext(7, " Memory ");
|
|
115
112
|
i0.ɵɵelementEnd();
|
|
116
|
-
i0.ɵɵ
|
|
117
|
-
i0.ɵɵ
|
|
118
|
-
i0.ɵɵconditionalCreate(
|
|
119
|
-
i0.ɵɵconditionalCreate(
|
|
120
|
-
i0.ɵɵ
|
|
121
|
-
i0.ɵɵ
|
|
113
|
+
i0.ɵɵelementStart(8, "div", 3);
|
|
114
|
+
i0.ɵɵconditionalCreate(9, PerfPanelComponent_Conditional_9_Template, 5, 2);
|
|
115
|
+
i0.ɵɵconditionalCreate(10, PerfPanelComponent_Conditional_10_Template, 4, 0);
|
|
116
|
+
i0.ɵɵconditionalCreate(11, PerfPanelComponent_Conditional_11_Template, 2, 1, "span", 4);
|
|
117
|
+
i0.ɵɵelementEnd()();
|
|
118
|
+
i0.ɵɵelementStart(12, "div", 5);
|
|
119
|
+
i0.ɵɵconditionalCreate(13, PerfPanelComponent_Case_13_Template, 1, 3, "perf-bundle-section", 6)(14, PerfPanelComponent_Case_14_Template, 1, 3, "perf-render-section", 7)(15, PerfPanelComponent_Case_15_Template, 1, 1, "perf-memory-section", 8);
|
|
122
120
|
i0.ɵɵelementEnd()();
|
|
123
121
|
} if (rf & 2) {
|
|
124
122
|
let tmp_6_0;
|
|
@@ -128,17 +126,17 @@ export class PerfPanelComponent {
|
|
|
128
126
|
i0.ɵɵclassProp("prism-st-tab--active", ctx.activeTab() === "render");
|
|
129
127
|
i0.ɵɵadvance(2);
|
|
130
128
|
i0.ɵɵclassProp("prism-st-tab--active", ctx.activeTab() === "memory");
|
|
131
|
-
i0.ɵɵadvance(
|
|
132
|
-
i0.ɵɵconditional(ctx.renderService.cdRunCount() > 0 ? 8 : -1);
|
|
133
|
-
i0.ɵɵadvance();
|
|
129
|
+
i0.ɵɵadvance(3);
|
|
134
130
|
i0.ɵɵconditional(ctx.activeTab() === "render" ? 9 : -1);
|
|
135
131
|
i0.ɵɵadvance();
|
|
136
132
|
i0.ɵɵconditional(ctx.activeTab() === "memory" ? 10 : -1);
|
|
133
|
+
i0.ɵɵadvance();
|
|
134
|
+
i0.ɵɵconditional(ctx.renderService.cdRunCount() > 0 ? 11 : -1);
|
|
137
135
|
i0.ɵɵadvance(2);
|
|
138
|
-
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ?
|
|
136
|
+
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 13 : tmp_6_0 === "render" ? 14 : tmp_6_0 === "memory" ? 15 : -1);
|
|
139
137
|
} }, dependencies: [BundleSectionComponent,
|
|
140
138
|
RenderSectionComponent,
|
|
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-
|
|
139
|
+
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-subtabs-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\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 .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 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 });
|
|
142
140
|
}
|
|
143
141
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
|
|
144
142
|
type: Component,
|
|
@@ -170,44 +168,42 @@ export class PerfPanelComponent {
|
|
|
170
168
|
>
|
|
171
169
|
Memory
|
|
172
170
|
</button>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
</button>
|
|
171
|
+
<div class="prism-subtabs-actions">
|
|
172
|
+
@if (activeTab() === 'render') {
|
|
173
|
+
@if (renderService.isRecording()) {
|
|
174
|
+
<button class="prism-tool-btn" (click)="renderService.stopRecording()">
|
|
175
|
+
⏸ Pause
|
|
176
|
+
</button>
|
|
177
|
+
} @else {
|
|
178
|
+
<button class="prism-tool-btn" (click)="renderService.startRecording()">
|
|
179
|
+
▶ Profile
|
|
180
|
+
</button>
|
|
181
|
+
}
|
|
182
|
+
<button class="prism-tool-btn" (click)="renderService.clear()">
|
|
183
|
+
✕ Clear
|
|
184
|
+
</button>
|
|
185
|
+
@if (renderService.isRecording()) {
|
|
186
|
+
<span class="prism-perf-status">
|
|
187
|
+
<span class="prism-perf-status-dot"></span> live ·
|
|
188
|
+
{{ renderService.sampleCount() }} samples
|
|
189
|
+
</span>
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
@if (activeTab() === 'memory') {
|
|
193
|
+
<button class="prism-tool-btn" (click)="captureMemorySnapshots()">
|
|
194
|
+
▶ Snapshot
|
|
195
|
+
</button>
|
|
196
|
+
<button class="prism-tool-btn" (click)="memoryService.clear()">
|
|
197
|
+
✕ Clear
|
|
198
|
+
</button>
|
|
199
|
+
}
|
|
200
|
+
@if (renderService.cdRunCount() > 0) {
|
|
201
|
+
<span class="prism-perf-cd-badge">
|
|
202
|
+
{{ renderService.cdRunCount() }} CD runs
|
|
203
|
+
</span>
|
|
204
|
+
}
|
|
205
|
+
</div>
|
|
209
206
|
</div>
|
|
210
|
-
}
|
|
211
207
|
|
|
212
208
|
<div class="prism-perf-content">
|
|
213
209
|
@switch (activeTab()) { @case ('bundle') {
|
|
@@ -227,6 +223,6 @@ export class PerfPanelComponent {
|
|
|
227
223
|
} }
|
|
228
224
|
</div>
|
|
229
225
|
</div>
|
|
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-
|
|
226
|
+
`, 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-subtabs-actions {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .prism-perf-cd-badge {\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 .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 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 "] }]
|
|
231
227
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
232
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber:
|
|
228
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerfPanelComponent, { className: "PerfPanelComponent", filePath: "perf-panel.component.ts", lineNumber: 223 }); })();
|