Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: allow resetting the time filter (#26920)

Browse source
This commit is contained in:
Pavel Feldman 2023-09-06 16:14:26 -07:00 committed by GitHub
parent cb8656f24f
commit ea4974ce36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/trace-viewer/src/ui/actionList.css
View file

@ -71,3 +71,10 @@
padding-left: 5px; padding-left: 5px;
color: var(--vscode-charts-blue); color: var(--vscode-charts-blue);
} }
.action-list-show-all {
display: flex;
cursor: pointer;
height: 28px;
align-items: center;
}

10
packages/trace-viewer/src/ui/actionList.tsx
View file

@ -30,6 +30,7 @@ export interface ActionListProps {
actions: ActionTraceEventInContext[], actions: ActionTraceEventInContext[],
selectedAction: ActionTraceEventInContext | undefined, selectedAction: ActionTraceEventInContext | undefined,
selectedTime: Boundaries | undefined, selectedTime: Boundaries | undefined,
setSelectedTime: (time: Boundaries | undefined) => void,
sdkLanguage: Language | undefined; sdkLanguage: Language | undefined;
onSelected: (action: ActionTraceEventInContext) => void, onSelected: (action: ActionTraceEventInContext) => void,
onHighlighted: (action: ActionTraceEventInContext | undefined) => void, onHighlighted: (action: ActionTraceEventInContext | undefined) => void,
@ -43,6 +44,7 @@ export const ActionList: React.FC<ActionListProps> = ({
actions, actions,
selectedAction, selectedAction,
selectedTime, selectedTime,
setSelectedTime,
sdkLanguage, sdkLanguage,
onSelected, onSelected,
onHighlighted, onHighlighted,
@ -57,7 +59,9 @@ export const ActionList: React.FC<ActionListProps> = ({
return { selectedItem }; return { selectedItem };
}, [itemMap, selectedAction]); }, [itemMap, selectedAction]);
return <ActionTreeView return <div className='vbox'>
{selectedTime && <div className='action-list-show-all' onClick={() => setSelectedTime(undefined)}><span className='codicon codicon-triangle-left'></span>Show all</div>}
<ActionTreeView
dataTestId='action-list' dataTestId='action-list'
rootItem={rootItem} rootItem={rootItem}
treeState={treeState} treeState={treeState}
@ -65,10 +69,12 @@ export const ActionList: React.FC<ActionListProps> = ({
selectedItem={selectedItem} selectedItem={selectedItem}
onSelected={item => onSelected(item.action!)} onSelected={item => onSelected(item.action!)}
onHighlighted={item => onHighlighted(item?.action)} onHighlighted={item => onHighlighted(item?.action)}
onAccepted={item => setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime })}
isError={item => !!item.action?.error?.message} isError={item => !!item.action?.error?.message}
isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)} isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)} render={item => renderAction(item.action!, sdkLanguage, revealConsole, isLive || false)}
/>; />
</div>;
}; };
export const renderAction = ( export const renderAction = (

8
packages/trace-viewer/src/ui/timeline.css
View file

@ -83,22 +83,22 @@
.timeline-bar.action { .timeline-bar.action {
--action-color: var(--vscode-charts-orange); --action-color: var(--vscode-charts-orange);
--action-background-color: #d1861633; --action-background-color: #d1861666;
} }
.timeline-bar.action.error { .timeline-bar.action.error {
--action-color: var(--vscode-charts-red); --action-color: var(--vscode-charts-red);
--action-background-color: #e5140033; --action-background-color: #e5140066;
} }
.timeline-bar.network { .timeline-bar.network {
--action-color: var(--vscode-charts-blue); --action-color: var(--vscode-charts-blue);
--action-background-color: #1a85ff33; --action-background-color: #1a85ff66;
} }
body.dark-mode .timeline-bar.action.error { body.dark-mode .timeline-bar.action.error {
--action-color: var(--vscode-errorForeground); --action-color: var(--vscode-errorForeground);
--action-background-color: #f4877133; --action-background-color: #f4877166;
} }
.timeline-label { .timeline-label {

1
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -235,6 +235,7 @@ export const Workbench: React.FunctionComponent<{
actions={model?.actions || []} actions={model?.actions || []}
selectedAction={model ? selectedAction : undefined} selectedAction={model ? selectedAction : undefined}
selectedTime={selectedTime} selectedTime={selectedTime}
setSelectedTime={setSelectedTime}
onSelected={onActionSelected} onSelected={onActionSelected}
onHighlighted={setHighlightedAction} onHighlighted={setHighlightedAction}
revealConsole={() => selectPropertiesTab('console')} revealConsole={() => selectPropertiesTab('console')}