Add indent guidelines to all trees

[kaiyue0329]

What it does

Fixes #6586

• Add preference to set 'workbench.tree.renderIndentGuides' to 'onHover' (default), 'none' or 'always'
• When nodes are selected, indent guidelines are rendered for all the sibling nodes
• When parent node is selected, indent guidelines are rendered for all the child nodes
• When hovering over a tree, indent guidelines are displayed for all expanded nodes
• Selecting multiple nodes works in a similar fashion

How to test

• Set the workspace preference to 'onHover', 'none', 'always' and the rendering of the indent guidelines should change accordingly.
• In different locations in Theia where the tree is being used (for example, in navigator, search in workspace, outline, type hierarchy), select one/more nodes to test if the indent guidelines are rendered correctly.

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

[paul-marechal]

@akosyakov I looked through VS Code's implementation together with @kaiyue0329, and it is not trivial at all. Something that doesn't help is the fact that we are using React, whereas they are using raw DOM manipulations. Porting the code is a bit of a headache but I think we found a way to get it working.

We will need to keep some state within the widget as some kind of cache though, because it will be a bit expensive to re-compute for each node on each frame. I don't see how we can properly avoid this...

[akosyakov]

We will need to keep some state within the widget as some kind of cache though, because it will be a bit expensive to re-compute for each node on each frame. I don't see how we can properly avoid this...

I would need sometime to understand whether it cause race conditions and performance implications for big trees of it. I see that we do traversing again and so on, plus mutate instance state during rendering of a particular state. It can cause perf issues and state inconsistencies. Sorry I don't have time to dive into it right now. You can try to test for performance by generating many errors markers for instance with Java. I think there were a PR we fixed it with steps to reproduce.

[paul-marechal]

@kaiyue0329 you might want to rebase once you are happy with your changes.

[vince-fugnitto]

The functionality looks really good! Very nice change 👍
I tested using a few trees (explorer, search, outline, problems) and it all worked as intended.

[kaiyue0329]

The performance looks good from a user's perspective. However, I was wondering if anyone knows a good way to measure/benchmark the time that it takes to render the indent guideline? It would be nice to see if rendering the indent guideline slows things down performance-wise.

A good place to put the methods for measuring time would be around:

       const content = <div className={TREE_NODE_CONTENT_CLASS}>
            <div className={TREE_NODE_INDENT_CLASS}>
                {this.renderIndent(node, props.depth)}
            </div>
            {this.renderExpansionToggle(node, props)}
            {this.decorateIcon(node, this.renderIcon(node, props))}
            {this.renderCaptionAffixes(node, props, 'captionPrefixes')}
            {this.renderCaption(node, props)}
            {this.renderCaptionAffixes(node, props, 'captionSuffixes')}
            {this.renderTailDecorations(node, props)}
        </div>;

[paul-marechal]

LGTM, performance doesn't feel worse on my end.

[vince-fugnitto]

@kaiyue0329 can you please rebase to fix the merge conflicts?

[akosyakov]

I will review it later. Sorry, trees are too important.

[akosyakov]

I will try to look into it after this release.