79b6158757
Add better support for lots of thin ticks by:
* Removing stroke on ticks (so that the stroke isn't thicker than the
tick itself)
* Alternating colours of the ticks between light and dark (so that
neighbouring ticks are still distinguishable)
* Making selection drawing use isInputPending to allow faster looping
over multiple ticks.
Change-Id: Iaa13fe4820d3d3168e085dfc01d7581cbc1739f0
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2959626
Commit-Queue: Leszek Swirski <leszeks@chromium.org>
Auto-Submit: Leszek Swirski <leszeks@chromium.org>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#75146}
80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
// Copyright 2020 the V8 project authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
import {SelectRelatedEvent} from './events.mjs';
|
|
import {CollapsableElement, DOM, formatBytes, formatMicroSeconds} from './helper.mjs';
|
|
|
|
DOM.defineCustomElement('view/code-panel',
|
|
(templateText) =>
|
|
class CodePanel extends CollapsableElement {
|
|
_timeline;
|
|
_selectedEntries;
|
|
_entry;
|
|
|
|
constructor() {
|
|
super(templateText);
|
|
this._codeSelectNode.onchange = this._handleSelectCode.bind(this);
|
|
this.$('#selectedRelatedButton').onclick =
|
|
this._handleSelectRelated.bind(this)
|
|
}
|
|
|
|
set timeline(timeline) {
|
|
this._timeline = timeline;
|
|
this.$('.panel').style.display = timeline.isEmpty() ? 'none' : 'inherit';
|
|
this.requestUpdate();
|
|
}
|
|
|
|
set selectedEntries(entries) {
|
|
this._selectedEntries = entries;
|
|
this.entry = entries.first();
|
|
}
|
|
|
|
set entry(entry) {
|
|
this._entry = entry;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
get _disassemblyNode() {
|
|
return this.$('#disassembly');
|
|
}
|
|
|
|
get _sourceNode() {
|
|
return this.$('#sourceCode');
|
|
}
|
|
|
|
get _codeSelectNode() {
|
|
return this.$('#codeSelect');
|
|
}
|
|
|
|
_update() {
|
|
this._updateSelect();
|
|
this._disassemblyNode.innerText = this._entry?.code ?? '';
|
|
this._sourceNode.innerText = this._entry?.source ?? '';
|
|
}
|
|
|
|
_updateSelect() {
|
|
const select = this._codeSelectNode;
|
|
if (select.data === this._selectedEntries) return;
|
|
select.data = this._selectedEntries;
|
|
select.options.length = 0;
|
|
const sorted =
|
|
this._selectedEntries.slice().sort((a, b) => a.time - b.time);
|
|
for (const code of this._selectedEntries) {
|
|
const option = DOM.element('option');
|
|
option.text =
|
|
`${code.functionName}(...) t=${formatMicroSeconds(code.time)} size=${
|
|
formatBytes(code.size)} script=${code.script?.toString()}`;
|
|
option.data = code;
|
|
select.add(option);
|
|
}
|
|
}
|
|
|
|
_handleSelectCode() {
|
|
this.entry = this._codeSelectNode.selectedOptions[0].data;
|
|
}
|
|
|
|
_handleSelectRelated(e) {
|
|
if (!this._entry) return;
|
|
this.dispatchEvent(new SelectRelatedEvent(this._entry));
|
|
}
|
|
}); |