Integrate codicons with webviews

This commit adds a reference to the codicons CSS file to enable
codicons inside the TraceViewPanel of the vs-code trace extension. It
follows the example provided in the [vs-code webview sample](
https://github.com/microsoft/vscode-extension-samples/tree/main/
webview-codicons-sample).

Fixes #89.

Signed-off-by: Hoang Thuan Pham <[email protected]>

vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts

@@ -114,7 +114,8 @@ export class TraceViewerPanel {
 
 	        // And restrict the webview to only loading content from our extension's `media` directory.
 	        localResourceRoots: [
-	            vscode.Uri.joinPath(this._extensionUri, 'pack')
+	            vscode.Uri.joinPath(this._extensionUri, 'pack'),
+	            vscode.Uri.joinPath(this._extensionUri, '..', 'node_modules', '@vscode/codicons', 'dist')
 	        ]
 	    });
 
@@ -270,6 +271,10 @@ export class TraceViewerPanel {
 	    // const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainStyle));
 	    // const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
 
+	    // Fetching codicons styles
+	    const webview = this._panel.webview;
+	    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, '..', 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
+
 	    // Use a nonce to whitelist which scripts can be run
 	    const nonce = getNonce();
 
@@ -280,7 +285,13 @@ export class TraceViewerPanel {
 				<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 				<meta name="theme-color" content="#000000">
 				<title>React App</title>
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}' 'unsafe-eval';style-src vscode-resource: 'unsafe-inline' http: https: data:;connect-src ${getTraceServerUrl()};">
+				<meta http-equiv="Content-Security-Policy"
+					content="default-src 'none';
+					img-src vscode-resource: https:;
+					script-src 'nonce-${nonce}' 'unsafe-eval';
+					style-src ${webview.cspSource} vscode-resource: 'unsafe-inline' http: https: data:;
+					connect-src ${getTraceServerUrl()};">
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>