diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx index b2b0ebc757523..5090aef71cfe9 100644 --- a/packages/trace-viewer/src/ui/actionList.tsx +++ b/packages/trace-viewer/src/ui/actionList.tsx @@ -106,6 +106,7 @@ export const ActionList: React.FC = ({ isError={isError} isVisible={isVisible} render={render} + isStriped={true} /> ; }; diff --git a/packages/web/src/components/treeView.css b/packages/web/src/components/treeView.css index 26b27ceb9f5ba..94ad901453b3a 100644 --- a/packages/web/src/components/treeView.css +++ b/packages/web/src/components/treeView.css @@ -86,11 +86,6 @@ background-color: var(--vscode-inputValidation-errorBackground); } -.tree-view-entry.warning { - color: var(--vscode-list-warningForeground); - background-color: var(--vscode-inputValidation-warningBackground); -} - -.tree-view-entry.info { - background-color: var(--vscode-inputValidation-infoBackground); +.tree-view-striped > [role="treeitem"]:nth-child(odd) { + background-color: var(--vscode-tree-tableOddRowsBackground); } diff --git a/packages/web/src/components/treeView.tsx b/packages/web/src/components/treeView.tsx index 60d3886d4d8ca..827689d41d1bf 100644 --- a/packages/web/src/components/treeView.tsx +++ b/packages/web/src/components/treeView.tsx @@ -35,6 +35,7 @@ export type TreeViewProps = { title?: (item: T) => string, icon?: (item: T) => string | undefined, isError?: (item: T) => boolean, + isStriped?: boolean, isVisible?: (item: T) => boolean, selectedItem?: T, onAccepted?: (item: T) => void, @@ -56,6 +57,7 @@ export function TreeView({ title, icon, isError, + isStriped, isVisible, selectedItem, onAccepted, @@ -128,7 +130,7 @@ export function TreeView({ return
0 ? 'tree' : undefined} tabIndex={0} onKeyDown={event => { diff --git a/tests/playwright-test/ui-mode-test-tree.spec.ts b/tests/playwright-test/ui-mode-test-tree.spec.ts index 93761b7d9ace4..c172e6b438d6b 100644 --- a/tests/playwright-test/ui-mode-test-tree.spec.ts +++ b/tests/playwright-test/ui-mode-test-tree.spec.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { test, expect, retries, dumpTestTree } from './ui-mode-fixtures'; +import { dumpTestTree, expect, retries, test } from './ui-mode-fixtures'; test.describe.configure({ mode: 'parallel', retries }); @@ -631,3 +631,26 @@ test('should merge files', async ({ runUITest }) => { - treeitem "[icon-circle-outline] fifth" `); }); + +test('should apply striped background to actions tree but not test tree', async ({ runUITest }) => { + const { page } = await runUITest({ + 'test.spec.ts': ` + import { test, expect } from '@playwright/test'; + test('Striped test', async ({ page }) => { + await page.goto('about:blank'); + await page.click('body'); + }); + `, + }); + + await page.getByTitle('Run all').click(); + await expect(page.getByTestId('status-line')).toHaveText('1/1 passed (100%)'); + + const actionsTree = page.getByTestId('actions-tree'); + const actionsTreeContent = actionsTree.locator('.tree-view-content'); + await expect(actionsTreeContent).toHaveClass(/tree-view-striped/); + + const testTree = page.getByTestId('test-tree'); + const testTreeContent = testTree.locator('.tree-view-content'); + await expect(testTreeContent).not.toHaveClass(/tree-view-striped/); +});