media/vulncheckView: use codicons to distinguish severity

hyangah · hyangah · commit 62516a4b7483 · 2022-09-12T19:12:58.000Z
We differentiate two classes of vulnerabilities and add Warning/Info icons. - Warning for affecting vulnerabilities (vulnerable symbols are being used). - Info for unaffecting vulnerabilities (vulnerable symbols are not being used). Change-Id: I76b5df80d24eccb38c5744ece8a49dae8de698b7 Reviewed-on: https://go-review.googlesource.com/c/vscode-go/+/429238 Reviewed-by: Jamal Carvalho <jamal@golang.org> TryBot-Result: kokoro <noreply+kokoro@google.com> Run-TryBot: Hyang-Ah Hana Kim <hyangah@gmail.com>
diff --git a/media/vulncheckView.css b/media/vulncheckView.css
@@ -15,6 +15,20 @@
 	padding-bottom: 1em;
 }
 
+.vuln-icon-info, .vuln-icon-warning {
+	padding-right: 1em;
+	font-size: 14px;
+	display: inline;
+}
+
+.vuln-icon-info {
+	color: var(--vscode-list-warningForeground);
+}
+
+.vuln-icon-warning {
+	color: var(--vscode-list-errorForeground);
+}
+
 .vuln-desc {
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
diff --git a/media/vulncheckView.js b/media/vulncheckView.js
@@ -114,7 +114,7 @@ Found ${affecting?.length || 0} known vulnerabilities.`;
 
 			// TITLE - Vuln ID
 			const title = document.createElement('h2');
-			title.innerHTML = `<a href="${vuln.URL}">${vuln.ID}</a>`;
+			title.innerHTML = `<div class="vuln-icon-warning"><i class="codicon codicon-warning"></i></div><a href="${vuln.URL}">${vuln.ID}</a>`;
 			title.className = 'vuln-title';
 			element.appendChild(title);
 
@@ -191,7 +191,7 @@ for details.
 
 				// TITLE - Vuln ID
 				const title = document.createElement('h2');
-				title.innerHTML = `<a href="${vuln.URL}">${vuln.ID}</a>`;
+				title.innerHTML = `<div class="vuln-icon-info"><i class="codicon codicon-info"></i></div><a href="${vuln.URL}">${vuln.ID}</a>`;
 				title.className = 'vuln-title';
 				element.appendChild(title);
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
   },
   "extensionDependencies": [],
   "dependencies": {
+    "@vscode/codicons": "0.0.32",
     "diff": "4.0.2",
     "glob": "7.1.7",
     "json-rpc2": "2.0.0",
diff --git a/src/goVulncheck.ts b/src/goVulncheck.ts
@@ -81,6 +81,9 @@ export class VulncheckResultViewProvider implements vscode.CustomTextEditorProvi
 		const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(mediaUri, 'reset.css'));
 		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(mediaUri, 'vscode.css'));
 		const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(mediaUri, 'vulncheckView.css'));
+		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();
@@ -94,11 +97,15 @@ export class VulncheckResultViewProvider implements vscode.CustomTextEditorProvi
 				Use a content security policy to only allow loading images from https or from our extension directory,
 				and only allow scripts that have a specific nonce.
 				-->
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+				<!--
+					Use a content security policy to only allow loading specific resources in the webview
+				-->
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<link href="${styleResetUri}" rel="stylesheet" />
 				<link href="${styleVSCodeUri}" rel="stylesheet" />
 				<link href="${styleMainUri}" rel="stylesheet" />
+				<link href="${codiconsUri}" rel="stylesheet" />
 				<title>Vulnerability Report - govulncheck</title>
 			</head>
 			<body>
