@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.cjs
CHANGED
|
@@ -147,6 +147,9 @@ var en = {
|
|
|
147
147
|
heapUnsupported: "heap size unavailable (Chromium only)",
|
|
148
148
|
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.",
|
|
149
149
|
heapTrendLabel: (cls) => cls === "leak-suspected" ? "leak suspected" : cls === "growing" ? "growing" : "stable",
|
|
150
|
+
leaksTitle: "Suspected leaks",
|
|
151
|
+
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).",
|
|
152
|
+
leakSuspect: (component, retained, unmounted) => `${component} \u2014 ${retained} retained of ${unmounted} unmounted, climbing`,
|
|
150
153
|
fpsLabel: "fps",
|
|
151
154
|
fpsUnsupported: "frame timing unavailable",
|
|
152
155
|
fpsBadge: (minFps, dropped) => `min ${minFps}fps \xB7 ${dropped} dropped`,
|
|
@@ -242,6 +245,9 @@ var ko = {
|
|
|
242
245
|
heapUnsupported: "\uD799 \uCE21\uC815 \uBBF8\uC9C0\uC6D0 (\uD06C\uB86C \uC804\uC6A9)",
|
|
243
246
|
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.",
|
|
244
247
|
heapTrendLabel: (cls) => cls === "leak-suspected" ? "\uB204\uC218 \uC758\uC2EC" : cls === "growing" ? "\uC99D\uAC00 \uC911" : "\uC548\uC815",
|
|
248
|
+
leaksTitle: "\uB204\uC218 \uC758\uC2EC",
|
|
249
|
+
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.",
|
|
250
|
+
leakSuspect: (component, retained, unmounted) => `${component} \u2014 \uC5B8\uB9C8\uC6B4\uD2B8 ${unmounted}\uAC1C \uC911 ${retained}\uAC1C \uBCF4\uC720, \uC99D\uAC00 \uC911`,
|
|
245
251
|
fpsLabel: "fps",
|
|
246
252
|
fpsUnsupported: "\uD504\uB808\uC784 \uCE21\uC815 \uBBF8\uC9C0\uC6D0",
|
|
247
253
|
fpsBadge: (minFps, dropped) => `\uCD5C\uC800 ${minFps}fps \xB7 \uB4DC\uB78D ${dropped}`,
|
|
@@ -1798,8 +1804,39 @@ function TooltipContent({ s, startedAt }) {
|
|
|
1798
1804
|
}
|
|
1799
1805
|
}
|
|
1800
1806
|
|
|
1801
|
-
// src/
|
|
1807
|
+
// src/leaks.tsx
|
|
1802
1808
|
var import_jsx_runtime4 = require("preact/jsx-runtime");
|
|
1809
|
+
function LeakList({ suspects }) {
|
|
1810
|
+
const { t } = useI18n();
|
|
1811
|
+
if (!suspects || suspects.length === 0) return null;
|
|
1812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-leaks": "", style: { padding: "8px 10px", borderBottom: "1px solid #1c1c1c" }, children: [
|
|
1813
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1814
|
+
"div",
|
|
1815
|
+
{
|
|
1816
|
+
style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px" },
|
|
1817
|
+
children: [
|
|
1818
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: "#ef4444", fontSize: "11px", fontWeight: 600 }, children: t.leaksTitle }),
|
|
1819
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { color: "#666", fontSize: "10px" }, children: [
|
|
1820
|
+
"\xD7",
|
|
1821
|
+
suspects.length
|
|
1822
|
+
] })
|
|
1823
|
+
]
|
|
1824
|
+
}
|
|
1825
|
+
),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: suspects.map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1827
|
+
"li",
|
|
1828
|
+
{
|
|
1829
|
+
style: { color: "#e6e6e6", fontSize: "11px", padding: "2px 0", fontVariantNumeric: "tabular-nums" },
|
|
1830
|
+
children: t.leakSuspect(s.component, s.retained, s.unmounted)
|
|
1831
|
+
},
|
|
1832
|
+
s.component
|
|
1833
|
+
)) }),
|
|
1834
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { color: "#666", fontSize: "10px", margin: "6px 0 0", lineHeight: 1.4 }, children: t.leakHint })
|
|
1835
|
+
] });
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
// src/render-insights.tsx
|
|
1839
|
+
var import_jsx_runtime5 = require("preact/jsx-runtime");
|
|
1803
1840
|
function aggregate(signals) {
|
|
1804
1841
|
const byName = /* @__PURE__ */ new Map();
|
|
1805
1842
|
for (const s of signals) {
|
|
@@ -1830,7 +1867,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1830
1867
|
const top = rows.slice(0, TOP_N);
|
|
1831
1868
|
const max = top.length > 0 ? top[0].totalMs : 1;
|
|
1832
1869
|
const hiddenCount = rows.length - top.length;
|
|
1833
|
-
return /* @__PURE__ */ (0,
|
|
1870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1834
1871
|
"div",
|
|
1835
1872
|
{
|
|
1836
1873
|
style: {
|
|
@@ -1841,12 +1878,12 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1841
1878
|
borderRadius: "8px"
|
|
1842
1879
|
},
|
|
1843
1880
|
children: [
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1845
|
-
/* @__PURE__ */ (0,
|
|
1881
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "10px", color: "#888", textTransform: "uppercase", letterSpacing: "0.5px", marginBottom: "6px" }, children: t.topRenderers }),
|
|
1882
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
|
|
1846
1883
|
top.map((a) => {
|
|
1847
1884
|
const widthPct = max > 0 ? Math.max(2, a.totalMs / max * 100) : 0;
|
|
1848
1885
|
const color = SEVERITY_COLOR[a.worstSeverity];
|
|
1849
|
-
return /* @__PURE__ */ (0,
|
|
1886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1850
1887
|
"div",
|
|
1851
1888
|
{
|
|
1852
1889
|
"data-component": a.component,
|
|
@@ -1862,8 +1899,8 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1862
1899
|
},
|
|
1863
1900
|
title: t.rendererDetail(a.component, a.count, a.totalMs, a.maxMs),
|
|
1864
1901
|
children: [
|
|
1865
|
-
/* @__PURE__ */ (0,
|
|
1866
|
-
/* @__PURE__ */ (0,
|
|
1902
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { flex: "0 0 30%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.component }),
|
|
1903
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: "1", position: "relative", height: "14px", background: "#1f1f1f", borderRadius: "2px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1867
1904
|
"div",
|
|
1868
1905
|
{
|
|
1869
1906
|
style: {
|
|
@@ -1878,11 +1915,11 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1878
1915
|
}
|
|
1879
1916
|
}
|
|
1880
1917
|
) }),
|
|
1881
|
-
/* @__PURE__ */ (0,
|
|
1918
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color, minWidth: "56px", textAlign: "right" }, children: [
|
|
1882
1919
|
a.totalMs.toFixed(1),
|
|
1883
1920
|
"ms"
|
|
1884
1921
|
] }),
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
1922
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { flex: "0 0 auto", color: "#888", minWidth: "32px", textAlign: "right" }, children: [
|
|
1886
1923
|
"\xD7",
|
|
1887
1924
|
a.count
|
|
1888
1925
|
] })
|
|
@@ -1891,7 +1928,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1891
1928
|
a.component
|
|
1892
1929
|
);
|
|
1893
1930
|
}),
|
|
1894
|
-
hiddenCount > 0 && /* @__PURE__ */ (0,
|
|
1931
|
+
hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "10px", color: "#666", marginTop: "2px" }, children: t.moreComponents(hiddenCount) })
|
|
1895
1932
|
] })
|
|
1896
1933
|
]
|
|
1897
1934
|
}
|
|
@@ -1902,7 +1939,7 @@ function RenderInsights({ signals, onSelect }) {
|
|
|
1902
1939
|
var import_core2 = require("@react-perfscope/core");
|
|
1903
1940
|
|
|
1904
1941
|
// src/episode-shared.tsx
|
|
1905
|
-
var
|
|
1942
|
+
var import_jsx_runtime6 = require("preact/jsx-runtime");
|
|
1906
1943
|
function memberLabel(m) {
|
|
1907
1944
|
const s = m.signal;
|
|
1908
1945
|
if (s.kind === "render") return `${s.component} (${s.reason})`;
|
|
@@ -1913,18 +1950,18 @@ function memberLabel(m) {
|
|
|
1913
1950
|
return `layout shift ${s.value.toFixed(3)}`;
|
|
1914
1951
|
}
|
|
1915
1952
|
function EpisodeMemberRow({ member }) {
|
|
1916
|
-
return /* @__PURE__ */ (0,
|
|
1953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1917
1954
|
"div",
|
|
1918
1955
|
{
|
|
1919
1956
|
"data-member-kind": member.signal.kind,
|
|
1920
1957
|
style: { display: "flex", alignItems: "center", gap: "6px", padding: "1px 0", color: "#ccc" },
|
|
1921
1958
|
children: [
|
|
1922
|
-
/* @__PURE__ */ (0,
|
|
1923
|
-
member.causedBy && /* @__PURE__ */ (0,
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: memberLabel(member) }),
|
|
1960
|
+
member.causedBy && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { flex: "0 0 auto", color: "#888" }, children: [
|
|
1924
1961
|
"\u2190 ",
|
|
1925
1962
|
member.causedBy.component
|
|
1926
1963
|
] }),
|
|
1927
|
-
member.confidence === "caused" && /* @__PURE__ */ (0,
|
|
1964
|
+
member.confidence === "caused" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1928
1965
|
"span",
|
|
1929
1966
|
{
|
|
1930
1967
|
style: {
|
|
@@ -1943,12 +1980,12 @@ function EpisodeMemberRow({ member }) {
|
|
|
1943
1980
|
);
|
|
1944
1981
|
}
|
|
1945
1982
|
function EpisodeMemberList({ members }) {
|
|
1946
|
-
if (members.length === 0) return /* @__PURE__ */ (0,
|
|
1947
|
-
return /* @__PURE__ */ (0,
|
|
1983
|
+
if (members.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { color: "#555" }, children: "\u2014" });
|
|
1984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EpisodeMemberRow, { member: m }, i)) });
|
|
1948
1985
|
}
|
|
1949
1986
|
|
|
1950
1987
|
// src/inp-episode.tsx
|
|
1951
|
-
var
|
|
1988
|
+
var import_jsx_runtime7 = require("preact/jsx-runtime");
|
|
1952
1989
|
var PHASES = [
|
|
1953
1990
|
{ phase: "input-delay", labelKey: "inputDelay" },
|
|
1954
1991
|
{ phase: "processing", labelKey: "processingTime" },
|
|
@@ -1973,7 +2010,7 @@ function InpEpisode({ signals }) {
|
|
|
1973
2010
|
if (!episode || episode.anchor.kind !== "interaction") return null;
|
|
1974
2011
|
const a = episode.anchor;
|
|
1975
2012
|
const target = a.target ? ` on ${a.target}` : "";
|
|
1976
|
-
return /* @__PURE__ */ (0,
|
|
2013
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1977
2014
|
"div",
|
|
1978
2015
|
{
|
|
1979
2016
|
"data-inp-episode": true,
|
|
@@ -1987,33 +2024,33 @@ function InpEpisode({ signals }) {
|
|
|
1987
2024
|
overflow: "hidden"
|
|
1988
2025
|
},
|
|
1989
2026
|
children: [
|
|
1990
|
-
/* @__PURE__ */ (0,
|
|
1991
|
-
/* @__PURE__ */ (0,
|
|
2027
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
|
|
2028
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: a.eventType }),
|
|
1992
2029
|
target,
|
|
1993
2030
|
" \u2014 ",
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
2031
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
|
|
1995
2032
|
Math.round(a.duration),
|
|
1996
2033
|
"ms"
|
|
1997
2034
|
] }),
|
|
1998
2035
|
" ",
|
|
1999
|
-
/* @__PURE__ */ (0,
|
|
2036
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: "#888" }, children: "INP" })
|
|
2000
2037
|
] }),
|
|
2001
2038
|
PHASES.map(({ phase, labelKey }) => {
|
|
2002
2039
|
const members = episode.members.filter((m) => m.phase === phase);
|
|
2003
|
-
return /* @__PURE__ */ (0,
|
|
2040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2004
2041
|
"div",
|
|
2005
2042
|
{
|
|
2006
2043
|
"data-inp-phase": phase,
|
|
2007
2044
|
style: { display: "flex", gap: "8px", padding: "5px 8px", borderTop: "1px solid #1a1a1a" },
|
|
2008
2045
|
children: [
|
|
2009
|
-
/* @__PURE__ */ (0,
|
|
2046
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: "0 0 92px", color: "#aaa" }, children: [
|
|
2010
2047
|
t[labelKey],
|
|
2011
|
-
/* @__PURE__ */ (0,
|
|
2048
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { color: "#666", fontSize: "10px" }, children: [
|
|
2012
2049
|
Math.round(phaseMs(episode, phase)),
|
|
2013
2050
|
"ms"
|
|
2014
2051
|
] })
|
|
2015
2052
|
] }),
|
|
2016
|
-
/* @__PURE__ */ (0,
|
|
2053
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EpisodeMemberList, { members }) })
|
|
2017
2054
|
]
|
|
2018
2055
|
},
|
|
2019
2056
|
phase
|
|
@@ -2026,7 +2063,7 @@ function InpEpisode({ signals }) {
|
|
|
2026
2063
|
|
|
2027
2064
|
// src/long-task-episode.tsx
|
|
2028
2065
|
var import_core3 = require("@react-perfscope/core");
|
|
2029
|
-
var
|
|
2066
|
+
var import_jsx_runtime8 = require("preact/jsx-runtime");
|
|
2030
2067
|
function worstLongTaskEpisode(signals) {
|
|
2031
2068
|
let worst = null;
|
|
2032
2069
|
for (const ep of (0, import_core3.correlate)(signals)) {
|
|
@@ -2041,7 +2078,7 @@ function LongTaskEpisode({ signals }) {
|
|
|
2041
2078
|
if (!episode || episode.anchor.kind !== "long-task") return null;
|
|
2042
2079
|
if (episode.members.length === 0) return null;
|
|
2043
2080
|
const a = episode.anchor;
|
|
2044
|
-
return /* @__PURE__ */ (0,
|
|
2081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
2045
2082
|
"div",
|
|
2046
2083
|
{
|
|
2047
2084
|
"data-long-task-episode": true,
|
|
@@ -2055,15 +2092,15 @@ function LongTaskEpisode({ signals }) {
|
|
|
2055
2092
|
overflow: "hidden"
|
|
2056
2093
|
},
|
|
2057
2094
|
children: [
|
|
2058
|
-
/* @__PURE__ */ (0,
|
|
2059
|
-
/* @__PURE__ */ (0,
|
|
2095
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { padding: "6px 8px", borderBottom: "1px solid #1f1f1f", color: "#ddd" }, children: [
|
|
2096
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: t.kindLabel("long-task") }),
|
|
2060
2097
|
" \u2014 ",
|
|
2061
|
-
/* @__PURE__ */ (0,
|
|
2098
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("strong", { children: [
|
|
2062
2099
|
Math.round(a.duration),
|
|
2063
2100
|
"ms"
|
|
2064
2101
|
] })
|
|
2065
2102
|
] }),
|
|
2066
|
-
/* @__PURE__ */ (0,
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "5px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EpisodeMemberList, { members: episode.members }) })
|
|
2067
2104
|
]
|
|
2068
2105
|
}
|
|
2069
2106
|
);
|
|
@@ -2109,7 +2146,7 @@ function signalMatchesFilter(signal, query) {
|
|
|
2109
2146
|
}
|
|
2110
2147
|
|
|
2111
2148
|
// src/panel.tsx
|
|
2112
|
-
var
|
|
2149
|
+
var import_jsx_runtime9 = require("preact/jsx-runtime");
|
|
2113
2150
|
var RENDER_REASON_COLOR = {
|
|
2114
2151
|
mount: "#5ac8fa",
|
|
2115
2152
|
state: "#34c759",
|
|
@@ -2133,7 +2170,7 @@ function RenderReasonTag({ reason, changedProps }) {
|
|
|
2133
2170
|
const color = RENDER_REASON_COLOR[reason];
|
|
2134
2171
|
const label = renderReasonLabel(t, reason);
|
|
2135
2172
|
const keys = reason === "props" && changedProps && changedProps.length > 0 ? `: ${changedProps.join(", ")}` : "";
|
|
2136
|
-
return /* @__PURE__ */ (0,
|
|
2173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
2137
2174
|
"span",
|
|
2138
2175
|
{
|
|
2139
2176
|
style: {
|
|
@@ -2189,7 +2226,7 @@ var WEB_VITAL_UNIT2 = {
|
|
|
2189
2226
|
};
|
|
2190
2227
|
function RatingDot({ rating }) {
|
|
2191
2228
|
const { t } = useI18n();
|
|
2192
|
-
return /* @__PURE__ */ (0,
|
|
2229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2193
2230
|
"span",
|
|
2194
2231
|
{
|
|
2195
2232
|
"data-rating": rating,
|
|
@@ -2247,18 +2284,18 @@ var monoStyle = {
|
|
|
2247
2284
|
};
|
|
2248
2285
|
function LayoutShiftDetail({ s }) {
|
|
2249
2286
|
const { t } = useI18n();
|
|
2250
|
-
return /* @__PURE__ */ (0,
|
|
2251
|
-
/* @__PURE__ */ (0,
|
|
2252
|
-
/* @__PURE__ */ (0,
|
|
2253
|
-
/* @__PURE__ */ (0,
|
|
2287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2288
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2289
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.value }),
|
|
2290
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.value.toFixed(4) })
|
|
2254
2291
|
] }),
|
|
2255
|
-
s.sources.length === 0 ? /* @__PURE__ */ (0,
|
|
2256
|
-
/* @__PURE__ */ (0,
|
|
2292
|
+
s.sources.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noSourceRects }) : s.sources.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2293
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
|
|
2257
2294
|
t.rect,
|
|
2258
2295
|
" ",
|
|
2259
2296
|
i + 1
|
|
2260
2297
|
] }),
|
|
2261
|
-
/* @__PURE__ */ (0,
|
|
2298
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2262
2299
|
"x=",
|
|
2263
2300
|
r.x.toFixed(0),
|
|
2264
2301
|
" y=",
|
|
@@ -2273,25 +2310,25 @@ function LayoutShiftDetail({ s }) {
|
|
|
2273
2310
|
}
|
|
2274
2311
|
function NetworkDetail({ s }) {
|
|
2275
2312
|
const { t } = useI18n();
|
|
2276
|
-
return /* @__PURE__ */ (0,
|
|
2277
|
-
/* @__PURE__ */ (0,
|
|
2278
|
-
/* @__PURE__ */ (0,
|
|
2279
|
-
/* @__PURE__ */ (0,
|
|
2280
|
-
/* @__PURE__ */ (0,
|
|
2313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2314
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailRowStyle, ...monoStyle, wordBreak: "break-all" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.url }) }),
|
|
2315
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.started }),
|
|
2317
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2281
2318
|
s.startedAt.toFixed(0),
|
|
2282
2319
|
"ms"
|
|
2283
2320
|
] })
|
|
2284
2321
|
] }),
|
|
2285
|
-
/* @__PURE__ */ (0,
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2287
|
-
/* @__PURE__ */ (0,
|
|
2322
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2323
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2288
2325
|
s.duration.toFixed(0),
|
|
2289
2326
|
"ms"
|
|
2290
2327
|
] })
|
|
2291
2328
|
] }),
|
|
2292
|
-
/* @__PURE__ */ (0,
|
|
2293
|
-
/* @__PURE__ */ (0,
|
|
2294
|
-
/* @__PURE__ */ (0,
|
|
2329
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2330
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.size }),
|
|
2331
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2295
2332
|
(s.size / 1024).toFixed(2),
|
|
2296
2333
|
"KB (",
|
|
2297
2334
|
s.size,
|
|
@@ -2300,69 +2337,69 @@ function NetworkDetail({ s }) {
|
|
|
2300
2337
|
")"
|
|
2301
2338
|
] })
|
|
2302
2339
|
] }),
|
|
2303
|
-
/* @__PURE__ */ (0,
|
|
2304
|
-
/* @__PURE__ */ (0,
|
|
2305
|
-
/* @__PURE__ */ (0,
|
|
2340
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2341
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.renderBlocking }),
|
|
2342
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.blocking ? t.yes : t.no })
|
|
2306
2343
|
] })
|
|
2307
2344
|
] });
|
|
2308
2345
|
}
|
|
2309
2346
|
function WebVitalDetail({ s }) {
|
|
2310
2347
|
const { t } = useI18n();
|
|
2311
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
-
/* @__PURE__ */ (0,
|
|
2313
|
-
/* @__PURE__ */ (0,
|
|
2314
|
-
/* @__PURE__ */ (0,
|
|
2348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2349
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2350
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.metric }),
|
|
2351
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.name })
|
|
2315
2352
|
] }),
|
|
2316
|
-
/* @__PURE__ */ (0,
|
|
2317
|
-
/* @__PURE__ */ (0,
|
|
2318
|
-
/* @__PURE__ */ (0,
|
|
2353
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2354
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.value }),
|
|
2355
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.value.toFixed(2) })
|
|
2319
2356
|
] })
|
|
2320
2357
|
] });
|
|
2321
2358
|
}
|
|
2322
2359
|
function RenderDetail({ s }) {
|
|
2323
2360
|
const { t } = useI18n();
|
|
2324
2361
|
if (s.members && s.members.length > 0) {
|
|
2325
|
-
return /* @__PURE__ */ (0,
|
|
2326
|
-
/* @__PURE__ */ (0,
|
|
2327
|
-
/* @__PURE__ */ (0,
|
|
2328
|
-
/* @__PURE__ */ (0,
|
|
2362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2363
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2364
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
|
|
2365
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2329
2366
|
s.duration.toFixed(3),
|
|
2330
2367
|
"ms"
|
|
2331
2368
|
] })
|
|
2332
2369
|
] }),
|
|
2333
|
-
/* @__PURE__ */ (0,
|
|
2334
|
-
/* @__PURE__ */ (0,
|
|
2335
|
-
/* @__PURE__ */ (0,
|
|
2370
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2371
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.at }),
|
|
2372
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2336
2373
|
s.at.toFixed(2),
|
|
2337
2374
|
"ms"
|
|
2338
2375
|
] })
|
|
2339
2376
|
] }),
|
|
2340
|
-
/* @__PURE__ */ (0,
|
|
2377
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CascadeMembers, { members: s.members }) })
|
|
2341
2378
|
] });
|
|
2342
2379
|
}
|
|
2343
|
-
return /* @__PURE__ */ (0,
|
|
2344
|
-
/* @__PURE__ */ (0,
|
|
2345
|
-
/* @__PURE__ */ (0,
|
|
2346
|
-
/* @__PURE__ */ (0,
|
|
2380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2382
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.component }),
|
|
2383
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.component })
|
|
2347
2384
|
] }),
|
|
2348
|
-
/* @__PURE__ */ (0,
|
|
2349
|
-
/* @__PURE__ */ (0,
|
|
2350
|
-
/* @__PURE__ */ (0,
|
|
2385
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2386
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.reason }),
|
|
2387
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: s.reason, changedProps: s.changedProps })
|
|
2351
2388
|
] }),
|
|
2352
|
-
s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0,
|
|
2353
|
-
/* @__PURE__ */ (0,
|
|
2354
|
-
/* @__PURE__ */ (0,
|
|
2389
|
+
s.reason === "props" && s.changedProps && s.changedProps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2390
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.changedProps }),
|
|
2391
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: s.changedProps.join(", ") })
|
|
2355
2392
|
] }),
|
|
2356
|
-
/* @__PURE__ */ (0,
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2359
2396
|
s.duration.toFixed(3),
|
|
2360
2397
|
"ms"
|
|
2361
2398
|
] })
|
|
2362
2399
|
] }),
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2364
|
-
/* @__PURE__ */ (0,
|
|
2365
|
-
/* @__PURE__ */ (0,
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.at }),
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2366
2403
|
s.at.toFixed(2),
|
|
2367
2404
|
"ms"
|
|
2368
2405
|
] })
|
|
@@ -2392,11 +2429,11 @@ function StackFrames({
|
|
|
2392
2429
|
cancelled = true;
|
|
2393
2430
|
};
|
|
2394
2431
|
}, [raw]);
|
|
2395
|
-
return /* @__PURE__ */ (0,
|
|
2396
|
-
resolving && /* @__PURE__ */ (0,
|
|
2397
|
-
frames.length === 0 ? /* @__PURE__ */ (0,
|
|
2398
|
-
f.fnName ? /* @__PURE__ */ (0,
|
|
2399
|
-
/* @__PURE__ */ (0,
|
|
2432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
2433
|
+
resolving && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.resolvingSourceMaps }),
|
|
2434
|
+
frames.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noStack }) : frames.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...detailRowStyle, ...monoStyle }, children: [
|
|
2435
|
+
f.fnName ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: f.fnName }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }),
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
|
|
2400
2437
|
f.file,
|
|
2401
2438
|
":",
|
|
2402
2439
|
f.line,
|
|
@@ -2410,7 +2447,7 @@ function ForcedReflowDetail({
|
|
|
2410
2447
|
s,
|
|
2411
2448
|
resolveFrame
|
|
2412
2449
|
}) {
|
|
2413
|
-
return /* @__PURE__ */ (0,
|
|
2450
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StackFrames, { raw: s.stack, resolveFrame }) });
|
|
2414
2451
|
}
|
|
2415
2452
|
function HotFunctions({
|
|
2416
2453
|
attribution,
|
|
@@ -2429,26 +2466,26 @@ function HotFunctions({
|
|
|
2429
2466
|
cancelled = true;
|
|
2430
2467
|
};
|
|
2431
2468
|
}, [attribution]);
|
|
2432
|
-
return /* @__PURE__ */ (0,
|
|
2433
|
-
/* @__PURE__ */ (0,
|
|
2434
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: "6px" }, children: [
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "1px", color: "#ff9f0a" }, children: t.hotFunctions }),
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666", fontSize: "10px", marginBottom: "4px" }, children: t.hotFunctionsHint }),
|
|
2435
2472
|
attribution.map((a, i) => {
|
|
2436
2473
|
const f = frames[i] ?? a.frame;
|
|
2437
2474
|
const pct = Math.round(a.selfRatio * 100);
|
|
2438
|
-
return /* @__PURE__ */ (0,
|
|
2439
|
-
/* @__PURE__ */ (0,
|
|
2440
|
-
/* @__PURE__ */ (0,
|
|
2441
|
-
/* @__PURE__ */ (0,
|
|
2475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
|
|
2476
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2477
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#ff9f0a", fontWeight: 600 }, children: f.fnName || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
|
|
2478
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
|
|
2442
2479
|
pct,
|
|
2443
2480
|
"%"
|
|
2444
2481
|
] }),
|
|
2445
|
-
/* @__PURE__ */ (0,
|
|
2482
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#666", marginLeft: "6px" }, children: [
|
|
2446
2483
|
"(",
|
|
2447
2484
|
a.sampleCount,
|
|
2448
2485
|
")"
|
|
2449
2486
|
] })
|
|
2450
2487
|
] }),
|
|
2451
|
-
/* @__PURE__ */ (0,
|
|
2488
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
|
|
2452
2489
|
f.file,
|
|
2453
2490
|
":",
|
|
2454
2491
|
f.line,
|
|
@@ -2465,59 +2502,59 @@ function LongTaskDetail({
|
|
|
2465
2502
|
}) {
|
|
2466
2503
|
const { t } = useI18n();
|
|
2467
2504
|
const scripts = s.scripts ? [...s.scripts].sort((a, b) => b.duration - a.duration) : [];
|
|
2468
|
-
return /* @__PURE__ */ (0,
|
|
2469
|
-
/* @__PURE__ */ (0,
|
|
2470
|
-
/* @__PURE__ */ (0,
|
|
2471
|
-
/* @__PURE__ */ (0,
|
|
2505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2506
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2507
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.started }),
|
|
2508
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2472
2509
|
s.at.toFixed(2),
|
|
2473
2510
|
"ms"
|
|
2474
2511
|
] })
|
|
2475
2512
|
] }),
|
|
2476
|
-
/* @__PURE__ */ (0,
|
|
2477
|
-
/* @__PURE__ */ (0,
|
|
2478
|
-
/* @__PURE__ */ (0,
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2514
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.ended }),
|
|
2515
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2479
2516
|
(s.at + s.duration).toFixed(2),
|
|
2480
2517
|
"ms"
|
|
2481
2518
|
] })
|
|
2482
2519
|
] }),
|
|
2483
|
-
/* @__PURE__ */ (0,
|
|
2484
|
-
/* @__PURE__ */ (0,
|
|
2485
|
-
/* @__PURE__ */ (0,
|
|
2520
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2521
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
|
|
2522
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2486
2523
|
s.duration.toFixed(2),
|
|
2487
2524
|
"ms"
|
|
2488
2525
|
] })
|
|
2489
2526
|
] }),
|
|
2490
|
-
typeof s.blockingDuration === "number" && /* @__PURE__ */ (0,
|
|
2491
|
-
/* @__PURE__ */ (0,
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2527
|
+
typeof s.blockingDuration === "number" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2528
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.blockingTime }),
|
|
2529
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2493
2530
|
s.blockingDuration.toFixed(2),
|
|
2494
2531
|
"ms"
|
|
2495
2532
|
] })
|
|
2496
2533
|
] }),
|
|
2497
|
-
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0,
|
|
2498
|
-
s.scripts !== void 0 && /* @__PURE__ */ (0,
|
|
2499
|
-
/* @__PURE__ */ (0,
|
|
2500
|
-
scripts.length === 0 ? /* @__PURE__ */ (0,
|
|
2501
|
-
/* @__PURE__ */ (0,
|
|
2502
|
-
/* @__PURE__ */ (0,
|
|
2503
|
-
/* @__PURE__ */ (0,
|
|
2504
|
-
/* @__PURE__ */ (0,
|
|
2534
|
+
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame }),
|
|
2535
|
+
s.scripts !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { marginTop: "6px" }, children: [
|
|
2536
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { ...detailLabelStyle, textTransform: "uppercase", fontSize: "10px", letterSpacing: "0.5px", marginBottom: "4px" }, children: t.scripts }),
|
|
2537
|
+
scripts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#666" }, children: t.noScripts }) : scripts.map((script, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { ...monoStyle, padding: "3px 0", borderTop: i > 0 ? "1px dashed #1f1f1f" : "none" }, children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2539
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: script.sourceFunctionName || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#666" }, children: t.anonymous }) }),
|
|
2540
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#5ac8fa", marginLeft: "6px" }, children: script.invokerType }),
|
|
2541
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.medium, marginLeft: "6px" }, children: [
|
|
2505
2542
|
script.duration.toFixed(1),
|
|
2506
2543
|
"ms"
|
|
2507
2544
|
] })
|
|
2508
2545
|
] }),
|
|
2509
|
-
script.sourceURL && /* @__PURE__ */ (0,
|
|
2546
|
+
script.sourceURL && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#888", wordBreak: "break-all" }, children: [
|
|
2510
2547
|
script.sourceURL,
|
|
2511
2548
|
script.charPosition >= 0 ? `@${script.charPosition}` : ""
|
|
2512
2549
|
] }),
|
|
2513
|
-
script.invoker && /* @__PURE__ */ (0,
|
|
2550
|
+
script.invoker && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { color: "#666" }, children: [
|
|
2514
2551
|
t.invoker,
|
|
2515
2552
|
": ",
|
|
2516
2553
|
script.invoker
|
|
2517
2554
|
] })
|
|
2518
2555
|
] }, i))
|
|
2519
2556
|
] }),
|
|
2520
|
-
s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ (0,
|
|
2557
|
+
s.scripts === void 0 && s.stack.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StackFrames, { raw: s.stack, resolveFrame, limit: 5 }) })
|
|
2521
2558
|
] });
|
|
2522
2559
|
}
|
|
2523
2560
|
var INTERACTION_PHASE_COLOR = { input: "#8e8e93", processing: "#5ac8fa", presentation: "#34c759" };
|
|
@@ -2532,33 +2569,33 @@ function InteractionDetail({
|
|
|
2532
2569
|
{ label: t.processingTime, ms: s.processing, color: INTERACTION_PHASE_COLOR.processing },
|
|
2533
2570
|
{ label: t.presentation, ms: s.presentation, color: INTERACTION_PHASE_COLOR.presentation }
|
|
2534
2571
|
];
|
|
2535
|
-
return /* @__PURE__ */ (0,
|
|
2536
|
-
/* @__PURE__ */ (0,
|
|
2537
|
-
/* @__PURE__ */ (0,
|
|
2538
|
-
/* @__PURE__ */ (0,
|
|
2572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
|
|
2573
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2574
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.interactionEvent }),
|
|
2575
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2539
2576
|
s.eventType,
|
|
2540
2577
|
s.target ? ` \xB7 ${s.target}` : ""
|
|
2541
2578
|
] })
|
|
2542
2579
|
] }),
|
|
2543
|
-
/* @__PURE__ */ (0,
|
|
2544
|
-
/* @__PURE__ */ (0,
|
|
2545
|
-
/* @__PURE__ */ (0,
|
|
2580
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2581
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: detailLabelStyle, children: t.duration }),
|
|
2582
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2546
2583
|
s.duration.toFixed(0),
|
|
2547
2584
|
"ms"
|
|
2548
2585
|
] })
|
|
2549
2586
|
] }),
|
|
2550
|
-
/* @__PURE__ */ (0,
|
|
2551
|
-
phases.map((p, i) => /* @__PURE__ */ (0,
|
|
2552
|
-
/* @__PURE__ */ (0,
|
|
2553
|
-
/* @__PURE__ */ (0,
|
|
2587
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", height: "10px", borderRadius: "3px", overflow: "hidden", margin: "5px 0 7px", background: "#1a1a1a" }, children: phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: `${p.ms / total * 100}%`, background: p.color } }, i)) }),
|
|
2588
|
+
phases.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: detailRowStyle, children: [
|
|
2589
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { ...detailLabelStyle, display: "inline-flex", alignItems: "center", gap: "5px" }, children: [
|
|
2590
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { width: "7px", height: "7px", borderRadius: "2px", background: p.color, flex: "0 0 7px" } }),
|
|
2554
2591
|
p.label
|
|
2555
2592
|
] }),
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2593
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2557
2594
|
p.ms.toFixed(0),
|
|
2558
2595
|
"ms"
|
|
2559
2596
|
] })
|
|
2560
2597
|
] }, i)),
|
|
2561
|
-
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0,
|
|
2598
|
+
s.attribution !== void 0 && s.attribution.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HotFunctions, { attribution: s.attribution, resolveFrame })
|
|
2562
2599
|
] });
|
|
2563
2600
|
}
|
|
2564
2601
|
function SignalDetail({
|
|
@@ -2567,24 +2604,24 @@ function SignalDetail({
|
|
|
2567
2604
|
}) {
|
|
2568
2605
|
switch (s.kind) {
|
|
2569
2606
|
case "forced-reflow":
|
|
2570
|
-
return /* @__PURE__ */ (0,
|
|
2607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ForcedReflowDetail, { s, resolveFrame });
|
|
2571
2608
|
case "layout-shift":
|
|
2572
|
-
return /* @__PURE__ */ (0,
|
|
2609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LayoutShiftDetail, { s });
|
|
2573
2610
|
case "long-task":
|
|
2574
|
-
return /* @__PURE__ */ (0,
|
|
2611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LongTaskDetail, { s, resolveFrame });
|
|
2575
2612
|
case "interaction":
|
|
2576
|
-
return /* @__PURE__ */ (0,
|
|
2613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InteractionDetail, { s, resolveFrame });
|
|
2577
2614
|
case "network":
|
|
2578
|
-
return /* @__PURE__ */ (0,
|
|
2615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NetworkDetail, { s });
|
|
2579
2616
|
case "web-vital":
|
|
2580
|
-
return /* @__PURE__ */ (0,
|
|
2617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WebVitalDetail, { s });
|
|
2581
2618
|
case "render":
|
|
2582
|
-
return /* @__PURE__ */ (0,
|
|
2619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderDetail, { s });
|
|
2583
2620
|
}
|
|
2584
2621
|
}
|
|
2585
2622
|
function SeverityDot({ sev, title }) {
|
|
2586
2623
|
const { t } = useI18n();
|
|
2587
|
-
return /* @__PURE__ */ (0,
|
|
2624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2588
2625
|
"span",
|
|
2589
2626
|
{
|
|
2590
2627
|
"data-severity": sev,
|
|
@@ -2607,9 +2644,9 @@ function SummaryLine({ signal }) {
|
|
|
2607
2644
|
if (signal.kind === "web-vital") {
|
|
2608
2645
|
const rating = webVitalRating(signal.name, signal.value);
|
|
2609
2646
|
const unit = WEB_VITAL_UNIT2[signal.name];
|
|
2610
|
-
return /* @__PURE__ */ (0,
|
|
2611
|
-
/* @__PURE__ */ (0,
|
|
2612
|
-
/* @__PURE__ */ (0,
|
|
2647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2648
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RatingDot, { rating }),
|
|
2649
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: signal.name }),
|
|
2613
2650
|
": ",
|
|
2614
2651
|
signal.value.toFixed(2),
|
|
2615
2652
|
unit
|
|
@@ -2618,12 +2655,12 @@ function SummaryLine({ signal }) {
|
|
|
2618
2655
|
const sev = severityForSignal(signal);
|
|
2619
2656
|
const color = SEVERITY_COLOR[sev];
|
|
2620
2657
|
if (signal.kind === "long-task") {
|
|
2621
|
-
return /* @__PURE__ */ (0,
|
|
2658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2622
2659
|
"@ ",
|
|
2623
2660
|
signal.at.toFixed(1),
|
|
2624
2661
|
"ms \u2022 duration",
|
|
2625
2662
|
" ",
|
|
2626
|
-
/* @__PURE__ */ (0,
|
|
2663
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
|
|
2627
2664
|
signal.duration.toFixed(1),
|
|
2628
2665
|
"ms"
|
|
2629
2666
|
] })
|
|
@@ -2631,59 +2668,59 @@ function SummaryLine({ signal }) {
|
|
|
2631
2668
|
}
|
|
2632
2669
|
if (signal.kind === "forced-reflow") {
|
|
2633
2670
|
const count = signal.count ?? 1;
|
|
2634
|
-
return /* @__PURE__ */ (0,
|
|
2671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2635
2672
|
"@ ",
|
|
2636
2673
|
signal.at.toFixed(1),
|
|
2637
2674
|
"ms \u2022 duration",
|
|
2638
2675
|
" ",
|
|
2639
|
-
/* @__PURE__ */ (0,
|
|
2676
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
|
|
2640
2677
|
signal.duration.toFixed(2),
|
|
2641
2678
|
"ms"
|
|
2642
2679
|
] }),
|
|
2643
|
-
count > 1 && /* @__PURE__ */ (0,
|
|
2680
|
+
count > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
|
|
2644
2681
|
" \u2022 ",
|
|
2645
2682
|
t.coalescedReads(count)
|
|
2646
2683
|
] })
|
|
2647
2684
|
] });
|
|
2648
2685
|
}
|
|
2649
2686
|
if (signal.kind === "layout-shift") {
|
|
2650
|
-
return /* @__PURE__ */ (0,
|
|
2687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2651
2688
|
"@ ",
|
|
2652
2689
|
signal.at.toFixed(1),
|
|
2653
2690
|
"ms \u2022 value",
|
|
2654
2691
|
" ",
|
|
2655
|
-
/* @__PURE__ */ (0,
|
|
2692
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color }, children: formatCls(signal.value) }),
|
|
2656
2693
|
" \u2022 ",
|
|
2657
2694
|
t.sourceCount(signal.sources.length)
|
|
2658
2695
|
] });
|
|
2659
2696
|
}
|
|
2660
2697
|
if (signal.kind === "render") {
|
|
2661
|
-
return /* @__PURE__ */ (0,
|
|
2662
|
-
/* @__PURE__ */ (0,
|
|
2663
|
-
/* @__PURE__ */ (0,
|
|
2664
|
-
/* @__PURE__ */ (0,
|
|
2698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" }, children: [
|
|
2699
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: signal.component }),
|
|
2700
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: signal.reason, changedProps: signal.changedProps }),
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
|
|
2665
2702
|
signal.duration.toFixed(2),
|
|
2666
2703
|
"ms"
|
|
2667
2704
|
] }),
|
|
2668
|
-
signal.count && signal.count > 1 && /* @__PURE__ */ (0,
|
|
2705
|
+
signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
|
|
2669
2706
|
] });
|
|
2670
2707
|
}
|
|
2671
2708
|
if (signal.kind === "network") {
|
|
2672
2709
|
const url = signal.url.length > 60 ? signal.url.slice(0, 57) + "..." : signal.url;
|
|
2673
|
-
return /* @__PURE__ */ (0,
|
|
2710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
2674
2711
|
url,
|
|
2675
2712
|
" \u2022 ",
|
|
2676
|
-
/* @__PURE__ */ (0,
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color }, children: [
|
|
2677
2714
|
signal.duration.toFixed(0),
|
|
2678
2715
|
"ms"
|
|
2679
2716
|
] }),
|
|
2680
|
-
signal.blocking && /* @__PURE__ */ (0,
|
|
2717
|
+
signal.blocking && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: SEVERITY_COLOR.high }, children: [
|
|
2681
2718
|
" \u2022 ",
|
|
2682
2719
|
t.blocking
|
|
2683
2720
|
] })
|
|
2684
2721
|
] });
|
|
2685
2722
|
}
|
|
2686
|
-
return /* @__PURE__ */ (0,
|
|
2723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: summary(signal) });
|
|
2687
2724
|
}
|
|
2688
2725
|
function tabSupportsGrouping(kind) {
|
|
2689
2726
|
return kind === "render" || kind === "forced-reflow";
|
|
@@ -2757,7 +2794,7 @@ function groupSignals(signals, mode, kind) {
|
|
|
2757
2794
|
function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveFrame }) {
|
|
2758
2795
|
const hasGeometry = signal.kind === "layout-shift" && signal.sources.length > 0;
|
|
2759
2796
|
const sev = severityForSignal(signal);
|
|
2760
|
-
return /* @__PURE__ */ (0,
|
|
2797
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
2761
2798
|
"li",
|
|
2762
2799
|
{
|
|
2763
2800
|
"aria-expanded": expanded,
|
|
@@ -2779,22 +2816,22 @@ function SignalRow({ signal, expanded, onToggleExpand, onHoverGeometry, resolveF
|
|
|
2779
2816
|
userSelect: "none"
|
|
2780
2817
|
},
|
|
2781
2818
|
children: [
|
|
2782
|
-
/* @__PURE__ */ (0,
|
|
2783
|
-
/* @__PURE__ */ (0,
|
|
2784
|
-
/* @__PURE__ */ (0,
|
|
2785
|
-
/* @__PURE__ */ (0,
|
|
2819
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
2820
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888", width: "10px" }, children: expanded ? "\u25BC" : "\u25B6" }),
|
|
2821
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SeverityDot, { sev }),
|
|
2822
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SummaryLine, { signal })
|
|
2786
2823
|
] }),
|
|
2787
|
-
expanded && /* @__PURE__ */ (0,
|
|
2824
|
+
expanded && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SignalDetail, { s: signal, resolveFrame }) })
|
|
2788
2825
|
]
|
|
2789
2826
|
}
|
|
2790
2827
|
);
|
|
2791
2828
|
}
|
|
2792
2829
|
function CascadeMembers({ members }) {
|
|
2793
2830
|
const minDepth = members.reduce((m, s) => Math.min(m, s.depth), Infinity);
|
|
2794
|
-
return /* @__PURE__ */ (0,
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: members.map((m, i) => {
|
|
2795
2832
|
const indent = (m.depth - minDepth) * 14;
|
|
2796
2833
|
const isCascade = m.reason === "parent";
|
|
2797
|
-
return /* @__PURE__ */ (0,
|
|
2834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
2798
2835
|
"div",
|
|
2799
2836
|
{
|
|
2800
2837
|
style: {
|
|
@@ -2805,10 +2842,10 @@ function CascadeMembers({ members }) {
|
|
|
2805
2842
|
gap: "6px"
|
|
2806
2843
|
},
|
|
2807
2844
|
children: [
|
|
2808
|
-
/* @__PURE__ */ (0,
|
|
2809
|
-
/* @__PURE__ */ (0,
|
|
2810
|
-
/* @__PURE__ */ (0,
|
|
2811
|
-
/* @__PURE__ */ (0,
|
|
2845
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: isCascade ? RENDER_REASON_COLOR.parent : "#555" }, children: m.depth > minDepth ? "\u2514" : "\u2022" }),
|
|
2846
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: m.component }),
|
|
2847
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderReasonTag, { reason: m.reason, changedProps: m.changedProps }),
|
|
2848
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: "#888" }, children: [
|
|
2812
2849
|
m.duration.toFixed(2),
|
|
2813
2850
|
"ms"
|
|
2814
2851
|
] })
|
|
@@ -2822,7 +2859,7 @@ function LanguageToggle() {
|
|
|
2822
2859
|
const { lang, setLang, t } = useI18n();
|
|
2823
2860
|
const langs = ["en", "ko"];
|
|
2824
2861
|
const labels = { en: "EN", ko: "\uD55C" };
|
|
2825
|
-
return /* @__PURE__ */ (0,
|
|
2862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2826
2863
|
"div",
|
|
2827
2864
|
{
|
|
2828
2865
|
role: "group",
|
|
@@ -2835,7 +2872,7 @@ function LanguageToggle() {
|
|
|
2835
2872
|
},
|
|
2836
2873
|
children: langs.map((l) => {
|
|
2837
2874
|
const active = lang === l;
|
|
2838
|
-
return /* @__PURE__ */ (0,
|
|
2875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2839
2876
|
"button",
|
|
2840
2877
|
{
|
|
2841
2878
|
type: "button",
|
|
@@ -2865,7 +2902,7 @@ function Panel(props) {
|
|
|
2865
2902
|
const grouped = (0, import_hooks3.useMemo)(() => groupByKind(result.signals), [result.signals]);
|
|
2866
2903
|
const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
|
|
2867
2904
|
const unsupported = (0, import_hooks3.useMemo)(() => (0, import_core4.unsupportedKinds)(), []);
|
|
2868
|
-
const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0;
|
|
2905
|
+
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;
|
|
2869
2906
|
const [activeTab, setActiveTab] = (0, import_hooks3.useState)(
|
|
2870
2907
|
kindsPresent[0] ?? "forced-reflow"
|
|
2871
2908
|
);
|
|
@@ -2930,12 +2967,12 @@ function Panel(props) {
|
|
|
2930
2967
|
flexDirection: "column",
|
|
2931
2968
|
overflow: "hidden"
|
|
2932
2969
|
};
|
|
2933
|
-
return /* @__PURE__ */ (0,
|
|
2934
|
-
/* @__PURE__ */ (0,
|
|
2935
|
-
/* @__PURE__ */ (0,
|
|
2936
|
-
/* @__PURE__ */ (0,
|
|
2937
|
-
/* @__PURE__ */ (0,
|
|
2938
|
-
/* @__PURE__ */ (0,
|
|
2970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { role: "region", "aria-label": t.panelRegion, style: panelStyle, children: [
|
|
2971
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
|
|
2972
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: "react-perfscope" }),
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
|
|
2974
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LanguageToggle, {}),
|
|
2975
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2939
2976
|
"button",
|
|
2940
2977
|
{
|
|
2941
2978
|
type: "button",
|
|
@@ -2954,7 +2991,7 @@ function Panel(props) {
|
|
|
2954
2991
|
children: t.save
|
|
2955
2992
|
}
|
|
2956
2993
|
),
|
|
2957
|
-
/* @__PURE__ */ (0,
|
|
2994
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2958
2995
|
"button",
|
|
2959
2996
|
{
|
|
2960
2997
|
type: "button",
|
|
@@ -2966,7 +3003,7 @@ function Panel(props) {
|
|
|
2966
3003
|
)
|
|
2967
3004
|
] })
|
|
2968
3005
|
] }),
|
|
2969
|
-
unsupported.length > 0 && /* @__PURE__ */ (0,
|
|
3006
|
+
unsupported.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2970
3007
|
"div",
|
|
2971
3008
|
{
|
|
2972
3009
|
style: {
|
|
@@ -2981,9 +3018,9 @@ function Panel(props) {
|
|
|
2981
3018
|
children: t.unsupportedInBrowser(unsupported.map((k) => t.kindLabel(k)).join(", "))
|
|
2982
3019
|
}
|
|
2983
3020
|
),
|
|
2984
|
-
kindsPresent.length === 0 && /* @__PURE__ */ (0,
|
|
2985
|
-
kindsPresent.length > 0 && /* @__PURE__ */ (0,
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
3021
|
+
kindsPresent.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888" }, children: t.noSignals }),
|
|
3022
|
+
kindsPresent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3023
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2987
3024
|
SummaryHeader,
|
|
2988
3025
|
{
|
|
2989
3026
|
signals: result.signals,
|
|
@@ -2995,8 +3032,8 @@ function Panel(props) {
|
|
|
2995
3032
|
}
|
|
2996
3033
|
}
|
|
2997
3034
|
),
|
|
2998
|
-
/* @__PURE__ */ (0,
|
|
2999
|
-
hasTimelineSignals && /* @__PURE__ */ (0,
|
|
3035
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("nav", { style: { display: "flex", gap: "4px", flexWrap: "wrap", marginBottom: "8px" }, children: [
|
|
3036
|
+
hasTimelineSignals && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3000
3037
|
"button",
|
|
3001
3038
|
{
|
|
3002
3039
|
type: "button",
|
|
@@ -3021,7 +3058,7 @@ function Panel(props) {
|
|
|
3021
3058
|
kindsPresent.map((kind) => {
|
|
3022
3059
|
const worst = worstSeverity(grouped[kind]);
|
|
3023
3060
|
const active = activeKind === kind;
|
|
3024
|
-
return /* @__PURE__ */ (0,
|
|
3061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3025
3062
|
"button",
|
|
3026
3063
|
{
|
|
3027
3064
|
type: "button",
|
|
@@ -3044,7 +3081,7 @@ function Panel(props) {
|
|
|
3044
3081
|
gap: "6px"
|
|
3045
3082
|
},
|
|
3046
3083
|
children: [
|
|
3047
|
-
worst !== "low" && /* @__PURE__ */ (0,
|
|
3084
|
+
worst !== "low" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SeverityDot, { sev: worst, title: t.worstLabel(worst) }),
|
|
3048
3085
|
t.kindLabel(kind),
|
|
3049
3086
|
" ",
|
|
3050
3087
|
grouped[kind].length
|
|
@@ -3054,10 +3091,10 @@ function Panel(props) {
|
|
|
3054
3091
|
);
|
|
3055
3092
|
})
|
|
3056
3093
|
] }),
|
|
3057
|
-
activeKind && activeTab !== "timeline" && /* @__PURE__ */ (0,
|
|
3058
|
-
/* @__PURE__ */ (0,
|
|
3094
|
+
activeKind && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px", fontSize: "11px", color: "#888", flexWrap: "wrap" }, children: [
|
|
3095
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
3059
3096
|
t.sort,
|
|
3060
|
-
/* @__PURE__ */ (0,
|
|
3097
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3061
3098
|
"select",
|
|
3062
3099
|
{
|
|
3063
3100
|
"aria-label": t.sort,
|
|
@@ -3069,15 +3106,15 @@ function Panel(props) {
|
|
|
3069
3106
|
},
|
|
3070
3107
|
style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
|
|
3071
3108
|
children: [
|
|
3072
|
-
/* @__PURE__ */ (0,
|
|
3073
|
-
/* @__PURE__ */ (0,
|
|
3109
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "chronological", children: t.sortChronological }),
|
|
3110
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "severity", children: t.sortSeverity })
|
|
3074
3111
|
]
|
|
3075
3112
|
}
|
|
3076
3113
|
)
|
|
3077
3114
|
] }),
|
|
3078
|
-
tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0,
|
|
3115
|
+
tabSupportsGrouping(activeKind) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
|
|
3079
3116
|
t.groupBy,
|
|
3080
|
-
/* @__PURE__ */ (0,
|
|
3117
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3081
3118
|
"select",
|
|
3082
3119
|
{
|
|
3083
3120
|
"aria-label": t.groupBy,
|
|
@@ -3089,15 +3126,15 @@ function Panel(props) {
|
|
|
3089
3126
|
},
|
|
3090
3127
|
style: { background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px" },
|
|
3091
3128
|
children: [
|
|
3092
|
-
/* @__PURE__ */ (0,
|
|
3093
|
-
activeKind === "render" && /* @__PURE__ */ (0,
|
|
3094
|
-
activeKind === "render" && /* @__PURE__ */ (0,
|
|
3095
|
-
activeKind === "forced-reflow" && /* @__PURE__ */ (0,
|
|
3129
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "chronological", children: t.groupChronological }),
|
|
3130
|
+
activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "commit", children: t.groupCommit }),
|
|
3131
|
+
activeKind === "render" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "component", children: t.groupComponent }),
|
|
3132
|
+
activeKind === "forced-reflow" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "source", children: t.groupSource })
|
|
3096
3133
|
]
|
|
3097
3134
|
}
|
|
3098
3135
|
)
|
|
3099
3136
|
] }),
|
|
3100
|
-
/* @__PURE__ */ (0,
|
|
3137
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3101
3138
|
"input",
|
|
3102
3139
|
{
|
|
3103
3140
|
type: "text",
|
|
@@ -3112,23 +3149,26 @@ function Panel(props) {
|
|
|
3112
3149
|
}
|
|
3113
3150
|
)
|
|
3114
3151
|
] }),
|
|
3115
|
-
activeTab === "timeline" && /* @__PURE__ */ (0,
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3152
|
+
activeTab === "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: [
|
|
3153
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LeakList, { suspects: result.leakSuspects }),
|
|
3154
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3155
|
+
Timeline,
|
|
3156
|
+
{
|
|
3157
|
+
signals: result.signals,
|
|
3158
|
+
duration: result.duration,
|
|
3159
|
+
startedAt: result.startedAt,
|
|
3160
|
+
heapSamples: result.heapSamples,
|
|
3161
|
+
frames: result.frames,
|
|
3162
|
+
onJump: (s) => {
|
|
3163
|
+
setActiveTab(s.kind);
|
|
3164
|
+
const inOrder = grouped[s.kind];
|
|
3165
|
+
const idx = inOrder.indexOf(s);
|
|
3166
|
+
if (idx >= 0) setExpandedKey(`${s.kind}-${idx}`);
|
|
3167
|
+
}
|
|
3128
3168
|
}
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0,
|
|
3169
|
+
)
|
|
3170
|
+
] }),
|
|
3171
|
+
activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3132
3172
|
RenderInsights,
|
|
3133
3173
|
{
|
|
3134
3174
|
signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
|
|
@@ -3138,8 +3178,8 @@ function Panel(props) {
|
|
|
3138
3178
|
}
|
|
3139
3179
|
}
|
|
3140
3180
|
),
|
|
3141
|
-
activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0,
|
|
3142
|
-
activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0,
|
|
3181
|
+
activeKind === "long-task" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LongTaskEpisode, { signals: result.signals }),
|
|
3182
|
+
activeKind === "layout-shift" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3143
3183
|
"div",
|
|
3144
3184
|
{
|
|
3145
3185
|
style: {
|
|
@@ -3154,9 +3194,9 @@ function Panel(props) {
|
|
|
3154
3194
|
children: t.layoutShiftHint
|
|
3155
3195
|
}
|
|
3156
3196
|
),
|
|
3157
|
-
activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0,
|
|
3158
|
-
/* @__PURE__ */ (0,
|
|
3159
|
-
/* @__PURE__ */ (0,
|
|
3197
|
+
activeKind === "interaction" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3198
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InpEpisode, { signals: result.signals }),
|
|
3199
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3160
3200
|
"div",
|
|
3161
3201
|
{
|
|
3162
3202
|
style: {
|
|
@@ -3172,7 +3212,7 @@ function Panel(props) {
|
|
|
3172
3212
|
}
|
|
3173
3213
|
)
|
|
3174
3214
|
] }),
|
|
3175
|
-
/* @__PURE__ */ (0,
|
|
3215
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
|
|
3176
3216
|
const filtered = grouped[activeKind].filter(
|
|
3177
3217
|
(s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
|
|
3178
3218
|
);
|
|
@@ -3182,7 +3222,7 @@ function Panel(props) {
|
|
|
3182
3222
|
const currentMode = groupMode[activeKind] ?? "chronological";
|
|
3183
3223
|
if (currentMode === "chronological") {
|
|
3184
3224
|
const key2 = `${activeKind}-${gi}`;
|
|
3185
|
-
return /* @__PURE__ */ (0,
|
|
3225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
3186
3226
|
SignalRow,
|
|
3187
3227
|
{
|
|
3188
3228
|
signal: g.signals[0],
|
|
@@ -3199,7 +3239,7 @@ function Panel(props) {
|
|
|
3199
3239
|
const isCascade = activeKind === "render" && currentMode === "commit";
|
|
3200
3240
|
const renderMembers = g.signals.filter((s) => s.kind === "render");
|
|
3201
3241
|
const unnecessary = isCascade ? renderMembers.filter((s) => s.reason === "parent").length : 0;
|
|
3202
|
-
return /* @__PURE__ */ (0,
|
|
3242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
3203
3243
|
"li",
|
|
3204
3244
|
{
|
|
3205
3245
|
"aria-expanded": isOpen,
|
|
@@ -3214,34 +3254,34 @@ function Panel(props) {
|
|
|
3214
3254
|
userSelect: "none"
|
|
3215
3255
|
},
|
|
3216
3256
|
children: [
|
|
3217
|
-
/* @__PURE__ */ (0,
|
|
3218
|
-
/* @__PURE__ */ (0,
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3220
|
-
/* @__PURE__ */ (0,
|
|
3257
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
|
|
3258
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: "#888", width: "10px" }, children: isOpen ? "\u25BC" : "\u25B6" }),
|
|
3259
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
|
|
3260
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: g.label }),
|
|
3221
3261
|
" \xD7",
|
|
3222
3262
|
g.count
|
|
3223
3263
|
] }),
|
|
3224
|
-
isCascade && unnecessary > 0 && /* @__PURE__ */ (0,
|
|
3264
|
+
isCascade && unnecessary > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { color: RENDER_REASON_COLOR.parent, fontSize: "10px" }, children: [
|
|
3225
3265
|
"\u26A0 ",
|
|
3226
3266
|
t.unnecessaryRenders(unnecessary)
|
|
3227
3267
|
] })
|
|
3228
3268
|
] }),
|
|
3229
|
-
isOpen && /* @__PURE__ */ (0,
|
|
3230
|
-
g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ (0,
|
|
3231
|
-
g.signals.length > 20 && /* @__PURE__ */ (0,
|
|
3269
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px dashed #2a2a2a", paddingLeft: "8px" }, children: isCascade ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CascadeMembers, { members: renderMembers }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
3270
|
+
g.signals.slice(0, 20).map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "2px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SummaryLine, { signal: s }) }, si)),
|
|
3271
|
+
g.signals.length > 20 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { color: "#888", marginTop: "4px" }, children: t.moreItems(g.signals.length - 20) })
|
|
3232
3272
|
] }) })
|
|
3233
3273
|
]
|
|
3234
3274
|
},
|
|
3235
3275
|
key
|
|
3236
3276
|
);
|
|
3237
3277
|
}) }),
|
|
3238
|
-
activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0,
|
|
3278
|
+
activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
|
|
3239
3279
|
] })
|
|
3240
3280
|
] });
|
|
3241
3281
|
}
|
|
3242
3282
|
|
|
3243
3283
|
// src/app.tsx
|
|
3244
|
-
var
|
|
3284
|
+
var import_jsx_runtime10 = require("preact/jsx-runtime");
|
|
3245
3285
|
function App(props) {
|
|
3246
3286
|
const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
|
|
3247
3287
|
const [recording, setRecording] = (0, import_hooks4.useState)(false);
|
|
@@ -3287,8 +3327,8 @@ function App(props) {
|
|
|
3287
3327
|
function onClose() {
|
|
3288
3328
|
setResult(null);
|
|
3289
3329
|
}
|
|
3290
|
-
return /* @__PURE__ */ (0,
|
|
3291
|
-
result === null && /* @__PURE__ */ (0,
|
|
3330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(I18nProvider, { children: [
|
|
3331
|
+
result === null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
3292
3332
|
Widget,
|
|
3293
3333
|
{
|
|
3294
3334
|
recording,
|
|
@@ -3297,16 +3337,16 @@ function App(props) {
|
|
|
3297
3337
|
position
|
|
3298
3338
|
}
|
|
3299
3339
|
),
|
|
3300
|
-
result !== null && /* @__PURE__ */ (0,
|
|
3340
|
+
result !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Panel, { result, position, onClose, resolveFrame })
|
|
3301
3341
|
] });
|
|
3302
3342
|
}
|
|
3303
3343
|
|
|
3304
3344
|
// src/mount.tsx
|
|
3305
|
-
var
|
|
3345
|
+
var import_jsx_runtime11 = require("preact/jsx-runtime");
|
|
3306
3346
|
function mount(opts) {
|
|
3307
3347
|
const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
|
|
3308
3348
|
return mountShadow(
|
|
3309
|
-
/* @__PURE__ */ (0,
|
|
3349
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(App, { recorder, position, resolveFrame, finalize }),
|
|
3310
3350
|
{ parent: host }
|
|
3311
3351
|
);
|
|
3312
3352
|
}
|