media/vulncheckView: use codicons to distinguish severity
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
index 67035ab..4531979 100644
--- 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
index f03f61d..a435f74 100644
--- a/media/vulncheckView.js
+++ b/media/vulncheckView.js
@@ -114,7 +114,7 @@
// 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 @@
// 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
index 51247c4..5e786a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.36.0-dev",
"license": "MIT",
"dependencies": {
+ "@vscode/codicons": "0.0.32",
"diff": "4.0.2",
"glob": "7.1.7",
"json-rpc2": "2.0.0",
@@ -46,6 +47,7 @@
"yarn": "1.22.10"
},
"engines": {
+ "node": ">=12.0.0",
"vscode": "^1.67.0"
}
},
@@ -692,6 +694,11 @@
"integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
"dev": true
},
+ "node_modules/@vscode/codicons": {
+ "version": "0.0.32",
+ "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.32.tgz",
+ "integrity": "sha512-3lgSTWhAzzWN/EPURoY4ZDBEA80OPmnaknNujA3qnI4Iu7AONWd9xF3iE4L+4prIe8E3TUnLQ4pxoaFTEEZNwg=="
+ },
"node_modules/@vscode/test-electron": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vscode/test-electron/-/test-electron-2.0.2.tgz",
@@ -5145,6 +5152,11 @@
"integrity": "sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==",
"dev": true
},
+ "@vscode/codicons": {
+ "version": "0.0.32",
+ "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.32.tgz",
+ "integrity": "sha512-3lgSTWhAzzWN/EPURoY4ZDBEA80OPmnaknNujA3qnI4Iu7AONWd9xF3iE4L+4prIe8E3TUnLQ4pxoaFTEEZNwg=="
+ },
"@vscode/test-electron": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@vscode/test-electron/-/test-electron-2.0.2.tgz",
diff --git a/package.json b/package.json
index 929a72b..050fee5 100644
--- 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
index 5e1e6e8..b41441f 100644
--- a/src/goVulncheck.ts
+++ b/src/goVulncheck.ts
@@ -81,6 +81,9 @@
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 @@
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>
