ui/ux: tree node styling issue in the references view

[vladarama]

Bug Description:

In the References view, the styling of the tree nodes flickers when changing node. The flickering seems to be caused by the focused styling not being applied correctly.

Bug Demo:

Correct Styling Demo (Explorer View):

Steps to Reproduce:

1. Start Theia application
2. Select a random text in your editor -> Right-Click -> Find All References (Alt+Shift+F12)
3. Go to the References view
4. Click on different results
5. Notice the incorrect styling of the nodes

Additional Information

• Operating System: Windows 10
• Theia Version: 1.40

[shynxe]

I'm trying to look into this. As I understand, this References view comes with theia's vscode-builtin-extensions. Since the vscode's extensions source code can not be modified, then it's Theia's API that should be looked into, correct?

[vince-fugnitto]

...then it's Theia's API that should be looked into, correct?

That's correct, there is likely something incorrect with how we handle selection in trees contributed by the plugin-system.

[shynxe]

Okay, after looking into this for a bit, I discovered this: when a LineNode is selected, the line is focused in the editor and it is due to this behavior that the TreeViewWidget loses focus, and therefore loses its styling. Clicking anywhere on the TreeViewWidget will refocus it and reapply the styling, resulting in the flickering mentioned in the issue.

In VS Code's implementation of this LineNode selection, it seems that the editor is not focused when the line is brought into view. Should I look into this behavior and make it so that the TreeViewWidget maintains focus?