SLVSCODE-891 new icons for standard severity mode

* SLVSCODE-891 color SVGs using CSS
SonarSource · Nov 25, 2024 · 60557c2 · 60557c2
1 parent f38f49f
commit 60557c2
Show file tree

Hide file tree

Showing 28 changed files with 98 additions and 15 deletions.
diff --git a/images/3.8_selectFolder.png b/images/3.8_selectFolder.png
diff --git a/images/3.8_selectProject.png b/images/3.8_selectProject.png
diff --git a/images/add-binding.png b/images/add-binding.png
diff --git a/images/connected_mode_treeview.png b/images/connected_mode_treeview.png
diff --git a/images/connection_success.png b/images/connection_success.png
diff --git a/images/create_view.png b/images/create_view.png
diff --git a/images/edit-binding.png b/images/edit-binding.png
diff --git a/images/severity/blocker.png b/images/severity/blocker.png
diff --git a/images/severity/blocker.svg b/images/severity/blocker.svg
diff --git a/images/severity/critical.png b/images/severity/critical.png
diff --git a/images/severity/critical.svg b/images/severity/critical.svg
diff --git a/images/severity/info.png b/images/severity/info.png
diff --git a/images/severity/info.svg b/images/severity/info.svg
diff --git a/images/severity/major.png b/images/severity/major.png
diff --git a/images/severity/major.svg b/images/severity/major.svg
diff --git a/images/severity/minor.png b/images/severity/minor.png
diff --git a/images/severity/minor.svg b/images/severity/minor.svg
diff --git a/images/type/bug.png b/images/type/bug.png
diff --git a/images/type/bug.svg b/images/type/bug.svg
diff --git a/images/type/code_smell.png b/images/type/code_smell.png
diff --git a/images/type/code_smell.svg b/images/type/code_smell.svg
diff --git a/images/type/security_hotspot.png b/images/type/security_hotspot.png
diff --git a/images/type/vulnerability.png b/images/type/vulnerability.png
diff --git a/images/type/vulnerability.svg b/images/type/vulnerability.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -886,6 +886,7 @@
     "tar": "^7.2.0",
     "underscore": "^1.13.6",
     "vscode-languageclient": "^8.0.2",
+    "xmldom": "^0.6.0",
     "zlib": "^1.0.5"
   },
   "devDependencies": {

diff --git a/src/rules/rulepanel.ts b/src/rules/rulepanel.ts
@@ -14,6 +14,8 @@ import * as util from '../util/util';
 import { clean, escapeHtml, ResourceResolver } from '../util/webview';
 import { decorateContextualHtmlContentWithDiff } from './code-diff';
 import { highlightAllCodeSnippetsInDesc } from './syntax-highlight';
+import * as fs from 'fs';
+import { DOMParser, XMLSerializer } from 'xmldom';
 
 let ruleDescriptionPanel: VSCode.WebviewPanel;
 
@@ -111,6 +113,27 @@ function renderImpact(softwareQuality: string, severity: string, resolver: Resou
 </div>`;
 }
 
+function renderStandardModeSeverityDetails(ruleType: string, severity: string, resolver: ResourceResolver) {
+  const ruleTypeToLowerCase = ruleType.toLocaleLowerCase('en-us');
+  const severityToLowerCase = severity.toLocaleLowerCase('en-us');
+  const ruleTypeImgSrc = util.resolveExtensionFile('images', 'type', `${ruleTypeToLowerCase}.svg`);
+  const severityImgSrc = util.resolveExtensionFile('images', 'severity', `${severityToLowerCase}.svg`);
+  return `<div class="impact severity-${severityToLowerCase} capsule">
+  ${fetchSVGIcon(ruleTypeImgSrc)}
+  &nbsp;${clean(ruleType)}&nbsp;
+  ${fetchSVGIcon(severityImgSrc)}
+  </div>`;
+}
+
+function fetchSVGIcon(pathToSVG: VSCode.Uri) : string {
+  const svgText = fs.readFileSync(pathToSVG.path, 'utf8');
+  const parser : DOMParser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+  const svgElement = svgDoc.documentElement;
+
+  return new XMLSerializer().serializeToString(svgElement);
+}
+
 function renderTaxonomyInfo(rule: ShowRuleDescriptionParams, resolver: ResourceResolver) {
   if (rule.severityDetails.impacts && Object.keys(rule.severityDetails.impacts).length > 0) {
     // Clean Code taxonomy
@@ -126,17 +149,8 @@ function renderTaxonomyInfo(rule: ShowRuleDescriptionParams, resolver: ResourceR
 </div>`;
   } else {
     // Old type + severity taxonomy
-    const severityImgSrc = resolver.resolve('images', 'severity', `${rule.severityDetails.severity.toLowerCase()}.png`);
-    const typeImgSrc = resolver.resolve('images', 'type', `${rule.severityDetails.type.toLowerCase()}.png`);
     return `<div class="taxonomy">
-  <div class="impact capsule">
-    ${clean(rule.severityDetails.type)}
-    <img alt="${rule.severityDetails.type}" src="${typeImgSrc}" />
-  </div>
-  <div class="impact capsule">
-    ${clean(rule.severityDetails.severity)}
-    <img alt="${rule.severityDetails.severity}" src="${severityImgSrc}" />
-  </div>
+      ${renderStandardModeSeverityDetails(rule.severityDetails.type, rule.severityDetails.severity, resolver)}
 </div>`;
   }
 }

diff --git a/styles/rule.css b/styles/rule.css
@@ -64,36 +64,61 @@ a {
   border: 1px solid;
 }
 
-.impact-blocker {
+.impact-blocker, .severity-blocker {
   color: var(--sonarlint-blocker-color);
   background-color: var(--sonarlint-blocker-background-color);
   border-color: var(--sonarlint-blocker-border-color);
 }
 
-.impact-high {
+.impact-high, .severity-critical {
   color: var(--sonarlint-high-color);
   background-color: var(--sonarlint-high-background-color);
   border-color: var(--sonarlint-high-border-color);
 }
 
-.impact-medium {
+.impact-medium, .severity-major {
   color: var(--sonarlint-medium-color);
   background-color: var(--sonarlint-medium-background-color);
   border-color: var(--sonarlint-medium-border-color);
 }
 
-.impact-low {
+.impact-low, .severity-minor {
   color: var(--sonarlint-low-color);
   background-color: var(--sonarlint-low-background-color);
   border-color: var(--sonarlint-low-border-color);
 }
 
-.impact-info {
+.impact-info, .severity-info {
   color: var(--sonarlint-info-color);
   background-color: var(--sonarlint-info-background-color);
   border-color: var(--sonarlint-info-border-color);
 }
 
+.severity-blocker svg {
+  fill: currentColor;
+  color: var(--sonarlint-blocker-border-color);
+}
+
+.severity-critical svg {
+  fill: currentColor; 
+  color: var(--sonarlint-high-boder-color);
+}
+
+.severity-major svg {
+  fill: currentColor; 
+  color: var(--sonarlint-medium-border-color);
+}
+
+.severity-minor svg {
+  fill: currentColor; 
+  color: var(--sonarlint-low-border-color);
+}
+
+.severity-info svg {
+  fill: currentColor; 
+  color: var(--sonarlint-info-border-color);
+}
+
 .impact img {
   display: inline-block;
   width: 16px;