Outline view: collapsed by default (introduce optional setting?)

[axefrog]

Very simple request: I'd like the outline view tree to be collapsed by default. It'd be great if there were a configuration setting for this. To be clear, I'm referring to the items in the tree, not the panel itself.

Good:

Bad:

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Test outline refinements (#52799)
• Implements an outline view (#49917)
• Test Outline View (#50614)
• Outline view doesn't remember sizing when leaving and returning to the Explorer panel (#52343)

[jrieken]

Yeah, that's a tricky one. The current logic reveals one level down and that should work well with one-file-one-type languages like Java. In language like JavaScript that might not be ideal. Needs some thinking

[axefrog]

Could I not just apply the setting on a per-language basis?

[jrieken]

Yeah, we can always have a setting

[thorstenc]

A configuration settings option for the other outline options like 'Follow cursor' or the sort order would be great as well.

[jrieken]

@thorstenc Not a configuration, but the sort order can be set via the menu (choice is persisted)

[cipri-tom]

I would enhance this a bit further by saying that outline view should remember the collapsing state. In other words, if I collapse all, then change to Source control view, when I get back into Explorer view the items are expanded again.

This should also work if I collapse all, then expand just one item, then change views. When I come back to explorer view, only that item should be expanded.

[axefrog]

@jrieken One thing I have often wished for is a way to organise my code without the constraints of a rigid file structure. Code is a graph, and I often wish there was a way to present me with the bits of code I care about (pinned, adjacent, degrees-of-separation, etc.). When I'm prototyping and doing R&D in general, I end up with large amounts of code I don't want in focus, but creating new files constantly, and managing imports and exports between those files, is extremely inefficient when I don't even know if I'll need to keep a large amount of the code I'm fleshing out. Being able to see a higher-level overview via the outline panel is at least something in the absence of a solution to the above, but when it behaves like a wall of text that doesn't even remember the state of collapsed/expanded nodes, or have any form of contextual link to what I'm doing in the moment, it feels like a missed opportunity to be a really useful tool.

[AmeliaBR]

I agree the ideal solution to this problem is to have a configuration setting, which can be customized by file type or project. I'd go farther and say that the ideal configuration isn't just "expanded" vs "collapsed", but instead a depth level, e.g., expand to level 3 of nested structure.

[Antisunny]

Has this been solved?

[v-kydela]

@Antisunny - You can see that the issue is still open

[blowsie]

In the mean time <Ctrl> + <LeftArrow> will collapse the entire list

[v-kydela]

@blowsie - That's good to know, but since you have to focus on the outline window first it's no easier than just clicking the "collapse all" button

[v-kydela]

@jrieken - Why did you delete my comment on July 30?

[jrieken]

Collapsing items is actually fair easy - the question is what to do when "Follow Cursor" mode is on? That mode always reveal and hence expands the current item and it will leave many expanded items behind. Not sure if auto-closing those elements that where already expanded is in reach...

[v-kydela]

@jrieken - The issue is that many VS Code users would like an option to have the items in the outline panel collapsed by default so we don't have to click "collapse all" for every file we open when we're browsing through many files in a library

[Relequestual]

Here's my use case, which may present a proposed behaviour. I have a javascript file with a number of functions. I don't want to know about the contense of the functions, but I want to always know what function I'm actually in at a glance.

I guess my request COULD be served by being able to lock the tree so it doesn't expand or contract, but still follow cursor. I'm forever clicking "collapse all"

[nikitavoloboev]

I would love for a setting where VS Code would collapse all other folders except the currently active file.

Currently as you go through files, it will expand the folders to each of the files and then keep them expanded as you switch files again.

I want VS Code to auto collapse all folders except the current active file.

To have this:

Instead of:

[Relequestual]

@nikitavoloboev This issue is related to the outline, not the files list. Maybe file a new issue if one doesn't already exist? =]

[Rusenec]

How can this simple, so logical and requested feature take so long and a myriad of mostly useless or strictly specific things get in updates???

[Relequestual]

@Rusenec You could re-channel that complaining energy to writing the PR which makes it do what you want. =/ It's free, don't complain. The team that work on this bring HUGE numbers of updates all the time. If you want it to go faster, help.

[v-kydela]

@Relequestual - This has been assigned to someone for over a year. How do we know we wouldn't be duplicating effort with a branch that's nearly complete?

[Rusenec]

@Relequestual ^This. Plus, by your logic, everyone that requests this feature, should instead branch and start working on it...

[pianocomposer321]

In addition to being collapsed by default, I would like it to automatically collapse when you move out of the current function/class. So if I'm member "bar" of class "foo", then I move to class "baz", class "foo" automatically collapses.

[johnmellor]

@v-kydela You can add a custom keybinding for Collapse All that works without having to first focus the outline window.

For example using the Commander extension to chain multiple commands together you can add the following to keybindings.json:

{
    "key": "alt+o",
    "command": "commander.runCommands",
    "args": ["outline.focus", "list.collapseAll", "workbench.action.focusFirstEditorGroup"]
}

The macros extension also works. If you'd rather not install an extension, it's possible to chain commands together using tasks: https://github.com/microsoft/vscode/issues/871#issuecomment-488355245.

[v-kydela]

@johnmellor - That's good to know, but it doesn't solve the issue

[yaalaa]

It's a nightmare. I'm editing reactjs files. Outline gets expanded up to the calls like _.map. I have to collapse it. Outline restores its expanded state after git pull. Very annoying.

[DanielTrommel]

This is really annoying; I am using the outline to quickly navigate through (Python) functions, and dont need all the arguments shown.

Ideally, the collapsing can be configured to be by default done to a certain level, so that we can choose to either collapse to the topmost, or e.g. one below.

[Bulletninja]

@DanielTrommel It says it's resolved here: https://github.com/microsoft/vscode/pull/74026 It just says it looks great but can't see what the actual shortcut is

[pianocomposer321]

@Bulletninja Looks like the command is list.collapseAll. See https://github.com/microsoft/vscode/pull/74026/files, line 306.

[v-kydela]

@johnmellor already said that. And again, it doesn't resolve the issue. That's a one-time action, not a persistent behavior.

[pianocomposer321]

@v-kydela yes, you're right. It is still better than nothing though.

[difosfor]

Why is the Outline showing me const/let statements, method calls and inline (e.g: anonymous) functions within TypeScript class methods? I would expect this to only show class properties and methods; nothing within those.

Could somebody please give this some JavaScript and TypeScript love and make it work reasonably well for common use cases within those? Right now as other people have indicated this is worthless because it doesn't provide an outline, just a huge scrolling mess of irrelevant details.

[difosfor]

@adjogahm: I'm sorry but I don't understand how Source Control and gitlens etc. relate to this issue (Outline) at all?

[bwaindwain]

You can hide all the variables & constants in the outline and have it only show methods/functions.

In settings. Go to Settings > Features > Explorer and turn off the Outline: Show variables and Outline: Show properties.

[difosfor]

Cool! I've also disabled Show Functions since that doesn't make sense (at least to me) for JS/TS where you use anonymous callbacks.

[TdyP]

Thanks a lot @bwaindwain ! I had no idea that these settings existed! It makes the outline much lighter and more digest.

Thus, for me the main point of this issue is almost solved :rocket:

[frontrangerider2004]

I'd like to jump on this bandwagon too. The few times I've used the outline to trace through something it was an extremely helpful tool but since it doesn't remember state and always has to be collapsed manually it's not my go-to but it could be.

[v-kydela]

If anyone from the VS Code team ever looks at this, I don't want them to deprioritize it because they think workarounds have been provided in the discussion. I want to make it clear @bwaindwain has provided some useful and interesting information, but it does not solve the issue because it does not allow us to have the outline collapsed by default. Some users (like me) still want to have variables and properties show up in the outline anyway.

[AndrewKnauss]

The use case for this very common developer workflow is as follows: User is working between functions foo() as well as bar() in file game.py, and has customized the expansion of the outline tree to work between the functions quicky. The user then needs to reference function zoro() in file library.py. The user switches focuses to library.py, checks the reference, and then returns focus back to game.py. The user then has access to the same customized outline in game.py to continue productive workflow.

The current problem is that when you switch focuses, everything re-expands and the user has to re-customize the outline tree.

When a user switches focus to a different file, and then returns, the outline should be in the same state as when the user left. It appears that the outline tree is currently being re-built between focuses. The solution is that the outline window should be persistent between focus changes, including any customization made to the expansions/collapses.

[db6edr]

Why not somehow serialize the expanded/closed state of the tree an re-read that when coming back? The serialized data could even be stored onto disk, just like the list of open editors. This way, the expanded/closes state would survive restarting VS Code.

[themighty1]

@AndrewKnauss , are you sure what you describe is the case? I don't see that. In tab A I can expand the outline to the depth I need, then switch to tab B and expand tab B's outline. When I go back to tab A, the outline is exactly in the state it was before switching tabs.

[AndrewKnauss]

@themighty1 , I just tried to reproduce the issue it has been resolved in a recent update. The outline tab is now working as expected. Either that or the issue was intermittent. Here's the latest version I tested with where the issue appears to be resolved. Version: 1.58.2 (user setup) Commit: c3f126316369cd610563c75b1b1725e0679adfb3 Date: 2021-07-14T22:10:15.214Z

[SergeyBeloglazovRL]

+1 I need outline view to be closed by default or opened at 1 level:

• Class/object -- Method -- Method

Current "all open" default view takes me too many clicks to navigate to a certain function: 1) Click "-" button 2) Clock ">" box of a class 3) Browse for a function/method of the class

If it is closed by default, it will save me one click :)

[dcraig327]

Some brilliant comments in here. I haven't seen any extensions perform what's listed here, but I'm free to suggestions.

Always collapsed Imagine going through a spreadsheet made into a table in html. Each cell contains an image. Image url's can vary from 10-500 characters. Here's an example of a 2x5 table.

You're on one row and want to quickly go 4 rows down using just the outline. In this scenario, having the outline always expanded limits its usefulness. The image above was created by collapsing the entire outline, Selecting Follow Cursor as seen below, then clicking on a cell.

I would enhance this a bit further by saying that outline view should remember the collapsing state. In other words, if I collapse all, then change to Source control view, when I get back into Explorer view the items are expanded again.

This should also work if I collapse all, then expand just one item, then change views. When I come back to explorer view, only that item should be expanded.

Add an option above the bar in the above screenshot "Always Collapsed" or "Collapsed by Default" or "Remain Collapsed". What this function does is assure the user 'vscode will never expand the outline unless you explicitly tell me'. This function will collapse the entire outline for the file by collapsing the root node, so \/ html becomes > html.

If Follow Cursor is selected however! Then that closed outline works exactly as if you did what I did above, collapse the root node, then click the code, and it'll look like the image above. If moving through the code, it will auto-collapse all nodes not relevant, and only expand what's needed to Follow Cursor.

My problem before, jumping down 4 rows in html. This is the best way I know howto do this with the outline/breadcrumbs:

[sirius0xff]

For viewing files with less complicated structure, it is more handy to have the outline to be expanded by default. Now all I can see is c++ namespace after switching between c++ files, which is useless and very annoying.

Any chance to add toggle setting for this, or at least have a list.expandAll command?

[cgebbe]

Is there a setting now in end of 2021?

[HardCode4All]

Is there a setting now in end of 2021?

Apparently not :( I was also hoping for that.

[SergeyBeloglazovRL]

I have disabled outline.showVariables in settings. It's good for PHP, outline now shows only classes and their member functions, without inner local variables. But it's bad for JavaScript. Outline shows empty panel, because JS classes are object variables:

let myPanel = {
func1(){
...}
}

It works well only with class declarations in JS:

class MyClass {
static func2(){
..
}

[pop1989bb]

I need as well a collapsed outline per default. So please devs provide us a function. It is now request since nearly 4 years.