Improved Welcome Screen

[chpxu]

Issue Type: Feature Request/UI
No relevant Issues found.

I believe that as a long-time user of VSCode, the Welcome screen is mere redundant to me, however I feel that for newer users, that the layout doesn't seem that appealing.

Note: * means more info at the bottom

• First of all, the title and subtitle is hidden on viewport with a height < 685px (This was the css that dev tools showed:

[workbench.main.css:14]
.monaco-workbench>.part.editor>.content .welcomePageContainer.max-height-685px .title {
  display: none;
}

I understand that it may not be worth to show on small heights, but I don't think a little scrolling would harm anyone. I believe cramming a bunch of stuff could cause more confusion. The title and subtitle should be placed aligned in the middle, with the VSCode icon (coloured or the non-coloured version, I'm personally split on this and leave it up to you should you consider my suggestion) on top of the text
(maybe text sits on top, overlapping? Again, split).

• Next is what comes under it, I believe this should be the "Help" box.
  • Some users may click the links given, some may just want to start coding right away
  • This could show to new users that the editor is very capable, and there is thorough help for anything needed. This could in turn quickly ease them into usage as they would have a definite source of help.
  • This should be its own container, definitely not full-width, but more center aligned like everything else, maybe set margins/padding around the container to present it neatly.*
• Under the "Help" container, should be, in my opinion, a new category called "Files", which would be a merge of the current "Start" and "Recent" categories.
  • The layout of this is similar to the "Help" I mentioned above, and place the options inside said container and possibly separate them with title and a divider*
• Finally, under those should be the 2 categories would be the "Customize" and "Learn"

• In terms of layout, everything is aligned in the middle, with some padding at least on the left and right so everything is more to the center, and easier to read. Could be themable (not sure if it is or isn't, the buttons change but that just might be a take this background colour and darken it type thing)
  These blue texts should probably be buttons, or at least have more padding and either an underline, or if you go the button route, contain the main button with the main text, and the extra text outside it perhaps.

Even I know I didn't explain it clearly enough, and would be happy to provide a HTML/CSS Mockup of what I mean, please let me know if so!

TODO List:

• Design
  • Create Design
  • Implement
• Styling
  • Edit text sizes
• Probs more stuff

[chpxu]

Inspired by Atom, maybe something like this, but of course with the VSCode categories, links etc

[chrmarti]

@beastdestroyer Thanks for the write up! PRs would be best, if you want to give it a try.

[chpxu]

Hey @chrmarti Sure I would love to! I haven't contributed to VSCode before, probably will take some time to get used to insert awkward laugh here

Also where are the files which contribute to the Welcome screen at? I use the User setup.

[chrmarti]

It's all minified in the installs. https://github.com/Microsoft/vscode/wiki/How-to-Contribute will get you running out of source. You can then modify the Welcome page files on disk (there are 4: https://github.com/Microsoft/vscode/tree/master/src/vs/workbench/parts/welcome/page/electron-browser).

[chpxu]

All right, thanks very much! laughs in excitement Time to put my newly learnt TS knowledge to use :)

[chpxu]

@chrmarti Editing is going pretty well, although an unwanted CSS Class .max-hright-685px keeps appearing although I deleted its CSS, it isn't in the TS Template, any idea?

[chrmarti]

That is added/removed dynamically based on the height: https://github.com/Microsoft/vscode/blob/504c890ea1cb1d0ad310cf9ed620fc89264c18aa/src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts#L207

[chpxu]

@chrmarti Just curious, how do you get the VSCode logo onto the welcome screen. So far I've just been testing by relatively linking to an OSS img file but it's a bit hard to resize it (I think it was called letterbox or something)

• Is this the right image to use?
• How do I transfer it to use VSCode's icon?
• How can I resize the image, similar to how the logo is displayed when there are. no tabs open?

Thanks!

[chrmarti]

The background image is set here: https://github.com/Microsoft/vscode/blob/90171dab977e4cea933a01824ed0313d86eccdc8/src/vs/workbench/browser/parts/editor/editorGroupView.ts#L1427

The default icon is replaced with the VS Code icon during our build process. To test what it will look like you could replace the letterpress SVGs in the source with those that you have in your installation folder.

[chrmarti]

@beastdestroyer Let us know if you are you working on this. It will make sense to submit PRs early so we can provide feedback.

[chpxu]

Apologies, my build process broke since I had to reinstall VS2017, and then my vscode repo got corrupt so I had to redownload and refork. Also, I have been taking time slowly for school business too. Furthermore it's all just getting used to the code structure. If I don't make it by this month's iteration I'll probably aim for November. Thanks.

[chpxu]

@chrmarti Getting this error after running yarn run watch, then the bat script:

errorCode: 'load',
  moduleId: 'vs/code/electron-main/main',
  neededBy: [ '===anonymous1===' ],
  detail:
   { Error: ENOENT: no such file or directory, open 'C:\Users\John\Documents\GitHub\vscode\out\vs\code\electron-main\main.js'
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\John\\Documents\\GitHub\\vscode\\out\\vs\\code\\electron-main\\main.js' } }

When I have time to work on it I'll investigate further, thanks.

[chrmarti]

@beastdestroyer It might be best to first make sure you are starting from a clean repository (careful this will delete files not checked in):

git clean -xfd
yarn
yarn watch

Also check if you have any local changes and stash these to ensure these are not the cause.

[chpxu]

Thanks! It's all working properly now, will work as much as I can to get this going.

[chpxu]

@chrmarti This is an initial test, without any logo because I wish to save finer details for later. There are a few questions I have regarding it:

1. Does this meet Code's guidelines (if any)?
2. Anything that may seem odd and could do with reworking?

Thanks, I'll keep working on it

[usernamehw]

Why would anybody want scroll on welcome page? The page layout is fine as it is... If you have a lot of energy, can you please make some small improvements to it? Like:

• 5 recent projects is not enough... would be nice to have 10

• It would be nice to have folder icon (from the active icon theme) for recent folders

• Welcome page. Pin a project to the Recent Projects list Welcome page. Pin a project to the Recent Projects list #30646

• Recent projects in Welcome should be sorted by last closed Recent projects in Welcome should be sorted by last closed #59090

• Unselectable text on page is ... just why?

• Using custom checkbox (like in Settings GUI) instead of native one?
  

• Recent should probably be renamed Recent folders or Recent workspaces since there is no recent files in that list

• Why does it have different slogan than vscode webpage? Editing evolved vs Code editing. Redefined.

• Is it possible to use icons for GitHub and StackOverflow? Printable keyboard cheatsheat can use pdf icon (from the active icon theme).

• Missing keybinding hint for changing theme
  

• Is it possible to use the same styling for keybindings as in Keybindings GUI?
  
  

• Interface overview doesn't care about items positions (also terminal position)
  

[chpxu]

I would like to say this is my first time exploring the codebase, but yes I m very optimistic. Thank you for your feedback.

5 recent projects is not enough... would be nice to have 10

I'll note that.

Recent should probably be renamed Recent folders or Recent workspaces since there is no recent files in that list

I done that originally but I remember I had a directory which pointed to a file, unless I am just tripping in which case I rest my point. I'll change it after.

It would be nice to have folder icon (from the active icon theme) for recent folders

Is it possible to use icons for GitHub and StackOverflow? Printable keyboard cheatsheat can use pdf icon (from the active icon theme).

Folder icons stuff is definitely an area I have no experience with. But I'll definitely put StackOverflow and GitHub icons.

Welcome page. Pin a project to the Recent Projects list #30646

Recent projects in Welcome should be sorted by last closed #59090

I agree with this too, despite the fact I usually disable the Welcome screen

Why does it have different slogan than vscode webpage? Editing evolved vs Code editing. Redefined.
I have no clue, I only noticed it recently, I'll definitely just use the website slogan.

Missing keybinding hint for changing theme

Will add it.

Is it possible to use the same styling for keybindings as in Keybindings GUI?

I think that it very doable, I'll experiment with layout too.

Unselectable text on page is ... just why?

No clue why, I think this is the case with the Settings GUI too.

Interface overview doesn't care about items positions (also terminal position)

I'll see what I can edit, I suppose this was introduced a while back and hasn't been updated since then.

Using custom checkbox (like in Settings GUI) instead of native one?

I tried doing that; it kinda works but I'll have to dig deeper to find the specific styling.

[usernamehw]

I'm not from vscode team, so you should ask @chrmarti before implementing any of those items, I just wrote random stuff about welcome page that I don't like.

[chpxu]

Yah I had actually planned to do some of them such as the checkbox, but yes I agree. You might try to open separate issues for some of them too

[chrmarti]

@beastdestroyer I think the Welcome page should work without scrolling, its main function is to give an overview of the main features of the product and a few important external resources. I'm also not a fan of making the title / link texts more verbose, they should be short so they are easy to skim through.

[chpxu]

@chrmarti I have been. unable to do much progress due to life being more hectic. Unfortunately I muat unassign myself from this project. Sorry about that. I am still very optimistic for improvements and I hope someone else can take over. Again I apologise, have a great time

[JacksonKearl]

We have since redesigned the welcome page.