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 <[email protected]>
eclipse-cdt-cloud · May 5, 2023 · 83c784f · 83c784f
1 parent 9513f85
commit 83c784f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/...ion/src/trace-explorer/available-views/trace-explorer-available-views-webview-provider.ts b/...ion/src/trace-explorer/available-views/trace-explorer-available-views-webview-provider.ts
@@ -40,7 +40,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, '..', 'node_modules', '@vscode/codicons', 'dist')
 	        ]
 	    };
 
@@ -109,6 +110,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, '..', 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
 
 	    // Use a nonce to only allow a specific script to be run.
 	    const nonce = getNonce();
@@ -120,7 +122,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>
 

diff --git a/...tension/src/trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider.ts b/...tension/src/trace-explorer/opened-traces/trace-explorer-opened-traces-webview-provider.ts
@@ -69,7 +69,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, '..', 'node_modules', '@vscode/codicons', 'dist')
 	        ]
 	    };
 
@@ -137,6 +138,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, '..', 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
 
 	    // Use a nonce to only allow a specific script to be run.
 	    const nonce = getNonce();
@@ -148,7 +150,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>
 

diff --git a/...xtension/src/trace-explorer/properties/trace-explorer-properties-view-webview-provider.ts b/...xtension/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, '..', 'node_modules', '@vscode/codicons', 'dist')
+          ]
       };
       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, '..', 'node_modules', '@vscode/codicons', 'dist', '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>

diff --git a/vscode-trace-extension/src/trace-viewer-panel/trace-viewer-webview-panel.ts b/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')
 	        ]
 	    });
 
@@ -241,6 +242,10 @@ export class TraceViewerPanel {
 	}
 
 	private _getHtmlForWebview() {
+	    const webview = this._panel.webview;
+	    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, '..', 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
+	    const nonce = getNonce();
+
 	    try {
 	        return this._getReactHtmlForWebview();
 	    } catch (e) {
@@ -251,6 +256,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>
 
@@ -270,6 +283,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 +297,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>