feat: timeline global info markers improvements

CHANGELOG.md

@@ -18,6 +18,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Show the pointer cursor by default when hovering the Timeline.
   - Show the grabbing cursor when the mouse is pressed down on the Timeline, to indicate drag is now possible.
   - Show the default cursor when hovering a Timeline event.
+- Timeline event marker clarity improvements ([#115][#115])
+  - Skipped-Lines and Max-Size-reached marker color from green to blue. Green normal mean things are ok, blue better represents information.
+  - Added faint grey lines between the event markers to seperates them. This helps when two error are next to each other.
 
 ## [1.10.3] - 2023-11-07
 
@@ -290,6 +293,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- Unreleased -->
 
+[#115]: https://github.com/certinia/debug-log-analyzer/issues/115
 [#423]: https://github.com/certinia/debug-log-analyzer/issues/423
 [#209]: https://github.com/certinia/debug-log-analyzer/issues/209
 

log-viewer/modules/components/LogViewer.ts

@@ -8,7 +8,7 @@
 import { hostService } from '../services/VSCodeService.js';
 import { globalStyles } from '../styles/global.styles.js';
 import './AppHeader.js';
-import { Notification } from './notifications/NotificationPanel.js';
+import { Notification, type NotificationSeverity } from './notifications/NotificationPanel.js';
 
 @customElement('log-viewer')
 export class LogViewer extends LitElement {
@@ -90,13 +90,15 @@
 
     const localNotifications = Array.from(this.notifications);
     apexLog.logIssues.forEach((element) => {
-      const severity = element.type === 'error' ? 'Error' : 'Warning';
+      const severity = this.toSeverity(element.type);
 
       const logMessage = new Notification();
       logMessage.summary = element.summary;
       logMessage.message = element.description;
       logMessage.severity = severity;
       localNotifications.push(logMessage);
+
+      console.debug('s,', severity, logMessage);
     });
     this.notifications = localNotifications;
 
@@ -135,6 +137,15 @@
     }
   }
 
+  severity = new Map<string, NotificationSeverity>([
+    ['error', 'Error'],
+    ['unexpected', 'Warning'],
+    ['skip', 'Info'],
+  ]);
+  private toSeverity(errorType: 'unexpected' | 'error' | 'skip') {
+    return this.severity.get(errorType) || 'Info';
+  }
+
   private parserIssuesToMessages(apexLog: ApexLog) {
     const issues: Notification[] = [];
     apexLog.parsingErrors.forEach((message) => {
@@ -150,7 +161,6 @@
             >report unsupported type</a
           >`
         : message.slice(message.indexOf(':') + 1);
-      logMessage.severity = 'Info';
       issues.push(logMessage);
     });
     return issues;

log-viewer/modules/components/notifications/NotificationPanel.ts

@@ -78,7 +78,7 @@ export class NotificationPanel extends LitElement {
       }
 
       .info {
-        background-color: var(--notification-info-background);
+        background-color: var(--notification-information-background);
       }
 
       .text-container {
@@ -127,8 +127,9 @@ export class NotificationPanel extends LitElement {
   }
 }
 
+export type NotificationSeverity = 'Error' | 'Warning' | 'Info' | 'None';
 export class Notification {
   summary = '';
   message: string | TemplateResult<1> = '';
-  severity: 'Error' | 'Warning' | 'Info' | 'none' = 'none';
+  severity: NotificationSeverity = 'None';
 }

log-viewer/modules/styles/notification.styles.ts

@@ -2,6 +2,6 @@ import { css } from 'lit';
 
 export const notificationStyles = css`
   --notification-error-background: var(--vscode-editorError-background, rgba(255, 128, 128, 0.2));
-  --notification-warning-background: rgba(128, 255, 128, 0.2);
-  --notification-information-background: rgba(128, 128, 255, 0.2);
+  --notification-warning-background: rgba(128, 128, 255, 0.2);
+  --notification-information-background: rgb(30, 128, 255, 0.2);
 `;

log-viewer/modules/timeline/Timeline.ts

@@ -27,7 +27,7 @@ interface TimelineColors {
 
 const truncationColors: Map<string, string> = new Map([
   ['error', 'rgba(255, 128, 128, 0.2)'],
-  ['skip', 'rgba(128, 255, 128, 0.2)'],
+  ['skip', 'rgb(30, 128, 255, 0.2)'],
   ['unexpected', 'rgba(128, 128, 255, 0.2)'],
 ]);
 
@@ -330,6 +330,9 @@ function drawTruncation(ctx: CanvasRenderingContext2D) {
   }
   let i = 0;
 
+  ctx.strokeStyle = '#808080';
+  ctx.beginPath();
+
   while (i < len) {
     const thisEntry = issues[i++],
       nextEntry = issues[i];
@@ -352,10 +355,17 @@ function drawTruncation(ctx: CanvasRenderingContext2D) {
         w = w - widthOffScreen;
       }
 
+      ctx.moveTo(x, -displayHeight);
+      ctx.lineTo(x, 0);
+
+      ctx.moveTo(x + w, -displayHeight);
+      ctx.lineTo(x + w, 0);
+
       ctx.fillStyle = truncationColors.get(thisEntry.type) || '';
       ctx.fillRect(x, -displayHeight, w, displayHeight);
     }
   }
+  ctx.stroke();
 }
 
 function calculateSizes() {