From 9e477a183ee847891cf7cd980efc98135d105c74 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Mon, 6 Mar 2023 21:37:39 -0800 Subject: [PATCH] chore: various trace viewer ui fixes (#21447) --- packages/trace-viewer/src/ui/actionList.tsx | 10 +++++----- packages/trace-viewer/src/ui/filmStrip.tsx | 6 +++--- packages/trace-viewer/src/ui/metadataView.tsx | 4 +++- packages/trace-viewer/src/ui/timeline.css | 4 ++-- packages/trace-viewer/src/ui/timeline.tsx | 8 ++++---- packages/trace-viewer/src/ui/workbench.tsx | 14 ++++++------- packages/web/src/common.css | 20 +++++++++++++++++++ packages/web/src/theme.ts | 4 ++++ 8 files changed, 47 insertions(+), 23 deletions(-) diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx index 4fb935f062..b47f8b0e98 100644 --- a/packages/trace-viewer/src/ui/actionList.tsx +++ b/packages/trace-viewer/src/ui/actionList.tsx @@ -29,7 +29,7 @@ export interface ActionListProps { sdkLanguage: Language | undefined; onSelected: (action: ActionTraceEvent) => void, onHighlighted: (action: ActionTraceEvent | undefined) => void, - setSelectedTab: (tab: string) => void, + revealConsole: () => void, } export const ActionList: React.FC = ({ @@ -38,7 +38,7 @@ export const ActionList: React.FC = ({ sdkLanguage, onSelected = () => {}, onHighlighted = () => {}, - setSelectedTab = () => {}, + revealConsole = () => {}, }) => { return = ({ onHighlighted={(action: ActionTraceEvent) => onHighlighted(action)} itemKey={(action: ActionTraceEvent) => action.callId} itemType={(action: ActionTraceEvent) => action.error?.message ? 'error' : undefined} - itemRender={(action: ActionTraceEvent) => renderAction(action, sdkLanguage, setSelectedTab)} + itemRender={(action: ActionTraceEvent) => renderAction(action, sdkLanguage, revealConsole)} showNoItemsMessage={true} >; }; @@ -55,7 +55,7 @@ export const ActionList: React.FC = ({ const renderAction = ( action: ActionTraceEvent, sdkLanguage: Language | undefined, - setSelectedTab: (tab: string) => void + revealConsole: () => void ) => { const { errors, warnings } = modelUtil.stats(action); const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined; @@ -67,7 +67,7 @@ const renderAction = ( {action.method === 'goto' && action.params.url &&
{action.params.url}
}
{action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out'}
-
setSelectedTab('console')}> +
revealConsole()}> {!!errors &&
{errors}
} {!!warnings &&
{warnings}
}
diff --git a/packages/trace-viewer/src/ui/filmStrip.tsx b/packages/trace-viewer/src/ui/filmStrip.tsx index 0c7906905f..62349409d8 100644 --- a/packages/trace-viewer/src/ui/filmStrip.tsx +++ b/packages/trace-viewer/src/ui/filmStrip.tsx @@ -25,7 +25,7 @@ import type { MultiTraceModel } from './modelUtil'; const tileSize = { width: 200, height: 45 }; export const FilmStrip: React.FunctionComponent<{ - model: MultiTraceModel, + model?: MultiTraceModel, boundaries: Boundaries, previewPoint?: { x: number, clientY: number }, }> = ({ model, boundaries, previewPoint }) => { @@ -37,7 +37,7 @@ export const FilmStrip: React.FunctionComponent<{ pageIndex = ((previewPoint.clientY - bounds.top) / tileSize.height) | 0; } - const screencastFrames = model.pages[pageIndex]?.screencastFrames; + const screencastFrames = model?.pages?.[pageIndex]?.screencastFrames; let previewImage = undefined; let previewSize = undefined; if (previewPoint !== undefined && screencastFrames) { @@ -48,7 +48,7 @@ export const FilmStrip: React.FunctionComponent<{ } return
{ - model.pages.filter(p => p.screencastFrames.length).map((page, index) => p.screencastFrames.length).map((page, index) => = ({ model }) => { + if (!model) + return <>; return
Time
{model.wallTime &&
start time:{new Date(model.wallTime).toLocaleString()}
} diff --git a/packages/trace-viewer/src/ui/timeline.css b/packages/trace-viewer/src/ui/timeline.css index ac3dfa2ef2..6a4fbfeb97 100644 --- a/packages/trace-viewer/src/ui/timeline.css +++ b/packages/trace-viewer/src/ui/timeline.css @@ -16,13 +16,13 @@ .timeline-view { flex: none; - flex-basis: 60px; position: relative; display: flex; flex-direction: column; padding: 20px 0 5px; cursor: text; user-select: none; + border-bottom: 1px solid var(--vscode-panel-border); } .timeline-divider { @@ -30,7 +30,7 @@ width: 1px; top: 0; bottom: 0; - background-color: rgb(0 0 0 / 10%); + background-color: var(--vscode-panel-border); } .timeline-time { diff --git a/packages/trace-viewer/src/ui/timeline.tsx b/packages/trace-viewer/src/ui/timeline.tsx index f1db9b8e6f..ae93dcb27b 100644 --- a/packages/trace-viewer/src/ui/timeline.tsx +++ b/packages/trace-viewer/src/ui/timeline.tsx @@ -38,7 +38,7 @@ type TimelineBar = { }; export const Timeline: React.FunctionComponent<{ - model: MultiTraceModel, + model: MultiTraceModel | undefined, selectedAction: ActionTraceEvent | undefined, onSelected: (action: ActionTraceEvent) => void, }> = ({ model, selectedAction, onSelected }) => { @@ -49,7 +49,7 @@ export const Timeline: React.FunctionComponent<{ const [hoveredBarIndex, setHoveredBarIndex] = React.useState(); const { boundaries, offsets } = React.useMemo(() => { - const boundaries = { minimum: model.startTime, maximum: model.endTime }; + const boundaries = { minimum: model?.startTime || 0, maximum: model?.endTime || 30000 }; // Leave some nice free space on the right hand side. boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20; return { boundaries, offsets: calculateDividerOffsets(measure.width, boundaries) }; @@ -57,7 +57,7 @@ export const Timeline: React.FunctionComponent<{ const bars = React.useMemo(() => { const bars: TimelineBar[] = []; - for (const entry of model.actions) { + for (const entry of model?.actions || []) { let detail = trimRight(entry.params.selector || '', 50); if (entry.method === 'goto') detail = trimRight(entry.params.url || '', 50); @@ -74,7 +74,7 @@ export const Timeline: React.FunctionComponent<{ }); } - for (const event of model.events) { + for (const event of model?.events || []) { const startTime = event.time; bars.push({ event, diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx index 764b97fd27..52056c9b60 100644 --- a/packages/trace-viewer/src/ui/workbench.tsx +++ b/packages/trace-viewer/src/ui/workbench.tsx @@ -53,13 +53,11 @@ export const Workbench: React.FunctionComponent<{ tabs.push({ id: 'source', title: 'Source', count: 0, render: () => }); return
-
- setSelectedAction(action)} - /> -
+ setSelectedAction(action)} + /> @@ -77,7 +75,7 @@ export const Workbench: React.FunctionComponent<{ onHighlighted={action => { setHighlightedAction(action); }} - setSelectedTab={setSelectedPropertiesTab} + revealConsole={() => setSelectedPropertiesTab('console')} /> }, { id: 'metadata', title: 'Metadata', diff --git a/packages/web/src/common.css b/packages/web/src/common.css index 30c7cbf0d8..056f3c8bb7 100644 --- a/packages/web/src/common.css +++ b/packages/web/src/common.css @@ -112,3 +112,23 @@ input[type=text], input[type=search] { border: none; outline: none; } + +body.dark-mode ::-webkit-scrollbar { + width: 10px; +} + +body.dark-mode ::-webkit-scrollbar-thumb { + background-color: #555; +} + +body.dark-mode ::-webkit-scrollbar-track { + background-color: #333; +} + +body.dark-mode ::-webkit-scrollbar-thumb:hover { + background-color: #777; +} + +body.dark-mode ::-webkit-scrollbar-track:hover { + background-color: #444; +} diff --git a/packages/web/src/theme.ts b/packages/web/src/theme.ts index 0988377bb5..cd07541484 100644 --- a/packages/web/src/theme.ts +++ b/packages/web/src/theme.ts @@ -45,3 +45,7 @@ export function toggleTheme() { document.body.classList.add(newTheme); localStorage.setItem('theme', newTheme); } + +export function isDarkTheme() { + return document.body.classList.contains('dark-mode'); +}