fix/styles-for-details (#706)

Co-authored-by: Abdelrahman Shawki Hassan <[email protected]>

application/config/config.go

@@ -113,7 +113,7 @@ func (c *CliSettings) CliPathFileInfo() (os.FileInfo, error) {
 	defer c.cliPathAccessMutex.RUnlock()
 	stat, err := os.Stat(c.cliPath)
 	if err == nil {
-		c.C.Logger().Debug().Str("method", "config.cliSettings.Installed").Msgf("CLI path: %s, Size: %d, Perm: %s",
+		c.C.Logger().Trace().Str("method", "config.cliSettings.Installed").Msgf("CLI path: %s, Size: %d, Perm: %s",
 			c.cliPath,
 			stat.Size(),
 			stat.Mode().Perm())

application/server/server.go

@@ -385,6 +385,8 @@ func initializedHandler(srv *jrpc2.Server) handler.Func {
 		c := config.CurrentConfig()
 		initialLogger := c.Logger()
 		initialLogger.Info().Msg("snyk-ls: " + config.Version + " (" + util.Result(os.Executable()) + ")")
+		initialLogger.Info().Msgf("CLI Path: %s", c.CliSettings().Path())
+		initialLogger.Info().Msgf("CLI Installed? %t", c.CliSettings().Installed())
 		initialLogger.Info().Msg("platform: " + runtime.GOOS + "/" + runtime.GOARCH)
 		initialLogger.Info().Msg("https_proxy: " + os.Getenv("HTTPS_PROXY"))
 		initialLogger.Info().Msg("http_proxy: " + os.Getenv("HTTP_PROXY"))

infrastructure/cli/initializer.go

@@ -51,10 +51,6 @@ func NewInitializer(errorReporter error_reporting.ErrorReporter,
 		notifier:      notifier,
 		cli:           cli,
 	}
-	settings := config.CurrentConfig().CliSettings()
-	if settings.Installed() {
-		i.logCliVersion(settings.Path())
-	}
 	return i
 }
 
@@ -66,7 +62,6 @@ func (i *Initializer) Init() error {
 	logger := config.CurrentConfig().Logger().With().Str("method", "cli.Init").Logger()
 	cliSettings := c.CliSettings()
 	cliInstalled := cliSettings.Installed()
-	logger.Debug().Str("cliPath", cliPathInConfig()).Msgf("CLI installed: %v", cliInstalled)
 	if !c.ManageCliBinariesAutomatically() {
 		if !cliSettings.IsPathDefined() {
 			i.notifier.SendShowMessage(sglsp.Warning,

infrastructure/code/code_html.go

@@ -252,7 +252,7 @@ func parseExampleCommitsToTemplateJS(fixes []ExampleCommit, logger *zerolog.Logg
 
 func getIssueType(additionalData snyk.CodeIssueData) string {
 	if additionalData.IsSecurityType {
-		return "Vulnerability"
+		return "Issue"
 	}
 	return "Quality Issue"
 }

infrastructure/code/template/details.html

@@ -21,11 +21,25 @@
   <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}';" />
+    content="style-src 'self' 'nonce-${nonce}' 'nonce-ideNonce' https://fonts.googleapis.com;
+             script-src 'nonce-${nonce}' https://fonts.googleapis.com;
+             font-src 'self' https://fonts.gstatic.com;" />
 
   <style nonce="${nonce}">
+    @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
     :root {
-      --default-font: ui-sans-serif, "SF Pro Text", "Segoe UI", "Ubuntu", Geneva, Verdana, Tahoma, sans-serif;
+      --default-font: "SF Pro Text", "Segoe UI", "Ubuntu", Geneva, Verdana, Tahoma, sans-serif;
+      --background-color: var();
+      --text-color: var();
+      --link-color: var();
+      --scroll-bar-hover-background-color: #595a5c;
+      --horizontal-border-color: var();
+      --code-background-color: var(--vscode-editor-background);
+      --tab-active-background-color: var(--vscode-tab-activeBackground);
+    }
+
+    section {
+      padding: 20px;
     }
 
     ::-webkit-scrollbar {
@@ -37,7 +51,7 @@
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background: #595a5c;
+      background: var(--scroll-bar-hover-background-color);
     }
 
     *,
@@ -46,15 +60,31 @@
       box-sizing: border-box;
     }
 
+    a, .link {
+      color: var(--link-color);
+      cursor: pointer;
+      text-decoration: none;
+    }
+
     body {
+      background-color: var(--background-color);
       font-family: var(--default-font);
+      font-size: 0.8rem;
+      font-weight: 400;
+      color: var(--text-color);
       overflow-y: auto;
       overflow-x: hidden;
     }
 
     h2 {
-      font-weight: 600;
-      margin-bottom: 10px;
+      margin: initial;
+    }
+
+    h2, h3 {
+      font-size: 1rem;
+      margin-block-start: 0;
+      margin-block-end: 0.4rem;
+      font-weight: 700;
     }
 
     main {
@@ -77,6 +107,8 @@
     .panel-header {
       display: flex;
       flex-direction: column;
+      background-image: linear-gradient(0, transparent, var(--vscode-tab-activeBackground));
+      margin: inherit;
     }
 
     .code-issue-panel {
@@ -90,27 +122,30 @@
     .ai-fix-header,
     .overview-text>h2 {
       line-height: 1.25rem;
-      font-size: 1.2rem;
+      font-size: 1rem;
       margin-bottom: 10px;
     }
 
     .severity-title {
       padding-left: 8px;
+      font-size: 1.4rem;
     }
 
     .severity-container {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: 3px;
+      padding-bottom: 20px;
+      padding-top: 20px;
     }
 
     .severity-type-container {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: 1em;
-      line-height: 1em;
+      margin-bottom: 1rem;
+      line-height: 1rem;
+      font-size: 1rem;
     }
 
     .lesson-container {
@@ -183,9 +218,12 @@
       border: 1px solid #E27122;
     }
 
+    .example {
+      background-color: var(--code-background-color);
+    }
+
     .data-flow-file {
       font-weight: bold;
-      font-size: 1em;
       display: flex;
       align-items: center;
       margin-top: 5px;
@@ -202,6 +240,7 @@
     }
 
     .data-flow-table {
+      background-color: var(--code-background-color);
       margin-top: 5px;
       margin-left: 15px;
     }
@@ -235,9 +274,12 @@
       word-break: break-all;
     }
 
+    code {
+      background-color: var(--code-background-color);
+    }
+
     .data-flow-text code {
-      background: none;
-      background-color: transparent;
+      background: transparent none;
     }
 
     .data-flow-delimiter {
@@ -762,7 +804,7 @@ <h2 class="severity-title">{{.IssueTitle}}</h2>
         </span>
         {{if .IssueOverview}}
         <span data-tab="vuln-overview" id="vuln-overview-tab" class="tab-item sn-vuln-overview vuln-overview-tab">
-          Vulnerability Overview
+          Issue Overview
         </span>
         {{end}}
       </div>

infrastructure/iac/template/index.html

@@ -58,7 +58,7 @@ <h2 class="severity-title">{{.Issue.AdditionalData.Title}}</h2>
     <div class="summary-item impact">
       <div class="label">Impact</div>
       <div class="content">
-        {{.Issue.AdditionalData.Impact}}
+        <p>{{.Issue.AdditionalData.Impact}}</p>
       </div>
     </div>
     <div class="summary-item path">

infrastructure/iac/template/styles.css

@@ -23,16 +23,36 @@
   background: var(--scroll-bar-hover-background-color);
 }
 
-html, body {
-  font-size: 16px;
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
 }
 
 body {
   background-color: var(--background-color);
   font-family: var(--default-font);
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 400;
   color: var(--text-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+body > *, form > * {
+  margin-block-start: 0;
+}
+
+
+h2 {
+  margin: initial;
+}
+
+h2, h3 {
+  font-size: 1rem;
+  margin-block-start: 0;
+  margin-block-end: 0.4rem;
+  font-weight: 700;
 }
 
 section {
@@ -56,16 +76,11 @@ code {
   background-color: var(--code-background-color);
   padding: 1px 3px;
   border-radius: 4px;
-  font-size: 0.85rem;
-}
-
-h2 {
-  font-weight: 600;
-  margin-bottom: 10px;
+  font-size: 0.8rem;
 }
 
 section {
-  padding: 0px 20px 5px 20px;
+  padding: 20px;
 }
 
 .styled-link {
@@ -85,11 +100,13 @@ section {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  margin-block-start: 0;
 }
 
 .suggestion .suggestion-text {
+  margin-top: 0;
   margin-bottom: 0.8rem;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 400;
   line-height: 2.4rem;
 }
@@ -117,17 +134,27 @@ section {
   vertical-align: middle;
 }
 
+.sn-fix-wrapper {
+  background-color: var(--code-background-color);
+}
+
 .summary .summary-item {
   display: flex;
   margin: 0.3em 0 0.3em 0;
 }
 
+.summary-item p {
+  margin: 0 0 2rem 0;
+}
+
 .summary .label {
   width: 160px;
+  margin: inherit;
 }
 
 .summary .content {
   flex: 70%;
+  margin: inherit;
 }
 
 .summary .summary-item.path pre {
@@ -145,7 +172,7 @@ div.remediation {
 }
 
 div.remediation p {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 header {
@@ -155,24 +182,28 @@ header {
 .panel-header {
   display: flex;
   flex-direction: column;
+  background-image: linear-gradient(0, transparent, var(--vscode-tab-activeBackground));
+  margin: inherit;
 }
 
 .severity-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 3px;
+  padding-top: 20px;
 }
 
 .severity-title {
   padding-left: 8px;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
 }
 
 .severity-type-container {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 1em;
-  line-height: 1em;
+  margin-bottom: 1rem;
+  line-height: 1rem;
+  font-size: 1rem;
 }

infrastructure/oss/oss_html.go

@@ -142,7 +142,7 @@ func getIssueType(issue snyk.OssIssueData) string {
 		return "License"
 	}
 
-	return "Vulnerability"
+	return "Issue"
 }
 
 func getExploitMaturity(issue snyk.OssIssueData) string {

infrastructure/oss/oss_html_test.go

@@ -77,7 +77,7 @@ func Test_OssDetailsPanel_html_noLearn(t *testing.T) {
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, strings.Join(issueAdditionalData.From, " > ")))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, strings.Join(issue2.From, " > ")))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, "<li>list</li>"))
-	assert.False(t, strings.Contains(issueDetailsPanelHtml, "Learn about this vulnerability"))
+	assert.False(t, strings.Contains(issueDetailsPanelHtml, "Learn about this issue"))
 }
 
 func Test_OssDetailsPanel_html_withLearn(t *testing.T) {
@@ -104,7 +104,7 @@ func Test_OssDetailsPanel_html_withLearn(t *testing.T) {
 	assert.NoError(t, err)
 	issueDetailsPanelHtml := htmlRenderer.GetDetailsHtml(issue)
 
-	assert.True(t, strings.Contains(issueDetailsPanelHtml, "Learn about this vulnerability"))
+	assert.True(t, strings.Contains(issueDetailsPanelHtml, "Learn about this issue"))
 }
 
 func Test_OssDetailsPanel_html_withLearn_withCustomEndpoint(t *testing.T) {
@@ -205,7 +205,7 @@ func Test_OssDetailsPanel_html_moreDetailedPaths(t *testing.T) {
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, strings.Join(issueAdditionalData.From, " &gt; ")))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, strings.Join(issue2.From, " &gt; ")))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, "<li>list</li>"))
-	assert.False(t, strings.Contains(issueDetailsPanelHtml, "Learn about this vulnerability"))
+	assert.False(t, strings.Contains(issueDetailsPanelHtml, "Learn about this issue"))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, "...and"))
 	assert.True(t, strings.Contains(issueDetailsPanelHtml, "https://www.first.org/cvss/calculator/3.1#CVSS:3.1/AV:L/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H/E:P"))
 }