Performance degradation: CSS animation of file explorer elements borders NOT on composer thread

[irengrig]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.99.3
• OS Version: Linux

Steps to Reproduce:

1. Have "Reduce Motion" in VS Code set to "off" (default is "auto" which sometimes means "off")
2. Start recording a performance profile
3. Hover over the file explorer up and down for some time
4. stop profiling. In the performance profile, see attached pattern: border-X-color is not animated on the Composer thread, and overall CSS animation takes a lot of time (as during the hover, many explorer items are updated)

Problematic place in code:

vscode/src/vs/base/browser/ui/tree/media/tree.css

Line 35 in 343af41

.monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {

See this article:
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/#animate-transform-and-opacity-properties-only

[Tyriar]

I'm hitting this as well. The UI is extremely slow on my high end Windows machine:

[Tyriar]

The problem does not go away when I reload the window:

[Tyriar]

Video of the impact:

Notice as I move mouse around 0-1 activity bar icons and 0-1 explorer items react to hover because the renderer thread is so locked up.

[Tyriar]

1.95 stable is good, 1.96 stable is bad and reproduces. You need a deep explorer tree to repro