Indentation of tree view item label changes when adding icon

[letmaik]

• VSCode Version: 1.13.1
• OS Version: Win 10

Steps to Reproduce:

1. Create custom tree view extension with icons and observe padding of label.
2. It is impossible to have icons and re-create the layout of the built-in explorer.

In the first picture, in the "Git Context" custom tree view (this is an experiment from myself, not released on the market yet), it looks like the .gitignore entry belongs to the folder above, but in fact it doesn't.

Without icons, the layout is correct:

EDIT: I just noticed that the "minimal" icon theme of vs code has folder icons and then adjusts the padding accordingly:

[sandy081]

@letmaik Looks to me that .gitignore entry is properly aligned. I think the confusion is because the folder test does not has icon where as its sibling .gitignore has.

[letmaik]

No, the alignment is definitely incorrect, please check the screenshots again. The folders in the first screenshot in the explorer have no icons and yet the alignment is correct, contrary to what you see in the custom views. The alignment has to be on the level of the text/labels, not icons.

[sandy081]

@letmaik It is similar to how folders/files are shown. Do you also think the alignment there is not correct?

[letmaik]

To make it more visual I added some rulers below. Note the spacing between the vertical lines in the explorer vs the custom view.

Correct:

Wrong (.gitignore doesn't align with test and fixture.ts is indented too much):

Wrong (same problem):

[sandy081]

Ah you are right, Got it. Thanks for the rulers they helped. I misunderstood with the files/folders explorer view.

[sandy081]

@letmaik Thanks for the feedback.

First of all I was bit confused here as I thought you wanted the custom views to be aligned with file explorer based on this comment and description.

I agree that extension authors should not be concerned about the theme information. Irrespective of icons/themes, tree nodes has to be aligned by their labels. I see this is the issue you raised if I am not wrong.

I think the crux of the problem here is that trees can have some nodes with icons and some without. If you see in your tree, test node has no icon and it's sibling node .editorconfig has an icon. To align these two either, I have to push .editorconfig node to left which will make it as a sibling to its parent or push test node to right, then its alignment w.r.to its parent looks broken.

Right fix here is to align all nodes by label and introduce a place holder icon for nodes missing icons.

With place holder icons, your git tree will be as follows

I would recommend to provide icons to avoid these missing icons. You can also provide the resourceUri if your node is file/folder from which the icon can be derived.

Let me know if it looks good for you, any feedback or suggestions are appreciated.

[sandy081]

FYI.. Current placeholder icon is temporary.. will change it if I get a better icon.

[letmaik]

I just looked at it and tried different combinations of missing icons, looks good I think! I like that it automatically aligns like Seti if you only have leaf icons. And then as soon as you have a non-leaf icon it switches to icons everywhere including placeholders where necessary. Right?
I think this is good, especially from an extension developers perspective as they now see what they have to do to make it look right (fill in placeholder icons if they use non-leaf icons).

[sandy081]

You are right.. twisties and icons are aligned if none of the container(non-leaf) nodes have icons. Very much appreciated with your feedback here to make tree views look much better.

I will close this once I get a better place holder icon.

[sandy081]

@chryw Can you please suggest/provide an icon that can be used as place holders for container nodes those do not have a icon. For eg: Icon with dotted lines in the following picture

[chryw]

@sandy081 what is that node (if not a folder)?

[sandy081]

@chryw That node can be any as this view is contributed by extensions. Only semantics it has is, it is a node with children.

[chryw]

@sandy081 I'm trying to figure out the motivation of adding an "anything" icon here. Is it just for reserving the indentation? Or the icon does need to be informative, like saying what type this node is like other nodes?

[sandy081]

@chryw Yes, It is just for indentation and does not need to convey any information.

[chryw]

@sandy081 Is it possible to default to folder icon if the node has children? I can't think of a good icon that means "anything" and not confusing. Or maybe leave that space blank if no icon is specified?

[sandy081]

Leaving an empty place for the container node makes tree look a bit weird. For now, I am drawing the above icon as placeholder. May be I will continue to have this icon and let extension authors provide proper icon if they do not want place holder icons.

[sandy081]

I have to revert and reopen this because extension authors are not liking this placeholder approach to fix the tree alignment issue. I will revisit this with a different approach in next milestone.

Ref: #43531, #44619

[sandy081]

Updated current implementation slightly to improve the experience (align the nodes per level).

Custom alignment for a node is done only when

• the node is a leaf and has an icon and
• Its parent does not has an icon and
• there is no sibling with children and icon

Otherwise, extension is responsible for the alignment by providing icons. There will not be any placeholder icons.