diff --git a/src/plugins/startupTimings/StartupTimingPage.css b/src/plugins/startupTimings/StartupTimingPage.css new file mode 100644 index 00000000..ed055142 --- /dev/null +++ b/src/plugins/startupTimings/StartupTimingPage.css @@ -0,0 +1,23 @@ +.vc-startuptimings-server-trace { + color: var(--header-primary); + user-select: text; +} + +.vc-startuptimings-grid { + color: var(--header-primary); + display: grid; + gap: 2px 10px; + user-select: text; +} + +.vc-startuptimings-4-cols { + grid-template-columns: repeat(3, auto) 1fr; +} + +.vc-startuptimings-3-cols { + grid-template-columns: repeat(2, auto) 1fr; +} + +.vc-startuptimings-2-cols { + grid-template-columns: auto 1fr; +} \ No newline at end of file diff --git a/src/plugins/startupTimings/StartupTimingPage.tsx b/src/plugins/startupTimings/StartupTimingPage.tsx index c8cf51da..6670dc9b 100644 --- a/src/plugins/startupTimings/StartupTimingPage.tsx +++ b/src/plugins/startupTimings/StartupTimingPage.tsx @@ -16,11 +16,35 @@ * along with this program. If not, see . */ +import "./StartupTimingPage.css"; + +import { classNameFactory } from "@api/Styles"; 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"; + +export const cl = classNameFactory("vc-startuptimings-"); + +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[]; @@ -91,11 +115,11 @@ function TimingSection({ title, logs, traceEnd }: TimingSectionProps) { {traceEnd && ( -
+
Trace ended at: {(new Date(traceEnd)).toTimeString()}
)} -
+
Start Interval Delta @@ -119,13 +143,66 @@ function ServerTrace({ trace }: ServerTraceProps) { return ( - + {lines.map(line => ( {line} ))} - + + ); +} + +function TTIAnalytics() { + const analytics = TTITracker.serializeTTITracker(); + const filteredAnalytics = Object.entries(analytics).filter(([key, value]) => value != null && !/_start$|_end$/.test(key)); + + return ( + + + +
+ {filteredAnalytics.map(([key, value]) => ( + +
{key}
+
{`${value}`}
+
+ ))} +
+
+
+
+ ); +} + +interface TTITimingsProps { + records: [string, ITTITrackerEvent][]; + title: string; + type: "registered" | "unregistered"; +} + +function TTITimings({ records, title, type }: TTITimingsProps) { + const isRegistered = type === "registered"; + + return ( + + + +
+ {isRegistered && Duration} + Key + Event + {records.map(([key, event]) => ( + + {isRegistered &&
{event.end - event.start}ms
} +
{key}
+
{event.emoji} {event.name}
+
+ ))} +
+
+
+
); } @@ -134,6 +211,12 @@ function StartupTimingPage() { const serverTrace = AppStartPerformance.logGroups.find(g => g.serverTrace)?.serverTrace; + const registeredTTITimings: [string, ITTITrackerEvent][] = (Object.entries(TTITracker)) + .filter(([, value]) => value?.hasData?.()); + + const unregisteredTTITimings: [string, ITTITrackerEvent][] = (Object.entries(TTITracker)) + .filter(([, value]) => value?.hasData && !value.hasData()); + return ( - {/* Lazy Divider */} -
 
+ + {serverTrace && } + + + + + + + + +
); }