List, Tree: Make sure sub-pixel antialiasing works across all lists and trees

[alexdima]

@joaomoreno says:

TL;DR Are you a list/tree user? You need to provide a background color to the list/tree in order to preserve sub-pixel anti-aliasing in Windows and Linux.

Recent findings by @alexandrudima and @bpasero uncovered that sub-pixel anti-aliasing gets disabled when a layer is transparent. The list/tree automatically creates a new rendering layer for scrolling performance. So, in order to preserve sub-pixel AA, the root DOM element of the layer must have a background color. That background color depends on its placement in the workbench.

Example: the Explorer should just forward the sidebar background color:

vscode/src/vs/workbench/contrib/files/browser/views/explorerView.ts

Line 387 in 90a0eb3

listBackground: SIDE_BAR_BACKGROUND

Note: Only opaque colors work here, since passing in a transparent color would defeat the whole purpose and would potentially place the same transparent background color twice, making it darker. If a theme or user eventually passes in a transparent color, the list/tree will ignore it and print the following warning to the devtools:

List with id 'list_id_4' was styled with a non-opaque background color. This will break sub-pixel antialiasing.

Note 2: macOS doesn't have sub-pixel AA. This only affects Linux and Windows.

---

Workbench List/Tree Users

• referencesWidget.ts @jrieken
• breadcrumbsPicker.ts @jrieken
• notificationsList.ts @bpasero
• quickInputList.ts @chrmarti
• customView.ts @alexr00
• callHierarchyPeek.ts @jrieken
• commentsTreeViewer.ts @rebornix
• breakpointsView.ts @isidorn
• callStackView.ts @isidorn
• debugHover.ts @isidorn
• loadedScriptsView.ts @isidorn
• repl.ts @isidorn
• variablesView.ts @isidorn
• watchExpressionsView.ts @isidorn
• extensionsViewer.ts @sandy081
• extensionsViews.ts @sandy081
• runtimeExtensionsEditor.ts @sandy081
• explorerView.ts @joaomoreno
• openEditorsView.ts @isidorn
• markersPanel.ts @sandy081
• outlinePanel.ts @jrieken
• keybindingsEditor.ts @sandy081
• mainPanel.ts @joaomoreno
• repositoryPanel.ts @joaomoreno
• searchView.ts @roblourens

Non-Workbench List/Tree Users

These trees do not benefit from the workbench facilities. They use their own stylers. The listBackground needs to be added to those styles.

• tocTree.ts @roblourens
• settingsTree.ts @roblourens

---

Good: Sub-pixel AA

Bad: Normal AA

---

Original issue by @alexandrudima :

fyi @bpasero

• take a screenshot on Windows of a tree, like the Explorer

• zoom a lot

• observe it uses greyscale text rendering:
  

• if I make the following change in listView.ts:
  

• then, the text renders with subpixel AA:
  

TL;DR: From what I could tell, as soon as you have a separate layer, the layer dom node itself must have an opaque background, at all times. If it gets transparent even for a split second, it will permanently render with grayscale text. More of my findings documented here

[joaomoreno]

This needs to be set as a non-optional tree configuration and needs adoption from every tree user.

[isidorn]

Thanks a lot for pushing on this.
I have adopted it across my trees.

[isidorn]

@joaomoreno These changes actually seem to break the tree selection.
When I run out of source the blue tree selection is no longer rendered.
For example just start vscode and click on the explorer.

[joaomoreno]

@isidorn Pushed fix for it.

[bpasero]

I adopted for notifications, however requires more work because notifications use drop shadows. I opened #85043 as follow up.

[sandy081]

✅

[rebornix]

✅

[joaomoreno]

@roblourens I've fixed search and settings. Create this additional one for settings: #85106

[joaomoreno]

@alexr00 I've fixed custom views: it was pretty straightforward, just copied the other viewlet views.

[Tyriar]

I'm verifying now, I'll create new more targeted issues for any parts that aren't rendering correctly since this issue contains so much