Feature Request : Navigation Bar like Visual Studio or Eclipse

[gfrancischini]

Would be possible to add a navigation bar like visual studio or eclipse?

Feature Navigation Bar -

This bar should show function/methods of the current file.

I know that vscode support the ctrl + p + # to find symbols but this approach is not the best when you want to have a look over the entire class (or perhaps you dont know the method name)

[weinand]

@gfrancischini your link to some image does not work.

[adamvoss]

Ctrl+Shift+O is a bit closer to the functionality your are looking for, but does not have the UI fixture you've requested.

[mihailik]

I have looked at the available services and API --- it's definitely doable.

Key points are ICodeEditorService and DocumentSymbolProviderRegistry.

DocumentSymbolProviderRegistry enables querying the document for symbols, which includes things like namespaces or functions, spanning large parts of text and nesting into each other.

ICodeEditorService gives access to the editor, and events such as editing and cursor movement, so navbar would know when to be updated. Additionally editor allows placing decorations over chunks of text. That's useful because you want to highlight 'breadcrumb' points in actual text, say when user puts mouse over navbar or parts of it.

The only remaining question is placing the navbar on screen. I'm not quite sure which part of the code has the layout of editor tabs.

One way or another I'm preparing to have a go at this feature. Any preliminary advice and suggestions are welcome!

[mihailik]

Opened PR #31162 with a prototype implementation, using services described above.

Advice on finalising the styles, and coding changes is highly appreciated!

[mihailik]

Updated PR #31162 with flashing symbol position, adding screenshot here too. Does it look good? Any feedback?

[vscodebot[bot]]

This feature request will not be considered in the next 6-12 months roadmap and has been closed to keep the number of issues we have to maintain manageable. See also our issue reporting guidelines.

Thanks for your understanding and happy coding!

[jrieken]

@isidorn Why did you close this? Since when do you take responsibilities in this area?

[isidorn]

@jrieken I went through all the UX issues because I felt there are a lot of issues that nobody payed attention to. Feel free to reopen. I closed it because I thought it is out of scope and that we would not do it in the next year.

[jrieken]

It's on our roadmap: https://github.com/Microsoft/vscode/wiki/Roadmap#workbench

[mihailik]

Ah that's true!

Improve intra-file navigation (outline, bread crumb)

It was a bit disheartening to see this dropped, but to be honest my own effort fell silent for a while (backlog at day job) so I didn't have courage to complain.

Thanks for raising profile of this feature @jrieken , I'll push with what's been discussed on the prototype implementation thread next week.

Hope no hard feelings, this is a huge project and admin friction is sometimes inevitable. Microsoft is doing stellar job managing community contribution on VSCode as well as relevant sister projects. Thank you!

[MiguelQueiroz]

This is nice and very handy, i had the same "pain" for long functions, where i don't know where i'm :) , it would be nice to read the stycky function name on the scroll page scope. Like the referenced issue shows above!

[worrel]

I'd also like to add that structure breadcrumbs/path can be very useful for nested data formats like JSON or XML. IntelliJ and Chrome Dev Tools provide this. For instance, when I'm looking at a giant Elasticsearch document or mapping dump where key names are re-used at different levels, it's invaluable to see that i'm on, say

something.results[3].item.name.nameItem.subKey.name

These breadcrumbs can get very long, so being able to scroll horizontally over them or being able to copy the path to the currently highlighted node is very useful.

[jrieken]

We wanna explore this in June

[weinand]

@isidorn if we get some space for a navigation bar, we could consider to use this while debugging. E.g. we could try to place the debug toolbar there...

[isidorn]

@weinand might work, but let's first wait for the navigation bar :)

[weinand]

@jrieken sure, I understand. I just wanted to spark some UX thinking on our side because we have "improvements of the debug toolbar" on the June plan...

[jrieken]

We have a prototype and we will ship this in July

[jrieken]

A first version of this is in todays insiders build. You can enable it via "breadcrumbs.enabled": true. There are two modes, depending on you using tabs or not. When tabs are enabled breadcrumbs show as extra row below the tab and above the editor. When no tabs are enabled, the breadcrumbs shows more subtle, right of the editor title.

Tabs & Breadcrumbs

No Tabs & Breadcrumbs

Keybindings

You can use the mouse and these keybinding to interact with breadcrumbs

• Cmd+Shift+. moves focus to the breadcrumbs and opens the picker
• Cmd+Shift+; moves focus to the breadcrumbs
• Esc moves focus back into the editor
• ArrowLeft and ArrowRight select items in the breadcrumb
• Enter shows the picker
• Alt+ArrowLeft and Alt+ArrowRight (Ctrl+Left/Right on win/linux) move the picker
• Alt+Enter(Ctrl+Enter on win/linux) reveal the item in the editor

Remember, this is an early version and not yet everything works e.g. type to find. Still, give it a try and let us know what you think. #HappyCoding!

[usernamehw]

It looks and works pretty good from the start 👍

Should there be a distinction (border, for instance) between folder-file / insides of the file?

Or highlighting current file (just like tabs):

[qcz]

Can we have an option to hide the file path which I'm not interested in? It becomes very crowded very quickly when multiple columns of editors are open.

[jrieken]

Can we have an option to hide the file path which I'm not interested in?

Yeah, the following things I have in my mind: breadcrumb.filePath: 'on | off | onlyLast' and breadcrumb.symbolPath: on | off | onlyLast.

[qcz]

@jrieken: This is the best solution! 💯

[bardware]

Is it populated with the data the outline view uses?

[mihailik]

Awesome work!!

Suggestion for click/hover at breadcrumb: main function instead of popping up menus should be to jump to the symbol location.

The main feature of breadcrumbs is to find way in a convoluted mess of text. Building mental map of what's where in the text is the key to that, and that's where breadcrumb linking to positions in text help a lot: "this one is here (pointing), and that one is there (pointing)".

Correction: why not make Ctrl-Click jump to the breadcrumb position, and click open the menu?

Another suggestion: move [Find] field down below, or remove completely. It makes interaction less smooth

Another: when too many crumbs, collapse leading ones to fit on screen - currently overflows and hides trailing

[Cryrivers]

Awesome stuff. Could it also highlight errors like Code Outline as well?

[smlombardi]

Mine are appearing in the wrong place:

[jrieken]

Correction: why not make Ctrl-Click jump to the breadcrumb position, and click open the menu?

👍 pushed a change to make Cmd/Ctrl+Click reveal the symbol in the editor. Also Shift+Enter will reveal the symbol instead of showing the picker. Updated my comment above accordingly.

[jrieken]

Another suggestion: move [Find] field down below, or remove completely. It makes interaction less smooth

I have pushed the a change for next insiders (18 July) that hides the filter box initially and reveals it when starting to type. Like so

[mihailik]

Dark theme - the dropdown is really blending with editor. Consider a very faint border around it:

[bardware]

hides the filter box initially

How does the user know he can type to filter? Is there a tooltip or an icon or the like? Any hint?

[JacksonKearl]

Is there an action which I can bind to open up the topmost dowpdown? I'd like to use this to close #53279 by allowing a quick way to navigate from say **/A.ts to **/media/A.css, when there may be many files named A.css throughout the workspace and the file open quick pick wouldn't be able to distinguish between them.

Edit: Missed the comment above. Looks good!

[jrieken]

How does the user know he can type to filter? Is there a tooltip or an icon or the like? Any hint?

Fair question. I guess it depends on your expectations, may users are used to typing in a tree doing the right thing and miss it from other trees. Those might intuitively start to type, others might need some education...

[JacksonKearl]

It would be nice if the crumbs could be optionally hidden by default and only appear on the Ctrl+Shift+. trigger, then disappear again on Esc or a selection

[jrieken]

Closing this issue now because the biggest chunk of work is done and because we will ship this with the July release. Obviously, we aren't done but in the name of manageability we have added the outline-label which tracks all remaining bugs and feature requests. #HappyCoding!