Icons for folding and unfolding

[aeschli]

I'm working on adding folding to the editor. At the beginning of the line we show twisties that signal where you can fold and which ranges are already folded.
The folding arrows are only shown when hovering over the glyph margins. Unfold arrows are always visible.
The current prototype uses the twisties from the file explorer (16x16, arrow-collapse-dark.svg)
The following screenshot is made with the mouse over the glyph margin:

The following screenshot also shows git line decorators. The mouse is somewhere in the text area.

[aeschli]

@stevencl @bgashler1 @egamma @chrisdias FYI

[aeschli]

To play around with the prototype, check out the aeschli-folding branch.
In the settings add "editor.folding": true

[Tyriar]

Will themes be able to control the arrow colors? They may clash with certain themes even if there are just standard dark and light versions of them.

[egamma]

Very nice and the folder regions are even remembered.

I find it somewhat stressful to hit the twisties, they should have a larger hit target area.

[ianwesterfield]

Along the lines of what @egamma said: To me, the glyphs seem overly inconspicuous. Maybe a bit larger in size would help with the hit area?

[bgashler1]

@aeschli very nice work!

Proposed Design

Here is what I'm thinking on the look and feel. It is based on Visual Studio's experience with code folding.

• We would use a tree view expander and collapse icon
• #989898 for the line and 1px border-color

Nice to haves:

• Peak view of the ellipses (see alternative design no. 1 below). This is also done in VS.

Alternative Designs...

1. In-context affordance for folding

This was an interesting idea, but I worry that it may not be scannable as easily to the eyes as a user tries to find where the folding expanders are in his/her code. They may also be confused with code since they are inline. Here it is.

2. Hierarchical in-context

Some IDE's do a similar approach. I have a competitive analysis doc if you want to take a look.

3. Chevrons

As you can see, this could get confusing, especially the more tabbed in you are. It's not clear what each chevron will do, especially in large chunks of a class, for instance.

@stevencl, would love your feedback here.

[ianwesterfield]

@bgashler1, love your first alternative design example with one exception: Please don't fold the closing brace. Atom does this and it really is annoying. Many people have asked that it be left exposed.

[stevencl]

I too like the look of the first alternative design but does it offer a larger hit area (as per @egamma's suggestion)? Can the user click on the vertical line for example to collapse the region?

Can you also try showing what it looks like if you don't fold the closing brace?

It might also be worth looking at how this works/looks for other languages. For example, will this work just as well with HTML, CSS, Visual Basic (and other languages that don't use punctuation marks as block delimiters)?

[Ristaaf]

I love the Visual Studio design with plus and minus signs and the line, like the proposal of @bgashler1, however I would like to fold the closing brace too, together with the starting brace replacing both with a hoverable tooltip icon, like visual studio does, so please make that an option.

[LKorowicki]

Closing brace could be folded like this:

function simpleMethod() { ... }

instead of

function simpleMethod() { ...

I am definitly for folding closing brace.

[bgashler1]

@LKorowicki and @ianwesterfield, I agree that if we show one brace we should show both. @Ristaaf, you bring up a very good point about how VS does it by folding both. These are both very good ideas that we will be considering.

[bgashler1]

@stevencl It's not clear in the pictures here, but I would like to make these expandos slightly larger in VS Code than in VS for this reason. That way users get a visual reassurance that the hit area is larger instead of merely including a large and forgiving hit target. Furthermore, I'm thinking the hit target should be the height of the line with some padding to both the left and the right. I'll post some more images soon that we can discuss.

[Nimzozo]

Great work @aeschli @bgashler1 ! 👍

I'm 100% sure my favourite is 2. Hierarchical in-context.

• The [+] / [-] signs are the best because really clear.
• It helps to see the hierarchy in the code !!

Will this be in the next release ? Or are you doing an extension ?

[ianwesterfield]

@LKorowicki I'm digging your suggestion for folding the closing brace to the same line, but keeping it visible.

[bgashler1]

@Nimzozo: This will be in the actual product.

[Spown]

I'm also for Hierarchical folding. On hover shoving/always visible can be a configurable option with either as default. This option is also showing the closing bracket, which is useful even if you are not going to fold. In case of always visible I would still make the controls 50% opacity and 100% if hovered over. The Chevrons kinda defeat the purpose since they introduce the same level of confusion as the level of clarity they bring with them.

Thank you for your hard work!

[bgashler1]

@chrisdias Just added new icons, so perhaps we could make this on by default in the release.

[Tyriar]

Created an issue for folding on a single line #3352, including a comparison with atom, brackets and sublime