tools/system-analyzer/timeline-panel.mjs

// 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 {defineCustomElement, V8CustomElement} from './helper.mjs';
import './timeline/timeline-track.mjs';

defineCustomElement('timeline-panel', (templateText) =>
 class TimelinePanel extends V8CustomElement {
  constructor() {
    super(templateText);
    this.timelineOverview.addEventListener(
        'mousemove', e => this.handleTimelineIndicatorMove(e));
    this.addEventListener(
      'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
    this.backgroundCanvas = document.createElement('canvas');
    this.isLocked = false;
  }

  get timelineOverview() {
    return this.$('#timelineOverview');
  }

  get timelineOverviewIndicator() {
    return this.$('#timelineOverviewIndicator');
  }

  get timelineCanvas() {
    return this.timelineTracks[0].timelineCanvas;
  }

  get timeline() {
    return this.timelineTracks[0].timeline;
  }
  set nofChunks(count){
    for (const track of this.timelineTracks) {
      track.nofChunks = count;
    }
  }
  get nofChunks(){
    return this.timelineTracks[0].nofChunks;
  }
  get timelineTracks(){
    return this.$("slot").assignedNodes().filter(
      track => track.nodeType === Node.ELEMENT_NODE);
  }

  handleTimelineIndicatorMove(event) {
    if (event.buttons == 0) return;
    let timelineTotalWidth = this.timelineCanvas.offsetWidth;
    let factor = this.timelineOverview.offsetWidth / timelineTotalWidth;
    for (const track of this.timelineTracks) {
      track.handleTimelineIndicatorMove(event.movementX / factor);
    }
  }

  updateOverviewWindow() {
    let indicator = this.timelineOverviewIndicator;
    let totalIndicatorWidth =
        this.timelineOverview.offsetWidth;
    let div = this.timeline;
    let timelineTotalWidth = this.timelineCanvas.offsetWidth;
    let factor = totalIndicatorWidth / timelineTotalWidth;
    let width = div.offsetWidth * factor;
    let left = div.scrollLeft * factor;
    indicator.style.width = width + 'px';
    indicator.style.left = left + 'px';
  }

  handleOverviewBackgroundUpdate(e){
    this.timelineOverview.style.backgroundImage =
    'url(' + e.detail + ')';
  }

});