diff --git a/packages/trace-viewer/src/ui/callTab.css b/packages/trace-viewer/src/ui/callTab.css
index f57f3f1529938..e3907f4b3655c 100644
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/packages/trace-viewer/src/ui/callTab.css
@@ -89,6 +89,7 @@ a.call-value:hover {
.call-value.datetime,
.call-value.string,
+.call-value.literal,
.call-value.locator {
color: var(--vscode-charts-orange);
}
diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx
index 94f1938ebf1e5..c3a6d34e5f770 100644
--- a/packages/trace-viewer/src/ui/callTab.tsx
+++ b/packages/trace-viewer/src/ui/callTab.tsx
@@ -44,8 +44,8 @@ export const CallTab: React.FunctionComponent<{
{action.title}
Time
-
-
+ {renderProperty({ name: 'start', type: 'literal', text: startTime })}
+ {renderProperty({ name: 'duration', type: 'literal', text: renderDuration(action) })}
{
!!paramKeys.length && <>
Parameters
@@ -64,11 +64,9 @@ export const CallTab: React.FunctionComponent<{
);
};
-const DateTimeCallLine: React.FC<{ name: string, value: string }> = ({ name, value }) =>
{name}{value}
;
-
type Property = {
name: string;
- type: 'string' | 'number' | 'object' | 'locator' | 'handle' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'function';
+ type: 'literal' | 'string' | 'number' | 'object' | 'locator' | 'handle' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'function';
text: string;
};
@@ -88,7 +86,7 @@ function renderProperty(property: Property) {
return (
{property.name}:{text}
- { ['string', 'number', 'object', 'locator'].includes(property.type) &&
+ { ['literal', 'string', 'number', 'object', 'locator'].includes(property.type) &&
}