vscode
vscode copied to clipboard
microsoft
Add a new right-aligned "description" property to TreeItems
Similar to the timestamp in the Timeline view, it would be nice to have the ability to have a string that would be rendered right-aligned for each tree item.
Maybe something like:
export class TreeItem {
label?: string;
description?: string | boolean;
...
endDescription?: string; // or endDetails? or even just details, but that feels wrong given the other usages of details
}
We should first discuss this in the UI sync.
The file decoration API is also being finalized soon. We can use that for a checkmark for PR reviews too.
Current:
Example where we hide the right-aligned description on hover when the action is shown:
Example in the panel:
Seems like a fair request to me, but happy to discuss in a UX call next week.
@bpasero we actually did discuss this in last week's ux sync, seemed like everyone was in agreement of this but the specific detail of whether we hide the description label was under discussion. I personally like hiding the description on hover as that is secondary information and actions have a higher priority.
Since we are trying not to add new proposed API in October, moving to November.
@alexr00 Any updates on this proposal? Would also love to have this in my vscode extension. I would also hide it by default, but you can add a second property to control the behavior (auto-hide, show, show-fully).
No plans for this as yet. If folks who would use this could provide some details about what problem it would solve for them it would help us to prioritize this though.
This would be helpful for me. I'm the developer of Godot Tools, that provides support for the Godot Game Engine.
One of my features is a TreeView that shows a preview of an open scene file:
This shows the hierarchical view of the Nodes that make up the scene. You can see I'm currently using FileDecorations to provide icons on the right side of the TreeItems. Unfortunately, I can only have two active Decorations on any one TreeItem, but a Node has more relevant properties that would be useful to display.
Here's the Godot Editor's scene tree viewer with 5 different icons I'd like to be able to display:
Having a right aligned description would give me another option to display symbols that don't require interaction but should still be visible all the time.
Additionally, the FileDecorations API is very awkward for this, because I know 100% of the information about each TreeItem when I first make it. Having to parse the scene file, build the TreeItems, refresh the TreeView, and then still having to trigger each DecorationProvider for every TreeItem is convoluted, annoying, and wasteful.
Since this is still open, I assume there are no objections to implementing it.
Do we really need more justification/examples?
I'm willing to take a stab at this. Functionality was simple enough, I am just trying to figure out what the updated styling should be. Here's what it looks like with float: right;.
And here's it with position: absolute; right: 0;
Neither look like the gif earlier in the comment chain showcasing the GitLens File History tree view. I installed that ext to see if I could tell how they're aligning it, and the extension doesn't appear to have any right-aligned text in my workspace. I don't know if they changed it or I'm looking at the wrong panel or what.
position: absolute; looks the most similar, but as you can see with the 1st node in the tree there are some cases where the actions are always displayed, meaning that we wouldn't be able to hide the right-aligned text on hover like in the gif as we would need to hide it all the time to not overlap with the action buttons.
Thanks for looking at this @trapgar. I think the behavior we'd want is that the actions would hide the right aligned text, no matter the reason for the actions showing.
https://github.com/user-attachments/assets/ad28c86d-09c5-4372-8e51-54dc63db64e2
Appreciate the direction! Here's what it looks like with float: right;, hiding if the actions are shown (:hover, .focused, .selected). As you can see from the vid, the top-most row hides the desc since it defaults to .focused.
I created a PR here. Please let me know if you would like any adjustments made; this is my first contribution to VS Code, so I'm sure I missed an i or t!