Update icons to match the ones from VSCode july update (v1.37)

[numaru]

Some of the icons used by this extension are forked from the vscode ones. This PR update these icons with the July update ones and try to keep the same style for the custom ones.

Most of the icons can be found in the microsoft/vscode-icons repo.

Figma link

[AlexHaxe]

Can there be an option to keep the solid ones? Because I think they are much easier to spot, especially if you have a large number of tests and you want to see which ones failed (https://github.com/hbenl/vscode-test-explorer/issues/8 might help here).

[numaru]

Yes, this should be doable. What do you guys expect to be kept or optional in this list?

group	old	new	optional
1) test result icons
pass	_	_	_
failed	_	_	_
skipped	_	_	_
running-failed	_	_	_
2) test running icons
scheduled	_	_	_
running	_	_	_
pending	_	_	_
3) vscode icons
debug	_	_	_
go-to-file	_	_	_
reload / reloading	_	_	_
start	_	_	_
stop	_	_	_
4) misc
errored	_	_	_
duplicate	_	_	_
activity bar icon	_	_
expand-all	✔️

[AlexHaxe]

I don't think mixing styles makes much sense, so they should be either solid or outlined.

[hacknug]

Imho they should feel as native as possible, even if that means some of us might end up not liking the change too much.

[AlexHaxe]

Since the VSCode people didn't update the "Problems" icons in statusbar, one could argue that solid icons also fall under "native".

But I don't really care so much about solid vs outlined icons as long as they are highly distinguishable and as long as I can easily see what tests failed out of a sea of a few dozens or hundreds of green tests. That's where #8 would help, but since I don't have the time to do it, I can't expect someone else to step in, so chances of seeing it soon are slim.

[hbenl]

@numaru Thanks for the icons, they're beautiful. Unfortunately I have to agree with @AlexHaxe that they make it harder to spot the states in a long list of tests - the shapes are so similar that you need the color to differentiate and that becomes hard when there are only thin lines. Perhaps we could have icons that still emphasize the outlines but are also filled with the state's color? Also, please have a look at issue #90: Light mode poses a special challenge for icon design because the tree items usually have a light background, but get a dark background when they're selected - and we have to use the same icon for both backgrounds.

[numaru]

@AlexHaxe It is planned to also replace these icons. Some of the icons from this PR could be updated to better match the future ones (e.g. the debug icon and the Erlenmeyer flask).

@hbenl Ok. if I understand right, the visibility problem on huge test suites only affect the pass and failed icons. Do you think a filled version of both can do the trick?

I think we could stall this PR until the next vscode release since the vscode team is still working on icons.

[hbenl]

Do you think a filled version of both can do the trick?

Yes, that's what I was thinking about. But I agree that it makes sense to wait until the VS Code icons have settled.

[miguelsolorio]

FYI: other extensions are also using similar icons to the test explorer:

ToDo Tree

Docker

[AlexHaxe]

I don't know if it's possible, but if failed tests also used a red text colour (or background color) they would stand out more, regardless of solid vs. outlined icons. I don't think green tests need to be coloured green, because most of the time you're interested in failing tests.

[numaru]

I updated the pull request with the latest changes from the figma.

I also added filled icons which can be enabled by defining testExplorer.filledIcons: true in the config. I'm not sure about the implementation of the config option.

[matepek]

Cool. I like this PR. I've read all the comments. My preference would be: outlined green and solid red. Bests,

[JDaance]

I have been using the "native" icons in the native testing feature for a couple months and my eyes still has not gotten used to them being both thin and vague. I love the original icons