feat: load custom VSCode styling for HTML suggestion panel [IDE-240] (#…

…463) * refactor: update CSP and nonce handling in `CodeSuggestionWebviewProvider` - Added logic to dynamically set the nonce for `<script>` and `<style>` tags. - Updated the `iconPath` for the panel to use the correct Snyk Code icon. - Added handling to replace `${headerEnd}` with the appropriate stylesheet link. * feat: inject custom styling * refactor: move nonce computation to ide * feat: add ignore footer styling * fix: move uppercase text transform just to vscode --------- Co-authored-by: Teodora Sandu <teodora.sandu@snyk.io>
snyk · Jun 3, 2024 · ffd88f3 · ffd88f3
1 parent 8c6889e
commit ffd88f3
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,8 @@
 # Snyk Security Changelog
+
+## [2.9.2]
+- Injects custom styling for the HTML panel used by Snyk Code for consistent ignores.
+
 ## [2.8.1]
 - Lower the strictness of custom endpoint regex validation so that single tenant APIs are allowed.
 

diff --git a/media/views/snykCode/suggestion/suggestion_ls.scss b/media/views/snykCode/suggestion/suggestion_ls.scss
@@ -0,0 +1,106 @@
+.ignore-warning {
+    background: #FFF4ED;
+    color: #B6540B;
+    border: 1px solid #E27122;
+}
+
+.ignore-badge {
+    background: #FFF4ED;
+    color: #B6540B;
+    border: 1px solid #E27122;
+}
+
+.tabs-nav {}
+
+.tab-item {
+    color: var(--vscode-foreground);
+    border-bottom: 1px solid transparent;
+}
+
+.tab-item-icon path {
+    fill: var(--tab-item-github-icon-color);
+}
+
+.tab-item:hover {}
+
+.tab-item.is-selected {
+    border-bottom: 3px solid var(--vscode-focusBorder);
+}
+
+.tab-content {
+    background-color: var(--vscode-editor-background);
+}
+
+.ignore-details-header,
+.data-flow-header,
+.example-fixes-header {
+  text-transform: uppercase;
+}
+
+.ignore-details-tab,
+.fix-analysis-tab,
+.vuln-overview-tab {
+  text-transform: uppercase;
+}
+
+.example-line-number,
+.example-line>code {
+    color: var(--vscode-editor-foreground);
+}
+
+.example-line.added {
+    background-color: rgb(204, 255, 216);
+}
+
+.example-line.removed {
+    background-color: rgb(255, 215, 213);
+}
+
+.vscode-dark .example-line.removed {
+    background-color: rgba(84, 36, 38, 1);
+    color: #fff;
+}
+
+.vscode-dark .example-line.added {
+    background-color: rgba(28, 68, 40, 1);
+    color: #fff;
+}
+
+.vscode-dark .example-line.added>code {
+    color: #fff;
+    background-color: transparent;
+}
+
+.vscode-dark .example-line.removed>code {
+    color: #fff;
+    background-color: transparent;
+}
+
+.vscode-high-contrast:not(.vscode-high-contrast-light) .example-line.removed {
+    background-color: #542426;
+    color: #fff;
+}
+
+.vscode-dark .added,
+.vscode-high-contrast:not(.vscode-high-contrast-light) .example-line.added {
+    background-color: #1C4428;
+    color: #fff;
+}        
+
+.ignore-action-container {
+    background-color: var(--vscode-editor-background);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.075));
+    box-shadow: 0 -1px 3px rgba(0, 0, 0, .05);
+}
+
+.ignore-button.secondary {
+    border: 1px solid var(--vscode-textLink-foreground);
+    color: var(--vscode-textLink-foreground);
+}
+
+.ignore-button.secondary:hover,
+.ignore-button.secondary:active {
+  background: var(--vscode-button-hoverBackground);
+  border-color: var(--vscode-button-hoverBackground);
+  color: var(--vscode-button-foreground);
+}
diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts
@@ -110,8 +110,29 @@ export class CodeSuggestionWebviewProvider
         this.registerListeners();
       }
 
+      this.panel.iconPath = vscode.Uri.joinPath(
+        vscode.Uri.file(this.context.extensionPath),
+        'media',
+        'images',
+        'snyk-code.svg',
+      );
+
       if (isIgnoresEnabled) {
-        this.panel.webview.html = issue.additionalData.details;
+        let html = issue.additionalData.details;
+        const ideStylePath = vscode.Uri.joinPath(
+          vscode.Uri.file(this.context.extensionPath),
+          'media',
+          'views',
+          'snykCode',
+          'suggestion',
+          'suggestion_ls.css',
+        );
+        const ideStyle = readFileSync(ideStylePath.path, 'utf8');
+        html = html.replace('${ideStyle}', '<style nonce=${nonce}>' + ideStyle + '</style>');
+        const nonce = getNonce();
+        html = html.replaceAll('${nonce}', nonce);
+
+        this.panel.webview.html = html;
       } else {
         issue.additionalData.exampleCommitFixes = encodeExampleCommitFixes(issue.additionalData.exampleCommitFixes);