Update editor placeholder

[bpasero]

For #130971

@lychung7 @daviddossett maybe you could give me a 👍 / 👎 on the visuals, I tried to get close to the designs from Lydia.

The main knobs to adjust is these CSS rules, and I was guessing the font-size and gap, so maybe you could just let me know if tweaks are needed.

vscode/src/vs/workbench/browser/parts/editor/media/editorplaceholder.css

Lines 6 to 34 in 7a9dee2

	.monaco-editor-pane-placeholder {
	padding: 0 16px 0 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	}
	.monaco-editor-pane-placeholder:focus {
	outline: none !important;
	}
	.monaco-editor-pane-placeholder .editor-placeholder-icon-container .codicon {
	font-size: 64px;
	}
	.monaco-editor-pane-placeholder .editor-placeholder-label-container {
	font-size: 14px;
	}
	.monaco-editor-pane-placeholder .monaco-link,
	.monaco-editor-pane-placeholder .monaco-link:hover {
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	margin-left: 5px;
	}

//cc @misolori

The easiest to get one of these editors is to:

• open a file
• close VSCode
• delete the file on disk
• start VSCode again

[bpasero]

Btw disregard the notification toast showing up, it will remove next.

[miguelsolorio]

Lydia is out for the next few days but we can take a look

[bpasero]

Thanks 🙏

Pushed a change to hide icon when height is below 200px:

[miguelsolorio]

Pushed some changes to make the text a little bit more readabale:

[bpasero]

Thanks! Merging in to get selfhost feedback early on, happy for more changes as a follow up as needed. I will also have to see how it looks like with multiple links appearing as actions.

I assume we would want to go with links and not buttons right?

[daviddossett]

Looks good! Links probably work better here given the longer strings used for actions. Feels a bit lighter compared to buttons as well.

One nit: there's a bit of inconsistency between the action phrasing. One is a brief call to action ("Try again") and another is a question ("Do you want to open it anyway?").

Could shorten to "Open anyway"?

[bpasero]

Thanks, yeah I can change the wording. One thing to keep in mind is that I still have to somehow move the previous error toast into this place holder including text and actions. This will probably mean:

• error text can potentially be really large (e.g. in case of an exception) and probably needs trimming or a way to expand/collapse
• actions will be quite arbitrary depending on the editor that threw the error

[bpasero]

Example of a more specific error message:

[miguelsolorio]

@bpasero would we be able to separate out the title + message? might help for readability, i know our toasts do not have titles so not sure what we can do here

[bpasero]

@misolori what we can always do is show the generic error message we had before and show the specifics as details, how would you style this in CSS?