@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
|
@@ -2,49 +2,31 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
function MemorySectionComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
4
4
|
i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
|
|
5
|
-
i0.ɵɵtext(2, "
|
|
5
|
+
i0.ɵɵtext(2, "Memory API not available");
|
|
6
6
|
i0.ɵɵdomElementEnd();
|
|
7
7
|
i0.ɵɵdomElementStart(3, "div", 2);
|
|
8
|
-
i0.ɵɵtext(4, "
|
|
9
|
-
i0.ɵɵdomElementEnd();
|
|
10
|
-
i0.ɵɵdomElementStart(5, "div", 3);
|
|
11
|
-
i0.ɵɵtext(6, "performance.memory is Chrome-only (non-standard)");
|
|
8
|
+
i0.ɵɵtext(4, "performance.memory is Chrome-only (non-standard)");
|
|
12
9
|
i0.ɵɵdomElementEnd()();
|
|
13
10
|
} }
|
|
14
|
-
function
|
|
15
|
-
i0.ɵɵdomElementStart(0, "
|
|
16
|
-
i0.ɵɵtext(
|
|
17
|
-
i0.ɵɵdomElementEnd();
|
|
18
|
-
i0.ɵɵdomElementStart(3, "div", 18);
|
|
19
|
-
i0.ɵɵdomElement(4, "div", 23);
|
|
11
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
12
|
+
i0.ɵɵdomElementStart(0, "span", 9);
|
|
13
|
+
i0.ɵɵtext(1, "watch");
|
|
20
14
|
i0.ɵɵdomElementEnd();
|
|
21
|
-
i0.ɵɵdomElementStart(5, "span", 24);
|
|
22
|
-
i0.ɵɵtext(6);
|
|
23
|
-
i0.ɵɵdomElementEnd()();
|
|
24
|
-
} if (rf & 2) {
|
|
25
|
-
let tmp_5_0;
|
|
26
|
-
let tmp_6_0;
|
|
27
|
-
const svc_r1 = i0.ɵɵnextContext(3);
|
|
28
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
29
|
-
i0.ɵɵadvance(4);
|
|
30
|
-
i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_5_0 = svc_r1.afterDestroy()) == null ? null : tmp_5_0.bytes), "%");
|
|
31
|
-
i0.ɵɵadvance(2);
|
|
32
|
-
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_6_0 = svc_r1.afterDestroy()) == null ? null : tmp_6_0.bytes), " MB");
|
|
33
15
|
} }
|
|
34
|
-
function
|
|
35
|
-
i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 6);
|
|
36
|
-
i0.ɵɵtext(
|
|
16
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
17
|
+
i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 12)(2, "div", 5)(3, "span", 6);
|
|
18
|
+
i0.ɵɵtext(4, "Heap Comparison");
|
|
19
|
+
i0.ɵɵdomElementEnd()();
|
|
20
|
+
i0.ɵɵdomElementStart(5, "div", 16)(6, "span", 17);
|
|
21
|
+
i0.ɵɵtext(7, "before");
|
|
37
22
|
i0.ɵɵdomElementEnd();
|
|
38
|
-
i0.ɵɵdomElementStart(
|
|
39
|
-
i0.ɵɵ
|
|
23
|
+
i0.ɵɵdomElementStart(8, "div", 18);
|
|
24
|
+
i0.ɵɵdomElement(9, "div", 19);
|
|
40
25
|
i0.ɵɵdomElementEnd();
|
|
41
|
-
i0.ɵɵdomElementStart(
|
|
42
|
-
i0.ɵɵ
|
|
26
|
+
i0.ɵɵdomElementStart(10, "span", 20);
|
|
27
|
+
i0.ɵɵtext(11);
|
|
43
28
|
i0.ɵɵdomElementEnd();
|
|
44
|
-
i0.ɵɵdomElementStart(
|
|
45
|
-
i0.ɵɵtext(10);
|
|
46
|
-
i0.ɵɵdomElementEnd()();
|
|
47
|
-
i0.ɵɵdomElementStart(11, "div", 16)(12, "span", 17);
|
|
29
|
+
i0.ɵɵdomElementStart(12, "span", 17);
|
|
48
30
|
i0.ɵɵtext(13, "after create");
|
|
49
31
|
i0.ɵɵdomElementEnd();
|
|
50
32
|
i0.ɵɵdomElementStart(14, "div", 18);
|
|
@@ -52,9 +34,7 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Templ
|
|
|
52
34
|
i0.ɵɵdomElementEnd();
|
|
53
35
|
i0.ɵɵdomElementStart(16, "span", 22);
|
|
54
36
|
i0.ɵɵtext(17);
|
|
55
|
-
i0.ɵɵdomElementEnd()();
|
|
56
|
-
i0.ɵɵconditionalCreate(18, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Conditional_18_Template, 7, 3, "div", 16);
|
|
57
|
-
i0.ɵɵdomElementEnd()();
|
|
37
|
+
i0.ɵɵdomElementEnd()()()();
|
|
58
38
|
} if (rf & 2) {
|
|
59
39
|
let tmp_4_0;
|
|
60
40
|
let tmp_5_0;
|
|
@@ -62,120 +42,108 @@ function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_28_Templ
|
|
|
62
42
|
let tmp_7_0;
|
|
63
43
|
const svc_r1 = i0.ɵɵnextContext(2);
|
|
64
44
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
65
|
-
i0.ɵɵadvance(
|
|
45
|
+
i0.ɵɵadvance(9);
|
|
66
46
|
i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_4_0 = svc_r1.beforeCreate()) == null ? null : tmp_4_0.bytes), "%");
|
|
67
47
|
i0.ɵɵadvance(2);
|
|
68
48
|
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_5_0 = svc_r1.beforeCreate()) == null ? null : tmp_5_0.bytes), " MB");
|
|
69
|
-
i0.ɵɵadvance(
|
|
49
|
+
i0.ɵɵadvance(4);
|
|
70
50
|
i0.ɵɵstyleProp("width", ctx_r1.barPercent((tmp_6_0 = svc_r1.afterCreate()) == null ? null : tmp_6_0.bytes), "%");
|
|
71
51
|
i0.ɵɵadvance(2);
|
|
72
52
|
i0.ɵɵtextInterpolate1("", ctx_r1.formatMb((tmp_7_0 = svc_r1.afterCreate()) == null ? null : tmp_7_0.bytes), " MB");
|
|
73
|
-
i0.ɵɵadvance();
|
|
74
|
-
i0.ɵɵconditional(svc_r1.afterDestroy() ? 18 : -1);
|
|
75
53
|
} }
|
|
76
|
-
function
|
|
77
|
-
i0.ɵɵdomElementStart(0, "div",
|
|
78
|
-
i0.ɵɵdomElement(1, "
|
|
79
|
-
i0.ɵɵtext(2);
|
|
54
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template(rf, ctx) { if (rf & 1) {
|
|
55
|
+
i0.ɵɵdomElementStart(0, "div", 13);
|
|
56
|
+
i0.ɵɵdomElement(1, "span", 23);
|
|
57
|
+
i0.ɵɵtext(2, " No significant leak detected ");
|
|
80
58
|
i0.ɵɵdomElementEnd();
|
|
81
|
-
} if (rf & 2) {
|
|
82
|
-
let tmp_4_0;
|
|
83
|
-
const svc_r1 = i0.ɵɵnextContext(2);
|
|
84
|
-
const ctx_r1 = i0.ɵɵnextContext();
|
|
85
|
-
i0.ɵɵadvance(2);
|
|
86
|
-
i0.ɵɵtextInterpolate1(" No significant leak detected \u2014 residual ", ctx_r1.formatMb(svc_r1.residual() + (((tmp_4_0 = svc_r1.beforeCreate()) == null ? null : tmp_4_0.bytes) ?? 0)), " MB within threshold ");
|
|
87
59
|
} }
|
|
88
|
-
function
|
|
89
|
-
i0.ɵɵdomElementStart(0, "div",
|
|
90
|
-
i0.ɵɵdomElement(1, "
|
|
60
|
+
function MemorySectionComponent_Conditional_0_Conditional_1_Conditional_37_Template(rf, ctx) { if (rf & 1) {
|
|
61
|
+
i0.ɵɵdomElementStart(0, "div", 14);
|
|
62
|
+
i0.ɵɵdomElement(1, "span", 23);
|
|
91
63
|
i0.ɵɵtext(2);
|
|
92
64
|
i0.ɵɵdomElementEnd();
|
|
93
65
|
} if (rf & 2) {
|
|
94
66
|
const svc_r1 = i0.ɵɵnextContext(2);
|
|
95
67
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
96
68
|
i0.ɵɵadvance(2);
|
|
97
|
-
i0.ɵɵtextInterpolate1(" Possible leak \u2014 +", ctx_r1.formatMb(svc_r1.residual()), " MB not reclaimed
|
|
69
|
+
i0.ɵɵtextInterpolate1(" Possible leak \u2014 +", ctx_r1.formatMb(svc_r1.residual()), " MB not reclaimed ");
|
|
98
70
|
} }
|
|
99
71
|
function MemorySectionComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
100
|
-
i0.ɵɵdomElementStart(0, "div",
|
|
101
|
-
i0.ɵɵtext(
|
|
102
|
-
i0.ɵɵdomElementEnd();
|
|
103
|
-
i0.ɵɵdomElementStart(4, "div", 7);
|
|
104
|
-
i0.ɵɵtext(5);
|
|
105
|
-
i0.ɵɵdomElementStart(6, "span", 8);
|
|
106
|
-
i0.ɵɵtext(7, " MB");
|
|
72
|
+
i0.ɵɵdomElementStart(0, "div", 3)(1, "div", 4)(2, "div", 5)(3, "span", 6);
|
|
73
|
+
i0.ɵɵtext(4, "Before Create");
|
|
107
74
|
i0.ɵɵdomElementEnd()();
|
|
108
|
-
i0.ɵɵdomElementStart(
|
|
109
|
-
i0.ɵɵtext(
|
|
75
|
+
i0.ɵɵdomElementStart(5, "div", 7);
|
|
76
|
+
i0.ɵɵtext(6);
|
|
77
|
+
i0.ɵɵdomElementStart(7, "span");
|
|
78
|
+
i0.ɵɵtext(8, "MB");
|
|
79
|
+
i0.ɵɵdomElementEnd()();
|
|
80
|
+
i0.ɵɵdomElementStart(9, "div", 8);
|
|
81
|
+
i0.ɵɵtext(10, "baseline heap");
|
|
110
82
|
i0.ɵɵdomElementEnd()();
|
|
111
|
-
i0.ɵɵdomElementStart(
|
|
112
|
-
i0.ɵɵtext(
|
|
83
|
+
i0.ɵɵdomElementStart(11, "div", 4)(12, "div", 5)(13, "span", 6);
|
|
84
|
+
i0.ɵɵtext(14, "After Create");
|
|
113
85
|
i0.ɵɵdomElementEnd();
|
|
114
|
-
i0.ɵɵ
|
|
115
|
-
i0.ɵɵ
|
|
116
|
-
i0.ɵɵdomElementStart(
|
|
117
|
-
i0.ɵɵtext(
|
|
86
|
+
i0.ɵɵconditionalCreate(15, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_15_Template, 2, 0, "span", 9);
|
|
87
|
+
i0.ɵɵdomElementEnd();
|
|
88
|
+
i0.ɵɵdomElementStart(16, "div", 7);
|
|
89
|
+
i0.ɵɵtext(17);
|
|
90
|
+
i0.ɵɵdomElementStart(18, "span");
|
|
91
|
+
i0.ɵɵtext(19, "MB");
|
|
118
92
|
i0.ɵɵdomElementEnd()();
|
|
119
|
-
i0.ɵɵdomElementStart(
|
|
120
|
-
i0.ɵɵtext(
|
|
93
|
+
i0.ɵɵdomElementStart(20, "div", 8);
|
|
94
|
+
i0.ɵɵtext(21);
|
|
121
95
|
i0.ɵɵdomElementEnd()();
|
|
122
|
-
i0.ɵɵdomElementStart(
|
|
123
|
-
i0.ɵɵtext(
|
|
124
|
-
i0.ɵɵdomElementEnd();
|
|
125
|
-
i0.ɵɵdomElementStart(22, "div", 7);
|
|
126
|
-
i0.ɵɵtext(23);
|
|
127
|
-
i0.ɵɵdomElementStart(24, "span", 8);
|
|
128
|
-
i0.ɵɵtext(25, " MB");
|
|
96
|
+
i0.ɵɵdomElementStart(22, "div", 4)(23, "div", 5)(24, "span", 6);
|
|
97
|
+
i0.ɵɵtext(25, "After Destroy");
|
|
129
98
|
i0.ɵɵdomElementEnd()();
|
|
130
|
-
i0.ɵɵdomElementStart(26, "div",
|
|
99
|
+
i0.ɵɵdomElementStart(26, "div", 7);
|
|
131
100
|
i0.ɵɵtext(27);
|
|
132
|
-
i0.ɵɵ
|
|
133
|
-
i0.ɵɵ
|
|
134
|
-
i0.ɵɵ
|
|
135
|
-
i0.ɵɵ
|
|
136
|
-
i0.ɵɵ
|
|
137
|
-
i0.ɵɵ
|
|
138
|
-
i0.ɵɵdomElementStart(34, "div", 14);
|
|
139
|
-
i0.ɵɵtext(35, " performance.memory is Chrome-only (non-standard). Not available in other browsers. ");
|
|
101
|
+
i0.ɵɵdomElementStart(28, "span");
|
|
102
|
+
i0.ɵɵtext(29, "MB");
|
|
103
|
+
i0.ɵɵdomElementEnd()()()();
|
|
104
|
+
i0.ɵɵconditionalCreate(30, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_30_Template, 18, 6, "div", 10);
|
|
105
|
+
i0.ɵɵdomElementStart(31, "div", 11)(32, "div", 12)(33, "div", 5)(34, "span", 6);
|
|
106
|
+
i0.ɵɵtext(35, "Leak Analysis");
|
|
140
107
|
i0.ɵɵdomElementEnd()();
|
|
108
|
+
i0.ɵɵconditionalCreate(36, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_36_Template, 3, 0, "div", 13)(37, MemorySectionComponent_Conditional_0_Conditional_1_Conditional_37_Template, 3, 1, "div", 14);
|
|
109
|
+
i0.ɵɵdomElementStart(38, "div", 15);
|
|
110
|
+
i0.ɵɵtext(39, "\u24D8 performance.memory is Chrome-only (non-standard). Not available in other browsers.");
|
|
111
|
+
i0.ɵɵdomElementEnd()()();
|
|
141
112
|
} if (rf & 2) {
|
|
142
113
|
let tmp_3_0;
|
|
143
|
-
let
|
|
144
|
-
let
|
|
114
|
+
let tmp_6_0;
|
|
115
|
+
let tmp_9_0;
|
|
145
116
|
const svc_r1 = i0.ɵɵnextContext();
|
|
146
117
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
147
|
-
i0.ɵɵadvance(
|
|
118
|
+
i0.ɵɵadvance(6);
|
|
148
119
|
i0.ɵɵtextInterpolate(ctx_r1.formatMb((tmp_3_0 = svc_r1.beforeCreate()) == null ? null : tmp_3_0.bytes));
|
|
149
|
-
i0.ɵɵadvance(
|
|
150
|
-
i0.ɵɵ
|
|
120
|
+
i0.ɵɵadvance(9);
|
|
121
|
+
i0.ɵɵconditional(svc_r1.delta() !== null && svc_r1.delta() > 0 ? 15 : -1);
|
|
151
122
|
i0.ɵɵadvance();
|
|
152
|
-
i0.ɵɵ
|
|
153
|
-
i0.ɵɵadvance(4);
|
|
154
|
-
i0.ɵɵtextInterpolate(ctx_r1.deltaText());
|
|
155
|
-
i0.ɵɵadvance(4);
|
|
156
|
-
i0.ɵɵclassMap(ctx_r1.destroyClass());
|
|
123
|
+
i0.ɵɵstyleProp("color", ctx_r1.afterCreateColor());
|
|
157
124
|
i0.ɵɵadvance();
|
|
158
|
-
i0.ɵɵ
|
|
125
|
+
i0.ɵɵtextInterpolate(ctx_r1.formatMb((tmp_6_0 = svc_r1.afterCreate()) == null ? null : tmp_6_0.bytes));
|
|
159
126
|
i0.ɵɵadvance(4);
|
|
160
|
-
i0.ɵɵtextInterpolate(ctx_r1.
|
|
127
|
+
i0.ɵɵtextInterpolate(ctx_r1.deltaText());
|
|
128
|
+
i0.ɵɵadvance(5);
|
|
129
|
+
i0.ɵɵstyleProp("color", ctx_r1.destroyColor());
|
|
161
130
|
i0.ɵɵadvance();
|
|
162
|
-
i0.ɵɵ
|
|
163
|
-
i0.ɵɵadvance(
|
|
164
|
-
i0.ɵɵconditional(svc_r1.
|
|
131
|
+
i0.ɵɵtextInterpolate(ctx_r1.formatMb((tmp_9_0 = svc_r1.afterDestroy()) == null ? null : tmp_9_0.bytes));
|
|
132
|
+
i0.ɵɵadvance(3);
|
|
133
|
+
i0.ɵɵconditional(svc_r1.beforeCreate() && svc_r1.afterCreate() ? 30 : -1);
|
|
134
|
+
i0.ɵɵadvance(6);
|
|
135
|
+
i0.ɵɵconditional(svc_r1.leakStatus() === "ok" ? 36 : svc_r1.leakStatus() === "warn" ? 37 : -1);
|
|
165
136
|
} }
|
|
166
137
|
function MemorySectionComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
167
138
|
i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
|
|
168
|
-
i0.ɵɵtext(2, "
|
|
139
|
+
i0.ɵɵtext(2, "No memory snapshots yet");
|
|
169
140
|
i0.ɵɵdomElementEnd();
|
|
170
141
|
i0.ɵɵdomElementStart(3, "div", 2);
|
|
171
|
-
i0.ɵɵtext(4, "
|
|
172
|
-
i0.ɵɵdomElementEnd();
|
|
173
|
-
i0.ɵɵdomElementStart(5, "div", 3);
|
|
174
|
-
i0.ɵɵtext(6, "Click Snapshot to capture heap data");
|
|
142
|
+
i0.ɵɵtext(4, "Click Snapshot to capture heap data");
|
|
175
143
|
i0.ɵɵdomElementEnd()();
|
|
176
144
|
} }
|
|
177
145
|
function MemorySectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
178
|
-
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template,
|
|
146
|
+
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Conditional_0_Template, 5, 0, "div", 0)(1, MemorySectionComponent_Conditional_0_Conditional_1_Template, 40, 11)(2, MemorySectionComponent_Conditional_0_Conditional_2_Template, 5, 0, "div", 0);
|
|
179
147
|
} if (rf & 2) {
|
|
180
148
|
const svc_r1 = ctx;
|
|
181
149
|
i0.ɵɵconditional(!svc_r1.available() ? 0 : svc_r1.snapshots().length > 0 ? 1 : 2);
|
|
@@ -203,14 +171,23 @@ export class MemorySectionComponent {
|
|
|
203
171
|
return '';
|
|
204
172
|
return `+${this.formatMb(r)} MB residual`;
|
|
205
173
|
}, ...(ngDevMode ? [{ debugName: "residualText" }] : []));
|
|
206
|
-
|
|
207
|
-
const
|
|
174
|
+
afterCreateColor = computed(() => {
|
|
175
|
+
const d = this.memoryService().delta();
|
|
176
|
+
if (d !== null && d > 0)
|
|
177
|
+
return 'var(--prism-warn)';
|
|
178
|
+
return '';
|
|
179
|
+
}, ...(ngDevMode ? [{ debugName: "afterCreateColor" }] : []));
|
|
180
|
+
destroyColor = computed(() => {
|
|
181
|
+
const svc = this.memoryService();
|
|
182
|
+
if (!svc.afterDestroy())
|
|
183
|
+
return 'var(--prism-text-ghost)';
|
|
184
|
+
const status = svc.leakStatus();
|
|
208
185
|
if (status === 'ok')
|
|
209
|
-
return '
|
|
186
|
+
return 'var(--prism-success)';
|
|
210
187
|
if (status === 'warn')
|
|
211
|
-
return '
|
|
188
|
+
return 'var(--prism-danger)';
|
|
212
189
|
return '';
|
|
213
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
190
|
+
}, ...(ngDevMode ? [{ debugName: "destroyColor" }] : []));
|
|
214
191
|
barPercent(bytes) {
|
|
215
192
|
if (!bytes || this.maxBytes() === 0)
|
|
216
193
|
return 0;
|
|
@@ -222,102 +199,85 @@ export class MemorySectionComponent {
|
|
|
222
199
|
return (bytes / (1024 * 1024)).toFixed(1);
|
|
223
200
|
}
|
|
224
201
|
static ɵfac = function MemorySectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MemorySectionComponent)(); };
|
|
225
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "
|
|
202
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MemorySectionComponent, selectors: [["perf-memory-section"]], inputs: { memoryService: [1, "memoryService"] }, decls: 1, vars: 1, consts: [[1, "perf-empty"], [1, "perf-empty-text"], [1, "perf-empty-hint"], [1, "perf-body"], [1, "perf-card"], [1, "perf-card-head"], [1, "perf-card-name"], [1, "perf-card-val"], [1, "perf-card-sub"], [1, "perf-card-status", "warn"], [1, "perf-detail"], [1, "perf-detail", "perf-detail--last"], [1, "perf-card", "perf-card--block"], [1, "perf-leak-badge", "perf-leak-badge--ok"], [1, "perf-leak-badge", "perf-leak-badge--warn"], [1, "perf-disclaimer"], [1, "perf-bars"], [1, "perf-bar-label"], [1, "perf-bar-track"], [1, "perf-bar-fill"], [1, "perf-bar-val"], [1, "perf-bar-fill", "perf-bar-fill--warn"], [1, "perf-bar-val", "perf-bar-val--warn"], [1, "perf-leak-dot"]], template: function MemorySectionComponent_Template(rf, ctx) { if (rf & 1) {
|
|
226
203
|
i0.ɵɵconditionalCreate(0, MemorySectionComponent_Conditional_0_Template, 3, 1);
|
|
227
204
|
} if (rf & 2) {
|
|
228
205
|
let tmp_0_0;
|
|
229
206
|
i0.ɵɵconditional((tmp_0_0 = ctx.memoryService()) ? 0 : -1, tmp_0_0);
|
|
230
|
-
} }, styles: [".
|
|
207
|
+
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-fill--warn[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--prism-warn), var(--prism-warn));\n opacity: 0.8;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--prism-primary); }\n .perf-bar-val--warn[_ngcontent-%COMP%] { color: var(--prism-warn); }\n\n .perf-leak-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n font-size: 12px;\n font-weight: 500;\n margin-top: 8px;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-success) 25%, transparent);\n color: var(--prism-success);\n }\n .perf-leak-badge--warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-warn) 25%, transparent);\n color: var(--prism-warn);\n }\n .perf-leak-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] { background: var(--prism-success); }\n .perf-leak-badge--warn[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] {\n background: var(--prism-warn);\n box-shadow: 0 0 6px var(--prism-warn);\n }\n\n .perf-disclaimer[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }"], changeDetection: 0 });
|
|
231
208
|
}
|
|
232
209
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
|
|
233
210
|
type: Component,
|
|
234
211
|
args: [{ selector: 'perf-memory-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
235
212
|
@if (memoryService(); as svc) {
|
|
236
213
|
@if (!svc.available()) {
|
|
237
|
-
<div class="
|
|
238
|
-
<div class="
|
|
239
|
-
<div class="
|
|
240
|
-
<div class="prism-perf-empty-hint">performance.memory is Chrome-only (non-standard)</div>
|
|
214
|
+
<div class="perf-empty">
|
|
215
|
+
<div class="perf-empty-text">Memory API not available</div>
|
|
216
|
+
<div class="perf-empty-hint">performance.memory is Chrome-only (non-standard)</div>
|
|
241
217
|
</div>
|
|
242
218
|
} @else if (svc.snapshots().length > 0) {
|
|
243
|
-
<div class="
|
|
244
|
-
<div class="
|
|
245
|
-
<div class="
|
|
246
|
-
<div class="
|
|
247
|
-
<div class="
|
|
219
|
+
<div class="perf-body">
|
|
220
|
+
<div class="perf-card">
|
|
221
|
+
<div class="perf-card-head"><span class="perf-card-name">Before Create</span></div>
|
|
222
|
+
<div class="perf-card-val">{{ formatMb(svc.beforeCreate()?.bytes) }}<span>MB</span></div>
|
|
223
|
+
<div class="perf-card-sub">baseline heap</div>
|
|
248
224
|
</div>
|
|
249
|
-
<div class="
|
|
250
|
-
<div class="
|
|
251
|
-
|
|
252
|
-
|
|
225
|
+
<div class="perf-card">
|
|
226
|
+
<div class="perf-card-head">
|
|
227
|
+
<span class="perf-card-name">After Create</span>
|
|
228
|
+
@if (svc.delta() !== null && svc.delta()! > 0) {
|
|
229
|
+
<span class="perf-card-status warn">watch</span>
|
|
230
|
+
}
|
|
253
231
|
</div>
|
|
254
|
-
<div class="
|
|
232
|
+
<div class="perf-card-val" [style.color]="afterCreateColor()">{{ formatMb(svc.afterCreate()?.bytes) }}<span>MB</span></div>
|
|
233
|
+
<div class="perf-card-sub">{{ deltaText() }}</div>
|
|
255
234
|
</div>
|
|
256
|
-
<div class="
|
|
257
|
-
<div class="
|
|
258
|
-
<div class="
|
|
259
|
-
{{ formatMb(svc.afterDestroy()?.bytes) }}<span class="prism-perf-memory-unit"> MB</span>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="prism-perf-sub">{{ residualText() }}</div>
|
|
235
|
+
<div class="perf-card">
|
|
236
|
+
<div class="perf-card-head"><span class="perf-card-name">After Destroy</span></div>
|
|
237
|
+
<div class="perf-card-val" [style.color]="destroyColor()">{{ formatMb(svc.afterDestroy()?.bytes) }}<span>MB</span></div>
|
|
262
238
|
</div>
|
|
263
239
|
</div>
|
|
264
240
|
|
|
265
241
|
@if (svc.beforeCreate() && svc.afterCreate()) {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
<div class="
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
</
|
|
276
|
-
<div class="prism-perf-memory-bar-row">
|
|
277
|
-
<span class="prism-perf-memory-bar-label">after create</span>
|
|
278
|
-
<div class="prism-perf-memory-bar-track">
|
|
279
|
-
<div class="prism-perf-memory-bar-fill" [style.width.%]="barPercent(svc.afterCreate()?.bytes)" style="background:linear-gradient(90deg,rgba(167,139,250,0.4),rgba(251,191,36,0.6))"></div>
|
|
280
|
-
</div>
|
|
281
|
-
<span class="prism-perf-memory-bar-val" style="color:var(--perf-warn, #fbbf24)">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>
|
|
282
|
-
</div>
|
|
283
|
-
@if (svc.afterDestroy()) {
|
|
284
|
-
<div class="prism-perf-memory-bar-row">
|
|
285
|
-
<span class="prism-perf-memory-bar-label">after destroy</span>
|
|
286
|
-
<div class="prism-perf-memory-bar-track">
|
|
287
|
-
<div class="prism-perf-memory-bar-fill" [style.width.%]="barPercent(svc.afterDestroy()?.bytes)" style="background:rgba(74,222,128,0.4)"></div>
|
|
288
|
-
</div>
|
|
289
|
-
<span class="prism-perf-memory-bar-val" style="color:var(--perf-ok, #4ade80)">{{ formatMb(svc.afterDestroy()?.bytes) }} MB</span>
|
|
290
|
-
</div>
|
|
291
|
-
}
|
|
242
|
+
<div class="perf-detail">
|
|
243
|
+
<div class="perf-card perf-card--block">
|
|
244
|
+
<div class="perf-card-head"><span class="perf-card-name">Heap Comparison</span></div>
|
|
245
|
+
<div class="perf-bars">
|
|
246
|
+
<span class="perf-bar-label">before</span>
|
|
247
|
+
<div class="perf-bar-track"><div class="perf-bar-fill" [style.width.%]="barPercent(svc.beforeCreate()?.bytes)"></div></div>
|
|
248
|
+
<span class="perf-bar-val">{{ formatMb(svc.beforeCreate()?.bytes) }} MB</span>
|
|
249
|
+
<span class="perf-bar-label">after create</span>
|
|
250
|
+
<div class="perf-bar-track"><div class="perf-bar-fill perf-bar-fill--warn" [style.width.%]="barPercent(svc.afterCreate()?.bytes)"></div></div>
|
|
251
|
+
<span class="perf-bar-val perf-bar-val--warn">{{ formatMb(svc.afterCreate()?.bytes) }} MB</span>
|
|
292
252
|
</div>
|
|
293
253
|
</div>
|
|
254
|
+
</div>
|
|
294
255
|
}
|
|
295
256
|
|
|
296
|
-
<div class="
|
|
297
|
-
<div class="
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
257
|
+
<div class="perf-detail perf-detail--last">
|
|
258
|
+
<div class="perf-card perf-card--block">
|
|
259
|
+
<div class="perf-card-head"><span class="perf-card-name">Leak Analysis</span></div>
|
|
260
|
+
@if (svc.leakStatus() === 'ok') {
|
|
261
|
+
<div class="perf-leak-badge perf-leak-badge--ok">
|
|
262
|
+
<span class="perf-leak-dot"></span>
|
|
263
|
+
No significant leak detected
|
|
302
264
|
</div>
|
|
303
|
-
|
|
304
|
-
<div class="
|
|
305
|
-
<
|
|
306
|
-
Possible leak
|
|
265
|
+
} @else if (svc.leakStatus() === 'warn') {
|
|
266
|
+
<div class="perf-leak-badge perf-leak-badge--warn">
|
|
267
|
+
<span class="perf-leak-dot"></span>
|
|
268
|
+
Possible leak — +{{ formatMb(svc.residual()!) }} MB not reclaimed
|
|
307
269
|
</div>
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
performance.memory is Chrome-only (non-standard). Not available in other browsers.
|
|
270
|
+
}
|
|
271
|
+
<div class="perf-disclaimer">ⓘ performance.memory is Chrome-only (non-standard). Not available in other browsers.</div>
|
|
311
272
|
</div>
|
|
312
273
|
</div>
|
|
313
274
|
} @else {
|
|
314
|
-
<div class="
|
|
315
|
-
<div class="
|
|
316
|
-
<div class="
|
|
317
|
-
<div class="prism-perf-empty-hint">Click Snapshot to capture heap data</div>
|
|
275
|
+
<div class="perf-empty">
|
|
276
|
+
<div class="perf-empty-text">No memory snapshots yet</div>
|
|
277
|
+
<div class="perf-empty-hint">Click Snapshot to capture heap data</div>
|
|
318
278
|
</div>
|
|
319
279
|
}
|
|
320
280
|
}
|
|
321
|
-
`, styles: ["\n .
|
|
281
|
+
`, styles: ["\n .perf-body {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card {\n padding: 16px;\n background: var(--prism-bg-surface);\n border: 1px solid var(--prism-border);\n border-radius: 10px;\n }\n .perf-card--block { display: block; }\n .perf-card-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.warn {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .perf-card-val {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val span {\n font-size: 13px;\n color: var(--prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub {\n font-size: 11px;\n color: var(--prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail { padding: 0 24px 16px; }\n .perf-detail--last { padding-bottom: 20px; }\n\n .perf-bars {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label { color: var(--prism-text-muted); }\n .perf-bar-track {\n height: 8px;\n background: var(--prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-fill--warn {\n background: linear-gradient(90deg, var(--prism-warn), var(--prism-warn));\n opacity: 0.8;\n }\n .perf-bar-val { color: var(--prism-primary); }\n .perf-bar-val--warn { color: var(--prism-warn); }\n\n .perf-leak-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n font-size: 12px;\n font-weight: 500;\n margin-top: 8px;\n }\n .perf-leak-badge--ok {\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-success) 25%, transparent);\n color: var(--prism-success);\n }\n .perf-leak-badge--warn {\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-warn) 25%, transparent);\n color: var(--prism-warn);\n }\n .perf-leak-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .perf-leak-badge--ok .perf-leak-dot { background: var(--prism-success); }\n .perf-leak-badge--warn .perf-leak-dot {\n background: var(--prism-warn);\n box-shadow: 0 0 6px var(--prism-warn);\n }\n\n .perf-disclaimer {\n margin-top: 8px;\n font-size: 12px;\n color: var(--prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text { font-size: 12px; color: var(--prism-text-ghost); }\n .perf-empty-hint { font-size: 11px; color: var(--prism-text-ghost); opacity: 0.6; }\n "] }]
|
|
322
282
|
}], null, { memoryService: [{ type: i0.Input, args: [{ isSignal: true, alias: "memoryService", required: true }] }] }); })();
|
|
323
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber:
|
|
283
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MemorySectionComponent, { className: "MemorySectionComponent", filePath: "memory/memory-section.component.ts", lineNumber: 223 }); })();
|
|
@@ -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,qBAiNa,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"}
|