feat(ui): add isStriped prop to TreeView component (#36649)

packages/trace-viewer/src/ui/actionList.tsx

@@ -106,6 +106,7 @@ export const ActionList: React.FC<ActionListProps> = ({
       isError={isError}
       isVisible={isVisible}
       render={render}
+      isStriped={true}
     />
   </div>;
 };

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);
 }

packages/web/src/components/treeView.tsx

@@ -35,6 +35,7 @@ export type TreeViewProps<T> = {
   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<T extends TreeItem>({
   title,
   icon,
   isError,
+  isStriped,
   isVisible,
   selectedItem,
   onAccepted,
@@ -128,7 +130,7 @@ export function TreeView<T extends TreeItem>({
 
   return <div className={clsx(`tree-view vbox`, name + '-tree-view')} data-testid={dataTestId || (name + '-tree')}>
     <div
-      className={clsx('tree-view-content')}
+      className={clsx('tree-view-content', isStriped && 'tree-view-striped')}
       role={treeItems.size > 0 ? 'tree' : undefined}
       tabIndex={0}
       onKeyDown={event => {

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/);
+});