Better path presentation in quick open window

[trebor86]

The way a file path is being presented in quick open window makes it sometimes hard to realise which file to pick. Let's consider two files:

• some_project/some_longer_pathsome_longer_pathsome_longer_pathsome_longer_path/fruits/apples/Main.js
• some_project/some_longer_pathsome_longer_pathsome_longer_pathsome_longer_path/fruits/bananas/Main.js

If we type "Main" in searchbox the list of results shows only begining of paths and the filenames and it looks ... excactly the same. At this point we have to randomly pick one of the files to check if it's the one we'd like especially since there's no preview editor triggered while navigating through result list (#8939).

The solution is to present the ending of a path rather than begining, just like it's done in Sublime Text (please notice where ellipsis is added):

Additionally path could be presented in a separate line for more clarity.

[gjsjohnmurray]

Previously requested at #58040 but didn't receive enough upvotes.

[trebor86]

The proposed solution is different though. Give it a chance :D

[gjsjohnmurray]

https://github.com/microsoft/vscode/issues/58040#issuecomment-419849427 suggested smarter positioning of ellipsis. At the moment I think we're just getting default quickpick handling of these.

Two lines per entry would halve the number visible at a time.

Are you aware that by pressing RightArrow you can open the selected item without also closing the list? Perhaps a workaround for your case.

[trebor86]

I'm aware of that but still it's not handy, since it doesn't close editor after switching to next result. I have many files in my project with the same names. If I check 10 results this way, I have to close 9 editors after finding the right file ... not handy.

[gjsjohnmurray]

A bit easier if you use Ctrl+RightArrow to open the candidates in a new editor group, then drag the correct one to your other group, then use Close All on the second group.

I'm not arguing against an improvement here, just offering ideas to work around current limitations.

[TylerLeonhardt]

I feel like we could introduce a setting that puts the file path on a second line rather than all in one line for users who do want more context.

Also, I'm curious @bpasero... have there been any experiments around showing the end of the path over showing the beginning or a combo like what Sublime does? I imagine the quick pick API doesn't have a way to do this today...

[bpasero]

have there been any experiments around showing the end of the path over showing the beginning or a combo like what Sublime does

No, mainly because there is no native support from browsers to put the "..." in the middle or at the end (at least, afaik), would be great to have that though for performance reasons. Otherwise we need to draw these labels one by one and measure the width they consume. Might not be very efficient.

[TylerLeonhardt]

So we can get the ellipsis on the left in pure CSS using: https://codepen.io/tylerleonhardt/pen/BamMEdY this is a decent option (behind a setting, I think)

There is also this pure CSS way to put the ellipsis in the middle... but I don't think it looks good because it clips the characters: https://jsfiddle.net/93ymy3oL/ I guess we could do like

start/of/path… …/end/of/path.txt

that would fix the clip issue…but it seems like not a great use of space in an already cramped area.

wild that browsers still don't have a good solution for this... though apparently Firefox has a way to override the overflow characters... but we can't do this just for FF.

[trebor86]

Ellipsis on the left is a good option :) And configurable file path in a second line too.

[TylerLeonhardt]

Yeah I think that's reasonable

[luoriyuhui21]

is anyone working on this issue？ maybe I can try to resolve this problem.

[TylerLeonhardt]

Go for it!

You'll need to look at my above CodePen on how to do the left ellipsis.

The css for the quick pick is here:

https://github.com/microsoft/vscode/blob/main/src/vs/base/parts/quickinput/browser/media/quickInput.css

Here is where we add classes to the quick pick:

https://github.com/microsoft/vscode/blob/main/src/vs/base/parts/quickinput/browser/quickInputList.ts#L113

And if you can get to a point where you have the ellipsis on the left, then we can talk about making that behavior configurable.

[luoriyuhui21]

@TylerLeonhardt Thank you for the information you provide. I will research this issue now. I'm a little busy the other day.

[kipackjeong]

I have changed the code to add the requested feature. May I request a pull request.

[SelfDevTV]

@luoriyuhui21 Hiho, are you still working on this issue? If not or if you are struggling I will also take a deeper look. Thx

[trebor86]

I'm not familliar with development process on github, but it's seems there's already a solution for the described problem and it only needs aprovals? Meanwhile this issue stuck for almost 2 years ... Can anyone move it forward?

[trebor86]

It can always get worse ... Issue #8939 open for 7 years 👯‍♂️

[NGWi]

I would suggest that if two options are identical for the number of visible characters, there should be a first ellipsis centered within the visible characters, fast-forwarding to the first unique character. (It's a simple "two-pointer" algo.)

I am trying to get the npm build running on my local machine so I can contribute, but I have had no success so far. However, anyone can take my idea and run with it.