Sticky scroll - keep containers headers visible when scrolling

[gulshan]

This is a feature request. Starting with an example. Suppose we have following c# file-

using System;

namespace ExampleNamespace
{
    class ExampleClass
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }

        static void ExampleMethod1()
        {
            Console.WriteLine("ExampleMethod1");
        }

        static void ExampleMethod2()
        {
            var methodName = "ExampleMethod2";

            foreach(var c in methodName)
            {
                if(char.IsUpper(c))
                {
                    Console.WriteLine("Upper case");
                }
                else
                {
                    Console.WriteLine("Lower case");
                }
            }
        }
    }
}

If we are browsing the file at the end, it looks like this now-

And with this feature, I wish it to look something like this-

It means the parent syntax nodes of the area being browsed is automatically freezed, so that the user can easily guess the context of the current code, regardless of how far the parent nodes are. Some points being-

• I think this should be a toggle keystroke to on/off feature, may or may not backed by a setting.
• The parent syntax nodes should smoothly stack up or goes out of stack while scrolling.
• This should be tied with the current viewport and not current cursor position in my opinion.
• It would be nice to have previous sibling nodes included in the stack for if-else chains and switch cases.
• By default, this can be solely based on indentation instead of actual syntax tree of the language, just like how folding currently works in vscode.
• There should be a minimum height of the viewport with actual code (without parent nodes). Or maximum height of parent node (header) lines. When that value will be reached (like for heavily nested code), furthest or top most parent nodes can be hidden in that order. The closes parent nodes will remain visible.

Edit:
Found a nice illustration for this feature from this tweet-

[aeschli]

Interesting idea! @egamma @alexandrudima FYI.

[PEZO19]

I really like the idea, I have something very similar. I believe code folding could be use many ways to make code easier to absorb.
I wonder is there any other editor which has similar code folding strategy?

[gulshan]

I don't know any other editor with this kind of code folding feature.

[pr-yemibedu]

Hello,
This Peeking fold is nice. Some settings could be:

• folding.enablePeeking = true
• folding.peekingDepth = {0 = unlimited, 1 = one level in, 2 = two levels in, ... , n}

So what I would like to see is more (+) in the left border to indicate a way to collapse or expand. Also this can be a lot easier to get in vscode if there are not a lot of limits. The OP made six points ATTOW and so:

1. it could be a keyboard ready toggle, but being backed by a setting gives a user the choice to anchor the toggle direction.
2. ? the code tells the tale told by the programmer, no ?
3. agreed
4. special cases break expectations of ident based folding.
5. agreed
6. sounds like my second setting, but it maybe not poping into a fold based on anymore than matching the current level count

This is one of those so simple looking additions to the editor that it would be a crime to leave out. Thank you. Good day.

[gulshan]

I thought user may not want to keep this settings on always. It will help more in code exploring situations. But may be someone will want to keep it on permanently. Then I have no objection to a permanent settings.

Regarding branching nodes like if, else-if, else, cases for switch or others, it's true that freezing previous sibling node headers violates indent based folding expectations and the feature will then require language awareness of some sort. So the first or baseline implementation can leave it. But I think it's still a nice to have enhancement and language servers should be able to contribute to this part.

[gulshan]

One thing! When this feature is turned on, the usual code-folding has to be turned off. So enabling this can be part of editor.folding settings.

[gulshan]

This tweet has a nice illustration for this feature-
https://twitter.com/jckarter/status/1140131108564062213

[wayou]

Since the frozen part will take vertical space, it's better to limit the rows and collapse the middle rows with an explicit expand button.

Something like this:

class Foo{
...Expand 3+ hidden parent nodes...
	constructor(public name:string){
---------------------------------------
	// other codes...
	}
}

[jrieken]

This should be tied with the current viewport and not current cursor position in my opinion.

We could try that for breadcrumbs. I have created #75776 to make breadcrumbs being driven by the viewport, not the selection

[pr-yemibedu]

Hello,
So those are two different ways (floating auto collapse and fixed key expandable collapse) for visualizing code information. But there becomes particulars that of the layout left up to opinion. One is whether the immediate and top parent are the most important to show or always the last two?

class Foo{
  class Bar{
...Expand 3+ hidden parent nodes...
	constructor(public name:string){
---------------------------------------
	// other codes...
	}
  }
}

OR

...Expand 3+ hidden parent nodes...
  class Bar {
	constructor(public name:string){
---------------------------------------
	// other codes...
	}
  }
}

Would it seem nice to always keep it all visually stacking? some languages nest better but it would look clumsy with this. Other languages are so thin in that you rarely nest but need to know scope. Thank you. Good day.

[gulshan]

@jrieken That can be a nice thing. Thanks for consideration.
@pr-yemibedu I think immediate parents are more important for context.

[jrieken]

Something very, very much like this can be seen here: https://searchfox.org/mozilla-central/source/layout/generic/nsTextFrame.cpp#1229

[vexx32]

👀 Semantic Scroll is a good feature name. 👍

[phil294]

This is a great suggestion. Arguably the easiest, hackiest way to achieve this as an extension / styles override would be set the position of all line divs from absolute to sticky (they already all have a set top property) and give them ascending z-indices. I did something very similar recently here. But this doesn't seem to be feasible because said divs seem to be reused and only rendered as needed. If it is possible to deactivate the virtual scroller feature somehow (?), we could use some workaround like this in the meantime.

Sticky breadcrumbs based on nesting level is in general a feature that I am dearly missing in all websites and tools I know, be it Wikipedia, Reddit, or VSCode.

[abhijit-chikane]

https://twitter.com/NathanBLawrence/status/1544751141363167232?s=20&t=XbLO4-JgAxRiO0VVNzkwSA
“Code structure while scrolling” feature will also bring in context from additional lines of your type or method declarations as you scroll them out of view.
This is soo cool!!!!

[BenBE]

One thing! When this feature is turned on, the usual code-folding has to be turned off. So enabling this can be part of editor.folding settings.

I don't think so. There's nothing that prevents you from having a collapsed function and when scrolling along just treat it as a single line. When the line is expanded you can see its contents, while when collapsed it's just like any other "single line statement" and you do no longer have to care about any of its child/nested contexts. Preferably you could even explicitly allow for folding the current contexts you are in, to allow for skipping to the next context.

[cj81499]

For anyone who's watching this issue, sticky-scroll is available as an experimental feature in today's release!

https://code.visualstudio.com/updates/v1_70#_editor-sticky-scroll

[FezVrasta]

Why it only works for TS files? Is that intended?

[jk]

Why it only works for TS files? Is that intended?

It doesn’t. I see it in Python files, too. I guess the language needs to expose a certain structure while it is in experimental state. Besides that here isn’t the right place to troubleshoot.

[gjsjohnmurray]

Why it only works for TS files?

@FezVrasta what language are you missing it in? Maybe the extension which adds that language to VS Code doesn't implement a DocumentSymbolProvider, or doesn't return the types of symbol that the new feature is driven off.

[FezVrasta]

Babel

[BenBE]

I'm properly seeing the semantic scroll work in C (haven't checked C++ yet), but with the headings only generated for the actual function I'm in, but not control structures within the function. Is this intentional? Or could there at least be a setting to enable this? With just the top-level header of the function this doesn't bring any advantages over the existing line above it:

I'd prefer if the while (!quit) from line 224, the if (ch == KEY_MOUSE && this->settings->enableMouse) { from line 239, the if (ok == OK) { from line 243 and if (mevent.bstate & BUTTON1_RELEASED) { from line 244 were all kept in view.

Also I noticed a minor strangeness in that trying to scroll up, the cursor seems to move into a line hidden by the sticky-scroll display.

Overall I like the feature and am looking forward to see these minor issues resolved in an upcoming version.

NB: Screenshot done against htop-dev/htop@3e1908b in case someone needs the exact source to reproduce. Feel free to ask for further details as needed.

[gjsjohnmurray]

@The-Compiler please see #157185 (comment)

[The-Compiler]

Whoops, I missed that - thanks for the pointer and sorry for the noise! 👍

[aiday-mar]

Thank you for all your comments and interest. If you are interested to see the latest new behavior of sticky scroll you may install the VSCode Insiders release for testing (https://code.visualstudio.com/insiders/). Some of the recurring issues have been solved there. These changes will appear in next month's stable release.

[aiday-mar]

To verify:

Open a file, scroll in it
Verify that the correct sticky headers are stuck to the top
Use simple click to jump to the line
Use control click to jump to the definitions of the variable