diff --git a/tools/system-analyzer/view/code-panel.mjs b/tools/system-analyzer/view/code-panel.mjs
index 88afb55c13..7bb61886ec 100644
--- a/tools/system-analyzer/view/code-panel.mjs
+++ b/tools/system-analyzer/view/code-panel.mjs
@@ -62,7 +62,7 @@ DOM.defineCustomElement('view/code-panel',
for (const code of this._selectedEntries) {
const option = DOM.element('option');
option.text =
- `${code.name}(...) t=${formatMicroSeconds(code.time)} size=${
+ `${code.functionName}(...) t=${formatMicroSeconds(code.time)} size=${
formatBytes(code.size)} script=${code.script?.toString()}`;
option.data = code;
select.add(option);
diff --git a/tools/system-analyzer/view/timeline/timeline-track-template.html b/tools/system-analyzer/view/timeline/timeline-track-template.html
index 84c38fef3d..4b4b6aee73 100644
--- a/tools/system-analyzer/view/timeline/timeline-track-template.html
+++ b/tools/system-analyzer/view/timeline/timeline-track-template.html
@@ -185,9 +185,7 @@ found in the LICENSE file. -->
font-size: 9px;
}
.flame {
- stroke: var(--background-color);
- stroke-width: 1;
- vector-effect: non-scaling-stroke;
+ stroke-width: 0;
}
.flameSelected {
fill: var(--on-background-color);
diff --git a/tools/system-analyzer/view/timeline/timeline-track-tick.mjs b/tools/system-analyzer/view/timeline/timeline-track-tick.mjs
index b51a0e7fa1..d8171edcb4 100644
--- a/tools/system-analyzer/view/timeline/timeline-track-tick.mjs
+++ b/tools/system-analyzer/view/timeline/timeline-track-tick.mjs
@@ -6,11 +6,11 @@ import {delay} from '../../helper.mjs';
import {TickLogEntry} from '../../log/tick.mjs';
import {Timeline} from '../../timeline.mjs';
import {SelectTimeEvent} from '../events.mjs';
-import {DOM, SVG} from '../helper.mjs';
+import {CSSColor, DOM, SVG} from '../helper.mjs';
import {TimelineTrackBase} from './timeline-track-base.mjs'
-const kFlameHeight = 10;
+const kFlameHeight = 8;
class Flame {
constructor(time, entry, depth, id) {
@@ -187,22 +187,25 @@ DOM.defineCustomElement('view/timeline/timeline-track', 'timeline-track-tick',
add();
await delay(50);
}
- buffer += this.drawFlame(rawFlames[i]);
+ buffer += this.drawFlame(rawFlames[i], i);
}
add();
}
- drawFlame(flame, outline = false) {
+ drawFlame(flame, i, outline = false) {
const x = this.timeToPosition(flame.time);
const y = (flame.depth + 1) * kFlameHeight;
let width = flame.duration * this._timeToPixel;
if (outline) {
return ``;
+ kFlameHeight - 1} class=flameSelected />`;
}
- const color = this._legend.colorForType(flame.type);
- return ``;
+ let color = this._legend.colorForType(flame.type);
+ if (i % 2 == 1) {
+ color = CSSColor.darken(color, 20);
+ }
+ return ``;
}
drawFlameText(flame) {
@@ -258,29 +261,41 @@ class Annotations {
const start = this._flames.find(time);
let offset = 0;
// Draw annotations gradually outwards starting form the given time.
+ let deadline = performance.now() + 500;
for (let range = 0; range < this._flames.length; range += 10000) {
this._markFlames(start - range, start - offset);
this._markFlames(start + offset, start + range);
offset = range;
- await delay(50);
- // Abort if we started another update asynchronously.
- if (this._logEntry != logEntry) return;
+ if (navigator.scheduling.isInputPending({includeContinuous: true}) ||
+ performance.now() >= deadline) {
+ // Yield if we have to handle an input event, or we're out of time.
+ await delay(50);
+ // Abort if we started another update asynchronously.
+ if (this._logEntry != logEntry) return;
+
+ deadline = performance.now() + 500;
+ }
+ this._drawBuffer();
}
+ this._drawBuffer();
}
_markFlames(start, end) {
const rawFlames = this._flames.values;
if (start < 0) start = 0;
if (end > rawFlames.length) end = rawFlames.length;
- const code = this._logEntry.entry;
- // Also compare against the function
- const func = code.func ?? 0;
+ const logEntry = this._logEntry;
+ // Also compare against the function, if any.
+ const func = logEntry.entry?.func;
for (let i = start; i < end; i++) {
const flame = rawFlames[i];
- if (flame.entry !== code && flame.entry?.func !== func) continue;
- this._buffer += this._track.drawFlame(flame, true);
+ if (!flame.entry) continue;
+ if (flame.entry.logEntry !== logEntry &&
+ (!func || flame.entry.func !== func)) {
+ continue;
+ }
+ this._buffer += this._track.drawFlame(flame, i, true);
}
- this._drawBuffer();
}
_drawBuffer() {