From cbb930379d4b5046ef8dec4b3017cdc23e240fa3 Mon Sep 17 00:00:00 2001 From: Sudheer Salavadi Date: Tue, 15 Apr 2025 20:20:47 -0400 Subject: [PATCH] Request Timings UI update The notification banner has been updated (position and style). so it doesn't overlap on Network Panel drawer. --- .../app/components/Session_/Subheader.tsx | 7 ++ .../app/components/Session_/WarnBadge.tsx | 89 ++++++++++++++----- .../components/FetchTabs/FetchTimings.tsx | 40 ++++----- frontend/devbox.json | 15 ++++ frontend/devbox.lock | 8 ++ 5 files changed, 119 insertions(+), 40 deletions(-) create mode 100644 frontend/devbox.json create mode 100644 frontend/devbox.lock diff --git a/frontend/app/components/Session_/Subheader.tsx b/frontend/app/components/Session_/Subheader.tsx index 77de34cc1..f45422722 100644 --- a/frontend/app/components/Session_/Subheader.tsx +++ b/frontend/app/components/Session_/Subheader.tsx @@ -137,6 +137,13 @@ function SubHeader(props) { return ( <> +
`${project}_localhost_warn`; @@ -29,11 +30,27 @@ function compareVersions( return VersionComparison.Same; } +// New optional override props added in WarnBadgeExtraProps +interface WarnBadgeExtraProps { + containerStyle?: React.CSSProperties; + containerClassName?: string; + localhostWarnStyle?: React.CSSProperties; + localhostWarnClassName?: string; + trackerWarnStyle?: React.CSSProperties; + trackerWarnClassName?: string; +} + const WarnBadge = React.memo( ({ currentLocation, version, siteId, + containerStyle, + containerClassName, + localhostWarnStyle, + localhostWarnClassName, + trackerWarnStyle, + trackerWarnClassName, virtualElsFailed, onVMode, }: { @@ -42,7 +59,7 @@ const WarnBadge = React.memo( siteId: string; virtualElsFailed: boolean; onVMode: () => void; - }) => { + } & WarnBadgeExtraProps) => { const { t } = useTranslation(); const localhostWarnSiteKey = localhostWarn(siteId); const defaultLocalhostWarn = @@ -75,20 +92,37 @@ const WarnBadge = React.memo( if (!warnings.some(el => el === true)) return null; + // Default container styles and classes + const defaultContainerStyle: React.CSSProperties = { + zIndex: 999, + position: 'absolute', + left: '50%', + bottom: '0', + transform: 'translate(-50%, 80%)', + fontWeight: 500, + }; + const defaultContainerClass = "flex flex-col gap-2"; + const defaultWarnClass = "px-3 py-.5 border border-gray-lighter shadow-sm rounded bg-active-blue flex items-center justify-between"; + + // Merge defaults with any overrides + const mergedContainerStyle = { ...defaultContainerStyle, ...containerStyle }; + const mergedContainerClassName = containerClassName + ? defaultContainerClass + ' ' + containerClassName + : defaultContainerClass; + const mergedLocalhostWarnClassName = localhostWarnClassName + ? defaultWarnClass + ' ' + localhostWarnClassName + : defaultWarnClass; + const mergedTrackerWarnClassName = trackerWarnClassName + ? defaultWarnClass + ' ' + trackerWarnClassName + : defaultWarnClass; + return (
{warnings[0] ? ( -
+
{t('Some assets may load incorrectly on localhost.')} ) : null} {warnings[1] ? ( -
-
-
- {t('Tracker version')} ({version})  + + ) : null} + {warnings[2] ? ( +
+
+
{t('If you have issues displaying custom HTML elements (i.e when using LWC), consider turning on Virtual Mode.')}
+
{t('Enable')}
+
+
closeWarning(2)} > - +
) : null} diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTimings.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTimings.tsx index 846620fc4..55739c215 100644 --- a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTimings.tsx +++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTimings.tsx @@ -32,36 +32,36 @@ function FetchTimings({ timings }: { timings: Record }) { { key: 'queueing', name: 'Queueing', - color: 'bg-[#99a1af]', + color: 'bg-transparent border border-[#666]', description: 'Time spent in browser queue before connection start', }, - { - key: 'stalled', - name: 'Stalled', - color: 'bg-[#c3c3c3]', - description: 'Time request was stalled after connection start', - }, ], }, { category: 'Connection Start', children: [ + { + key: 'stalled', + name: 'Stalled', + color: 'bg-[#c3c3c3]', + description: 'Time request was stalled after connection start', + }, { key: 'dnsLookup', name: 'DNS Lookup', - color: 'bg-[#00c951]', + color: 'bg-[#12546C]', description: 'Time spent resolving the DNS', }, { key: 'initialConnection', name: 'Initial Connection', - color: 'bg-[#efb100]', + color: 'bg-[#DD4F18]', description: 'Time establishing connection (TCP handshakes/retries)', }, { key: 'ssl', name: 'SSL', - color: 'bg-[#ad46ff]', + color: 'bg-[#C079FF]', description: 'Time spent completing SSL/TLS handshake', }, ], @@ -72,13 +72,13 @@ function FetchTimings({ timings }: { timings: Record }) { { key: 'ttfb', name: 'Request & TTFB', - color: 'bg-[#2b7fff]', + color: 'bg-[#3CB347]', description: 'Time waiting for first byte (server response time)', }, { key: 'contentDownload', name: 'Content Download', - color: 'bg-[#00a63e]', + color: 'bg-[#3E78F7]', description: 'Time spent receiving the response data', }, ], @@ -116,27 +116,27 @@ function FetchTimings({ timings }: { timings: Record }) { const timelineData = React.useMemo(() => calculateTimelines(), [total]); return ( -
+
{timelineData.map((cat, index) => (
-
{cat.category}
+
{cat.category}
{cat.children.map((phase, index) => (
-
+
{phase.name}:
-
-
+
+
{phase.width > 0 && (
}) {
-
+
{formatTime(phase.duration)}
@@ -160,11 +160,11 @@ function FetchTimings({ timings }: { timings: Record }) { ))}
-
+
Total:
-
+
{formatTime(total)}{' '} {isAdjusted ? ( diff --git a/frontend/devbox.json b/frontend/devbox.json new file mode 100644 index 000000000..c1ac0eedd --- /dev/null +++ b/frontend/devbox.json @@ -0,0 +1,15 @@ +{ + "$schema": "https://raw.githubusercontent.com/jetify-com/devbox/0.14.0/.schema/devbox.schema.json", + "packages": [], + "shell": { + "init_hook": [ + "echo 'Welcome to devbox!' > /dev/null" + ], + "scripts": { + "test": [ + "echo \"Error: no test specified\" && exit 1" + ] + } + } + } + \ No newline at end of file diff --git a/frontend/devbox.lock b/frontend/devbox.lock new file mode 100644 index 000000000..a5ff65f30 --- /dev/null +++ b/frontend/devbox.lock @@ -0,0 +1,8 @@ +{ + "lockfile_version": "1", + "packages": { + "github:NixOS/nixpkgs/nixpkgs-unstable": { + "resolved": "github:NixOS/nixpkgs/18dd725c29603f582cf1900e0d25f9f1063dbf11?lastModified=1744536153&narHash=sha256-awS2zRgF4uTwrOKwwiJcByDzDOdo3Q1rPZbiHQg%2FN38%3D" + } + } +}