Code folding chevron icon is confusing

[SirMaxxx]

The icons now used for code expansion in Insiders 1.37.0 are essentially a '>' or a '>' rotated through 90 degrees.

when looking at code that uses '>' (e.g. HTML) and code is collapsed, there is visual confusion as it can appear there is a misplaced '>' in code...

e.g. in the code below on line 10

IMHO the original icons used were fine and did not need changing... at the very least, could they be coloured differently to easily distinguish from code at a glance?

[kanlukasz]

Oh, I see now where the problem is.
This is in fact problematic and it should undoubtedly be changed

[coaperator]

Return +/- to collapse the code!

Is it really impossible to redraw +/- if you really wanted to put the icons in order ?!

[cuylerstuwe]

This is someone creating confusing UX in their attempt to accomplish their idea of "pretty UI".

It's also an example of solutionism; Putting forth solutions to problems that don't exist. There was never any usability issue with the old expand/close icons.

[mitiko]

The angle brackets are not cool looking. I like +/- better

[Cirieno]

Or perhaps give the option to switch between new and old style icons.

I personally preferred the old style, as that is a convention used across many editors for many, many years.

[lisa-tong]

If you're bringing back +/-, please keep the box outline! It was much more intuitive.

[ErikHumphrey]

Oh, that's what they meant by +/- being changed to carets. Yeah, that's even worse than just using a solid triangle as an arrow. Bring +/- back!

[ShinRai1090]

+1 to this, So many issues with the icons overall 😞. Best would be to give a opt-in for older set of icons or provide a way to make a selective change through either a set folder of icons or settings.json.

[MarkMcTernan]

Yikes, how hard is it to make the choice configurable? Yet here we are, stuck with these awful new icons that are even more inconsistent than the "problem" they were meant to fix.

At the very least give us the option to go back.

[ErikHumphrey]

Yikes, how hard is it to make the choice configurable? Yet here we are, stuck with these awful new icons that are even more inconsistent than the "problem" they were meant to fix.

At the very least give us the option to go back.

To be fair, limiting it to one option makes it easier to maintain if the system changes in the future. Technically, it is already configurable, you just have to source the icons yourself.

[Cirieno]

To be fair, limiting it to one option makes it easier to maintain if the system changes in the future. Technically, it is already configurable, you just have to source the icons yourself.

Looking at the icons through the devtools, it looks like they're SVGs. You'd have to override them with other SVGs, and some sort of CSS override -- how would one go about doing that?

[dmvvilela]

LOL what have they done??? All the icons are stupid and ugly.. Revert everything to what it was please! Definitely included on this the left side bar icons.. Please. Also.. how do i downgrade till then?

[gjsjohnmurray]

how do i downgrade till then?

#78748 (comment) has links to 1.36.1 kits.

You may also want to change the update.mode setting to prevent an automatic upgrade.

[zkriszti]

+1 for bringing back the "+" and "-" for code folding.

[noudAndi]

+1 Please revert that change and bring back the old behavior, which was perfectly fine. There was no need to change it.

[nonoroazoro]

Some times you should stick to the old ways.

Besides, the new debug icon really makes me sick, it looks too much like a bug!

[schwemmer]

+1 for bringing back the old icons, at least for code folding.

[assuming]

The problem is that it's not only the folding arrow icon looks bad, icons on the left bar make the whole editor even worse. They are too thin and, as someone said, the debug icon looks like a real spider and I have to hide this bar (people who have arachnophobia like me)

[eamodio]

If you do change these to something other than the new ones please keep the current as an option. I really like the new ones! 😁

[lllopo]

As I wrote on another thread, the problem is not the chevron, but the fact that you make your gutter the same color as the code background. This makes any content on the gutter confusing incl. the line numbers. Try setting a different gutter background and you'll see how everything will look perfectly normal immediately.

[SirMaxxx]

Sorry but that's just not the case. I had no problem with the previous icons ... Same colour scheme, just different icon. So the single thing that has changed is the icon. And it is causing me an issue. Tbh it's not a huge issue, but the first time I opened an html page with the new chevron, I genuinely spent time looking to see why the angle brackets didn't line up. So, no, it's not a colour issue, it is an icon issue.

…

On Fri., 16 Aug. 2019, 9:40 pm Georgi Georgiev, ***@***.***> wrote: As I wrote on another thread, the problem is not the chevron, but the fact that you make your gutter the same color as the code background. This makes any content on the gutter confusing incl. the line numbers. Try setting a different gutter background and you'll see how everything will look perfectly normal immediately. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#78024?email_source=notifications&email_token=AJKFUKTHVYVFTTOIVSV22JDQE2G37A5CNFSM4IHIBN6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4OMTEI#issuecomment-521980305>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJKFUKS7DAV4J3KNMRSYQSDQE2G37ANCNFSM4IHIBN6A> .

[ErikHumphrey]

As I wrote on another thread, the problem is not the chevron, but the fact that you make your gutter the same color as the code background. This makes any content on the gutter confusing incl. the line numbers. Try setting a different gutter background and you'll see how everything will look perfectly normal immediately.

That is the default, and that's also how it is in Visual Studio. I think most people would agree that having a gutter colour different from the code background colour in Visual Studio Code would be quite abnormal, looking worse or at least archaic (NetBeans). By default, some editors only put a vertical hairline between the code and the gutter instead (Eclipse, IntelliJ IDEA, possibly VS). There's a sizeable margin between the code and the line numbers, which are all grey, right-aligned, and incrementing, so they're tough to confuse

[lllopo]

As I wrote on another thread, the problem is not the chevron, but the fact that you make your gutter the same color as the code background. This makes any content on the gutter confusing incl. the line numbers. Try setting a different gutter background and you'll see how everything will look perfectly normal immediately.

That is the default, and that's also how it is in Visual Studio. I think most people would agree that having a gutter colour different from the code background colour in Visual Studio Code would be quite abnormal, looking worse or at least archaic (NetBeans). By default, some editors only put a vertical hairline between the code and the gutter instead (Eclipse, IntelliJ IDEA, possibly VS). There's a sizeable margin between the code and the line numbers, which are all grey, right-aligned, and incrementing, so they're tough to confuse

Well ... much, much more readable for sure, don't know if it is archaic or abnormal. But I don't want to get in the same trend of discussions which is modern or not. Just sharing the fact that different gutter color definitely leads to zero problems with readability of the chevrons. Still, though - the old +/- style was just fine too indeed. I'm only strongly against bringing back the triangles on the tree and breadcrumbs, where the chevrons are much better.

[Batalex]

you make your gutter the same color as the code background

Well actually I do not, VS Code color themes do it.

[ErikHumphrey]

I'm only strongly against bringing back the triangles on the tree and breadcrumbs, where the chevrons are much better.

Agreed, the chevrons are fine in the breadcrumbs and tree. Looks a little off with the Explorer section headers (Open Editors, Projectname, Outline, etc.), but I think I'll get used to it. They're not actually too bad for code folding either, since they only display when moused over, but it could be an option/setting/preference.

[dmvvilela]

I hate it.. i prefer + and -.. Didnt exist the need to change that..

[lllopo]

you make your gutter the same color as the code background

Well actually I do not, VS Code color themes do it.

To be honest, I've override these in settings, so the themes can't mess with it on my setup.

[Batalex]

This means there is an issue either with the icons or with the color themes ;)

[jcklpe]

I am personally neutral on whether the folding icons should be +/- or a caret, but I do think it's worth bringing this issue to people's attention: #50359

While back I proposed that the code folding icons be more contextually placed in the editor. I did a quick mockup here:

I think there are quite a few ways that code folding could be improved on to improve their presentation, add more visual-semantic content, and clarify things like the hierarchy of given code. Just a thought.

[kanlukasz]

While back I proposed that the code folding icons be more contextually placed in the editor. I did a quick mockup here:

This look is too heavy, too thick lines. In addition, it will mix with the GIT lines in gutter. Bad idea imho.
By the way, what you have shown in the example is more about Indent Guides match than Code folding

[jcklpe]

While back I proposed that the code folding icons be more contextually placed in the editor. I did a quick mockup here:

This look is too heavy, too thick lines. In addition, it will mix with the GIT lines in gutter. Bad idea imho.
By the way, what you have shown in the example is more about Indent Guides match than Code folding

The mockup is not a final treatment for styling. It's just a copy paste move around of a screenshot that took me less than a minute to get across the idea of nesting. Some of the styling you're seeing, such as the thick yellow line or the pink highlighting isn't even part of the functionality I'm proposing, it's just other extensions that I happen to have installed on my personal version of vscode.

And yes the location of the code folding buttons is related to the indent guides but the point of the mockup is to show how the code folding buttons are placed contextual to their indent guides rather than in the gutter.

[jcklpe]

Here's a neatened up version using the current chevron look and using a vanilla factory default styled version of vscode.

and with some code folded to show how it would look different.

Even this is not meant to give some kind of final proposal on what this thing should look like. In my opinion what needs to be done is for the the code folding styling to be opened up for people to change how they want. You'll never reach a consensus on chevron versus +/- because fundamentally there isn't a "right" answer for that stuff, it's purely a personal preference. The fact that there's a proposed alternative styling like what I propose above I think is a good addition to the argument that there should be more options for code folding.

[ErikHumphrey]

I don't think that style would solve the problem,if there's HTML that happens to be the same colour as the chevron. It's more of an issue of how it looks when closed.

[QinBa]

Of course, people have different tastes. And I personally prefer +/- over >. However, is it really so difficult to provide both as options for users to choose? Strange ...

[jcklpe]

I don't think that style would solve the problem,if there's HTML that happens to be the same colour as the chevron. It's more of an issue of how it looks when closed.

The colors for the chevron were chosen by me when I made the mockup. I made them match elements of the CSS syntax highlighting for the purposes of visual cohesiveness but if this kind of system were implemented it should obviously have [theme token APIs] exposed to make it customizable, similar to how layering of color in brackets it's determined by setting in Bracket Pair Colorizer.

Of course, people have different tastes. And I personally prefer +/- over >. However, is it really so difficult to provide both as options for users to choose? Strange ...

I agree, I think it would be best to have both. I imagine the main MS devs are not prioritizing giving users the option to choose that due to their interest or prioritization of other features in vscode. This is an open source project so if you want you can always attempt to make those changes yourself too! Maybe an extension would be a good way to start.

I should probably myself just build an extension to do the layered code folding the way I've suggested but I haven't because I'm not actually that good of a dev (I'm really more a designer who knows enough code to get themselves in trouble and annoy people on stack exchange lol). Maybe someday though!

[miguelsolorio]

Thanks everyone for the feedback. I think this icon issue falls under #79130 which will allow you to configure the icons to your own liking, so please upvote that issue. In trying to keep our issue count on a manageable level, I'm going to close this as a duplicate. If you have any additional comments please leave them in that issue. Thanks!