diff --git a/examples/todomvc/tests/integration.spec.ts b/examples/todomvc/tests/integration.spec.ts index ec3d4af040..007896bb2c 100644 --- a/examples/todomvc/tests/integration.spec.ts +++ b/examples/todomvc/tests/integration.spec.ts @@ -35,7 +35,7 @@ test.describe('New Todo', () => { // Make sure the list now has two todo items. await expect(page.getByTestId('todo-title')).toHaveText([ TODO_ITEMS[0], - TODO_ITEMS[1] + TODO_ITEMS[1], ]); await checkNumberOfTodosInLocalStorage(page, 2); diff --git a/packages/trace-viewer/src/ui/networkTab.css b/packages/trace-viewer/src/ui/networkTab.css index b714b44769..00b252e89e 100644 --- a/packages/trace-viewer/src/ui/networkTab.css +++ b/packages/trace-viewer/src/ui/networkTab.css @@ -88,6 +88,7 @@ align-items: center; white-space: nowrap; height: 100%; + overflow: hidden; } .network-request-header.filter-start.positive .network-request-start .codicon-triangle-down { diff --git a/packages/trace-viewer/src/ui/timeline.css b/packages/trace-viewer/src/ui/timeline.css index 411e6188c3..22865f0e48 100644 --- a/packages/trace-viewer/src/ui/timeline.css +++ b/packages/trace-viewer/src/ui/timeline.css @@ -82,6 +82,11 @@ } .timeline-bar.action { + --action-color: var(--vscode-charts-orange); + --action-background-color: #d1861633; +} + +.timeline-bar.action.error { --action-color: var(--vscode-charts-red); --action-background-color: #e5140033; } @@ -91,6 +96,11 @@ --action-background-color: #1a85ff33; } +body.dark-mode .timeline-bar.action.error { + --action-color: var(--vscode-errorForeground); + --action-background-color: #f4877133; +} + .timeline-label { position: absolute; top: 0; @@ -144,17 +154,13 @@ body.dark-mode .timeline-window-curtain { background-color: #161718bf; } -.timeline-window-curtain.left { - border-right: 1px solid var(--vscode-panel-border); -} - -.timeline-window-curtain.right { - border-left: 1px solid var(--vscode-panel-border); -} - .timeline-window-resizer { flex: none; - width: 6px; + width: 10px; cursor: ew-resize; pointer-events: all; + position: relative; + background-color: var(--vscode-panel-border); + border-left: 1px solid var(--vscode-panel-border); + border-right: 1px solid var(--vscode-panel-border); } diff --git a/packages/trace-viewer/src/ui/timeline.tsx b/packages/trace-viewer/src/ui/timeline.tsx index aeea2264af..ef6fba675a 100644 --- a/packages/trace-viewer/src/ui/timeline.tsx +++ b/packages/trace-viewer/src/ui/timeline.tsx @@ -33,6 +33,7 @@ type TimelineBar = { leftTime: number; rightTime: number; active: boolean; + error: boolean; }; export const Timeline: React.FunctionComponent<{ @@ -74,6 +75,7 @@ export const Timeline: React.FunctionComponent<{ leftPosition: timeToPosition(measure.width, boundaries, entry.startTime), rightPosition: timeToPosition(measure.width, boundaries, entry.endTime || boundaries.maximum), active: false, + error: !!entry.error, }); } @@ -87,6 +89,7 @@ export const Timeline: React.FunctionComponent<{ leftPosition: timeToPosition(measure.width, boundaries, startTime), rightPosition: timeToPosition(measure.width, boundaries, endTime), active: false, + error: false, }); } return bars; @@ -230,7 +233,10 @@ export const Timeline: React.FunctionComponent<{
{ bars.map((bar, index) => { return
{selectedTime &&
-
+
-
+
}
diff --git a/packages/web/src/components/treeView.tsx b/packages/web/src/components/treeView.tsx index 61a944ff9f..9bf6f77b94 100644 --- a/packages/web/src/components/treeView.tsx +++ b/packages/web/src/components/treeView.tsx @@ -159,15 +159,15 @@ type TreeItemData = { function flattenTree(rootItem: T, selectedItem: T | undefined, expandedItems: Map, autoExpandDepth: number): Map { const result = new Map(); - const temporaryExpanded = new Map(); + const temporaryExpanded = new Set(); for (let item: TreeItem | undefined = selectedItem?.parent; item; item = item.parent) - temporaryExpanded.set(item.id, true); + temporaryExpanded.add(item.id); const appendChildren = (parent: T, depth: number) => { for (const item of parent.children as T[]) { - const expandState = expandedItems.get(item.id) ?? temporaryExpanded.get(item.id); + const expandState = temporaryExpanded.has(item.id) || expandedItems.get(item.id); const autoExpandMatches = autoExpandDepth > depth && result.size < 25 && expandState !== false; - const expanded = item.children.length ? expandState || autoExpandMatches : undefined; + const expanded = item.children.length ? expandState ?? autoExpandMatches : undefined; result.set(item, { depth, expanded, parent: rootItem === parent ? null : parent }); if (expanded) appendChildren(item, depth + 1);