markers: update the problem-marker decoration

Fixes #3819 The following commit updates the `problem-marker` decoration from the `explorer` to display the total count of errors and warnings for a given resource and updates container nodes (parent directories) to display a generic symbol. The following changes are aligned with the behavior with VS Code. Signed-off-by: vince-fugnitto <[email protected]>
eclipse-theia · Mar 31, 2020 · 4ad8b1a · 4ad8b1a
1 parent 9481af8
commit 4ad8b1a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/packages/markers/src/browser/problem/problem-decorator.ts b/packages/markers/src/browser/problem/problem-decorator.ts
@@ -127,10 +127,14 @@ export class ProblemDecorator implements TreeDecorator {
     }
 
     protected toDecorator(marker: Marker<Diagnostic>): TreeDecoration.Data {
+        // Determine if the given marker is for a resource of a container.
+        const isResource = Array.from(this.problemManager.getUris()).some(m => m === marker.uri);
         const position = TreeDecoration.IconOverlayPosition.BOTTOM_RIGHT;
         const icon = this.getOverlayIcon(marker);
         const color = this.getOverlayIconColor(marker);
         const priority = this.getPriority(marker);
+        // Determine the number of stats for marker (for display purposes we only care about errors and warnings).
+        const problemStat = this.problemManager.getProblemStat(new URI(marker.uri));
         return {
             priority,
             fontData: {
@@ -145,6 +149,17 @@ export class ProblemDecorator implements TreeDecorator {
                     color: 'transparent'
                 }
             },
+            tailDecorations: [
+                {
+                    data: isResource && (problemStat.errors + problemStat.warnings > 0)
+                        ? (problemStat.errors + problemStat.warnings).toString()
+                        : '',
+                    iconClass: isResource
+                        ? []
+                        : ['theia-marker-container-decoration', 'fa', 'fa-circle'],
+                    color,
+                }
+            ]
         };
     }
 

diff --git a/packages/markers/src/browser/problem/problem-manager.ts b/packages/markers/src/browser/problem/problem-manager.ts
@@ -18,6 +18,7 @@ import { injectable } from 'inversify';
 import { MarkerManager } from '../marker-manager';
 import { PROBLEM_KIND } from '../../common/problem-marker';
 import { Diagnostic } from 'vscode-languageserver-types';
+import URI from '@theia/core/lib/common/uri';
 
 export interface ProblemStat {
     errors: number;
@@ -32,11 +33,18 @@ export class ProblemManager extends MarkerManager<Diagnostic> {
         return PROBLEM_KIND;
     }
 
-    getProblemStat(): ProblemStat {
+    /**
+     * Get the problem stat (number of `errors`, `warnings`, and `infos`).
+     * - If `uri` is provided, determine the total count for this resource.
+     * @param uri the marker URI for search purposes.
+     *
+     * @returns the `ProblemStat`.
+     */
+    getProblemStat(uri?: URI): ProblemStat {
         let errors = 0;
         let warnings = 0;
         let infos = 0;
-        for (const marker of this.findMarkers()) {
+        for (const marker of this.findMarkers({ uri })) {
             if (marker.data.severity === 1) {
                 errors++;
             } else if (marker.data.severity === 2) {

diff --git a/packages/markers/src/browser/style/index.css b/packages/markers/src/browser/style/index.css
@@ -102,3 +102,7 @@
     width: 15px;
     height: 15px;
 }
+
+.theia-marker-container-decoration {
+    font-size: calc(var(--theia-ui-font-size0) * 0.7) !important;
+}