feat: remove custom styling and inject it from IDE [IDE-240] (#522)

snyk · Jun 3, 2024 · ae0f3df · ae0f3df
1 parent 9030043
commit ae0f3df
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 86 deletions.
diff --git a/infrastructure/code/code_html.go b/infrastructure/code/code_html.go
@@ -18,9 +18,7 @@ package code
 
 import (
 	"bytes"
-	"crypto/rand"
 	_ "embed"
-	"encoding/base64"
 	"fmt"
 	"html/template"
 	"path/filepath"
@@ -87,14 +85,7 @@ func getCodeDetailsHtml(issue snyk.Issue) string {
 		return ""
 	}
 
-	nonce, err := generateNonce()
-	if err != nil {
-		log.Error().Msgf("Failed to generate nonce: %v", err)
-		return ""
-	}
-
 	data := map[string]interface{}{
-		"Nonce":              nonce,
 		"IssueTitle":         additionalData.Title,
 		"IssueType":          getIssueType(additionalData),
 		"SeverityIcon":       getSeverityIconSvg(issue),
@@ -235,14 +226,6 @@ func formatDate(date time.Time) string {
 	return fmt.Sprintf("%s %02d, %d", month, date.Day(), date.Year())
 }
 
-func generateNonce() (string, error) {
-	nonceBytes := make([]byte, 16)
-	if _, err := rand.Read(nonceBytes); err != nil {
-		return "", fmt.Errorf("error generating nonce: %v", err)
-	}
-	return base64.StdEncoding.EncodeToString(nonceBytes), nil
-}
-
 func getSeverityIconSvg(issue snyk.Issue) template.HTML {
 	switch issue.Severity {
 	case snyk.Critical:

diff --git a/infrastructure/code/code_html_test.go b/infrastructure/code/code_html_test.go
@@ -54,6 +54,9 @@ func Test_Code_Html_getCodeDetailsHtml(t *testing.T) {
 	// invoke method under test
 	codePanelHtml := getCodeDetailsHtml(issue)
 
+	// assert injectable style
+	assert.Contains(t, codePanelHtml, "${ideStyle}")
+
 	// assert Header section
 	assert.Contains(t, codePanelHtml, "Priority score: 890")
 	assert.Contains(t, codePanelHtml, `href="https://learn.snyk.io/lesson/no-rate-limiting/?loc=ide"`)

diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
@@ -21,8 +21,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'none'; style-src 'self' 'nonce-{{.Nonce}}'; script-src 'nonce-{{.Nonce}}';">
-  <style nonce="{{.Nonce}}">
+    content="default-src 'none'; style-src 'self' 'nonce-${nonce}'; script-src 'nonce-${nonce}';">
+  <style nonce="${nonce}">
     :root {
       --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Tahoma, Geneva, Verdana, sans-serif;
     }
@@ -32,7 +32,6 @@
     }
 
     ::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb-color);
       border-radius: 10px;
     }
 
@@ -57,7 +56,6 @@
     }
 
     body {
-      color: var(--text-color);
       font-family: var(--default-font);
       font-weight: 400;
       font-size: 0.875rem;
@@ -69,11 +67,6 @@
       font-weight: 600;
     }
 
-    a,
-    .link {
-      color: var(--link-color);
-    }
-
     main {
       flex: 1 0 auto;
       overflow-y: auto;
@@ -99,13 +92,6 @@
       line-height: 1.25rem;
     }
 
-    .ignore-details-header,
-    .data-flow-header,
-    .example-fixes-header {
-      text-transform: uppercase;
-    }
-
-
     .severity-title {
       padding-left: 8px;
     }
@@ -153,7 +139,6 @@
       width: 0;
       height: 1.3rem;
       margin: 0 8px;
-      border-left: 1px solid #505254;
       display: inline-block;
     }
 
@@ -173,29 +158,22 @@
       justify-content: flex-start;
       font-size: 0.85rem;
       line-height: 1.125rem;
-      background: #FFF4ED;
-      color: #B6540B;
       padding: 0.5em;
       border-radius: 0.25em;
-      border: 1px solid #E27122;
       width: 100%;
       box-sizing: border-box;
     }
 
     .ignore-badge {
       font-size: 0.75rem;
-      background: #FFF4ED;
-      color: #B6540B;
       padding: 0.35em 0.35em;
       border-radius: 0.25em;
       margin-left: 1em;
-      border: 1px solid #E27122;
     }
 
     .data-flow-body {
-      background-color: var(--data-flow-body-color);
-      font-family: 'Courier New', Courier, monospace;
       border-collapse: collapse;
+      font-family: 'Courier New', Courier, monospace;
     }
 
     .data-flow-number {
@@ -205,7 +183,6 @@
     }
 
     .data-flow-clickable-row {
-      color: var(--link-color);
       display: block;
       margin: 0px 16px;
       font-weight: 400;
@@ -224,7 +201,6 @@
 
     .data-flow-delimiter {
       font-weight: bold;
-      color: #BBBBBB;
     }
 
     .main-tabs-nav,
@@ -234,12 +210,10 @@
       list-style-type: none;
       overflow: hidden;
       padding: 0;
-      border-bottom: 1px solid var(--tabs-bottom-color);
     }
 
     .tab-content {
       display: none;
-      /* border: 1px solid #1E1F21; */
       border-top-style: hidden;
     }
 
@@ -251,10 +225,6 @@
       vertical-align: middle;
     }
 
-    .tab-item-icon path {
-      fill: var(--tab-item-github-icon-color);
-    }
-
     .tab-item {
       font-size: 0.75rem;
       font-weight: 500;
@@ -268,14 +238,6 @@
       transition: background-color 0.3s, border-color 0.3s;
     }
 
-    .tab-item:hover {
-      background-color: var(--tab-item-hover-color);
-    }
-
-    .tab-item.is-selected {
-      border-bottom: 3px solid #3474f0;
-    }
-
     .example-line {
       display: block;
       padding: 2px 0 18px 0;
@@ -298,14 +260,6 @@
       background-color: transparent;
     }
 
-    .example-line.added {
-      background-color: var(--example-line-added-color);
-    }
-
-    .example-line.removed {
-      background-color: var(--example-line-removed-color);
-    }
-
     .example-line.added>.example-line-number::after {
       content: "+";
       position: absolute;
@@ -323,9 +277,6 @@
       position: fixed;
       bottom: 0;
       width: 100%;
-      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);
     }
 
     .actions {
@@ -343,24 +294,9 @@
       cursor: pointer;
       width: auto;
       padding: 6px 16px;
-      border: 1px solid var(--vscode-textLink-foreground);
       border-radius: 3px;
       background: none;
       line-height: 1;
-      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);
-    }
-
-    .ignore-details-tab,
-    .fix-analysis-tab,
-    .vuln-overview-tab {
-      text-transform: uppercase;
     }
 
     .ignore-details {
@@ -400,9 +336,11 @@
       align-self: stretch;
     }
   </style>
+
+  ${ideStyle}
 </head>
 
-<body class="snyk-ide">
+<body>
   <!-- Ignore header -->
   {{if .IsIgnored}}
   <div class="ignore-warning-wrapper">
@@ -604,7 +542,7 @@ <h2 class="example-fixes-header">Fixed Code Examples</h2>
   {{end}}
 
   <!-- Scripts -->
-  <script nonce="{{.Nonce}}">
+  <script nonce="${nonce}">
     const MAIN_TAB_NAV_SELECTOR = '.main-tabs-nav';
     const MAIN_TAB_ITEM_SELECTOR = '.main-tabs-nav .tab-item';
     const MAIN_TAB_CONTENT_SELECTOR = '.tab-container > .tab-content';