Update CSS for description elements of tree nodes

[msujew]

What it does

Closes #9741
Closes #7189

Aligns our tree node CSS with vscode (using opacity and default foreground coloring on description elements). Allows for better readability in light mode.

Problem markers on current master. Note the hard to read light theme:

With the change in place:

Compared to vscode:

How to test

Problem markers:

1. Open a project with problem markers in Theia.
2. Focus/Select the problem marker. Assess readability, look and feel.
3. Change between the different themes (dark/light/solarized, etc.) and repeat step 2.

Search view:

1. Search for any text (that exists within the project)
2. Focus/Select the file node in the tree.
3. Readability on the file path should be improved for the light theme.

Debug view:

1. Create a breakpoint
2. Focus/Select the breakpoint in the debug view.
3. Readability on the breakpoint path should be improved for the light theme.

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

[vince-fugnitto]

@msujew I'll take a look at the changes 👍 In the past we tried to fix the problem, but it was true for multiple trees:

• Update styling for description when a tree node is focused #7359

[msujew]

@vince-fugnitto Thanks for the input. I applied the same fix to the other trees as well.

[vince-fugnitto]

I was hoping there could be a general solution in @theia/core for all trees, and possibly trees in the future but since this is low-effort enough I'd be fine to go with this solution for the moment 👍

[vince-fugnitto]

In a multi-root workspace, we should also think of handling marker info nodes:

[msujew]

In a multi-root workspace, we should also think of handling marker info nodes

Forgot about those, done.

I was hoping there could be a general solution in @theia/core for all trees

What would you propose? We would basically need some kind of common css class for all marker info elements, right? I could try to implement a more general solution instead of the current approach.

[vince-fugnitto]

I was hoping there could be a general solution in @theia/core for all trees

What would you propose? We would basically need some kind of common class for all marker info elements, right? I could try to implement a more general solution instead of the current approach.

Perhaps it is out of scope for the moment (I'd be fine with this approach and a refactoring after). I was thinking to have a generic class for node descriptions which can be handled in core and refactor some trees not to include their custom styling:

theia/packages/core/src/browser/tree/tree-widget.tsx

Lines 45 to 56 in 8dd8401

	export const TREE_CLASS = 'theia-Tree';
	export const TREE_CONTAINER_CLASS = 'theia-TreeContainer';
	export const TREE_NODE_CLASS = 'theia-TreeNode';
	export const TREE_NODE_CONTENT_CLASS = 'theia-TreeNodeContent';
	export const TREE_NODE_TAIL_CLASS = 'theia-TreeNodeTail';
	export const TREE_NODE_SEGMENT_CLASS = 'theia-TreeNodeSegment';
	export const TREE_NODE_SEGMENT_GROW_CLASS = 'theia-TreeNodeSegmentGrow';
	export const EXPANDABLE_TREE_NODE_CLASS = 'theia-ExpandableTreeNode';
	export const COMPOSITE_TREE_NODE_CLASS = 'theia-CompositeTreeNode';
	export const TREE_NODE_CAPTION_CLASS = 'theia-TreeNodeCaption';
	export const TREE_NODE_INDENT_GUIDE_CLASS = 'theia-tree-node-indent';

[msujew]

I'd be fine with this approach and a refactoring after

I'd usually agree, but one of my meetings got spontaneously canceled and I got an hour of free time ;)

I was thinking to have a generic class for node descriptions

Yeah, that's what I thought about as well. I implemented it that way, WDYT?

[vince-fugnitto]

The changes look much better to me 👍 and work correctly as well!
Do you mind updating the commit message and description to reflect the changes better, I believe the scope changed since the initial implementation.

[msujew]

@vince-fugnitto FYI, I updated the severity marker as well, so that it aligns with vscode.

[vince-fugnitto]

@vince-fugnitto FYI, I updated the severity marker as well, so that it aligns with vscode.

Looks great! In the future we can think of supporting #9744.