Code change:
Testing Format of keybindings is particularly ugly ! !
Does this question accept PR from outsiders?
yes. VS Code does accept PRs!
Thanks!, and I'm going to refer to styles for other widgets, or if we already have styles we like?
It's more complicated than just styles, sadly. We need to use our rich hovers instead of the native hovers... thankfully we did some work recently to plumb a all the way down to the QuickPick. To fix the title bar buttons, you can probably add the hover delegate in into the options of these s: The list will be harder has the buttons get created here: but we can be iterative here and focus on the title bar buttons first. the other issue that has to be addressed is that Monaco: currently doesn't have a HoverDelegate implementation here: so either we need to implement a HoverDelegate in the "standalone" code (aka Monaco) or we need to pass in the right value to tell quick pick to not use a hover delegate and use native hovers instead. So yeah... it's a bit more complicated than styles unfortunately
Sorry to reply late, thank you for your help! I will start learning the relevant code here over the weekend, hope it goes well!
It is very convenient to create rich hover based on the clues you provide!(Please ignore his style and content) I'm using method for the time being to set the style: I would like to ask for help, is it the right choice to use this method? If yes, I will continue to improve ps:For Monaco, I haven't started looking at the relevant code, but I will as soon as possible !
On the VS Code (non-Monaco side) we already pass a hover delegate in here: So you should be able to just reuse that instead of
I adapted the title bar, but the buttons in the menu options cannot be easily adapted because they are not available e.g. 'Learn More' in screenshot, next I'm going to learn monaco-related code, for monaco's tabbar, do you know which pages can be easily called show?
we can start with just fixing the title bar buttons if you'd like and then fix the Learn More ones later. We can be iterative :) We still for sure need this before that PR of yours comes in: from
Thanks for your help, I'll go investigate the monaco related code, but it may be later, I'm also stuck with this issue
If you use Node 18, you shouldn't see that issue.
It works for me, I would also like to ask for a simple question: In addition to calling api, is there any scenario in vscode that directly runs monaco? I'm trying to find a link to a monaco input call, but failing
Good question. Here are the steps for running Monaco: What I would recommend is maybe temporarily adding a button to an existing quick pick like the command palette: add a line like: and don't forget to import it:
Thank you for your patience! I will start learning the code
I investigated the existing code and found some problem if I wanted to implement a HoverDelegate in the "standalone" code: We need to use related code, but they are in the , and should not be import this layer, do we need to re-implement a standalone with hover? or lower the code hierarchy to the level, I'm not sure if the conclusion I got is correct, so I still need to ask you for help, thanks!
so before, I provided a default implementation of the here that does nothing: I think what we should do is remove that and allow to be /optional. If it's don't pass it in to the s so that the native hover is used as fallback.
It's better to handle it this way, otherwise it's really difficult to achieve the current situation (especially for me), I'll submit the PR later
I submitted an initial PR, but I'm not sure if I missed some details, and found that one of the tests timed out
Verification on macOS would be easiest I think: Open up a few pickers Hover over different components: description detail quick pick buttons quick pick item buttons None of them should be using native hovers. They should all be using custom hovers.
Is there anything I can do to help? Do we need to replace everything that needs to be replaced with a custom hover,I'm willing to submit a PR to modify these if I can
It's already done! Now we verify everything is working as expected before :)
Are these the old tooltips or the new ones? <img width="275" alt="image" src=""<img width="306" alt="image" src=""This is what I'm seeing.
Yes those look like custom
Actually, the keybinding one isn't... let me capture this in another issue as the class doesn't actually support a hover delegate.

Related discussion:
text: // Detail const detailContainer = dom.append(row2, $('.quick-input-list-label-meta')); <del> data.detail = new IconLabel(detailContainer, { supportHighlights: true, supportIcons: true }); </del> <ins> data.detail = new IconLabel(detailContainer, { supportHighlights: true, supportIcons: true, hoverDelegate: this.hoverDelegate }); </ins> data.toDisposeTemplate.push(data.detail); // Separator data.separator = dom.append(data.entry, $('.quick-input-list-separator')); // Actions <del> data.actionBar = new ActionBar(data.entry); </del> <ins> data.actionBar = new ActionBar(data.entry, this.hoverDelegate ? { hoverDelegate: this.hoverDelegate } : undefined); </ins> data.actionBar.domNode.classList.add('quick-input-list-entry-action-bar'); data.toDisposeTemplate.push(data.actionBar);