File and folder icon theme feature

[pflannery]

Relates to #211

Adds ability to create color and icon themes using css.
Adds ability to create an icon theme (css only).
Adds ability to switch icon theme's independently of color themes
Doesn't break current textmate themes

Examples of icon themes mixed with different color themes: (icons probably not to be included in the final merge)

[msftclas]

Hi @pflannery, I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!

This seems like a small (but important) contribution, so no Contribution License Agreement is required at this point. Real humans will now evaluate your PR.

TTYL, MSBOT;

[pflannery]

I couldn't find the svg icons for the "file and open folder" so I didn't add any css for them.

This would be the base css classes I would of liked to of added to https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/files/browser/media/explorerviewlet.css

/* explorer icons */
.explorer-folders-view .folder-icon {
    padding-left: 22px;
    background: url(media/folder.svg) 1px 4px no-repeat;
}

.explorer-folders-view .expanded .folder-icon {
    background: url(media/folder_open.svg) 1px 4px no-repeat;
}

.explorer-folders-view .file-icon {
    padding-left: 22px;
    background: url(media/file.svg) 1px 4px no-repeat;
}

.explorer-working-files .working-files-item {
    padding-left: 22px;
    background: url(media/file.svg) 1px 4px no-repeat;
}

Themes would only need to override the background-url for the file icon using the file-type-{ext} class.

[msftclas]

@pflannery, Thanks for signing the contribution license agreement so quickly! Actual humans will now validate the agreement and then evaluate the PR.

Thanks, MSBOT;

[bpasero]

@aeschli is it possible with our theming story to add global CSS rules that alter things outside the monaco editor? I would think not?

[aeschli]

@bpasero Yes sure. The theming CSS rules are all global and can be used anywhere. But there's a limited set of standardized colors that TextMate themes define and they are editor related. Custom colors are also possible, of course.

[bpasero]

@pflannery currently you cannot really theme anything outside the editor. @aeschli please chime in unless I am correct with that statement.

[JoshAddington]

Is this PR going to be merged? It sounds like @aeschli is saying that this is possible. After getting used to file icons in Sublime and Atom, it's a bit of a dealbreaker not to support them.

[bpasero]

@JoshAddington we can merge this in but it is NOT possible to add file icons to the explorer via theme extensions.

[pflannery]

@bpasero @aeschli I see now how theming worked with tm.

This evening I added the rework css parser which allows theming using css. This doesnt break tm themes.
I've added an example 'monokai with icons' theme.
The css selectors are controlled by a look up map and only those selectors can be used in css themes. ([attr=value] is allowed)
I've also moved the filename to attributes in the file items so we can detect gulp, grunt and bower files etc...

These are the allowed css selector\property definitions.

https://github.com/pflannery/vscode/blob/file-folder-icons/src/vs/workbench/services/themes/common/themeCssService.ts

Example theme using css for editor and explorer

https://github.com/pflannery/vscode/blob/file-folder-icons/extensions/theme-monokai-with-icons/themes/theme-monokai-with-icons.css

Example of css monokai theme with icons:

[nelsonlaquet]

Nice!

One thing though, I don't know if it's a good idea to tie icons directly in with the theme. I know that it works now, and it'll likely be the best solution until more work is done on Microsoft's side. However, I I find it likely that a person could really like a particular theme, but the theme's author either doesn't support icons, or supports icons that the user doesn't like.

Since the presence of icons doesn't affect anything structurally, I wonder how feasible it would be to move the concept of an icon pack outside of the theme infrastructure; so users can mix and match themes with icons. Of course, that would require much more code than simply hijacking themes.

[pflannery]

if your happy for this to happen then

1. we can add plugins like css whitespace for optional nesting and rework var plugin for css-next variables etc etc...
2. I can change the filename attribute to data-filename= for html validation
3. add some unit tests
4. squash to one commit

@nelsonlaquet yeah would be nice to be able swap out the icons only. I still think themes could still choose to provide their own icons to match their colouring styles.

[Tyriar]

Super excited to see some progress on this!

I don't think themes are the right place to put icons though. The wrong icons would ruin a good theme and it would probably end up spawning a bunch of derivative themes just for icons: monokai-flat-icon, monokai-someother-icon, monkai-dimmed-flat-icon, ... You can imagine how it would get out of hand.

[pflannery]

@Tyriar your right. I can also see many derivatives either way its done i.e. dark-web-icon-pack, high-contrast-web-icon-pack, light-web-icon-pack etc...
also clashes like .cs extensions for c# or coffee script would mean csharp-web-icon-pack etc...

I've always thought of the term theme to mean colours, icons, wallpapers and sounds (sounds not being relevant here).

I think we could setup themes so that they declare what components they contain. i.e. icons, syntax or both.
Then the ide allows us to swap out these components and also giving us the choice to turn off icons all together.

For the global dark, light, or high contrast themes we could eventually drop these in favour of css controlling the entire ide.
These global's could then be turned in to generic default, dark, light, or hc syntax themes.

[Code-DJ]

@pflannery I glanced over and found you are using png. Will this work well on retina display?

[pflannery]

@Code-DJ it's really only in order to get it to work and show its working. The example icon pack will be removed before it's merged.

[pflannery]

@bpasero I've tried to add a unit test but I cant seem to run tests.

When using the launcher it doesn't run my test.

When using ctrl+shift+t I'm told weak is not a 32bit program. Which is weird because I can build and launch vs code with no errors.

Is there something I need to do on windows for this?

[bpasero]

@pflannery you should be able to run the tests from the command line easily by typing scripts/test.sh

[pflannery]

you should be able to run the tests from the command line easily by typing scripts/test.sh

thanks @bpasero . I was trying to use the launcher or test task but they aren't working.

Debugging is still a bit of chore but have it working like this

scripts\test.bat --debug-brk -f ^cssTheme

[pflannery]

@aeschli @bpasero I didn't want to just go off and do this without first discussing with you.
Now that there is the new json theme capability I think we should have strategy pattern for each theme file format (json, tm and css).
The current loading and parsing code would be exactly the same as now but will be encapsulated and easier to test and support for each theme file format.

How's that sound?

[be5invis]

@pflannery How about supporting themeing more UI components, like the color of the status bar?

[bpasero]

@pflannery I appreciate your work but we are currently not planning to support theming outside the editor. We might revisit this post GA when we decide our 6 months roadmap and keep you in the loop.

[pflannery]

@bpasero I hope the plan will include

• all theme's to get the same extensibility as what the high contrast theme has now.
• able to use css to create theme's (in this PR)
• extensible folder and file icon themes (in this PR)
• resource colouring (data attributes added in this PR make it possible)
• allow users to override theme style's using a preference file in .vscode i.e. contained in ./.vscode/theme.css (json|tm|etc..)

Would be a shame to be stuck with editor themes via abstracted config json\xml files

[bpasero]

@chrisdias fyi on the last comment for planning

[ironcladlou]

Sad to see this one go. Somehow the monochrome and same-weighted text in the folder view of VSCode makes it extremely difficult for me to read compared to all other editors which have either colorization or at least bold weights for folders to distinguish them from files. I'll be seeking a hack in the meantime.

Edit: hack discovered

[glen-84]

This seems very specific to one area of theming. In my opinion, you should be able to theme (apply CSS to) any part of the application. This is very easy to do when you're using something like Electron.

Related: #459

[nelsonlaquet]

@glen-84 that could cause issues and massive incompatibilities between plugins. Sure; it would open up the potential for a lot of awesome things, but I get the feeling the VSCode dev team wants to keep things as locked down as possible to ensure a consistent and usable experience.

[glen-84]

@nelsonlaquet You're no fun! 😁

But seriously, I don't believe that custom CSS would cause massive incompatibilities between plug-ins. People love customizing things, and it builds community.

I really hope that Microsoft doesn't do the Windows thing again, where you literally have to edit registry values just to change the font.

[HunterMitchell]

@bpasero So, what is the current stance on #211 and this (#3200)? Can we expect Icon support within the file explorer? Honestly, everything is monotone and it takes me a while (in projects with many files) to actually distinguish between files and folders.

[Tyriar]

@FEARCODE see #211 (comment) for a recap of the current situation. I'd love to see it added personally.

[HunterMitchell]

@Tyriar I agree. I am not sure how they went about their research, but a monotone list of names is hard to look at when I have a ton of files. Also, his comment on "multi-colored" distracting icons is false. As pictured here, these icon DRASTICALLY improve the speed at which i can find my folder/files. #211 (comment)

I think that themes should also control what the icons look like and i do agree there should be an option to disable them.

[tht13]

Since we are now using electron 0.37 (Based on chrome 49) could we not use css properties(variables) to solve the icon url path issue, or even all of the css extensibility.
see: https://www.chromestatus.com/feature/6401356696911872

As the properties can also be accessed through JavaScript, something then like a .json file could be used to define the properties and then VSCode applies them to the UI. This would prevent devs using css to alter things they shouldn't.

[pflannery]

@tht13 JSON is about an hours work away in the PR but I've stopped whilst we wait for the road map.

This would prevent devs using css to alter things they shouldn't.

I don't agree on your comments regarding CSS. If I don't like an extension then I just remove it.
Besides we can preview a icon\color themes before committing to using them.
On top of that this PR ensures CSS is only used for icons in the explorer.

Atom is a good example of letting designers build themes using less. Their approach is a modern approach. Example
I've used rework in this PR and not against less or sass. I want to keep this minimal as possible as there are many other people's preferences which can be added over time.

[pflannery]

I've just looked at the amount of changes that have been since this PR was active and I've decided to abandon this PR as it's too old now.

[tht13]

@pflannery I didn't realize you had implemented it in such a way, nice!

Using native css variables was just a selection as they can then be manipulated from the javascript side more easily. I hope this comes back soon in a new PR, would be really cool to have!

[kruncher]

@pflannery what is the name of the third theme in the first screenshot?

[pflannery]

@kruncher It was an example theme (example-2) I made with this PR to show this change working

css
https://github.com/pflannery/vscode/blob/1275418cf0af648e8dbea2cdd412e2f47b9d25b3/extensions/theme-example-icons/themes/example-2-colors.css

[kruncher]

@pflannery it looks awesome; I'd totally use that as my theme! I love the icon style as well.

Thanks, I will see if I can modify an existing .tmTheme file to make this work.

[pflannery]

@kruncher icons are here if you want them https://github.com/pflannery/vscode/tree/1275418cf0af648e8dbea2cdd412e2f47b9d25b3/extensions/theme-example-icons/themes/example-2-icons