Explore a QuickPick-like experience close to what invoked it

[TylerLeonhardt]

Scenarios:

• The attach context in Chat:
  
• Git branch status bar item:
  
• Language, Encoding, Tab Size status bar items:
  

All of these open Quick Picks that are aligned at the top... and we've gotten wishes that the quick pick could be rendered closer to these items.

Explorations

Explore simply moving the existing quick pick closer to what's invoking it

Hacked up in 88f4209 if you click in the Chat input and click the paper clip, the quick pick renders closer to it:

another example if your cursor was in the Search:

and another example if you use the branch picker:

There are a few things to iron out:

• this commit only renders things close to things if they're in the outer 30% of the screen. This would be modified to logic that says " always render close to the thing... if you're in the main editor part, render in the middle".. but requires additional layer work since WorkbenchLayerService is in workbench and quick pick is in platform
• Clicking on buttons does not take focus... so if my cursor was in the Search bar, and I clicked the Attach Context with my mouse, the quick pick will render close to Search
• current logic breaks D&D and that would need to come back

Those are things that could be solved with some work... but I think the big problem is that........ it just doesn't look that great. I was really expecting it to look and feel nicer, but I don't think it does. I wish that the quick pick felt more attached to the thing that is opening it... like the attach context, or the Git status bar item.

That inspired the 2nd exploration.

Explore a new kind of widget

For the attach context and the status bar items, the wish is for something that really feels attached to that. Something like the label picker on GitHub:

but with a tail like a hover (like the Language Status Bar item):

It could look something like this (please forgive my bad Figma skills):

and in the branch picker:

Writing down a loose idea from notes:

* make a QuickContextWidget that is similar to a quick pick, but smaller and attachable to a UI component (it could use shared code with QP)
* adopt this in Core for the attach context
* adopt this for all Core contributed Status Bar Items
* add a `showQuickContext(items: QuickContextItem[]): Promise<QuickContextItem | undefined>`
* adopt the `showQuickContext` in git extension

I think we need more mockups... open questions:

• What would the height of these be?
• Could we render the input at the bottom?
• What do InputBoxes look like (instead of QuickPicks)?

[elarbor]

可不可以开通 GitHub Discussion 啊？

[TylerLeonhardt]

Alternatively, the input could be on the bottom like so:

Chat attach:

git branch picker:

And here's what an input might look like:

All very similar to QuickPick/InputBox, but smaller and closer to context.

[eamodio]

Yes please! And please be anchored to a position in a webview.

[TylerLeonhardt]

Notes from UX Sync:

* how does overflow work?
	* TL: we do get shadow from tree view
* what is the max number of items?
* how does scroll work when the input is below the list?
* when to use this contextual quick pick versus the command palette?
* examples:
	* run recent command: filter would show up over the prompt
	* language status status bar hover: what would happen? hover over a hover?
		* TL: we _could_ hide the hover and have the status bar item be the receiver
	* branch picker: eye muscle memory breakage
		* TL: maybe it's ok if focus is where you expect it to be
* positive vibes:
	* everyone felt it was a good idea
	* good for low vision
* negative vibes:
	* chat history is maybe not a good example (although one person said they liked it)
	* complexity around where the quick pick would show up

Rough Plan:

1. make the QuickContextWidget
2. do this for the attach context in chat (all in Core)
3. do this for all Core StatusBarItems (ie Language Picker, Encoding, Tab Size, etc)
4. Add an API that makes sense (for example, but can be discussed later: showQuickContext(items: QuickContextItem[]): Promise<QuickContextItem | undefined>)
5. Adopt the showQuickContext in git extension
6. Eventually, the web view toolkit could have something like this for web views.

[eamodio]

This will provide a great UX boost to so many flows, where the command palette causes such a break in focus.

It feels to me that not trying to invert anything for the "picker" case is the least jarring, as it would be consistent regardless of the direction it was opened, and scrolling would be normal. I could also see the input switching from top to bottom, which is nice for focus, but probably not great if the items are in the same order.

Though for the "input" case, I feel like inverting the input with the message/validation works well.

As for webviews, I would really want this to live outside the webview itself, so that it can escape the bounds, otherwise this wouldn't provide anything we couldn't implement ourselves today. And the only complexity I see to support the webview case is the "anchoring" and possibly focus handling to ensure the webview gets focus back on close.

I faced some of this with an experiment I worked on a little while back to allow VS Code hovers to be anchored over a webview, but I didn't get too far in the exploration of an "anchor" and instead added a showHover(contents: MarkdownString, options: { anchor: { x: number; y: number } }): void; method resorting to x, y coordinates. Not ideal, and would need to be "validated" to constrain where a hover could be shown. But something like that would be ideal IMO here.

[eamodio]

I guess even in the outside of webviews there are challenges for anchoring, e.g. triggering from a click on an action button -- editor toolbar, view titles, view items, etc.