Add "breandcrumbs" bar

[vasily-kirichenko]

Last release of IntelliJ IDEA added new "Breadcrumbs" toolbar:

If you click on a symbol on the toolbar, the cursor jumps to that symbol. If you click on a symbol with right mouse button, the whole entity definition is selected. When you hover over a symbol on the toolbar, it shows its type and, for lambdas, the whole definition.

It's similar to Xamarin's navigation bar, but without ability to select other symbols with comboboxes. I'm not sure which style is better though. If we are gonna to resurrect VFT's Navigation bar, then it makes sense to rewrite it to mimic Xamarin's behavior.

[smoothdeveloper]

If each item could be a dropdown, and the first item is the list of modules/namespaces in the project, that would be killer feature :)

[vasily-kirichenko]

As I said, dropdowns makes it a different thing, you cannot click / right click on them to go-to-symbol / select definition with them.

[smoothdeveloper]

having a part with the text (breadcrumb) and a part with dropdown (the down arrow) would bring best of both worlds.

The underlying service which keeps track of hierarchy of node would be useful for other features as well, I intend to implement solution explorer tree nodes under .fs files at some point.

[cloudRoutine]

@vasily-kirichenko it's possible to make a WPF control that allows both, it doesn't have to be the kind used in the current navigation bar

[vasily-kirichenko]

OK!

[JohanLarsson]

When is this useful? For selecting code?

[vasily-kirichenko]

@JohanLarsson The main feature - instant understanding where you are in a large file, I mean in what module, type, method or function the cursor is.

[cloudRoutine]

@JohanLarsson this would be really useful, especially when working through unfamiliar source

@vasily-kirichenko should we do the same kind of preview windows that we use for collapsed outlined regions, or should we have intellisense tooltips pop up on hover instead?

[JohanLarsson]

Wrote a prototype for the UI.

The control is an ItemsControl bound to a collection of nodes where each node has Children and a SelectedChild. This way it supports arbitrary depth and content.

We need to write a viewmodel that exposes the ast and cursor position like this, probably pretty straightforward.

[vasily-kirichenko]

Could you port it to F# and make it a margin, similar to QuickInfoPanel?

[cloudRoutine]

There's no need for the nodes to be drop down menus, there's only ever one path down the AST to the current scope depth at the cursor position

[vasily-kirichenko]

I agree. We should not mix navbar with this feature.

[JohanLarsson]

@vasily-kirichenko everything can be ported to f# given enough time and skill :) I'll have to figure out what a margin is, have not used the VS API much. I'll create a throw away VS extension and try to figure it out.

@cloudRoutine dropping the dropdowns will simplify things a lot. Without having used f# much I think I agree with @smoothdeveloper that they can be useful. Maybe best to start simple without them.

About mixing features: screen space is a limited resource, if the ux can be made to make sense mixing could be a good thing.

Another questions is what should be on each level [namespaces, modules, types, lets] and probably a bunch of scary things that I don't know about. Levels will probably be mixed, wpf will probably handle that nicely with templates.

[JohanLarsson]

@vasily-kirichenko Is ^ how you want it?

[vasily-kirichenko]

Yeah, but on gray background. Also, each type of symbol should be colored differently.

[JohanLarsson]

Leftaligning it with the text is somewhat tricky, is it better than: ^ is simpler.

About the background: should probably be set by dynamicresource to a resourcekey to make it theme aware.

About styling content: the sky is not the limit.

[vasily-kirichenko]

It should be left aligned with text, as on the previous screenshot.

The font should be the same as one used for code in editor.

Colors should be calm.

[JohanLarsson]

+1 about font And I think maybe no colours at all, perhaps light up on mouseover or an underline with colour. Text only will probably go a long way. Making UI like a christmastree is not always awesome ux.

[smoothdeveloper]

Regarding colors / background, I believe we should use the semantic coloring used in the source code itself, modules have some color, mutable variables some color, interfaces some color etc.

[JohanLarsson]

That makes sense, maybe just use foreground on the text.

[vasily-kirichenko]

It turns out this feature is more annoying than useful.