diff --git a/packages/playwright-core/src/web/components/treeItem.tsx b/packages/playwright-core/src/web/components/treeItem.tsx index b48b83a2ea..0c780bd72d 100644 --- a/packages/playwright-core/src/web/components/treeItem.tsx +++ b/packages/playwright-core/src/web/components/treeItem.tsx @@ -28,16 +28,23 @@ export const TreeItem: React.FunctionComponent<{ const className = selected ? 'tree-item-title selected' : 'tree-item-title'; return
{ onClick?.(); setExpanded(!expanded); }} > - + {loadChildren && !!expanded && downArrow()} + {loadChildren && !expanded && rightArrow()} + {!loadChildren && {rightArrow()}} {title} {expanded && loadChildren?.()}
; }; + +export function downArrow() { + return ; +} + +export function rightArrow() { + return ; +} diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.css b/packages/playwright-core/src/web/htmlReport/htmlReport.css index 657878ee87..5a8ad997a8 100644 --- a/packages/playwright-core/src/web/htmlReport/htmlReport.css +++ b/packages/playwright-core/src/web/htmlReport/htmlReport.css @@ -40,14 +40,6 @@ body { font-weight: 600; } -.suite-tree-column { - line-height: 18px; - flex: auto; - color: #616161; - background-color: #f3f3f3; - border-left: 1px solid #dfe1e5; -} - .test-case-column { border-radius: 6px; margin: 20px; @@ -72,14 +64,6 @@ body { min-height: 18px; } -.suite-tree-column .tree-item-title:not(.selected):hover { - background-color: #e8e8e8; -} - -.suite-tree-column .tree-item-title.selected { - font-weight: bold; -} - .error-message { white-space: pre; font-family: monospace; @@ -95,23 +79,6 @@ body { padding-right: 3px; } -.codicon { - padding-right: 3px; -} - -.codicon-clock.status-icon, -.codicon-error.status-icon { - color: red; -} - -.codicon-alert.status-icon { - color: orange; -} - -.codicon-circle-filled.status-icon { - color: green; -} - .test-result { flex: auto; display: flex; @@ -165,7 +132,6 @@ body { border-bottom-color: var(--color-primer-border-active); } -.suite-tree-column .tab-element, .test-case-column .tab-element { border: none; text-transform: uppercase; @@ -179,7 +145,6 @@ body { background-color: inherit; } -.suite-tree-column .tab-element.selected, .test-case-column .tab-element.selected { color: #555; } @@ -318,11 +283,6 @@ a.no-decorations { cursor: pointer; } -.chip-header .codicon { - position: relative; - top: 3px; -} - .chip-body { border: 1px solid var(--color-border-default); border-bottom-left-radius: 6px; diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx index c8158fba7e..285859e705 100644 --- a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx +++ b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx @@ -17,7 +17,7 @@ import './htmlReport.css'; import * as React from 'react'; import ansi2html from 'ansi-to-html'; -import { TreeItem } from '../components/treeItem'; +import { downArrow, rightArrow, TreeItem } from '../components/treeItem'; import { TabbedPane } from '../traceViewer/ui/tabbedPane'; import { msToString } from '../uiUtils'; import type { TestCase, TestResult, TestStep, TestFile, Stats, TestAttachment, HTMLReport, TestFileSummary } from '@playwright/test/src/reporters/html'; @@ -241,11 +241,13 @@ const AttachmentLink: React.FunctionComponent<{ attachment: TestAttachment, href?: string, }> = ({ attachment, href }) => { - return - + return + {attachment.path && {attachment.name}} {attachment.body && {attachment.name}} - } loadChildren={attachment.body ? () => { + } loadChildren={attachment.body ? () => { return [
{attachment.body}
]; } : undefined} depth={0}>; }; @@ -292,7 +294,9 @@ function statusIcon(status: 'failed' | 'timedOut' | 'skipped' | 'passed' | 'expe ; case 'timedOut': - return ; + return ; case 'flaky': return
setExpanded?.(!expanded)}> - {setExpanded &&
} + {setExpanded && !!expanded && downArrow()} + {setExpanded && !expanded && rightArrow()} {header}
{ (!setExpanded || expanded) &&
{children}
} diff --git a/packages/playwright-core/src/web/htmlReport/index.tsx b/packages/playwright-core/src/web/htmlReport/index.tsx index 7fbcea2a55..bc2b14f293 100644 --- a/packages/playwright-core/src/web/htmlReport/index.tsx +++ b/packages/playwright-core/src/web/htmlReport/index.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import '../third_party/vscode/codicon.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { applyTheme } from '../theme'; diff --git a/packages/playwright-core/src/web/traceViewer/entries.ts b/packages/playwright-core/src/web/traceViewer/entries.ts index 878bad40b1..96cf4554f2 100644 --- a/packages/playwright-core/src/web/traceViewer/entries.ts +++ b/packages/playwright-core/src/web/traceViewer/entries.ts @@ -38,10 +38,9 @@ export type PageEntry = { }[]; }; export function createEmptyContext(): ContextEntry { - const now = performance.now(); return { - startTime: now, - endTime: now, + startTime: Number.MAX_SAFE_INTEGER, + endTime: 0, browserName: '', options: { deviceScaleFactor: 1, diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx index a4e7acbfd5..6febeb1c38 100644 --- a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx +++ b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx @@ -105,3 +105,5 @@ export const Workbench: React.FunctionComponent<{ }; const emptyContext = createEmptyContext(); +emptyContext.startTime = performance.now(); +emptyContext.endTime = emptyContext.startTime;