v8/tools/system-analyzer/timeline-panel.mjs
zeynepCankara e7357f1902 [tools] Add Indicium
Indicium is a new tool that integrates all our Map and IC processing
tools into one tool.

This CL does not attempt to cleanly integrate the Map Processor
and IC explorer, but provides an in initial starting point for further
integration work.

Bug: v8:10644
Change-Id: I753c116fd409c8c07613bf15f22e14aa1e8c8a0e
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2259935
Commit-Queue: Sathya Gunasekaran  <gsathya@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#68605}
2020-06-30 09:51:27 +00:00

53 lines
1.3 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.
defineCustomElement('timeline-panel', (templateText) =>
class TimelinePanel extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = templateText;
this.timelineOverviewSelect.addEventListener(
'mousemove', e => this.handleTimelineIndicatorMove(e));
}
$(id) {
return this.shadowRoot.querySelector(id);
}
querySelectorAll(query) {
return this.shadowRoot.querySelectorAll(query);
}
get timelineOverviewSelect() {
return this.$('#timelineOverview');
}
get timelineOverviewIndicatorSelect() {
return this.$('#timelineOverviewIndicator');
}
get timelineCanvasSelect() {
return this.$('#timelineCanvas');
}
get timelineChunksSelect() {
return this.$('#timelineChunks');
}
get timelineSelect() {
return this.$('#timeline');
}
handleTimelineIndicatorMove(event) {
if (event.buttons == 0) return;
let timelineTotalWidth = this.timelineCanvasSelect.offsetWidth;
let factor = this.timelineOverviewSelect.offsetWidth / timelineTotalWidth;
this.timelineSelect.scrollLeft += event.movementX / factor;
}
});