Time support in Network details tab

packages/trace-viewer/src/ui/callTab.tsx

@@ -37,11 +37,12 @@ export const CallTab: React.FunctionComponent<{
   if (!action)
     return <PlaceholderPanel text='No action selected' />;
 
+  // Calculate execution time relative to the test runner's start time
   const startTimeMillis = action.startTime - executionStartTime;
   const startTime = msToString(startTimeMillis);
 
   const wallTimeMillis = startTimeMillis + executionStartWallTime;
-  const wallTime = new Date(wallTimeMillis).toLocaleString();
+  const wallTime = new Date(wallTimeMillis).toLocaleString(undefined, { timeZoneName: 'short' });
 
   const duration = action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out';
 

packages/trace-viewer/src/ui/metadataView.tsx

@@ -25,9 +25,11 @@ export const MetadataView: React.FunctionComponent<{
   if (!model)
     return <></>;
 
+  const wallTime = model.wallTime !== undefined ? new Date(model.wallTime).toLocaleString(undefined, { timeZoneName: 'short' }) : undefined;
+
   return <div data-testid='metadata-view' className='vbox' style={{ flexShrink: 0 }}>
     <div className='call-section' style={{ paddingTop: 2 }}>Time</div>
-    {!!model.wallTime && <div className='call-line'>start time:<span className='call-value datetime' title={new Date(model.wallTime).toLocaleString()}>{new Date(model.wallTime).toLocaleString()}</span></div>}
+    {!!wallTime && <div className='call-line'>start time:<span className='call-value datetime' title={wallTime}>{wallTime}</span></div>}
     <div className='call-line'>duration:<span className='call-value number' title={msToString(model.endTime - model.startTime)}>{msToString(model.endTime - model.startTime)}</span></div>
     <div className='call-section'>Browser</div>
     <div className='call-line'>engine:<span className='call-value string' title={model.browserName}>{model.browserName}</span></div>

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -24,12 +24,14 @@ import { generateCurlCommand, generateFetchCall } from '../third_party/devtools'
 import { CopyToClipboardTextButton } from './copyToClipboard';
 import { getAPIRequestCodeGen } from './codegen';
 import type { Language } from '@isomorphic/locatorGenerators';
+import { msToString } from '@web/uiUtils';
 
 export const NetworkResourceDetails: React.FunctionComponent<{
   resource: ResourceSnapshot;
-  onClose: () => void;
   sdkLanguage: Language;
-}> = ({ resource, onClose, sdkLanguage }) => {
+  startTimeOffset: number;
+  onClose: () => void;
+}> = ({ resource, sdkLanguage, startTimeOffset, onClose }) => {
   const [selectedTab, setSelectedTab] = React.useState('request');
 
   return <TabbedPane
@@ -39,7 +41,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
       {
         id: 'request',
         title: 'Request',
-        render: () => <RequestTab resource={resource} sdkLanguage={sdkLanguage} />,
+        render: () => <RequestTab resource={resource} sdkLanguage={sdkLanguage} startTimeOffset={startTimeOffset} />,
       },
       {
         id: 'response',
@@ -59,9 +61,12 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 const RequestTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
   sdkLanguage: Language;
-}> = ({ resource, sdkLanguage }) => {
+  startTimeOffset: number;
+}> = ({ resource, sdkLanguage, startTimeOffset }) => {
   const [requestBody, setRequestBody] = React.useState<{ text: string, mimeType?: string } | null>(null);
 
+  const wallTimeString = React.useMemo(() => resource.startedDateTime.length > 0 ? new Date(resource.startedDateTime).toLocaleString(undefined, { timeZoneName: 'short' }) : '-', [resource.startedDateTime]);
+
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.request.postData) {
@@ -94,6 +99,10 @@ const RequestTab: React.FunctionComponent<{
         {resource.request.queryString.map(param => `${param.name}: ${param.value}`).join('\n')}
       </div>
     </> : null}
+    <div className='network-request-details-header'>Time</div>
+    <div className='network-request-details-general'>{`Wall Time: ${wallTimeString}`}</div>
+    <div className='network-request-details-general'>{`Start: ${msToString(startTimeOffset)}`}</div>
+    <div className='network-request-details-general'>{`Duration: ${msToString(resource.time)}`}</div>
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
 

packages/trace-viewer/src/ui/networkTab.tsx

@@ -117,7 +117,7 @@ export const NetworkTab: React.FunctionComponent<{
         sidebarIsFirst={true}
         orientation='horizontal'
         settingName='networkResourceDetails'
-        main={<NetworkResourceDetails resource={selectedEntry.resource} onClose={() => setSelectedEntry(undefined)} sdkLanguage={sdkLanguage} />}
+        main={<NetworkResourceDetails resource={selectedEntry.resource} sdkLanguage={sdkLanguage} startTimeOffset={selectedEntry.start} onClose={() => setSelectedEntry(undefined)} />}
         sidebar={grid}
       />}
   </>;