Skip to content

Add FileDecoration backgroundColor support and tree row rendering#310165

Open
egorovsa wants to merge 9 commits intomicrosoft:mainfrom
egorovsa:main
Open

Add FileDecoration backgroundColor support and tree row rendering#310165
egorovsa wants to merge 9 commits intomicrosoft:mainfrom
egorovsa:main

Conversation

@egorovsa
Copy link
Copy Markdown

@egorovsa egorovsa commented Apr 15, 2026

Why

This PR implements backgroundColor support for file decorations, addressing my own feature request in #239308.
This issue also related to this feature #31308.

Today vscode.FileDecoration supports text color (color) but not background color.
This change enables extensions to highlight decorated items more clearly by applying a background color in addition to foreground color.

What

  • Added backgroundColor?: ThemeColor to vscode.FileDecoration API surface:
    • src/vscode-dts/vscode.d.ts
    • src/vscode-dts/vscode.proposed.codiconDecoration.d.ts
    • ext host types/protocol wiring (extHostTypes, extHost.protocol, extHostDecorations, mainThreadDecorations)
  • Extended decoration data model/service:
    • IDecorationData.backgroundColor
    • background-aware decoration key generation
    • CSS rule generation/removal for background color classes
    • IDecoration.bgColorClassName handling
  • Updated label rendering pipeline to apply both:
    • foreground/text color class
    • optional background color class
  • Implemented stable tree-row background rendering:
    • added dedicated .monaco-tl-decoration-container layer in tree row template
    • applied background class to that dedicated layer
    • ensured class cleanup on re-render/dispose to avoid virtualization artifacts while scrolling
    • added pointer-events: none to decoration layer to avoid interaction regressions
  • Added tests covering optional background class behavior in decorations service.

Notes

This PR is a direct implementation of the feature request opened by me in #239308.

After the merge

This feature will allow me to update my extension and provide users with the ability to colorize files like this:
vscode-folder-colorizer

@egorovsa
Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

@vs-code-engineering
Copy link
Copy Markdown
Contributor

vs-code-engineering bot commented Apr 15, 2026

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@joaomoreno

Matched files:

  • src/vs/base/browser/ui/tree/abstractTree.ts
  • src/vs/base/browser/ui/tree/media/tree.css

@benibenj

Matched files:

  • src/vs/base/browser/ui/tree/abstractTree.ts
  • src/vs/base/browser/ui/tree/media/tree.css

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.

2 participants