From 9bc373d87a99db24ceeb53946efb4883d9548a36 Mon Sep 17 00:00:00 2001 From: Rie Takahashi Date: Sun, 17 Sep 2023 20:45:04 +0100 Subject: [PATCH] fix: merge tti components, use css file --- .../startupTimings/StartupTimingPage.css | 23 ++++++ .../startupTimings/StartupTimingPage.tsx | 81 ++++++++++--------- 2 files changed, 64 insertions(+), 40 deletions(-) create mode 100644 src/plugins/startupTimings/StartupTimingPage.css 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 058aba8f..6670dc9b 100644 --- a/src/plugins/startupTimings/StartupTimingPage.tsx +++ b/src/plugins/startupTimings/StartupTimingPage.tsx @@ -16,6 +16,9 @@ * 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"; @@ -23,6 +26,9 @@ 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; @@ -109,11 +115,11 @@ function TimingSection({ title, logs, traceEnd }: TimingSectionProps) { {traceEnd && ( -
+
Trace ended at: {(new Date(traceEnd)).toTimeString()}
)} -
+
Start Interval Delta @@ -137,25 +143,25 @@ function ServerTrace({ trace }: ServerTraceProps) { return ( - + {lines.map(line => ( {line} ))} - + ); } function TTIAnalytics() { const analytics = TTITracker.serializeTTITracker(); - const filteredAnalytics = Object.entries(analytics).filter(([key, value]) => !/_start$|_end$/.test(key) && value !== null && value !== undefined); + const filteredAnalytics = Object.entries(analytics).filter(([key, value]) => value != null && !/_start$|_end$/.test(key)); return ( -
+
{filteredAnalytics.map(([key, value]) => (
{key}
@@ -169,45 +175,26 @@ function TTIAnalytics() { ); } -function TTITimings() { - const records: [string, ITTITrackerEvent][] = (Object.entries(TTITracker) as [string, ITTITrackerEvent][]) - .filter(([, value]) => value instanceof Object && value.hasData?.()) as any; +interface TTITimingsProps { + records: [string, ITTITrackerEvent][]; + title: string; + type: "registered" | "unregistered"; +} + +function TTITimings({ records, title, type }: TTITimingsProps) { + const isRegistered = type === "registered"; return ( - + -
- Duration +
+ {isRegistered && 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]) => ( - + + {isRegistered &&
{event.end - event.start}ms
}
{key}
{event.emoji} {event.name}
@@ -224,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 ( - + - + ); }