Show Warning When a markdown.styles fails to load (#27105)

Fixes #8488

**Bug**
Currently there is no indication in the markdown preview when a `markdown.styles` element fails to load

**Fix**
Show an alert then a stylesheet does not load

Author: mjbvz

extensions/markdown/media/loading.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+(function () {
+	const unloadedStyles = [];
+
+	window.onStyleLoadError = (event) => {
+		const source = event.target.dataset.source;
+		unloadedStyles.push(source);
+	};
+
+	window.addEventListener('load', () => {
+		if (!unloadedStyles.length) {
+			return;
+		}
+		const args = [unloadedStyles];
+		window.parent.postMessage({
+			command: 'did-click-link',
+			data: `command:_markdown.onPreviewStyleLoadError?${encodeURIComponent(JSON.stringify(args))}`
+		}, 'file://');
+	});
+}());

extensions/markdown/src/extension.ts

@@ -15,6 +15,8 @@ import { ExtensionContentSecurityPolicyArbiter, PreviewSecuritySelector } from '
 import { MDDocumentContentProvider, getMarkdownUri, isMarkdownFile } from './previewContentProvider';
 import { TableOfContentsProvider } from './tableOfContentsProvider';
 import { Logger } from "./logger";
+import * as nls from 'vscode-nls';
+const localize = nls.loadMessageBundle();
 
 interface IPackageInfo {
 	name: string;
@@ -166,6 +168,10 @@ export function activate(context: vscode.ExtensionContext) {
 		previewSecuritySelector.showSecutitySelectorForWorkspace(resource ? vscode.Uri.parse(resource).query : undefined);
 	}));
 
+	context.subscriptions.push(vscode.commands.registerCommand('_markdown.onPreviewStyleLoadError', (resources: string[]) => {
+		vscode.window.showWarningMessage(localize('onPreviewStyleLoadError', "Could not load 'markdown.styles': {0}", resources.join(', ')));
+	}));
+
 	context.subscriptions.push(vscode.workspace.onDidSaveTextDocument(document => {
 		if (isMarkdownFile(document)) {
 			const uri = getMarkdownUri(document.uri);

extensions/markdown/src/previewContentProvider.ts

@@ -166,7 +166,7 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 	private computeCustomStyleSheetIncludes(uri: vscode.Uri): string {
 		if (this.config.styles && Array.isArray(this.config.styles)) {
 			return this.config.styles.map((style) => {
-				return `<link rel="stylesheet" href="${this.fixHref(uri, style)}" type="text/css" media="screen">`;
+				return `<link rel="stylesheet" data-source="${style.replace(/"/g, '&quot;')}" onerror="onStyleLoadError(event)" href="${this.fixHref(uri, style)}" type="text/css" media="screen">`;
 			}).join('\n');
 		}
 		return '';
@@ -238,6 +238,7 @@ export class MDDocumentContentProvider implements vscode.TextDocumentContentProv
 					${csp}
 					<meta id="vscode-markdown-preview-data" data-settings="${JSON.stringify(initialData).replace(/"/g, '&quot;')}" data-strings="${JSON.stringify(previewStrings).replace(/"/g, '&quot;')}">
 					<script src="${this.getMediaPath('csp.js')}" nonce="${nonce}"></script>
+					<script src="${this.getMediaPath('loading.js')}" nonce="${nonce}"></script>
 					${this.getStyles(uri, nonce)}
 					<base href="${document.uri.toString(true)}">
 				</head>