Visually distinguishing Staged Changes from Changes in Tree View

[kcarnold]

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

• VS Code Version: 1.82.2
• OS Version: macOS 13.5.2

It's difficult to distinguish Staged Changes from Changes in Source Control sidebar in Tree view. This has been raised several times before; most relevant was https://github.com/microsoft/vscode/issues/102473 but that was swept into an existing discussion about a larger change that was only partially relevant.

Simplest proposal:

[role="treeitem"][aria-level="1"] {
    font-weight: bold;
}

The difference is subtle; other tweaks could improve it. e.g., add a line (or even half-line) of vertical space before it. Or, removing the 8px padding-left on the .monaco-tl-twistie also pulls it visually farther from the tree. The old all-caps CHANGES feels a bit too strong to me, but it would fix the issue.

Other approaches include https://github.com/microsoft/vscode/issues/140343 suggested adding themeable elements.

[gjsjohnmurray]

Researching this led to me creating #194068, so SCM-view-specific colors aren't unheard of.

[lszomoru]

Tagging @daviddossett, and @hbons to get their thoughts on this.

[gjsjohnmurray]

The old all-caps CHANGES feels a bit too strong to me, but it would fix the issue.

This is probably the easiest. Originally all ResourceGroup labels got styled uppercase unconditionally. I raised an issue about this because my SCM extension uses those groups in a way that means case is important. I had expected the built-in Git extension to uppercase its own labels so as to retain the familiar appearance, but maybe it was a conscious decision to adopt the change.

When there's more than one SCM repository displayed for a workspace I think the repository headers get bolded. Perhaps resource groups would benefit from being in italics? Alternatively, add a new color name such as scm.resourceGroupBackground.

[lszomoru]

Tagging @joaomoreno as I am sure that he has additional context on this.