Vscode: Limit resource size to ensure resource inline

[rebornix]

• VSCode Version: Insider
• OS Version: macOS

Our editor compile pipeline will merge CSS and inline resources (images) and the size limit is 5kb. As we added two large files, Monaco Editor shipped with a new contrib folder with two images which are over size limit.

All other icons are merged into editor.main.css, let's optimize String_16x.svg.

Reproduces without extensions: Yes/No

[jrieken]

Yeah, we get these icons from our central repo. I am not authoring them, no clue how to make them smaller

[jrieken]

So, apparently this is done on purpose because IE fails to load this SVG when inlined. @alexandrudima knows the background story on this

[alexdima]

We can increase the size from 3000 to something that contains this svg size

But. IE cannot render specifically this svg file when it is inlined.

See https://github.com/Microsoft/vscode/blob/a9398d49adc44ab8771275bccd197a50f975b0a4/build/gulpfile.editor.js#L67

See https://github.com/Microsoft/monaco-editor/issues/336

[jrieken]

@chryw Can you help?

[alexdima]

... It is an insane IE11 bug ... triggered specifically by this svg ... only when the svg is inlined in the CSS ...

https://github.com/Microsoft/monaco-editor/issues/336#issuecomment-275326624

Note that the black squares only seem to appear in IE 11 on Windows 10, but not in IE 11 on Windows 8.1 or Windows 7.

[chryw]

@jrieken could you point me to the svg file that's broken? I don't have the one used in VS Code. The first batch of VS Code icon were added by someone who left the company a while ago.

Now I only have the latest "String" icon for VS IDE that doesn't have a box around "abc". If that's ok then here are the files -
String_vscode.zip

[jrieken]

its this and the inverted one: https://github.com/Microsoft/vscode/blob/master/src/vs/editor/contrib/suggest/browser/media/String_16x.svg

[jrieken]

So, this is how they look. cc @Microsoft/vscode

Before

After

[jrieken]

We have a new icons here.