| // 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; |
| } |
| |
| }); |