@react-perfscope/ui 0.6.0 → 0.7.0
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/index.cjs +288 -248
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +288 -248
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -114,6 +114,9 @@ var en = {
|
|
|
114
114
|
heapUnsupported: "heap size unavailable (Chromium only)",
|
|
115
115
|
heapExtensionHint: "Heap size includes browser extensions injected into the page (e.g. React DevTools), so it can rise even while your app is idle. For app-only measurement, record in an incognito window or a profile with extensions disabled.",
|
|
116
116
|
heapTrendLabel: (cls) => cls === "leak-suspected" ? "leak suspected" : cls === "growing" ? "growing" : "stable",
|
|
117
|
+
leaksTitle: "Suspected leaks",
|
|
118
|
+
leakHint: "Components whose unmounted instances stayed in memory with a count that kept climbing. Shows which component leaks and how many instances \u2014 not what retains them (a heap snapshot, unavailable in-page, is needed for that).",
|
|
119
|
+
leakSuspect: (component, retained, unmounted) => `${component} \u2014 ${retained} retained of ${unmounted} unmounted, climbing`,
|
|
117
120
|
fpsLabel: "fps",
|
|
118
121
|
fpsUnsupported: "frame timing unavailable",
|
|
119
122
|
fpsBadge: (minFps, dropped) => `min ${minFps}fps \xB7 ${dropped} dropped`,
|
|
@@ -209,6 +212,9 @@ var ko = {
|
|
|
209
212
|
heapUnsupported: "\uD799 \uCE21\uC815 \uBBF8\uC9C0\uC6D0 (\uD06C\uB86C \uC804\uC6A9)",
|
|
210
213
|
heapExtensionHint: "\uD799 \uD06C\uAE30\uC5D4 \uD398\uC774\uC9C0\uC5D0 \uC8FC\uC785\uB41C \uBE0C\uB77C\uC6B0\uC800 \uD655\uC7A5(\uC608: React DevTools) \uBA54\uBAA8\uB9AC\uB3C4 \uD3EC\uD568\uB3FC\uC694. \uADF8\uB798\uC11C \uC571\uC774 idle\uC774\uC5B4\uB3C4 \uC62C\uB77C\uAC08 \uC218 \uC788\uC5B4\uC694. \uC571\uB9CC \uC815\uD655\uD788 \uC7AC\uB824\uBA74 \uC2DC\uD06C\uB9BF \uCC3D\uC774\uB098 \uD655\uC7A5\uC774 \uAEBC\uC9C4 \uD504\uB85C\uD544\uC5D0\uC11C \uB179\uD654\uD558\uC138\uC694.",
|
|
211
214
|
heapTrendLabel: (cls) => cls === "leak-suspected" ? "\uB204\uC218 \uC758\uC2EC" : cls === "growing" ? "\uC99D\uAC00 \uC911" : "\uC548\uC815",
|
|
215
|
+
leaksTitle: "\uB204\uC218 \uC758\uC2EC",
|
|
216
|
+
leakHint: "\uC5B8\uB9C8\uC6B4\uD2B8\uB410\uB294\uB370 \uBA54\uBAA8\uB9AC\uC5D0 \uB0A8\uACE0 \uADF8 \uC218\uAC00 \uACC4\uC18D \uB298\uC5B4\uB09C \uCEF4\uD3EC\uB10C\uD2B8\uC608\uC694. \uC5B4\uB5A4 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uBA87 \uAC1C \uB204\uC218\uD558\uB294\uC9C0\uB294 \uBCF4\uC5EC\uC8FC\uC9C0\uB9CC, \uBB34\uC5C7\uC774 \uBD99\uC7A1\uACE0 \uC788\uB294\uC9C0\uB294(\uD799 \uC2A4\uB0C5\uC0F7\uC774 \uD544\uC694\uD55C\uB370 in-page\uC5D0\uC120 \uBD88\uAC00) \uC54C \uC218 \uC5C6\uC5B4\uC694.",
|
|
217
|
+
leakSuspect: (component, retained, unmounted) => `${component} \u2014 \uC5B8\uB9C8\uC6B4\uD2B8 ${unmounted}\uAC1C \uC911 ${retained}\uAC1C \uBCF4\uC720, \uC99D\uAC00 \uC911`,
|
|
212
218
|
fpsLabel: "fps",
|
|
213
219
|
fpsUnsupported: "\uD504\uB808\uC784 \uCE21\uC815 \uBBF8\uC9C0\uC6D0",
|
|
214
220
|
fpsBadge: (minFps, dropped) => `\uCD5C\uC800 ${minFps}fps \xB7 \uB4DC\uB78D ${dropped}`,
|
|
@@ -1765,8 +1771,39 @@ function TooltipContent({ s, startedAt }) {
|
|
|
1765
1771
|
}
|
|
1766
1772
|
}
|
|
1767
1773
|
|
|
1768
|
-
// src/
|
|
1774
|
+
// src/leaks.tsx
|
|
1769
1775
|
import { jsx as jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
|
|
1776
|
+
function LeakList({ suspects }) {
|
|
1777
|
+
const { t } = useI18n();
|
|
1778
|
+
if (!suspects || suspects.length === 0) return null;
|
|
1779
|
+
return /* @__PURE__ */ jsxs4("div", { "data-leaks": "", style: { padding: "8px 10px", borderBottom: "1px solid #1c1c1c" }, children: [
|
|
1780
|
+
/* @__PURE__ */ jsxs4(
|
|
1781
|
+
"div",
|
|
1782
|
+
{
|
|
1783
|
+
style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px" },
|
|
1784
|
+
children: [
|
|
1785
|
+
/* @__PURE__ */ jsx4("span", { style: { color: "#ef4444", fontSize: "11px", fontWeight: 600 }, children: t.leaksTitle }),
|
|
1786
|
+
/* @__PURE__ */ jsxs4("span", { style: { color: "#666", fontSize: "10px" }, children: [
|
|
1787
|
+
"\xD7",
|
|
1788
|
+
suspects.length
|
|
1789
|
+
] })
|
|
1790
|
+
]
|
|
1791
|
+
}
|
|
1792
|
+
),
|
|
1793
|
+
/* @__PURE__ */ jsx4("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: suspects.map((s) => /* @__PURE__ */ jsx4(
|
|
1794
|
+
"li",
|
|
1795
|
+
{
|
|
1796
|
+
style: { color: "#e6e6e6", fontSize: "11px", padding: "2px 0", fontVariantNumeric: "tabular-nums" },
|
|
1797
|
+
children: t.leakSuspect(s.component, s.retained, s.unmounted)
|
|
1798
|
+
},
|
|
1799
|
+
s.component
|
|
1800
|
+
)) }),
|
|
1801
|
+
/* @__PURE__ */ jsx4("p", { style: { color: "#666", fontSize: "10px", margin: "6px 0 0", lineHeight: 1.4 }, children: t.leakHint })
|
|
1802
|
+
] });
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
// src/render-insights.tsx
|
|
1806
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
|
|
1770
1807
|
function aggregate(signals) {
|
|
1771
1808
|
const byName = /* @__PURE__ */ new Map();
|
|
1772
1809
|
for (const s of signals) {
|
|
@@ -1797,7 +1834,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1797
1834
|
const top = rows.slice(0, TOP_N);
|
|
1798
1835
|
const max = top.length > 0 ? top[0].totalMs : 1;
|
|
1799
1836
|
const hiddenCount = rows.length - top.length;
|
|
1800
|
-
return /* @__PURE__ */
|
|
1837
|
+
return /* @__PURE__ */ jsxs5(
|
|
1801
1838
|
"div",
|
|
1802
1839
|
{
|
|
1803
1840
|
style: {
|
|
@@ -1808,12 +1845,12 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1808
1845
|
borderRadius: "8px"
|
|
1809
1846
|
},
|
|
1810
1847
|
children: [
|
|
1811
|
-
/* @__PURE__ */
|
|
1812
|
-
/* @__PURE__ */
|
|
1848
|
+
/* @__PURE__ */ jsx5("div", { style: { fontSize: "10px", color: "#888", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "6px" }, children: t.topRenderers }),
|
|
1849
|
+
/* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
|
|
1813
1850
|
top.map((a) => {
|
|
1814
1851
|
const widthPct = max > 0 ? Math.max(2, a.totalMs / max * 100) : 0;
|
|
1815
1852
|
const color = SEVERITY_COLOR[a.worstSeverity];
|
|
1816
|
-
return /* @__PURE__ */
|
|
1853
|
+
return /* @__PURE__ */ jsxs5(
|
|
1817
1854
|
"div",
|
|
1818
1855
|
{
|
|
1819
1856
|
"data-component": a.component,
|
|
@@ -1829,8 +1866,8 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1829
1866
|
},
|
|
1830
1867
|
title: t.rendererDetail(a.component, a.count, a.totalMs, a.maxMs),
|
|
1831
1868
|
children: [
|
|
1832
|
-
/* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1869
|
+
/* @__PURE__ */ jsx5("strong", { style: { flex: "0 0 30%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.component }),
|
|
1870
|
+
/* @__PURE__ */ jsx5("div", { style: { flex: "1", position: "relative", height: "14px", background: "#1f1f1f", borderRadius: "2px" }, children: /* @__PURE__ */ jsx5(
|
|
1834
1871
|
"div",
|
|
1835
1872
|
{
|
|
1836
1873
|
style: {
|
|
@@ -1845,11 +1882,11 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1845
1882
|
}
|
|
1846
1883
|
}
|
|
1847
1884
|
) }),
|
|
1848
|
-
/* @__PURE__ */
|
|
1885
|
+
/* @__PURE__ */ jsxs5("span", { style: { flex: "0 0 auto", color, minWidth: "56px", textAlign: "right" }, children: [
|
|
1849
1886
|
a.totalMs.toFixed(1),
|
|
1850
1887
|
"ms"
|
|
1851
1888
|
] }),
|
|
1852
|
-
/* @__PURE__ */
|
|
1889
|
+
/* @__PURE__ */ jsxs5("span", { style: { flex: "0 0 auto", color: "#888", minWidth: "32px", textAlign: "right" }, children: [
|
|
1853
1890
|
"\xD7",
|
|
1854
1891
|
a.count
|
|
1855
1892
|
] })
|
|
@@ -1858,7 +1895,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1858
1895
|
a.component
|
|
1859
1896
|
);
|
|
1860
1897
|
}),
|
|
1861
|
-
hiddenCount > 0 && /* @__PURE__ */
|
|
1898
|
+
hiddenCount > 0 && /* @__PURE__ */ jsx5("div", { style: { fontSize: "10px", color: "#666", marginTop: "2px" }, children: t.moreComponents(hiddenCount) })
|
|
1862
1899
|
] })
|
|
1863
1900
|
]
|
|
1864
1901
|
}
|
|
@@ -1869,7 +1906,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1869
1906
|
import { correlate } from "@react-perfscope/core";
|
|
1870
1907
|
|
|
1871
1908
|
// src/episode-shared.tsx
|
|
1872
|
-
import { Fragment as Fragment2, jsx as
|
|
1909
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
|
|
1873
1910
|
function memberLabel(m) {
|
|
1874
1911
|
const s = m.signal;
|
|
1875
1912
|
if (s.kind === "render") return `${s.component} (${s.reason})`;
|
|
@@ -1880,18 +1917,18 @@ function memberLabel(m) {
|
|
|
1880
1917
|
return `layout shift ${s.value.toFixed(3)}`;
|
|
1881
1918
|
}
|
|
1882
1919
|
function EpisodeMemberRow({ member }) {
|
|
1883
|
-
return /* @__PURE__ */
|
|
1920
|
+
return /* @__PURE__ */ jsxs6(
|
|
1884
1921
|
"div",
|
|
1885
1922
|
{
|
|
1886
1923
|
"data-member-kind": member.signal.kind,
|
|
1887
1924
|
style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
|
|
1888
1925
|
children: [
|
|
1889
|
-
/* @__PURE__ */
|
|
1890
|
-
member.causedBy && /* @__PURE__ */
|
|
1926
|
+
/* @__PURE__ */ jsx6("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
|
|
1927
|
+
member.causedBy && /* @__PURE__ */ jsxs6("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
|
|
1891
1928
|
"\u2190 ",
|
|
1892
1929
|
member.causedBy.component
|
|
1893
1930
|
] }),
|
|
1894
|
-
member.confidence === "caused" && /* @__PURE__ */
|
|
1931
|
+
member.confidence === "caused" && /* @__PURE__ */ jsx6(
|
|
1895
1932
|
"span",
|
|
1896
1933
|
{
|
|
1897
1934
|
style: {
|
|
@@ -1910,12 +1947,12 @@ function EpisodeMemberRow({ member }) {
|
|
|
1910
1947
|
);
|
|
1911
1948
|
}
|
|
1912
1949
|
function EpisodeMemberList({ members }) {
|
|
1913
|
-
if (members.length === 0) return /* @__PURE__ */
|
|
1914
|
-
return /* @__PURE__ */
|
|
1950
|
+
if (members.length === 0) return /* @__PURE__ */ jsx6("span", { style: { color: "#555" }, children: "\u2014" });
|
|
1951
|
+
return /* @__PURE__ */ jsx6(Fragment2, { children: members.map((m, i) => /* @__PURE__ */ jsx6(EpisodeMemberRow, { member: m }, i)) });
|
|
1915
1952
|
}
|
|
1916
1953
|
|
|
1917
1954
|
// src/inp-episode.tsx
|
|
1918
|
-
import { jsx as
|
|
1955
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "preact/jsx-runtime";
|
|
1919
1956
|
var PHASES = [
|
|
1920
1957
|
{ phase: "input-delay", labelKey: "inputDelay" },
|
|
1921
1958
|
{ phase: "processing", labelKey: "processingTime" },
|
|
@@ -1940,7 +1977,7 @@ function InpEpisode({ signals }) {
|
|
|
1940
1977
|
if (!episode || episode.anchor.kind !== "interaction") return null;
|
|
1941
1978
|
const a = episode.anchor;
|
|
1942
1979
|
const target = a.target ? ` on ${a.target}` : "";
|
|
1943
|
-
return /* @__PURE__ */
|
|
1980
|
+
return /* @__PURE__ */ jsxs7(
|
|
1944
1981
|
"div",
|
|
1945
1982
|
{
|
|
1946
1983
|
"data-inp-episode": true,
|
|
@@ -1954,33 +1991,33 @@ function InpEpisode({ signals }) {
|
|
|
1954
1991
|
overflow: "hidden"
|
|
1955
1992
|
},
|
|
1956
1993
|
children: [
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
/* @__PURE__ */
|
|
1994
|
+
/* @__PURE__ */ jsxs7("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
|
|
1995
|
+
/* @__PURE__ */ jsx7("strong", { children: a.eventType }),
|
|
1959
1996
|
target,
|
|
1960
1997
|
" \u2014 ",
|
|
1961
|
-
/* @__PURE__ */
|
|
1998
|
+
/* @__PURE__ */ jsxs7("strong", { children: [
|
|
1962
1999
|
Math.round(a.duration),
|
|
1963
2000
|
"ms"
|
|
1964
2001
|
] }),
|
|
1965
2002
|
" ",
|
|
1966
|
-
/* @__PURE__ */
|
|
2003
|
+
/* @__PURE__ */ jsx7("span", { style: { color: "#888" }, children: "INP" })
|
|
1967
2004
|
] }),
|
|
1968
2005
|
PHASES.map(({ phase, labelKey }) => {
|
|
1969
2006
|
const members = episode.members.filter((m) => m.phase === phase);
|
|
1970
|
-
return /* @__PURE__ */
|
|
2007
|
+
return /* @__PURE__ */ jsxs7(
|
|
1971
2008
|
"div",
|
|
1972
2009
|
{
|
|
1973
2010
|
"data-inp-phase": phase,
|
|
1974
2011
|
style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
|
|
1975
2012
|
children: [
|
|
1976
|
-
/* @__PURE__ */
|
|
2013
|
+
/* @__PURE__ */ jsxs7("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
|
|
1977
2014
|
t[labelKey],
|
|
1978
|
-
/* @__PURE__ */
|
|
2015
|
+
/* @__PURE__ */ jsxs7("div", { style: { color: "#666", fontSize: "10px" }, children: [
|
|
1979
2016
|
Math.round(phaseMs(episode, phase)),
|
|
1980
2017
|
"ms"
|
|
1981
2018
|
] })
|
|
1982
2019
|
] }),
|
|
1983
|
-
/* @__PURE__ */
|
|
2020
|
+
/* @__PURE__ */ jsx7("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx7(EpisodeMemberList, { members }) })
|
|
1984
2021
|
]
|
|
1985
2022
|
},
|
|
1986
2023
|
phase
|
|
@@ -1993,7 +2030,7 @@ function InpEpisode({ signals }) {
|
|
|
1993
2030
|
|
|
1994
2031
|
// src/long-task-episode.tsx
|
|
1995
2032
|
import { correlate as correlate2 } from "@react-perfscope/core";
|
|
1996
|
-
import { jsx as
|
|
2033
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
|
|
1997
2034
|
function worstLongTaskEpisode(signals) {
|
|
1998
2035
|
let worst = null;
|
|
1999
2036
|
for (const ep of correlate2(signals)) {
|
|
@@ -2008,7 +2045,7 @@ function LongTaskEpisode({ signals }) {
|
|
|
2008
2045
|
if (!episode || episode.anchor.kind !== "long-task") return null;
|
|
2009
2046
|
if (episode.members.length === 0) return null;
|
|
2010
2047
|
const a = episode.anchor;
|
|
2011
|
-
return /* @__PURE__ */
|
|
2048
|
+
return /* @__PURE__ */ jsxs8(
|
|
2012
2049
|
"div",
|
|
2013
2050
|
{
|
|
2014
2051
|
"data-long-task-episode": true,
|
|
@@ -2022,15 +2059,15 @@ function LongTaskEpisode({ signals }) {
|
|
|
2022
2059
|
overflow: "hidden"
|
|
2023
2060
|
},
|
|
2024
2061
|
children: [
|
|
2025
|
-
/* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2062
|
+
/* @__PURE__ */ jsxs8("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
|
|
2063
|
+
/* @__PURE__ */ jsx8("strong", { children: t.kindLabel("long-task") }),
|
|
2027
2064
|
" \u2014 ",
|
|
2028
|
-
/* @__PURE__ */
|
|
2065
|
+
/* @__PURE__ */ jsxs8("strong", { children: [
|
|
2029
2066
|
Math.round(a.duration),
|
|
2030
2067
|
"ms"
|
|
2031
2068
|
] })
|
|
2032
2069
|
] }),
|
|
2033
|
-
/* @__PURE__ */
|
|
2070
|
+
/* @__PURE__ */ jsx8("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ jsx8(EpisodeMemberList, { members: episode.members }) })
|
|
2034
2071
|
]
|
|
2035
2072
|
}
|
|
2036
2073
|
);
|
|
@@ -2076,7 +2113,7 @@ function signalMatchesFilter(signal, query) {
|
|
|
2076
2113
|
}
|
|
2077
2114
|
|
|
2078
2115
|
// src/panel.tsx
|
|
2079
|
-
import { Fragment as Fragment3, jsx as
|
|
2116
|
+
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "preact/jsx-runtime";
|
|
2080
2117
|
var RENDER_REASON_COLOR = {
|
|
2081
2118
|
mount: "#5ac8fa",
|
|
2082
2119
|
state: "#34c759",
|
|
@@ -2100,7 +2137,7 @@ function RenderReasonTag({ reason, changedProps }) {
|
|
|
2100
2137
|
const color = RENDER_REASON_COLOR[reason];
|
|
2101
2138
|
const label = renderReasonLabel(t, reason);
|
|
2102
2139
|
const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
|
|
2103
|
-
return /* @__PURE__ */
|
|
2140
|
+
return /* @__PURE__ */ jsxs9(
|
|
2104
2141
|
"span",
|
|
2105
2142
|
{
|
|
2106
2143
|
style: {
|
|
@@ -2156,7 +2193,7 @@ var WEB_VITAL_UNIT2 = {
|
|
|
2156
2193
|
};
|
|
2157
2194
|
function RatingDot({ rating }) {
|
|
2158
2195
|
const { t } = useI18n();
|
|
2159
|
-
return /* @__PURE__ */
|
|
2196
|
+
return /* @__PURE__ */ jsx9(
|
|
2160
2197
|
"span",
|
|
2161
2198
|
{
|
|
2162
2199
|
"data-rating": rating,
|
|
@@ -2214,18 +2251,18 @@ var monoStyle = {
|
|
|
2214
2251
|
};
|
|
2215
2252
|
function LayoutShiftDetail({ s }) {
|
|
2216
2253
|
const { t } = useI18n();
|
|
2217
|
-
return /* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2219
|
-
/* @__PURE__ */
|
|
2220
|
-
/* @__PURE__ */
|
|
2254
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2255
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2256
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.value }),
|
|
2257
|
+
/* @__PURE__ */ jsx9("span", { children: s.value.toFixed(4) })
|
|
2221
2258
|
] }),
|
|
2222
|
-
s.sources.length === 0 ? /* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2259
|
+
s.sources.length === 0 ? /* @__PURE__ */ jsx9("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ jsxs9("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2260
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: "#888" }, children: [
|
|
2224
2261
|
t.rect,
|
|
2225
2262
|
" ",
|
|
2226
2263
|
i + 1
|
|
2227
2264
|
] }),
|
|
2228
|
-
/* @__PURE__ */
|
|
2265
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2229
2266
|
"x=",
|
|
2230
2267
|
r.x.toFixed(0),
|
|
2231
2268
|
" y=",
|
|
@@ -2240,25 +2277,25 @@ function LayoutShiftDetail({ s }) {
|
|
|
2240
2277
|
}
|
|
2241
2278
|
function NetworkDetail({ s }) {
|
|
2242
2279
|
const { t } = useI18n();
|
|
2243
|
-
return /* @__PURE__ */
|
|
2244
|
-
/* @__PURE__ */
|
|
2245
|
-
/* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2280
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2281
|
+
/* @__PURE__ */ jsx9("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ jsx9("span", { children: s.url }) }),
|
|
2282
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2283
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.started }),
|
|
2284
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2248
2285
|
s.startedAt.toFixed(0),
|
|
2249
2286
|
"ms"
|
|
2250
2287
|
] })
|
|
2251
2288
|
] }),
|
|
2252
|
-
/* @__PURE__ */
|
|
2253
|
-
/* @__PURE__ */
|
|
2254
|
-
/* @__PURE__ */
|
|
2289
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2290
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.duration }),
|
|
2291
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2255
2292
|
s.duration.toFixed(0),
|
|
2256
2293
|
"ms"
|
|
2257
2294
|
] })
|
|
2258
2295
|
] }),
|
|
2259
|
-
/* @__PURE__ */
|
|
2260
|
-
/* @__PURE__ */
|
|
2261
|
-
/* @__PURE__ */
|
|
2296
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2297
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.size }),
|
|
2298
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2262
2299
|
(s.size / 1024).toFixed(2),
|
|
2263
2300
|
"KB (",
|
|
2264
2301
|
s.size,
|
|
@@ -2267,69 +2304,69 @@ function NetworkDetail({ s }) {
|
|
|
2267
2304
|
")"
|
|
2268
2305
|
] })
|
|
2269
2306
|
] }),
|
|
2270
|
-
/* @__PURE__ */
|
|
2271
|
-
/* @__PURE__ */
|
|
2272
|
-
/* @__PURE__ */
|
|
2307
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2308
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.renderBlocking }),
|
|
2309
|
+
/* @__PURE__ */ jsx9("span", { children: s.blocking ? t.yes : t.no })
|
|
2273
2310
|
] })
|
|
2274
2311
|
] });
|
|
2275
2312
|
}
|
|
2276
2313
|
function WebVitalDetail({ s }) {
|
|
2277
2314
|
const { t } = useI18n();
|
|
2278
|
-
return /* @__PURE__ */
|
|
2279
|
-
/* @__PURE__ */
|
|
2280
|
-
/* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2315
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2316
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2317
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.metric }),
|
|
2318
|
+
/* @__PURE__ */ jsx9("span", { children: s.name })
|
|
2282
2319
|
] }),
|
|
2283
|
-
/* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2285
|
-
/* @__PURE__ */
|
|
2320
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2321
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.value }),
|
|
2322
|
+
/* @__PURE__ */ jsx9("span", { children: s.value.toFixed(2) })
|
|
2286
2323
|
] })
|
|
2287
2324
|
] });
|
|
2288
2325
|
}
|
|
2289
2326
|
function RenderDetail({ s }) {
|
|
2290
2327
|
const { t } = useI18n();
|
|
2291
2328
|
if (s.members && s.members.length > 0) {
|
|
2292
|
-
return /* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2329
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2330
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2331
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.duration }),
|
|
2332
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2296
2333
|
s.duration.toFixed(3),
|
|
2297
2334
|
"ms"
|
|
2298
2335
|
] })
|
|
2299
2336
|
] }),
|
|
2300
|
-
/* @__PURE__ */
|
|
2301
|
-
/* @__PURE__ */
|
|
2302
|
-
/* @__PURE__ */
|
|
2337
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2338
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.at }),
|
|
2339
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2303
2340
|
s.at.toFixed(2),
|
|
2304
2341
|
"ms"
|
|
2305
2342
|
] })
|
|
2306
2343
|
] }),
|
|
2307
|
-
/* @__PURE__ */
|
|
2344
|
+
/* @__PURE__ */ jsx9("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx9(CascadeMembers, { members: s.members }) })
|
|
2308
2345
|
] });
|
|
2309
2346
|
}
|
|
2310
|
-
return /* @__PURE__ */
|
|
2311
|
-
/* @__PURE__ */
|
|
2312
|
-
/* @__PURE__ */
|
|
2313
|
-
/* @__PURE__ */
|
|
2347
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2348
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2349
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.component }),
|
|
2350
|
+
/* @__PURE__ */ jsx9("span", { children: s.component })
|
|
2314
2351
|
] }),
|
|
2315
|
-
/* @__PURE__ */
|
|
2316
|
-
/* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2352
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2353
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.reason }),
|
|
2354
|
+
/* @__PURE__ */ jsx9(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
|
|
2318
2355
|
] }),
|
|
2319
|
-
s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */
|
|
2320
|
-
/* @__PURE__ */
|
|
2321
|
-
/* @__PURE__ */
|
|
2356
|
+
s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ jsxs9("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2357
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.changedProps }),
|
|
2358
|
+
/* @__PURE__ */ jsx9("span", { children: s.changedProps.join(", ") })
|
|
2322
2359
|
] }),
|
|
2323
|
-
/* @__PURE__ */
|
|
2324
|
-
/* @__PURE__ */
|
|
2325
|
-
/* @__PURE__ */
|
|
2360
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2361
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.duration }),
|
|
2362
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2326
2363
|
s.duration.toFixed(3),
|
|
2327
2364
|
"ms"
|
|
2328
2365
|
] })
|
|
2329
2366
|
] }),
|
|
2330
|
-
/* @__PURE__ */
|
|
2331
|
-
/* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2367
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2368
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.at }),
|
|
2369
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2333
2370
|
s.at.toFixed(2),
|
|
2334
2371
|
"ms"
|
|
2335
2372
|
] })
|
|
@@ -2359,11 +2396,11 @@ function StackFrames({
|
|
|
2359
2396
|
cancelled = true;
|
|
2360
2397
|
};
|
|
2361
2398
|
}, [raw]);
|
|
2362
|
-
return /* @__PURE__ */
|
|
2363
|
-
resolving && /* @__PURE__ */
|
|
2364
|
-
frames.length === 0 ? /* @__PURE__ */
|
|
2365
|
-
f.fnName ? /* @__PURE__ */
|
|
2366
|
-
/* @__PURE__ */
|
|
2399
|
+
return /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
2400
|
+
resolving && /* @__PURE__ */ jsx9("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
|
|
2401
|
+
frames.length === 0 ? /* @__PURE__ */ jsx9("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ jsxs9("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2402
|
+
f.fnName ? /* @__PURE__ */ jsx9("span", { children: f.fnName }) : /* @__PURE__ */ jsx9("span", { style: { color: "#666" }, children: t.anonymous }),
|
|
2403
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: "#888" }, children: [
|
|
2367
2404
|
f.file,
|
|
2368
2405
|
":",
|
|
2369
2406
|
f.line,
|
|
@@ -2377,7 +2414,7 @@ function ForcedReflowDetail({
|
|
|
2377
2414
|
s,
|
|
2378
2415
|
resolveFrame
|
|
2379
2416
|
}) {
|
|
2380
|
-
return /* @__PURE__ */
|
|
2417
|
+
return /* @__PURE__ */ jsx9("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ jsx9(StackFrames, { raw: s.stack, resolveFrame }) });
|
|
2381
2418
|
}
|
|
2382
2419
|
function HotFunctions({
|
|
2383
2420
|
attribution,
|
|
@@ -2396,26 +2433,26 @@ function HotFunctions({
|
|
|
2396
2433
|
cancelled = true;
|
|
2397
2434
|
};
|
|
2398
2435
|
}, [attribution]);
|
|
2399
|
-
return /* @__PURE__ */
|
|
2400
|
-
/* @__PURE__ */
|
|
2401
|
-
/* @__PURE__ */
|
|
2436
|
+
return /* @__PURE__ */ jsxs9("div", { style: { marginTop: "6px" }, children: [
|
|
2437
|
+
/* @__PURE__ */ jsx9("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
|
|
2438
|
+
/* @__PURE__ */ jsx9("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
|
|
2402
2439
|
attribution.map((a, i) => {
|
|
2403
2440
|
const f = frames[i] ?? a.frame;
|
|
2404
2441
|
const pct = Math.round(a.selfRatio * 100);
|
|
2405
|
-
return /* @__PURE__ */
|
|
2406
|
-
/* @__PURE__ */
|
|
2407
|
-
/* @__PURE__ */
|
|
2408
|
-
/* @__PURE__ */
|
|
2442
|
+
return /* @__PURE__ */ jsxs9("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
|
|
2443
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
2444
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ jsx9("span", { style: { color: "#666" }, children: t.anonymous }) }),
|
|
2445
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
|
|
2409
2446
|
pct,
|
|
2410
2447
|
"%"
|
|
2411
2448
|
] }),
|
|
2412
|
-
/* @__PURE__ */
|
|
2449
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: "#666", marginLeft: "6px" }, children: [
|
|
2413
2450
|
"(",
|
|
2414
2451
|
a.sampleCount,
|
|
2415
2452
|
")"
|
|
2416
2453
|
] })
|
|
2417
2454
|
] }),
|
|
2418
|
-
/* @__PURE__ */
|
|
2455
|
+
/* @__PURE__ */ jsxs9("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
|
|
2419
2456
|
f.file,
|
|
2420
2457
|
":",
|
|
2421
2458
|
f.line,
|
|
@@ -2432,59 +2469,59 @@ function LongTaskDetail({
|
|
|
2432
2469
|
}) {
|
|
2433
2470
|
const { t } = useI18n();
|
|
2434
2471
|
const scripts = s.scripts ? [...s.scripts].sort((a, b) => b.duration - a.duration) : [];
|
|
2435
|
-
return /* @__PURE__ */
|
|
2436
|
-
/* @__PURE__ */
|
|
2437
|
-
/* @__PURE__ */
|
|
2438
|
-
/* @__PURE__ */
|
|
2472
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2473
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2474
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.started }),
|
|
2475
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2439
2476
|
s.at.toFixed(2),
|
|
2440
2477
|
"ms"
|
|
2441
2478
|
] })
|
|
2442
2479
|
] }),
|
|
2443
|
-
/* @__PURE__ */
|
|
2444
|
-
/* @__PURE__ */
|
|
2445
|
-
/* @__PURE__ */
|
|
2480
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2481
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.ended }),
|
|
2482
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2446
2483
|
(s.at + s.duration).toFixed(2),
|
|
2447
2484
|
"ms"
|
|
2448
2485
|
] })
|
|
2449
2486
|
] }),
|
|
2450
|
-
/* @__PURE__ */
|
|
2451
|
-
/* @__PURE__ */
|
|
2452
|
-
/* @__PURE__ */
|
|
2487
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2488
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.duration }),
|
|
2489
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2453
2490
|
s.duration.toFixed(2),
|
|
2454
2491
|
"ms"
|
|
2455
2492
|
] })
|
|
2456
2493
|
] }),
|
|
2457
|
-
typeof s.blockingDuration === "number" && /* @__PURE__ */
|
|
2458
|
-
/* @__PURE__ */
|
|
2459
|
-
/* @__PURE__ */
|
|
2494
|
+
typeof s.blockingDuration === "number" && /* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2495
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.blockingTime }),
|
|
2496
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2460
2497
|
s.blockingDuration.toFixed(2),
|
|
2461
2498
|
"ms"
|
|
2462
2499
|
] })
|
|
2463
2500
|
] }),
|
|
2464
|
-
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */
|
|
2465
|
-
s.scripts !== void 0 && /* @__PURE__ */
|
|
2466
|
-
/* @__PURE__ */
|
|
2467
|
-
scripts.length === 0 ? /* @__PURE__ */
|
|
2468
|
-
/* @__PURE__ */
|
|
2469
|
-
/* @__PURE__ */
|
|
2470
|
-
/* @__PURE__ */
|
|
2471
|
-
/* @__PURE__ */
|
|
2501
|
+
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx9(HotFunctions, { attribution: s.attribution, resolveFrame }),
|
|
2502
|
+
s.scripts !== void 0 && /* @__PURE__ */ jsxs9("div", { style: { marginTop: "6px" }, children: [
|
|
2503
|
+
/* @__PURE__ */ jsx9("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
|
|
2504
|
+
scripts.length === 0 ? /* @__PURE__ */ jsx9("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ jsxs9("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
|
|
2505
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
2506
|
+
/* @__PURE__ */ jsx9("span", { children: script.sourceFunctionName || /* @__PURE__ */ jsx9("span", { style: { color: "#666" }, children: t.anonymous }) }),
|
|
2507
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
|
|
2508
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
|
|
2472
2509
|
script.duration.toFixed(1),
|
|
2473
2510
|
"ms"
|
|
2474
2511
|
] })
|
|
2475
2512
|
] }),
|
|
2476
|
-
script.sourceURL && /* @__PURE__ */
|
|
2513
|
+
script.sourceURL && /* @__PURE__ */ jsxs9("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
|
|
2477
2514
|
script.sourceURL,
|
|
2478
2515
|
script.charPosition >= 0 ? `@${script.charPosition}` : ""
|
|
2479
2516
|
] }),
|
|
2480
|
-
script.invoker && /* @__PURE__ */
|
|
2517
|
+
script.invoker && /* @__PURE__ */ jsxs9("div", { style: { color: "#666" }, children: [
|
|
2481
2518
|
t.invoker,
|
|
2482
2519
|
": ",
|
|
2483
2520
|
script.invoker
|
|
2484
2521
|
] })
|
|
2485
2522
|
] }, i))
|
|
2486
2523
|
] }),
|
|
2487
|
-
s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */
|
|
2524
|
+
s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ jsx9("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ jsx9(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
|
|
2488
2525
|
] });
|
|
2489
2526
|
}
|
|
2490
2527
|
var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
|
|
@@ -2499,33 +2536,33 @@ function InteractionDetail({
|
|
|
2499
2536
|
{ label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
|
|
2500
2537
|
{ label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
|
|
2501
2538
|
];
|
|
2502
|
-
return /* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2504
|
-
/* @__PURE__ */
|
|
2505
|
-
/* @__PURE__ */
|
|
2539
|
+
return /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
|
|
2540
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2541
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.interactionEvent }),
|
|
2542
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2506
2543
|
s.eventType,
|
|
2507
2544
|
s.target ? ` \xB7 ${s.target}` : ""
|
|
2508
2545
|
] })
|
|
2509
2546
|
] }),
|
|
2510
|
-
/* @__PURE__ */
|
|
2511
|
-
/* @__PURE__ */
|
|
2512
|
-
/* @__PURE__ */
|
|
2547
|
+
/* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2548
|
+
/* @__PURE__ */ jsx9("span", { style: detailLabelStyle, children: t.duration }),
|
|
2549
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2513
2550
|
s.duration.toFixed(0),
|
|
2514
2551
|
"ms"
|
|
2515
2552
|
] })
|
|
2516
2553
|
] }),
|
|
2517
|
-
/* @__PURE__ */
|
|
2518
|
-
phases.map((p, i) => /* @__PURE__ */
|
|
2519
|
-
/* @__PURE__ */
|
|
2520
|
-
/* @__PURE__ */
|
|
2554
|
+
/* @__PURE__ */ jsx9("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ jsx9("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
|
|
2555
|
+
phases.map((p, i) => /* @__PURE__ */ jsxs9("div", { style: detailRowStyle, children: [
|
|
2556
|
+
/* @__PURE__ */ jsxs9("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
|
|
2557
|
+
/* @__PURE__ */ jsx9("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
|
|
2521
2558
|
p.label
|
|
2522
2559
|
] }),
|
|
2523
|
-
/* @__PURE__ */
|
|
2560
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
2524
2561
|
p.ms.toFixed(0),
|
|
2525
2562
|
"ms"
|
|
2526
2563
|
] })
|
|
2527
2564
|
] }, i)),
|
|
2528
|
-
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */
|
|
2565
|
+
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ jsx9(HotFunctions, { attribution: s.attribution, resolveFrame })
|
|
2529
2566
|
] });
|
|
2530
2567
|
}
|
|
2531
2568
|
function SignalDetail({
|
|
@@ -2534,24 +2571,24 @@ function SignalDetail({
|
|
|
2534
2571
|
}) {
|
|
2535
2572
|
switch (s.kind) {
|
|
2536
2573
|
case "forced-reflow":
|
|
2537
|
-
return /* @__PURE__ */
|
|
2574
|
+
return /* @__PURE__ */ jsx9(ForcedReflowDetail, { s, resolveFrame });
|
|
2538
2575
|
case "layout-shift":
|
|
2539
|
-
return /* @__PURE__ */
|
|
2576
|
+
return /* @__PURE__ */ jsx9(LayoutShiftDetail, { s });
|
|
2540
2577
|
case "long-task":
|
|
2541
|
-
return /* @__PURE__ */
|
|
2578
|
+
return /* @__PURE__ */ jsx9(LongTaskDetail, { s, resolveFrame });
|
|
2542
2579
|
case "interaction":
|
|
2543
|
-
return /* @__PURE__ */
|
|
2580
|
+
return /* @__PURE__ */ jsx9(InteractionDetail, { s, resolveFrame });
|
|
2544
2581
|
case "network":
|
|
2545
|
-
return /* @__PURE__ */
|
|
2582
|
+
return /* @__PURE__ */ jsx9(NetworkDetail, { s });
|
|
2546
2583
|
case "web-vital":
|
|
2547
|
-
return /* @__PURE__ */
|
|
2584
|
+
return /* @__PURE__ */ jsx9(WebVitalDetail, { s });
|
|
2548
2585
|
case "render":
|
|
2549
|
-
return /* @__PURE__ */
|
|
2586
|
+
return /* @__PURE__ */ jsx9(RenderDetail, { s });
|
|
2550
2587
|
}
|
|
2551
2588
|
}
|
|
2552
2589
|
function SeverityDot({ sev, title }) {
|
|
2553
2590
|
const { t } = useI18n();
|
|
2554
|
-
return /* @__PURE__ */
|
|
2591
|
+
return /* @__PURE__ */ jsx9(
|
|
2555
2592
|
"span",
|
|
2556
2593
|
{
|
|
2557
2594
|
"data-severity": sev,
|
|
@@ -2574,9 +2611,9 @@ function SummaryLine({ signal }) {
|
|
|
2574
2611
|
if (signal.kind === "web-vital") {
|
|
2575
2612
|
const rating = webVitalRating(signal.name, signal.value);
|
|
2576
2613
|
const unit = WEB_VITAL_UNIT2[signal.name];
|
|
2577
|
-
return /* @__PURE__ */
|
|
2578
|
-
/* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2614
|
+
return /* @__PURE__ */ jsxs9("span", { children: [
|
|
2615
|
+
/* @__PURE__ */ jsx9(RatingDot, { rating }),
|
|
2616
|
+
/* @__PURE__ */ jsx9("strong", { children: signal.name }),
|
|
2580
2617
|
": ",
|
|
2581
2618
|
signal.value.toFixed(2),
|
|
2582
2619
|
unit
|
|
@@ -2585,12 +2622,12 @@ function SummaryLine({ signal }) {
|
|
|
2585
2622
|
const sev = severityForSignal(signal);
|
|
2586
2623
|
const color = SEVERITY_COLOR[sev];
|
|
2587
2624
|
if (signal.kind === "long-task") {
|
|
2588
|
-
return /* @__PURE__ */
|
|
2625
|
+
return /* @__PURE__ */ jsxs9("span", { children: [
|
|
2589
2626
|
"@ ",
|
|
2590
2627
|
signal.at.toFixed(1),
|
|
2591
2628
|
"ms \u2022 duration",
|
|
2592
2629
|
" ",
|
|
2593
|
-
/* @__PURE__ */
|
|
2630
|
+
/* @__PURE__ */ jsxs9("span", { style: { color }, children: [
|
|
2594
2631
|
signal.duration.toFixed(1),
|
|
2595
2632
|
"ms"
|
|
2596
2633
|
] })
|
|
@@ -2598,59 +2635,59 @@ function SummaryLine({ signal }) {
|
|
|
2598
2635
|
}
|
|
2599
2636
|
if (signal.kind === "forced-reflow") {
|
|
2600
2637
|
const count = signal.count ?? 1;
|
|
2601
|
-
return /* @__PURE__ */
|
|
2638
|
+
return /* @__PURE__ */ jsxs9("span", { children: [
|
|
2602
2639
|
"@ ",
|
|
2603
2640
|
signal.at.toFixed(1),
|
|
2604
2641
|
"ms \u2022 duration",
|
|
2605
2642
|
" ",
|
|
2606
|
-
/* @__PURE__ */
|
|
2643
|
+
/* @__PURE__ */ jsxs9("span", { style: { color }, children: [
|
|
2607
2644
|
signal.duration.toFixed(2),
|
|
2608
2645
|
"ms"
|
|
2609
2646
|
] }),
|
|
2610
|
-
count > 1 && /* @__PURE__ */
|
|
2647
|
+
count > 1 && /* @__PURE__ */ jsxs9("span", { style: { color: "#888" }, children: [
|
|
2611
2648
|
" \u2022 ",
|
|
2612
2649
|
t.coalescedReads(count)
|
|
2613
2650
|
] })
|
|
2614
2651
|
] });
|
|
2615
2652
|
}
|
|
2616
2653
|
if (signal.kind === "layout-shift") {
|
|
2617
|
-
return /* @__PURE__ */
|
|
2654
|
+
return /* @__PURE__ */ jsxs9("span", { children: [
|
|
2618
2655
|
"@ ",
|
|
2619
2656
|
signal.at.toFixed(1),
|
|
2620
2657
|
"ms \u2022 value",
|
|
2621
2658
|
" ",
|
|
2622
|
-
/* @__PURE__ */
|
|
2659
|
+
/* @__PURE__ */ jsx9("span", { style: { color }, children: formatCls(signal.value) }),
|
|
2623
2660
|
" \u2022 ",
|
|
2624
2661
|
t.sourceCount(signal.sources.length)
|
|
2625
2662
|
] });
|
|
2626
2663
|
}
|
|
2627
2664
|
if (signal.kind === "render") {
|
|
2628
|
-
return /* @__PURE__ */
|
|
2629
|
-
/* @__PURE__ */
|
|
2630
|
-
/* @__PURE__ */
|
|
2631
|
-
/* @__PURE__ */
|
|
2665
|
+
return /* @__PURE__ */ jsxs9("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
|
|
2666
|
+
/* @__PURE__ */ jsx9("strong", { children: signal.component }),
|
|
2667
|
+
/* @__PURE__ */ jsx9(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
|
|
2668
|
+
/* @__PURE__ */ jsxs9("span", { style: { color }, children: [
|
|
2632
2669
|
signal.duration.toFixed(2),
|
|
2633
2670
|
"ms"
|
|
2634
2671
|
] }),
|
|
2635
|
-
signal.count && signal.count > 1 && /* @__PURE__ */
|
|
2672
|
+
signal.count && signal.count > 1 && /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
|
|
2636
2673
|
] });
|
|
2637
2674
|
}
|
|
2638
2675
|
if (signal.kind === "network") {
|
|
2639
2676
|
const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
|
|
2640
|
-
return /* @__PURE__ */
|
|
2677
|
+
return /* @__PURE__ */ jsxs9("span", { children: [
|
|
2641
2678
|
url,
|
|
2642
2679
|
" \u2022 ",
|
|
2643
|
-
/* @__PURE__ */
|
|
2680
|
+
/* @__PURE__ */ jsxs9("span", { style: { color }, children: [
|
|
2644
2681
|
signal.duration.toFixed(0),
|
|
2645
2682
|
"ms"
|
|
2646
2683
|
] }),
|
|
2647
|
-
signal.blocking && /* @__PURE__ */
|
|
2684
|
+
signal.blocking && /* @__PURE__ */ jsxs9("span", { style: { color: SEVERITY_COLOR.high }, children: [
|
|
2648
2685
|
" \u2022 ",
|
|
2649
2686
|
t.blocking
|
|
2650
2687
|
] })
|
|
2651
2688
|
] });
|
|
2652
2689
|
}
|
|
2653
|
-
return /* @__PURE__ */
|
|
2690
|
+
return /* @__PURE__ */ jsx9("span", { children: summary(signal) });
|
|
2654
2691
|
}
|
|
2655
2692
|
function tabSupportsGrouping(kind) {
|
|
2656
2693
|
return kind === "render" || kind === "forced-reflow";
|
|
@@ -2724,7 +2761,7 @@ function groupSignals(signals, mode, kind) {
|
|
|
2724
2761
|
function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
|
|
2725
2762
|
const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
|
|
2726
2763
|
const sev = severityForSignal(signal);
|
|
2727
|
-
return /* @__PURE__ */
|
|
2764
|
+
return /* @__PURE__ */ jsxs9(
|
|
2728
2765
|
"li",
|
|
2729
2766
|
{
|
|
2730
2767
|
"aria-expanded": expanded,
|
|
@@ -2746,22 +2783,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
|
|
|
2746
2783
|
userSelect: "none"
|
|
2747
2784
|
},
|
|
2748
2785
|
children: [
|
|
2749
|
-
/* @__PURE__ */
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */
|
|
2752
|
-
/* @__PURE__ */
|
|
2786
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
2787
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
|
|
2788
|
+
/* @__PURE__ */ jsx9(SeverityDot, { sev }),
|
|
2789
|
+
/* @__PURE__ */ jsx9(SummaryLine, { signal })
|
|
2753
2790
|
] }),
|
|
2754
|
-
expanded && /* @__PURE__ */
|
|
2791
|
+
expanded && /* @__PURE__ */ jsx9("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ jsx9(SignalDetail, { s: signal, resolveFrame }) })
|
|
2755
2792
|
]
|
|
2756
2793
|
}
|
|
2757
2794
|
);
|
|
2758
2795
|
}
|
|
2759
2796
|
function CascadeMembers({ members }) {
|
|
2760
2797
|
const minDepth = members.reduce((m, s) => Math.min(m, s.depth), Infinity);
|
|
2761
|
-
return /* @__PURE__ */
|
|
2798
|
+
return /* @__PURE__ */ jsx9("div", { children: members.map((m, i) => {
|
|
2762
2799
|
const indent = (m.depth - minDepth) * 14;
|
|
2763
2800
|
const isCascade = m.reason === "parent";
|
|
2764
|
-
return /* @__PURE__ */
|
|
2801
|
+
return /* @__PURE__ */ jsxs9(
|
|
2765
2802
|
"div",
|
|
2766
2803
|
{
|
|
2767
2804
|
style: {
|
|
@@ -2772,10 +2809,10 @@ function CascadeMembers({ members }) {
|
|
|
2772
2809
|
gap: "6px"
|
|
2773
2810
|
},
|
|
2774
2811
|
children: [
|
|
2775
|
-
/* @__PURE__ */
|
|
2776
|
-
/* @__PURE__ */
|
|
2777
|
-
/* @__PURE__ */
|
|
2778
|
-
/* @__PURE__ */
|
|
2812
|
+
/* @__PURE__ */ jsx9("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
|
|
2813
|
+
/* @__PURE__ */ jsx9("strong", { children: m.component }),
|
|
2814
|
+
/* @__PURE__ */ jsx9(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
|
|
2815
|
+
/* @__PURE__ */ jsxs9("span", { style: { color: "#888" }, children: [
|
|
2779
2816
|
m.duration.toFixed(2),
|
|
2780
2817
|
"ms"
|
|
2781
2818
|
] })
|
|
@@ -2789,7 +2826,7 @@ function LanguageToggle() {
|
|
|
2789
2826
|
const { lang, setLang, t } = useI18n();
|
|
2790
2827
|
const langs = ["en", "ko"];
|
|
2791
2828
|
const labels = { en: "EN", ko: "\uD55C" };
|
|
2792
|
-
return /* @__PURE__ */
|
|
2829
|
+
return /* @__PURE__ */ jsx9(
|
|
2793
2830
|
"div",
|
|
2794
2831
|
{
|
|
2795
2832
|
role: "group",
|
|
@@ -2802,7 +2839,7 @@ function LanguageToggle() {
|
|
|
2802
2839
|
},
|
|
2803
2840
|
children: langs.map((l) => {
|
|
2804
2841
|
const active = lang === l;
|
|
2805
|
-
return /* @__PURE__ */
|
|
2842
|
+
return /* @__PURE__ */ jsx9(
|
|
2806
2843
|
"button",
|
|
2807
2844
|
{
|
|
2808
2845
|
type: "button",
|
|
@@ -2832,7 +2869,7 @@ function Panel(props) {
|
|
|
2832
2869
|
const grouped = useMemo3(() => groupByKind(result.signals), [result.signals]);
|
|
2833
2870
|
const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
|
|
2834
2871
|
const unsupported = useMemo3(() => unsupportedKinds(), []);
|
|
2835
|
-
const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0;
|
|
2872
|
+
const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0 || (result.leakSuspects?.length ?? 0) > 0;
|
|
2836
2873
|
const [activeTab, setActiveTab] = useState3(
|
|
2837
2874
|
kindsPresent[0] ?? "forced-reflow"
|
|
2838
2875
|
);
|
|
@@ -2897,12 +2934,12 @@ function Panel(props) {
|
|
|
2897
2934
|
flexDirection: "column",
|
|
2898
2935
|
overflow: "hidden"
|
|
2899
2936
|
};
|
|
2900
|
-
return /* @__PURE__ */
|
|
2901
|
-
/* @__PURE__ */
|
|
2902
|
-
/* @__PURE__ */
|
|
2903
|
-
/* @__PURE__ */
|
|
2904
|
-
/* @__PURE__ */
|
|
2905
|
-
/* @__PURE__ */
|
|
2937
|
+
return /* @__PURE__ */ jsxs9("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
|
|
2938
|
+
/* @__PURE__ */ jsxs9("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
|
|
2939
|
+
/* @__PURE__ */ jsx9("strong", { children: "react-perfscope" }),
|
|
2940
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
|
|
2941
|
+
/* @__PURE__ */ jsx9(LanguageToggle, {}),
|
|
2942
|
+
/* @__PURE__ */ jsx9(
|
|
2906
2943
|
"button",
|
|
2907
2944
|
{
|
|
2908
2945
|
type: "button",
|
|
@@ -2921,7 +2958,7 @@ function Panel(props) {
|
|
|
2921
2958
|
children: t.save
|
|
2922
2959
|
}
|
|
2923
2960
|
),
|
|
2924
|
-
/* @__PURE__ */
|
|
2961
|
+
/* @__PURE__ */ jsx9(
|
|
2925
2962
|
"button",
|
|
2926
2963
|
{
|
|
2927
2964
|
type: "button",
|
|
@@ -2933,7 +2970,7 @@ function Panel(props) {
|
|
|
2933
2970
|
)
|
|
2934
2971
|
] })
|
|
2935
2972
|
] }),
|
|
2936
|
-
unsupported.length > 0 && /* @__PURE__ */
|
|
2973
|
+
unsupported.length > 0 && /* @__PURE__ */ jsx9(
|
|
2937
2974
|
"div",
|
|
2938
2975
|
{
|
|
2939
2976
|
style: {
|
|
@@ -2948,9 +2985,9 @@ function Panel(props) {
|
|
|
2948
2985
|
children: t.unsupportedInBrowser(unsupported.map((k) => t.kindLabel(k)).join(", "))
|
|
2949
2986
|
}
|
|
2950
2987
|
),
|
|
2951
|
-
kindsPresent.length === 0 && /* @__PURE__ */
|
|
2952
|
-
kindsPresent.length > 0 && /* @__PURE__ */
|
|
2953
|
-
/* @__PURE__ */
|
|
2988
|
+
kindsPresent.length === 0 && /* @__PURE__ */ jsx9("div", { style: { color: "#888" }, children: t.noSignals }),
|
|
2989
|
+
kindsPresent.length > 0 && /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
2990
|
+
/* @__PURE__ */ jsx9(
|
|
2954
2991
|
SummaryHeader,
|
|
2955
2992
|
{
|
|
2956
2993
|
signals: result.signals,
|
|
@@ -2962,8 +2999,8 @@ function Panel(props) {
|
|
|
2962
2999
|
}
|
|
2963
3000
|
}
|
|
2964
3001
|
),
|
|
2965
|
-
/* @__PURE__ */
|
|
2966
|
-
hasTimelineSignals && /* @__PURE__ */
|
|
3002
|
+
/* @__PURE__ */ jsxs9("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
|
|
3003
|
+
hasTimelineSignals && /* @__PURE__ */ jsx9(
|
|
2967
3004
|
"button",
|
|
2968
3005
|
{
|
|
2969
3006
|
type: "button",
|
|
@@ -2988,7 +3025,7 @@ function Panel(props) {
|
|
|
2988
3025
|
kindsPresent.map((kind) => {
|
|
2989
3026
|
const worst = worstSeverity(grouped[kind]);
|
|
2990
3027
|
const active = activeKind === kind;
|
|
2991
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ jsxs9(
|
|
2992
3029
|
"button",
|
|
2993
3030
|
{
|
|
2994
3031
|
type: "button",
|
|
@@ -3011,7 +3048,7 @@ function Panel(props) {
|
|
|
3011
3048
|
gap: "6px"
|
|
3012
3049
|
},
|
|
3013
3050
|
children: [
|
|
3014
|
-
worst !== "low" && /* @__PURE__ */
|
|
3051
|
+
worst !== "low" && /* @__PURE__ */ jsx9(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
|
|
3015
3052
|
t.kindLabel(kind),
|
|
3016
3053
|
" ",
|
|
3017
3054
|
grouped[kind].length
|
|
@@ -3021,10 +3058,10 @@ function Panel(props) {
|
|
|
3021
3058
|
);
|
|
3022
3059
|
})
|
|
3023
3060
|
] }),
|
|
3024
|
-
activeKind && activeTab !== "timeline" && /* @__PURE__ */
|
|
3025
|
-
/* @__PURE__ */
|
|
3061
|
+
activeKind && activeTab !== "timeline" && /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
|
|
3062
|
+
/* @__PURE__ */ jsxs9("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
3026
3063
|
t.sort,
|
|
3027
|
-
/* @__PURE__ */
|
|
3064
|
+
/* @__PURE__ */ jsxs9(
|
|
3028
3065
|
"select",
|
|
3029
3066
|
{
|
|
3030
3067
|
"aria-label": t.sort,
|
|
@@ -3036,15 +3073,15 @@ function Panel(props) {
|
|
|
3036
3073
|
},
|
|
3037
3074
|
style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
|
|
3038
3075
|
children: [
|
|
3039
|
-
/* @__PURE__ */
|
|
3040
|
-
/* @__PURE__ */
|
|
3076
|
+
/* @__PURE__ */ jsx9("option", { value: "chronological", children: t.sortChronological }),
|
|
3077
|
+
/* @__PURE__ */ jsx9("option", { value: "severity", children: t.sortSeverity })
|
|
3041
3078
|
]
|
|
3042
3079
|
}
|
|
3043
3080
|
)
|
|
3044
3081
|
] }),
|
|
3045
|
-
tabSupportsGrouping(activeKind) && /* @__PURE__ */
|
|
3082
|
+
tabSupportsGrouping(activeKind) && /* @__PURE__ */ jsxs9("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
3046
3083
|
t.groupBy,
|
|
3047
|
-
/* @__PURE__ */
|
|
3084
|
+
/* @__PURE__ */ jsxs9(
|
|
3048
3085
|
"select",
|
|
3049
3086
|
{
|
|
3050
3087
|
"aria-label": t.groupBy,
|
|
@@ -3056,15 +3093,15 @@ function Panel(props) {
|
|
|
3056
3093
|
},
|
|
3057
3094
|
style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
|
|
3058
3095
|
children: [
|
|
3059
|
-
/* @__PURE__ */
|
|
3060
|
-
activeKind === "render" && /* @__PURE__ */
|
|
3061
|
-
activeKind === "render" && /* @__PURE__ */
|
|
3062
|
-
activeKind === "forced-reflow" && /* @__PURE__ */
|
|
3096
|
+
/* @__PURE__ */ jsx9("option", { value: "chronological", children: t.groupChronological }),
|
|
3097
|
+
activeKind === "render" && /* @__PURE__ */ jsx9("option", { value: "commit", children: t.groupCommit }),
|
|
3098
|
+
activeKind === "render" && /* @__PURE__ */ jsx9("option", { value: "component", children: t.groupComponent }),
|
|
3099
|
+
activeKind === "forced-reflow" && /* @__PURE__ */ jsx9("option", { value: "source", children: t.groupSource })
|
|
3063
3100
|
]
|
|
3064
3101
|
}
|
|
3065
3102
|
)
|
|
3066
3103
|
] }),
|
|
3067
|
-
/* @__PURE__ */
|
|
3104
|
+
/* @__PURE__ */ jsx9(
|
|
3068
3105
|
"input",
|
|
3069
3106
|
{
|
|
3070
3107
|
type: "text",
|
|
@@ -3079,23 +3116,26 @@ function Panel(props) {
|
|
|
3079
3116
|
}
|
|
3080
3117
|
)
|
|
3081
3118
|
] }),
|
|
3082
|
-
activeTab === "timeline" && /* @__PURE__ */
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3119
|
+
activeTab === "timeline" && /* @__PURE__ */ jsxs9("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: [
|
|
3120
|
+
/* @__PURE__ */ jsx9(LeakList, { suspects: result.leakSuspects }),
|
|
3121
|
+
/* @__PURE__ */ jsx9(
|
|
3122
|
+
Timeline,
|
|
3123
|
+
{
|
|
3124
|
+
signals: result.signals,
|
|
3125
|
+
duration: result.duration,
|
|
3126
|
+
startedAt: result.startedAt,
|
|
3127
|
+
heapSamples: result.heapSamples,
|
|
3128
|
+
frames: result.frames,
|
|
3129
|
+
onJump: (s) => {
|
|
3130
|
+
setActiveTab(s.kind);
|
|
3131
|
+
const inOrder = grouped[s.kind];
|
|
3132
|
+
const idx = inOrder.indexOf(s);
|
|
3133
|
+
if (idx >= 0) setExpandedKey(`${s.kind}-${idx}`);
|
|
3134
|
+
}
|
|
3095
3135
|
}
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */
|
|
3136
|
+
)
|
|
3137
|
+
] }),
|
|
3138
|
+
activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx9(
|
|
3099
3139
|
RenderInsights,
|
|
3100
3140
|
{
|
|
3101
3141
|
signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
|
|
@@ -3105,8 +3145,8 @@ function Panel(props) {
|
|
|
3105
3145
|
}
|
|
3106
3146
|
}
|
|
3107
3147
|
),
|
|
3108
|
-
activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */
|
|
3109
|
-
activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */
|
|
3148
|
+
activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ jsx9(LongTaskEpisode, { signals: result.signals }),
|
|
3149
|
+
activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ jsx9(
|
|
3110
3150
|
"div",
|
|
3111
3151
|
{
|
|
3112
3152
|
style: {
|
|
@@ -3121,9 +3161,9 @@ function Panel(props) {
|
|
|
3121
3161
|
children: t.layoutShiftHint
|
|
3122
3162
|
}
|
|
3123
3163
|
),
|
|
3124
|
-
activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */
|
|
3125
|
-
/* @__PURE__ */
|
|
3126
|
-
/* @__PURE__ */
|
|
3164
|
+
activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
3165
|
+
/* @__PURE__ */ jsx9(InpEpisode, { signals: result.signals }),
|
|
3166
|
+
/* @__PURE__ */ jsx9(
|
|
3127
3167
|
"div",
|
|
3128
3168
|
{
|
|
3129
3169
|
style: {
|
|
@@ -3139,7 +3179,7 @@ function Panel(props) {
|
|
|
3139
3179
|
}
|
|
3140
3180
|
)
|
|
3141
3181
|
] }),
|
|
3142
|
-
/* @__PURE__ */
|
|
3182
|
+
/* @__PURE__ */ jsx9("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
|
|
3143
3183
|
const filtered = grouped[activeKind].filter(
|
|
3144
3184
|
(s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
|
|
3145
3185
|
);
|
|
@@ -3149,7 +3189,7 @@ function Panel(props) {
|
|
|
3149
3189
|
const currentMode = groupMode[activeKind] ?? "chronological";
|
|
3150
3190
|
if (currentMode === "chronological") {
|
|
3151
3191
|
const key2 = `${activeKind}-${gi}`;
|
|
3152
|
-
return /* @__PURE__ */
|
|
3192
|
+
return /* @__PURE__ */ jsx9(
|
|
3153
3193
|
SignalRow,
|
|
3154
3194
|
{
|
|
3155
3195
|
signal: g.signals[0],
|
|
@@ -3166,7 +3206,7 @@ function Panel(props) {
|
|
|
3166
3206
|
const isCascade = activeKind === "render" && currentMode === "commit";
|
|
3167
3207
|
const renderMembers = g.signals.filter((s) => s.kind === "render");
|
|
3168
3208
|
const unnecessary = isCascade ? renderMembers.filter((s) => s.reason === "parent").length : 0;
|
|
3169
|
-
return /* @__PURE__ */
|
|
3209
|
+
return /* @__PURE__ */ jsxs9(
|
|
3170
3210
|
"li",
|
|
3171
3211
|
{
|
|
3172
3212
|
"aria-expanded": isOpen,
|
|
@@ -3181,34 +3221,34 @@ function Panel(props) {
|
|
|
3181
3221
|
userSelect: "none"
|
|
3182
3222
|
},
|
|
3183
3223
|
children: [
|
|
3184
|
-
/* @__PURE__ */
|
|
3185
|
-
/* @__PURE__ */
|
|
3186
|
-
/* @__PURE__ */
|
|
3187
|
-
/* @__PURE__ */
|
|
3224
|
+
/* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
|
|
3225
|
+
/* @__PURE__ */ jsx9("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
|
|
3226
|
+
/* @__PURE__ */ jsxs9("span", { children: [
|
|
3227
|
+
/* @__PURE__ */ jsx9("strong", { children: g.label }),
|
|
3188
3228
|
" \xD7",
|
|
3189
3229
|
g.count
|
|
3190
3230
|
] }),
|
|
3191
|
-
isCascade && unnecessary > 0 && /* @__PURE__ */
|
|
3231
|
+
isCascade && unnecessary > 0 && /* @__PURE__ */ jsxs9("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
|
|
3192
3232
|
"\u26A0 ",
|
|
3193
3233
|
t.unnecessaryRenders(unnecessary)
|
|
3194
3234
|
] })
|
|
3195
3235
|
] }),
|
|
3196
|
-
isOpen && /* @__PURE__ */
|
|
3197
|
-
g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */
|
|
3198
|
-
g.signals.length > 20 && /* @__PURE__ */
|
|
3236
|
+
isOpen && /* @__PURE__ */ jsx9("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ jsx9(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
3237
|
+
g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ jsx9("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ jsx9(SummaryLine, { signal: s }) }, si)),
|
|
3238
|
+
g.signals.length > 20 && /* @__PURE__ */ jsx9("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
|
|
3199
3239
|
] }) })
|
|
3200
3240
|
]
|
|
3201
3241
|
},
|
|
3202
3242
|
key
|
|
3203
3243
|
);
|
|
3204
3244
|
}) }),
|
|
3205
|
-
activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */
|
|
3245
|
+
activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ jsx9("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
|
|
3206
3246
|
] })
|
|
3207
3247
|
] });
|
|
3208
3248
|
}
|
|
3209
3249
|
|
|
3210
3250
|
// src/app.tsx
|
|
3211
|
-
import { jsx as
|
|
3251
|
+
import { jsx as jsx10, jsxs as jsxs10 } from "preact/jsx-runtime";
|
|
3212
3252
|
function App(props) {
|
|
3213
3253
|
const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
|
|
3214
3254
|
const [recording, setRecording] = useState4(false);
|
|
@@ -3254,8 +3294,8 @@ function App(props) {
|
|
|
3254
3294
|
function onClose() {
|
|
3255
3295
|
setResult(null);
|
|
3256
3296
|
}
|
|
3257
|
-
return /* @__PURE__ */
|
|
3258
|
-
result === null && /* @__PURE__ */
|
|
3297
|
+
return /* @__PURE__ */ jsxs10(I18nProvider, { children: [
|
|
3298
|
+
result === null && /* @__PURE__ */ jsx10(
|
|
3259
3299
|
Widget,
|
|
3260
3300
|
{
|
|
3261
3301
|
recording,
|
|
@@ -3264,16 +3304,16 @@ function App(props) {
|
|
|
3264
3304
|
position
|
|
3265
3305
|
}
|
|
3266
3306
|
),
|
|
3267
|
-
result !== null && /* @__PURE__ */
|
|
3307
|
+
result !== null && /* @__PURE__ */ jsx10(Panel, { result, position, onClose, resolveFrame })
|
|
3268
3308
|
] });
|
|
3269
3309
|
}
|
|
3270
3310
|
|
|
3271
3311
|
// src/mount.tsx
|
|
3272
|
-
import { jsx as
|
|
3312
|
+
import { jsx as jsx11 } from "preact/jsx-runtime";
|
|
3273
3313
|
function mount(opts) {
|
|
3274
3314
|
const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
|
|
3275
3315
|
return mountShadow(
|
|
3276
|
-
/* @__PURE__ */
|
|
3316
|
+
/* @__PURE__ */ jsx11(App, { recorder, position, resolveFrame, finalize }),
|
|
3277
3317
|
{ parent: host }
|
|
3278
3318
|
);
|
|
3279
3319
|
}
|