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 [1].

[1] https://github.com/microsoft/vscode-extension-samples/tree/main/webview-codicons-sample

Fixes #89.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>

Author: hoangphamEclipse

package.json

@@ -14,6 +14,7 @@
     "start:openvscode-server": "cd test-resources/openvscode-server-v1.77.3-linux-x64/bin/; ./openvscode-server ${0}"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "^11.0.0",
     "lerna": "^3.20.2"
   },
   "workspaces": [

vscode-trace-extension/package.json

@@ -137,6 +137,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@vscode/codicons": "^0.0.33",
     "ag-grid-community": "^28.2.0",
     "ag-grid-react": "^28.2.0",
     "chart.js": "^2.8.0",

vscode-trace-extension/src/trace-explorer/available-views/trace-explorer-available-views-webview-provider.ts

@@ -41,7 +41,8 @@ export class TraceExplorerAvailableViewsProvider implements vscode.WebviewViewPr
 	        enableScripts: true,
 
 	        localResourceRoots: [
-	            vscode.Uri.joinPath(this._extensionUri, 'pack')
+	            vscode.Uri.joinPath(this._extensionUri, 'pack'),
+	            vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons')
 	        ]
 	    };
 
@@ -110,6 +111,7 @@ export class TraceExplorerAvailableViewsProvider implements vscode.WebviewViewPr
 	private _getHtmlForWebview(webview: vscode.Webview) {
 	    // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
 	    const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'pack', 'analysisPanel.js'));
+	    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons', 'codicon.css'));
 
 	    // Use a nonce to only allow a specific script to be run.
 	    const nonce = getNonce();
@@ -121,7 +123,14 @@ export class TraceExplorerAvailableViewsProvider implements vscode.WebviewViewPr
 				<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()};
+					font-src ${webview.cspSource}">
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>
 

vscode-trace-extension/src/trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider.ts

@@ -70,7 +70,8 @@ export class TraceExplorerOpenedTracesViewProvider implements vscode.WebviewView
 	        enableScripts: true,
 
 	        localResourceRoots: [
-	            vscode.Uri.joinPath(this._extensionUri, 'pack')
+	            vscode.Uri.joinPath(this._extensionUri, 'pack'),
+	            vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons')
 	        ]
 	    };
 
@@ -138,6 +139,7 @@ export class TraceExplorerOpenedTracesViewProvider implements vscode.WebviewView
 	private _getHtmlForWebview(webview: vscode.Webview) {
 	    // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
 	    const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'pack', 'openedTracesPanel.js'));
+	    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons', 'codicon.css'));
 
 	    // Use a nonce to only allow a specific script to be run.
 	    const nonce = getNonce();
@@ -149,7 +151,14 @@ export class TraceExplorerOpenedTracesViewProvider implements vscode.WebviewView
 				<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()};
+					font-src ${webview.cspSource}">
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>
 

vscode-trace-extension/src/trace-explorer/properties/trace-explorer-properties-view-webview-provider.ts

@@ -20,7 +20,10 @@ export class TraceExplorerItemPropertiesProvider implements vscode.WebviewViewPr
       webviewView.webview.options = {
           // Allow scripts in the webview
           enableScripts: true,
-          localResourceRoots: [vscode.Uri.joinPath(this._extensionUri, 'pack')],
+          localResourceRoots: [
+              vscode.Uri.joinPath(this._extensionUri, 'pack'),
+              vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons')
+          ]
       };
       webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
   }
@@ -35,6 +38,7 @@ export class TraceExplorerItemPropertiesProvider implements vscode.WebviewViewPr
   private _getHtmlForWebview(webview: vscode.Webview) {
       // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
       const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'pack', 'propertiesPanel.js'));
+	  const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons', 'codicon.css'));
 
       // Use a nonce to only allow a specific script to be run.
       const nonce = getNonce();
@@ -46,8 +50,15 @@ export class TraceExplorerItemPropertiesProvider implements vscode.WebviewViewPr
 				<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()};">
-				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
+				<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()};
+                    font-src ${webview.cspSource}">
+				<link href="${codiconsUri}" rel="stylesheet" />
+                <base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>
 
 			<body>

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

@@ -115,7 +115,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, 'lib', 'codicons'),
 	        ]
 	    });
 
@@ -242,6 +243,10 @@ export class TraceViewerPanel {
 	}
 
 	private _getHtmlForWebview() {
+	    const webview = this._panel.webview;
+	    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'lib', 'codicons', 'codicon.css'));
+	    const nonce = getNonce();
+
 	    try {
 	        return this._getReactHtmlForWebview();
 	    } catch (e) {
@@ -252,6 +257,14 @@ 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 ${webview.cspSource} vscode-resource: 'unsafe-inline' http: https: data:;
+					connect-src ${getTraceServerUrl()};
+					font-src ${webview.cspSource}">
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>
 
@@ -271,6 +284,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, 'lib', 'codicons', 'codicon.css'));
+
 	    // Use a nonce to whitelist which scripts can be run
 	    const nonce = getNonce();
 
@@ -281,7 +298,14 @@ 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()};
+					font-src ${webview.cspSource}">
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<base href="${vscode.Uri.joinPath(this._extensionUri, 'pack').with({ scheme: 'vscode-resource' })}/">
 			</head>
 

vscode-trace-extension/webpack.config.js

@@ -1,6 +1,13 @@
 'use strict';
 
 const path = require('path');
+const CopyPlugin = require("copy-webpack-plugin");
+
+/**
+ * Path to Codicons css and ttf files.
+ */
+const codiconsCssPath = path.resolve(__dirname, '..', 'node_modules', '@vscode', 'codicons', 'dist', 'codicon.css');
+const codiconsFontPath = path.resolve(__dirname, '..', 'node_modules', '@vscode', 'codicons', 'dist', 'codicon.ttf');
 
 /**@type {import('webpack').Configuration}*/
 const config = {
@@ -65,6 +72,14 @@ const config = {
             }
         ]
     },
+    plugins: [
+        new CopyPlugin({
+          patterns: [
+            { from: codiconsCssPath, to: "./codicons" }, // Copy codicons css and font files to lib/codicons so that they are packaged with the extension
+            { from: codiconsFontPath, to: "./codicons" }
+          ],
+        }),
+    ]
 }
 
 module.exports = config;