Skip to content

Conversation

@Kaasfonthijn
Copy link

Description

This PR adds an optional isStriped prop to the TreeView component that enables alternating background colors for tree items, improving readability when items span multiple lines or can be expanded/collapsed.

Problem

As described in the feature request, the actions list in UI mode can be difficult to scan because:

  • Some actions (like timeouts) are only one line
  • Other actions span two lines (e.g., getByText('Heute'))
  • Without visual separation, it's hard to distinguish between adjacent items

Solution

  • Added isStriped?: boolean prop to TreeViewProps
  • Applied tree-view-striped CSS class conditionally when isStriped={true}
  • Updated CSS to use --vscode-tree-tableOddRowsBackground for theme-aware alternating backgrounds
  • Enabled striped background for the actions tree in trace viewer
  • Keep it flexible so the Tests overview has the old styling

Points of interest

  • I removed unused styling in the treeview.css (.tree-view-entry.info and tree-view-entry.warning)

Screenshots

Old:
image

New:
image
image

With errors and expanded tree items:
image

Fixes #36649

@Kaasfonthijn
Copy link
Author

@microsoft-github-policy-service agree

@dgozman
Copy link
Contributor

dgozman commented Dec 3, 2025

@Kaasfonthijn Thank you for the PR! Unfortunately, there has been some misunderstanding on the issue this PR is fixing. I have discussed it with the team and captured the discussion here.

I will close this PR, as we do not plan to introduce striped background. Thank you for sending the PR though!

@dgozman dgozman closed this Dec 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: differently sized action items in the trace viewer

2 participants