diff --git a/CHANGELOG.md b/CHANGELOG.md index d06ee58d..86ccbc90 100644 --- a/CHANGELOG.md +++ b/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 +[#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 diff --git a/log-viewer/modules/components/LogViewer.ts b/log-viewer/modules/components/LogViewer.ts index 8020b13b..d22312e3 100644 --- a/log-viewer/modules/components/LogViewer.ts +++ b/log-viewer/modules/components/LogViewer.ts @@ -8,7 +8,7 @@ import { ApexLog, parse } from '../parsers/ApexLogParser.js'; 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 @@ export class LogViewer extends LitElement { 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 @@ export class LogViewer extends LitElement { } } + severity = new Map([ + ['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 @@ export class LogViewer extends LitElement { >report unsupported type` : message.slice(message.indexOf(':') + 1); - logMessage.severity = 'Info'; issues.push(logMessage); }); return issues; diff --git a/log-viewer/modules/components/notifications/NotificationPanel.ts b/log-viewer/modules/components/notifications/NotificationPanel.ts index d7346db5..d96702e1 100644 --- a/log-viewer/modules/components/notifications/NotificationPanel.ts +++ b/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'; } diff --git a/log-viewer/modules/styles/notification.styles.ts b/log-viewer/modules/styles/notification.styles.ts index 22d75b78..0aca3ff2 100644 --- a/log-viewer/modules/styles/notification.styles.ts +++ b/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); `; diff --git a/log-viewer/modules/timeline/Timeline.ts b/log-viewer/modules/timeline/Timeline.ts index 13dfd9fc..0857a6dc 100644 --- a/log-viewer/modules/timeline/Timeline.ts +++ b/log-viewer/modules/timeline/Timeline.ts @@ -27,7 +27,7 @@ interface TimelineColors { const truncationColors: Map = 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() {