diff --git a/CHANGELOG.md b/CHANGELOG.md index a0ca95d7e..f4d82b47e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,16 @@ # Snyk Security - Code and Open Source Dependencies Changelog -## [1.23.2] +## [1.25.1] + +### Changed + +- Improved UI: updated issue details panels, used vscode colors where possible, new meta section for Code +- Optimized messages in the UI + +## [1.24.1] + ### Fixed + - Removed false positives feature flag - View management: show accurate information during startup of the plugin diff --git a/media/images/arrow-left-dark.svg b/media/images/arrow-left-dark.svg index 7f2f51285..6c665ccad 100644 --- a/media/images/arrow-left-dark.svg +++ b/media/images/arrow-left-dark.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/media/images/arrow-left-light.svg b/media/images/arrow-left-light.svg index a498dc1cc..501108075 100644 --- a/media/images/arrow-left-light.svg +++ b/media/images/arrow-left-light.svg @@ -1,4 +1,3 @@ - - + + - diff --git a/media/images/arrow-right-dark.svg b/media/images/arrow-right-dark.svg index 382120625..f0f307084 100644 --- a/media/images/arrow-right-dark.svg +++ b/media/images/arrow-right-dark.svg @@ -1,3 +1,3 @@ - - + + diff --git a/media/images/arrow-right-light.svg b/media/images/arrow-right-light.svg index 697835bae..797df7786 100644 --- a/media/images/arrow-right-light.svg +++ b/media/images/arrow-right-light.svg @@ -1,3 +1,3 @@ - - + + diff --git a/media/images/learn-icon.svg b/media/images/learn-icon.svg index 44357b7d4..e9eebe5f4 100644 --- a/media/images/learn-icon.svg +++ b/media/images/learn-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/media/images/snyk-code.svg b/media/images/snyk-code.svg new file mode 100644 index 000000000..9e63a9d55 --- /dev/null +++ b/media/images/snyk-code.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/media/images/snyk-iac.svg b/media/images/snyk-iac.svg new file mode 100644 index 000000000..07d54ad16 --- /dev/null +++ b/media/images/snyk-iac.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/media/images/snyk-oss.svg b/media/images/snyk-oss.svg new file mode 100644 index 000000000..7ac6de8ef --- /dev/null +++ b/media/images/snyk-oss.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/media/views/common/learn.scss b/media/views/common/learn.scss index a65b9813e..16ff34e50 100644 --- a/media/views/common/learn.scss +++ b/media/views/common/learn.scss @@ -2,6 +2,8 @@ opacity: 0; height: 0; margin-top: 0; + color: var(--vscode-textLink-foreground); + font-size: 1.3rem; &.show { margin-top: 6px; @@ -17,7 +19,7 @@ &__code { .learn--link { - color: var(--vscode-foreground); + color: var(--vscode-textLink-foreground); } } } diff --git a/media/views/common/suggestionHeader.scss b/media/views/common/suggestionHeader.scss index 8ea2be1a9..3cdcbee95 100644 --- a/media/views/common/suggestionHeader.scss +++ b/media/views/common/suggestionHeader.scss @@ -7,10 +7,11 @@ } .suggestion .suggestion-text { - margin-bottom: 1rem; - margin-top: 0.2em; - font-size: 1.6rem; - line-height: 1.6; + padding: 0.4rem 0; + margin-bottom: 0.8rem; + font-size: 1.8rem; + font-weight: 500; + line-height: 2.4rem; } .severity { @@ -29,12 +30,13 @@ .icon { vertical-align: middle; - width: 18px; - height: 18px; + width: 16px; + height: 16px; } .identifiers { - font-size: 1em; + font-size: 1.3rem; + line-height: 2rem; } .vscode-dark .light-only { diff --git a/media/views/common/webview.scss b/media/views/common/webview.scss index 39aa20b4f..51b6dcb11 100644 --- a/media/views/common/webview.scss +++ b/media/views/common/webview.scss @@ -5,7 +5,6 @@ html { body { padding: 0; - font-size: 1.4rem; line-height: 1.5; } @@ -13,34 +12,53 @@ body * { box-sizing: border-box; } -h2 { - font-size: 1em; +h2, h3 { + font-size: 1.1rem; margin-block-start: 0; + margin-block-end: 0.4rem; + font-weight: 700; + text-transform: uppercase; } a { cursor: pointer; - color: #7c74f2; text-decoration: none; } a:hover { - color: #7c74f2; text-decoration: underline; } +table { + width: 100%; + border-collapse: collapse; +} + +table td { + background: var(--vscode-editor-background); + border: 1px solid var(--vscode-button-border); + padding: 3px; +} + .font-light { opacity: 0.75; } .vscode-light { - background-color: rgba(0, 0, 0, 0.05); border-right: 1px solid rgba(0, 0, 0, 0.05); + padding: 0; +} + +.suggestion--header { + background-image: linear-gradient(0, transparent, var(--vscode-tab-activeBackground)); } .vscode-dark { background-color: rgba(255, 255, 255, 0.075); - border-right: 1px solid rgba(255, 255, 255, 0.075); +} + +.vscode-light { + background-color: rgba(0, 0, 0, 0.05); } .vscode-light .delimiter-top { diff --git a/media/views/oss/suggestion/suggestion.scss b/media/views/oss/suggestion/suggestion.scss index dd8eeedbc..150e88372 100644 --- a/media/views/oss/suggestion/suggestion.scss +++ b/media/views/oss/suggestion/suggestion.scss @@ -6,7 +6,11 @@ } .delimiter { - margin: 0 0.2em 0 0.2em; + width: 0; + height: 1.3rem; + margin: 0 0.8rem 0 0.8rem; + border-right:1px solid var(--vscode-input-border); + line-height: 1rem; } .summary .summary-item { @@ -15,13 +19,33 @@ } .summary .label { - flex: 30%; + width: 160px; } .summary .content { flex: 70%; } -.path { - margin-bottom: 0.75em; +.summary .remediation { + margin-bottom: 1.6rem } + +.summary .detailed-path:last-child .remediation { + margin-bottom: 0 +} + +.vulnerability-overview pre { + padding: 8px 16px; + overflow-x: auto; + border-radius: 4px; + font-size: var(--vscode-editor-font-size); + font-family: var(--vscode-editor-font-family); + background-color: var(--vscode-editor-background); + border: 1px solid var(--vscode-input-border); +} + +.vulnerability-overview code { + color: var(--vscode-foreground); + font-size: var(--vscode-editor-font-size); + font-family: var(--vscode-editor-font-family); +} \ No newline at end of file diff --git a/media/views/snykCode/suggestion/suggestion.scss b/media/views/snykCode/suggestion/suggestion.scss index e1d38e906..dfe2f0c59 100644 --- a/media/views/snykCode/suggestion/suggestion.scss +++ b/media/views/snykCode/suggestion/suggestion.scss @@ -1,14 +1,6 @@ @import '../../common/variables'; @import '../../common/webview'; -.font-blue { - color: #7754db; -} - -.font-red { - color: #fc3838; -} - .row { display: flex; flex-direction: row; @@ -35,45 +27,63 @@ flex-direction: column; width: 100%; height: 100%; + margin: 0; + font-size: 1.4rem; } -#suggestion-info { - padding-left: 12rem; +.suggestion-title { + padding: 0.4rem 0; + margin-bottom: 0.8rem; + font-size: 1.8rem; + font-weight: 500; + line-height: 2.4rem; } .suggestion-text { - float: left; - margin-bottom: 2rem; - font-size: 1.6rem; line-height: 1.6; } -.suggestion-text.critical .mark-position { - color: #ce5019; +.cwe-list { + display: inline-block; + margin: 0; + padding: 0; } -.suggestion-text.warning .mark-position { - color: #d68000; +.suggestion-metas { + font-size: 1.3rem; + line-height: 2rem; } -.suggestion-text.info .mark-position { - color: #88879e; +.suggestion-meta, +.suggestion-position { + display: inline-block; + padding: 0 8px; + border-right: 1px solid var(--vscode-input-border); + line-height: 1; + text-transform: capitalize; } -.suggestion-text.critical .mark-message:hover { - color: #ce5019; +.suggestion-meta:first-child { + padding-left: 0 } -.suggestion-text.warning .mark-message:hover { - color: #d68000; +.suggestion-position { + border: none; + padding-left: 5px; + text-transform: none; } -.suggestion-text.info .mark-message:hover { - color: #88879e; +.suggestion--header { + background-image: linear-gradient(0, --vscode-tab-activeBackground, transparent); +} + +.mark-position { + font-weight: 400; + font-family: 'Courier New', Courier, monospace; } .mark-message { - font-weight: bold; + font-weight: 600; } #severity { @@ -81,18 +91,14 @@ flex-direction: column; flex-grow: 0; float: left; - width: 80px; - margin: 1rem 0 0 -10rem; + margin: 0 1rem 0 0; text-align: center; } #severity .icon { width: 32px; height: 32px; - margin: 0 auto 10px; -} - -#severity-text { + color: var(--vscode-icon-foreground); } .vscode-dark .light-only { @@ -107,16 +113,6 @@ cursor: pointer; } -.chip { - opacity: 0.75; - display: inline-flex; - padding: 2px 8px; - border-radius: 15px; - margin: 3px; - background-color: rgba(150, 150, 150, 0.15); - text-transform: capitalize; -} - #info-top { margin-bottom: 8px; } @@ -125,97 +121,90 @@ margin-bottom: 16px; } -.arrow { - display: inline-flex; - vertical-align: middle; - cursor: pointer; +.repo { + display: flex; + gap: 8px; } -.arrow.enabled { - fill: #7754db; - color: #7754db; +.arrow { + display: inline-block; + width: 20px; + height: 20px; + padding: 4px; + cursor: pointer; + border-radius: 4px; + text-align: center; + line-height: 1; } .arrow:hover { - fill: #7754db; - color: #7754db; -} - -#example-text { - margin-left: 2px; - margin-right: 2px; + background-color: var(--vscode-toolbar-hoverBackground); } -.arrow-icon { - margin-bottom: 2px; - padding-bottom: 1px; +.examples-nav { + display: flex; + gap: 4px; } -.arrow.down { - transform: rotate(-180deg); +#example-text { + width: 86px; + text-align: center; } #example { width: 100%; - border: 1px solid; + border: 1px solid var(--vscode-input-border); border-radius: 3px; line-height: 1.5; - background-color: #fff; - font-weight: 600; -} - -.vscode-light #example { - border-color: $editor-background-color; + background-color: var(--vscode-editor-background); } .example-line.removed { - background-color: #ffeef0; + background-color: rgb(255, 215, 213); } -.example-line.removed > code { - font-weight: 600; +.example-line.removed::before { + content: "-"; + position: absolute; + padding: 0 4px; + line-height: 1; } .example-line.added { - background-color: #e6ffed; + background-color: rgb(204, 255, 216); } -.example-line.added > code { - font-weight: 600; +.example-line.added::before { + content: "+"; + position: absolute; + padding: 0 4px; + line-height: 1; } -.example-line > code { +.example-line>code { + display: block; padding-left: 30px; white-space: pre-wrap; - color: #231f20; + color: var(--vscode-editor-foreground); font-weight: 400; } -.vscode-dark #example { - border-color: rgba(255, 255, 255, 0.075); - background-color: $editor-background-color; -} - .vscode-dark .removed { - background-color: rgba(201, 60, 55, 0.2); + background-color: rgba(84, 36, 38, 1); color: #fff; } .vscode-dark .added { - background-color: rgba(70, 149, 74, 0.2); + background-color: rgba(28, 68, 40, 1); color: #fff; } -.vscode-dark .example-line > code { - color: $editor-font-color; - font-weight: 400; -} -.vscode-dark .added > code { +.vscode-dark .added>code { color: #fff; } -.vscode-dark .removed > code { +.vscode-dark .removed>code { color: #fff; } @@ -235,10 +224,11 @@ } .actions .button { - margin: 0 1rem 2rem; + margin: 0 0 2rem; flex: 0 0 30%; + border-radius: 3px; } .report-fp-actions { margin-left: auto; -} +} \ No newline at end of file diff --git a/src/snyk/common/messages/analysisMessages.ts b/src/snyk/common/messages/analysisMessages.ts index 3be363381..b54d200f8 100644 --- a/src/snyk/common/messages/analysisMessages.ts +++ b/src/snyk/common/messages/analysisMessages.ts @@ -2,7 +2,7 @@ export const messages = { scanFailed: 'Scan failed', noWorkspaceTrust: 'No workspace folder was granted trust', clickToProblem: 'Click here to see the problem.', - scanRunning: 'Scanning for vulnerabilities...', + scanRunning: 'Scanning...', allSeverityFiltersDisabled: 'Please enable severity filters to see the results.', duration: (time: string, day: string): string => `Analysis finished at ${time}, ${day}`, noWorkspaceTrustDescription: diff --git a/src/snyk/snykCode/views/issueTreeProvider.ts b/src/snyk/snykCode/views/issueTreeProvider.ts index d26dbda86..acc96239f 100644 --- a/src/snyk/snykCode/views/issueTreeProvider.ts +++ b/src/snyk/snykCode/views/issueTreeProvider.ts @@ -32,7 +32,9 @@ export class IssueTreeProvider extends ProductIssueTreeProvider { getRunTestMessage = () => messages.runTest; - getIssueTitle = (issue: Issue) => issue.additionalData.message; + // The title in the tree is taken from the title for vulnerabilities and from the message for quality rules + getIssueTitle = (issue: Issue) => + issue.additionalData.isSecurityType ? issue.title.split(':')[0] : issue.additionalData.message.split('.')[0]; getIssueRange(issue: Issue): Range { return IssueUtils.createVsCodeRange(issue.additionalData, this.languages); diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts index 2721227ba..f12f5b37a 100644 --- a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts +++ b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts @@ -111,8 +111,13 @@ export class CodeSuggestionWebviewProvider ); this.registerListeners(); } - this.panel.webview.html = this.getHtmlForWebview(this.panel.webview); + this.panel.iconPath = vscode.Uri.joinPath( + vscode.Uri.file(this.context.extensionPath), + 'media', + 'images', + 'snyk-code.svg', + ); void this.panel.webview.postMessage({ type: 'set', args: this.mapToModel(issue) }); void this.postLearnLessonMessage(issue); @@ -207,15 +212,14 @@ export class CodeSuggestionWebviewProvider protected getHtmlForWebview(webview: vscode.Webview): string { const images: Record = [ - ['icon-lines', 'svg'], ['icon-external', 'svg'], ['icon-code', 'svg'], ['icon-github', 'svg'], ['icon-like', 'svg'], - ['dark-high-severity', 'svg'], + ['dark-low-severity', 'svg'], ['dark-medium-severity', 'svg'], + ['dark-high-severity', 'svg'], ['light-icon-critical', 'svg'], - ['dark-low-severity', 'svg'], ['arrow-left-dark', 'svg'], ['arrow-right-dark', 'svg'], ['arrow-left-light', 'svg'], @@ -236,8 +240,8 @@ export class CodeSuggestionWebviewProvider 'suggestion', 'codeSuggestionWebviewScript.js', ); - const styleUri = this.getWebViewUri('media', 'views', 'snykCode', 'suggestion', 'suggestion.css'); const styleVSCodeUri = this.getWebViewUri('media', 'views', 'common', 'vscode.css'); + const styleUri = this.getWebViewUri('media', 'views', 'snykCode', 'suggestion', 'suggestion.css'); const learnStyleUri = this.getWebViewUri('media', 'views', 'common', 'learn.css'); const nonce = getNonce(); @@ -249,60 +253,60 @@ export class CodeSuggestionWebviewProvider - +
-
+
- - - - - - + + +
-
-
- - +
+
+
+
+
+
+ +
+
- This issue was fixed by projects. Here are example fixes. + This issue was fixed by projects. Here are examples:
- There are no example fixes for this issue. + There are no fix examples for this issue.
-
- - +
+ +
-
-
+
+ -
+ - Example 1/ + Example 1/ -
+ -
+
diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts index b64485203..843da0291 100644 --- a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts +++ b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts @@ -189,49 +189,79 @@ declare const acquireVsCodeApi: any; const currentSeverity = getCurrentSeverity(); const severity = document.getElementById('severity')!; const title = document.getElementById('title')!; + const description = document.getElementById('description')!; + const meta = document.getElementById('meta')!; + let type = ''; - // Display correct issue type text - const issueType = document.getElementsByClassName('issue-type'); - for (const typeElement of issueType as any) { - typeElement.innerHTML = suggestion.isSecurityType ? 'vulnerability' : 'issue'; + // Set issue type: vulnerability or issue + type = suggestion.isSecurityType ? 'vulnerability' : 'issue'; + + // Remove existing meta + const metas = meta.querySelectorAll('.suggestion-meta'); + metas.forEach(element => { + element.remove(); + }); + + // Append CWEs + if (suggestion.cwe !== null && suggestion.cwe.length) { + // add the new CWEs + suggestion.cwe.forEach(cwe => { + meta.insertAdjacentHTML( + 'afterbegin', + '' + + cwe + + '', + ); + }); } - const sevText = document.getElementById('severity-text')!; + // Append issue type in the meta section + meta.insertAdjacentHTML('afterbegin', '' + type + ''); + + // Append line number + const issuePosition = document.getElementById('navigateToIssue')!; + issuePosition.innerHTML = ''; + issuePosition.insertAdjacentHTML( + 'afterbegin', + 'Position: line ' + (Number(suggestion.rows[0]) + 1).toString() + '', + ); + if (currentSeverity && currentSeverity.text) { severity.querySelectorAll('img').forEach(n => { - if (n.id.slice(-1) === 'l') { - if (n.id.includes(currentSeverity.value)) n.className = 'icon light-only'; - else n.className = 'icon light-only hidden'; + if (n.id.includes(currentSeverity.value)) { + n.className = 'icon'; + severity.setAttribute('title', currentSeverity.text); } else { - if (n.id.includes(currentSeverity.value)) n.className = 'icon dark-only'; - else n.className = 'icon dark-only hidden'; + n.className = 'icon hidden'; } }); - sevText.innerHTML = currentSeverity.text; - title.className = `suggestion-text ${currentSeverity.text.toLowerCase()}`; } else { severity.querySelectorAll('img').forEach(n => (n.className = 'icon hidden')); - sevText.innerHTML = ''; } - title.querySelectorAll('*').forEach(n => n.remove()); - title.innerHTML = ''; + title.innerText = suggestion.title.split(':')[0]; + + description.querySelectorAll('*').forEach(n => n.remove()); + description.innerHTML = ''; if (suggestion.markers && suggestion.markers.length) { let i = 0; for (const m of suggestion.markers) { const preText = suggestion.message.substring(i, m.msg[0]); const preMark = document.createTextNode(preText); - title.appendChild(preMark); - const mark = document.createElement('span'); + description.appendChild(preMark); + const mark = document.createElement('a'); mark.className = 'mark-message clickable'; mark.onclick = function () { navigateToIssue(undefined, m.pos[0]); }; - title.appendChild(mark); + description.appendChild(mark); const markMsg = document.createElement('span'); + markMsg.className = 'mark-string'; markMsg.innerHTML = suggestion.message.substring(m.msg[0], m.msg[1] + 1); mark.appendChild(markMsg); - let markLineText = ' ['; + let markLineText = '['; let first = true; for (const p of m.pos) { const rowStart = Number(p.rows[0]) + 1; // editors are 1-based @@ -247,16 +277,14 @@ declare const acquireVsCodeApi: any; } const postText = suggestion.message.substring(i); const postMark = document.createTextNode(postText); - title.appendChild(postMark); + description.appendChild(postMark); } else { - title.innerHTML = suggestion.message; + description.innerHTML = suggestion.message; } const moreInfo = document.getElementById('lead-url')!; moreInfo.className = suggestion.leadURL ? 'clickable' : 'clickable hidden'; - const suggestionPosition = document.getElementById('line-position')!; - suggestionPosition.innerHTML = (Number(suggestion.rows[0]) + 1).toString(); // editors are 1-based const suggestionPosition2 = document.getElementById('line-position2')!; suggestionPosition2.innerHTML = (Number(suggestion.rows[0]) + 1).toString(); diff --git a/src/snyk/snykIac/views/suggestion/iacSuggestionWebviewProvider.ts b/src/snyk/snykIac/views/suggestion/iacSuggestionWebviewProvider.ts index e7a8c4446..80cbab77d 100644 --- a/src/snyk/snykIac/views/suggestion/iacSuggestionWebviewProvider.ts +++ b/src/snyk/snykIac/views/suggestion/iacSuggestionWebviewProvider.ts @@ -64,6 +64,12 @@ export class IacSuggestionWebviewProvider } this.panel.webview.html = this.getHtmlForWebview(this.panel.webview); + this.panel.iconPath = vscode.Uri.joinPath( + vscode.Uri.file(this.context.extensionPath), + 'media', + 'images', + 'snyk-iac.svg', + ); await this.panel.webview.postMessage({ type: 'set', args: issue }); diff --git a/src/snyk/snykOss/messages/treeView.ts b/src/snyk/snykOss/messages/treeView.ts index 54343924c..e01a041bc 100644 --- a/src/snyk/snykOss/messages/treeView.ts +++ b/src/snyk/snykOss/messages/treeView.ts @@ -1,8 +1,8 @@ export const messages = { - cookingDependencies: 'Getting ready Snyk dependencies...', + cookingDependencies: 'Scanning...', runTest: 'Run scan for Open Source security vulnerabilities.', - noVulnerabilitiesFound: 'Snyk found no vulnerabilities ✅', + noVulnerabilitiesFound: ' ✅ Congrats! Snyk found no vulnerabilities.', singleVulnerabilityFound: 'Snyk found 1 vulnerability', vulnerability: 'vulnerability', vulnerabilities: 'vulnerabilities', diff --git a/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewProvider.ts b/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewProvider.ts index 7173ac675..8d9ad8b86 100644 --- a/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewProvider.ts +++ b/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewProvider.ts @@ -4,6 +4,7 @@ import { SNYK_VIEW_SUGGESTION_OSS } from '../../../common/constants/views'; import { ErrorHandler } from '../../../common/error/errorHandler'; import { ILog } from '../../../common/logger/interfaces'; import { messages as learnMessages } from '../../../common/messages/learn'; +import { LearnService } from '../../../common/services/learnService'; import { getNonce } from '../../../common/views/nonce'; import { WebviewPanelSerializer } from '../../../common/views/webviewPanelSerializer'; import { WebviewProvider } from '../../../common/views/webviewProvider'; @@ -11,7 +12,6 @@ import { ExtensionContext } from '../../../common/vscode/extensionContext'; import { IVSCodeWindow } from '../../../common/vscode/window'; import { messages as errorMessages } from '../../messages/error'; import { OssIssueCommandArg } from '../ossVulnerabilityTreeProvider'; -import { LearnService } from '../../../common/services/learnService'; enum OssSuggestionsViewEventMessageType { OpenBrowser = 'openBrowser', @@ -79,6 +79,12 @@ export class OssSuggestionWebviewProvider extends WebviewProvider
-
+

Detailed paths

-
+
diff --git a/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewScript.ts b/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewScript.ts index e6bae4e70..5dce4e32d 100644 --- a/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewScript.ts +++ b/src/snyk/snykOss/views/suggestion/ossSuggestionWebviewScript.ts @@ -190,12 +190,17 @@ } const html = ` -
-
Introduced through: ${introducedThrough}
-
Remediation: ${remediationAdvice}
+
+
Introduced through
+
${introducedThrough}
+
+
+
Remediation
+
${remediationAdvice}
`; const path = document.createElement('div'); + path.className = 'detailed-path'; path.innerHTML = html; paths.append(path); }); @@ -214,7 +219,7 @@ function appendIdentifierSpan(identifiers: Element, id: string, link?: string) { const delimiter = document.createElement('span'); - delimiter.innerText = ' | '; + // delimiter.innerText = ' | '; delimiter.className = 'delimiter'; identifiers.appendChild(delimiter);