diff --git a/src/plugins/startupTimings/StartupTimingPage.tsx b/src/plugins/startupTimings/StartupTimingPage.tsx index c8cf51da..b6d0d98a 100644 --- a/src/plugins/startupTimings/StartupTimingPage.tsx +++ b/src/plugins/startupTimings/StartupTimingPage.tsx @@ -18,9 +18,27 @@ import ErrorBoundary from "@components/ErrorBoundary"; import { Flex } from "@components/Flex"; +import { Margins } from "@utils/margins"; +import { classes } from "@utils/misc"; import { findByPropsLazy } from "@webpack"; import { Forms, React } from "@webpack/common"; +interface ITTITrackerEvent { + emoji: string; + name: string; + start: number; + end: number; + hasData(): boolean; +} + +interface ITTITracker { + serializeTTITracker(): Record; + [event: string]: ITTITrackerEvent | string | boolean | null | any; +} + +/** Time-To-Interactive Tracker */ +const TTITracker: ITTITracker = findByPropsLazy("serializeTTITracker"); + interface AppStartPerformance { prefix: string; logs: Log[]; @@ -129,6 +147,78 @@ function ServerTrace({ trace }: ServerTraceProps) { ); } +function TTIAnalytics() { + const analytics = TTITracker.serializeTTITracker(); + const filteredAnalytics = Object.entries(analytics).filter(([key, value]) => !/_start|_end$/.test(key) && value !== null && value !== undefined); + + return ( + + + +
+ {filteredAnalytics.map(([key, value]) => ( + +
{key}
+
{`${value}`}
+
+ ))} +
+
+
+
+ ); +} + +function TTITimings() { + const records: [string, ITTITrackerEvent][] = (Object.entries(TTITracker) as [string, ITTITrackerEvent][]) + .filter(([, value]) => value instanceof Object && value.hasData?.()) as any; + + return ( + + + +
+ Duration + Key + Event + {records.map(([key, event]) => ( + +
{event.end - event.start}ms
+
{key}
+
{event.emoji} {event.name}
+
+ ))} +
+
+
+
+ ); +} + +function UnregisteredTimings() { + const records: [string, ITTITrackerEvent][] = (Object.entries(TTITracker) as [string, ITTITrackerEvent][]) + .filter(([, value]) => value instanceof Object && value.hasData && !value.hasData()) as any; + + return ( + + + +
+ Key + Name + {records.map(([key, event]) => ( + +
{key}
+
{event.emoji} {event.name}
+
+ ))} +
+
+
+
+ ); +} + function StartupTimingPage() { if (!AppStartPerformance?.logs) return
Loading...
; @@ -141,9 +231,18 @@ function StartupTimingPage() { logs={AppStartPerformance.logs} traceEnd={AppStartPerformance.endTime_} /> - {/* Lazy Divider */} -
 
+ + {serverTrace && } + + + + + + + + + ); }