Skip to content

Commit b79e4df

Browse files
lukecotterlukecotter
committed
Merge branch 'main' into feat-timeline-search-highlight
2 parents 4522dca + 90718d1 commit b79e4df

24 files changed

Lines changed: 572 additions & 345 deletions

File tree

‎.github/dependabot.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
version: 2
22
updates:
3-
- package-ecosystem: 'npm'
4-
directory: '/'
3+
- package-ecosystem: "npm"
4+
directory: "/"
55
schedule:
6-
interval: 'daily' # Check the npm registry for updates every day (weekdays)
6+
interval: "daily"
77
versioning-strategy: auto

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2222
- ⚡ **Log Parsing**: Improved performance ([#552])
2323
- ✨ **Duration Formatting**: Human-readable duration formatting in tooltips (30000 ms -> 30s and 0.01 ms -> 10 µs) ([#671])
2424
- 🎯 **Number Precision**: Total and Self Time column precision changed to 2 decimal places for improved readability ([#671])
25+
- 🎨 Navigation Bar: Redesigned to better match VS Code’s look and feel ([#694])
2526

2627
## [1.18.1] 2025-07-09
2728

@@ -413,6 +414,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
413414

414415
<!-- Unreleased -->
415416

417+
[#694]: https://github.com/certinia/debug-log-analyzer/issues/694
416418
[#446]: https://github.com/certinia/debug-log-analyzer/issues/446
417419
[#251]: https://github.com/certinia/debug-log-analyzer/issues/251
418420
[#671]: https://github.com/certinia/debug-log-analyzer/issues/671

‎lana/src/commands/LogView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export class LogView {
159159
requestId,
160160
cmd: 'fetchLog',
161161
payload: {
162-
logName: filePath.name,
162+
logName: filePath.base,
163163
logUri: logFilePath ? panel.webview.asWebviewUri(Uri.file(logFilePath)).toString(true) : '',
164164
logPath: logFilePath,
165165
logData: logData,

‎log-viewer/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
height: 100%;
2323
display: flex;
2424
flex-direction: column;
25+
padding: 0px;
2526
}
2627

2728
@font-face {

‎log-viewer/src/components/CallStack.ts‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -62,34 +62,33 @@ export class CallStack extends LitElement {
6262
];
6363

6464
render() {
65-
const stack = DatabaseAccess.instance()?.getStack(this.timestamp).reverse() || [];
66-
if (stack.length) {
67-
const details = stack.slice(this.startDepth, this.endDepth).map((entry) => {
68-
return this.lineLink(entry);
69-
});
70-
71-
if (details.length === 1) {
72-
return details;
73-
}
65+
const stack = DatabaseAccess.instance()?.getStack(this.timestamp).reverse() ?? [];
66+
if (!stack.length) {
67+
return html`<div class="callstack__item">No call stack available</div>`;
68+
}
7469

75-
return html` <details>
76-
<summary>${details[0]}</summary>
77-
<div class="callstack">${details.slice(1, -1)}</div>
78-
</details>`;
79-
} else {
80-
return html` <div class="callstack__item">No call stack available</div>`;
70+
const details = stack.slice(this.startDepth, this.endDepth).map((entry) => {
71+
return this.lineLink(entry);
72+
});
73+
74+
if (details.length === 1) {
75+
return details;
8176
}
77+
78+
const [first, ...rest] = details;
79+
return html`<details>
80+
<summary>${first}</summary>
81+
<div class="callstack">${rest}</div>
82+
</details>`;
8283
}
8384

8485
private lineLink(line: LogEvent) {
85-
return html`
86-
<a
87-
@click=${this.onCallerClick}
88-
class="callstack__item code_text"
89-
data-timestamp="${line.timestamp}"
90-
>${line.text}</a
91-
>
92-
`;
86+
return html`<a
87+
@click=${this.onCallerClick}
88+
class="callstack__item code_text"
89+
data-timestamp="${line.timestamp}"
90+
>${line.text}</a
91+
>`;
9392
}
9493

9594
private onCallerClick(evt: Event) {

‎log-viewer/src/components/Divider.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* Copyright (c) 2025 Certinia Inc. All rights reserved.
3+
*/
4+
5+
import { LitElement, css, html } from 'lit';
6+
import { customElement, property } from 'lit/decorators.js';
7+
8+
@customElement('divider-line')
9+
export class Divider extends LitElement {
10+
@property({ reflect: true })
11+
orientation: 'horizontal' | 'vertical' = 'horizontal';
12+
13+
static styles = css`
14+
:host {
15+
--border-width: 1;
16+
--divider-background: var(--vscode-settings-dropdownListBorder, #454545);
17+
18+
display: inline-block;
19+
box-sizing: border-box;
20+
border-left:;
21+
flex: 0 0 auto;
22+
}
23+
24+
:host([orientation='horizontal']) {
25+
width: 100%;
26+
border-top: calc(var(--border-width) * 1px) solid var(--divider-background);
27+
}
28+
29+
:host([orientation='vertical']) {
30+
border-left: calc(var(--border-width) * 1px) solid var(--divider-background);
31+
}
32+
33+
.divider {
34+
display: inline-block;
35+
}
36+
`;
37+
38+
render() {
39+
return html` <span class="divider"></span> `;
40+
}
41+
}

‎log-viewer/src/components/DotSeparator.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* Copyright (c) 2025 Certinia Inc. All rights reserved.
3+
*/
4+
import { LitElement, css, html } from 'lit';
5+
import { customElement } from 'lit/decorators.js';
6+
7+
@customElement('dot-separator')
8+
export class DotSeparator extends LitElement {
9+
static styles = css`
10+
:host {
11+
color: var(--vscode-descriptionForeground, #999);
12+
opacity: 0.5;
13+
flex: 0 0 auto;
14+
}
15+
`;
16+
17+
render() {
18+
return html`<span class="metadata__separator">•</span>`;
19+
}
20+
}

‎log-viewer/src/components/IconButton.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*
2+
* Copyright (c) 2025 Certinia Inc. All rights reserved.
3+
*/
4+
import { provideVSCodeDesignSystem, vsCodeBadge, vsCodeButton } from '@vscode/webview-ui-toolkit';
5+
import { LitElement, css, html, unsafeCSS } from 'lit';
6+
import { customElement, property } from 'lit/decorators.js';
7+
8+
// styles
9+
import codiconStyles from '../styles/codicon.css';
10+
import { globalStyles } from '../styles/global.styles.js';
11+
12+
provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeBadge());
13+
14+
@customElement('icon-button')
15+
export class IconButton extends LitElement {
16+
static styles = [
17+
globalStyles,
18+
unsafeCSS(codiconStyles),
19+
css`
20+
vscode-button {
21+
--button-icon-hover-background: var(--vscode-toolbar-hoverBackground);
22+
23+
height: 22px;
24+
width: 22px;
25+
}
26+
27+
.badge-indicator::part(control) {
28+
--design-unit: 0;
29+
--border-width: 0;
30+
31+
background-color: var(--vscode-activityBarBadge-background);
32+
color: var(--vscode-activityBarBadge-foreground);
33+
position: absolute;
34+
top: 10px;
35+
right: 0;
36+
font-size: 9px;
37+
font-weight: 600;
38+
min-width: 12px;
39+
height: 12px;
40+
line-height: 12px;
41+
padding: 0 2px;
42+
border-radius: 16px;
43+
text-align: center;
44+
display: inline-block;
45+
box-sizing: border-box;
46+
}
47+
`,
48+
];
49+
50+
@property()
51+
icon: string = '';
52+
53+
@property()
54+
badgeCount: number | null | undefined = null;
55+
56+
@property()
57+
ariaLabel: string = 'Icon Button';
58+
59+
@property()
60+
title: string = 'Icon Button';
61+
62+
render() {
63+
const indicator =
64+
this.badgeCount !== null && this.badgeCount !== undefined
65+
? html`<vscode-badge class="badge-indicator">${this.badgeCount}</vscode-badge> `
66+
: ``;
67+
68+
return html`<div class="menu-container">
69+
<vscode-button appearance="icon" aria-label="${this.ariaLabel}" title="${this.title}">
70+
<span class="codicon ${this.icon}"></span>
71+
${indicator}
72+
</vscode-button>
73+
</div>`;
74+
}
75+
}

‎log-viewer/src/components/IconButtonSkeleton.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* Copyright (c) 2025 Certinia Inc. All rights reserved.
3+
*/
4+
import { LitElement, css, html } from 'lit';
5+
import { customElement } from 'lit/decorators.js';
6+
7+
// styles
8+
import { globalStyles } from '../styles/global.styles.js';
9+
import { skeletonStyles } from '../styles/skeleton.styles.js';
10+
11+
@customElement('icon-button-skeleton')
12+
export class IconButton extends LitElement {
13+
static styles = [
14+
globalStyles,
15+
skeletonStyles,
16+
css`
17+
:host {
18+
display: inline-flex;
19+
}
20+
.skeleton {
21+
width: 16px;
22+
height: 16px;
23+
}
24+
`,
25+
];
26+
27+
render() {
28+
return html` <span class="skeleton"></span>`;
29+
}
30+
}

‎log-viewer/src/components/LogLevels.ts‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44
import { LitElement, css, html } from 'lit';
55
import { customElement, property } from 'lit/decorators.js';
6+
import { repeat } from 'lit/directives/repeat.js';
67

78
import { DebugLevel } from '../core/log-parser/ApexLogParser.js';
89

@@ -28,22 +29,25 @@ export class LogLevels extends LitElement {
2829
flex-wrap: wrap;
2930
gap: 4px;
3031
align-items: center;
31-
padding: 4px 0;
32-
min-height: 27px;
32+
font-family: var(--vscode-editor-font-family);
3333
}
34-
.setting {
35-
display: inline-block;
34+
35+
vscode-tag::part(control) {
36+
--badge-background: var(--vscode-textBlockQuote-background);
37+
--button-border: none;
38+
--badge-foreground: none;
3639
font-family: var(--vscode-editor-font-family);
37-
background-color: var(--vscode-textBlockQuote-background);
38-
font-size: 0.9em;
39-
padding: 5px;
40+
font-size: 0.9rem;
4041
}
42+
4143
.setting__title {
42-
font-weight: bold;
44+
font-weight: 600;
45+
opacity: 0.9;
4346
}
4447
4548
.setting__level {
46-
color: #808080;
49+
color: var(--vscode-descriptionForeground, #808080);
50+
font-weight: 500;
4751
}
4852
4953
.setting-skeleton {
@@ -58,20 +62,18 @@ export class LogLevels extends LitElement {
5862
if (!this.logSettings) {
5963
const logLevels = [];
6064
for (let i = 0; i < 8; i++) {
61-
const levelHtml = html`<div class="setting-skeleton skeleton"></div>`;
62-
logLevels.push(levelHtml);
65+
logLevels.push(html`<div class="setting-skeleton skeleton"></div>`);
6366
}
64-
return html`${logLevels}`;
67+
return logLevels;
6568
}
6669

67-
const logLevels = [];
68-
for (const { logCategory, logLevel } of this.logSettings) {
69-
const levelHtml = html`<div class="setting">
70-
<span class="setting__title">${logCategory}:</span>
71-
<span class="setting__level">${logLevel}</span>
72-
</div>`;
73-
logLevels.push(levelHtml);
74-
}
75-
return html`${logLevels}`;
70+
return html`${repeat(
71+
this.logSettings,
72+
({ logCategory, logLevel }) =>
73+
html`<vscode-tag>
74+
<span class="setting__title">${logCategory}:</span>
75+
<span class="setting__level">${logLevel}</span>
76+
</vscode-tag>`,
77+
)}`;
7678
}
7779
}

0 commit comments

Comments
 (0)