front_end/perf_ui/TimelineGrid.js

/*
 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
 * Copyright (C) 2009 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1.  Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 * 2.  Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 *     its contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 * @unrestricted
 */
PerfUI.TimelineGrid = class {
  constructor() {
    this.element = createElement('div');
    UI.appendStyle(this.element, 'perf_ui/timelineGrid.css');

    this._dividersElement = this.element.createChild('div', 'resources-dividers');

    this._gridHeaderElement = createElement('div');
    this._gridHeaderElement.classList.add('timeline-grid-header');
    this._eventDividersElement = this._gridHeaderElement.createChild('div', 'resources-event-dividers');
    this._dividersLabelBarElement = this._gridHeaderElement.createChild('div', 'resources-dividers-label-bar');
    this.element.appendChild(this._gridHeaderElement);
  }

  /**
   * @param {!PerfUI.TimelineGrid.Calculator} calculator
   * @param {number=} freeZoneAtLeft
   * @return {!PerfUI.TimelineGrid.DividersData}
   */
  static calculateGridOffsets(calculator, freeZoneAtLeft) {
    /** @const */ const minGridSlicePx = 64;  // minimal distance between grid lines.

    const clientWidth = calculator.computePosition(calculator.maximumBoundary());
    let dividersCount = clientWidth / minGridSlicePx;
    let gridSliceTime = calculator.boundarySpan() / dividersCount;
    const pixelsPerTime = clientWidth / calculator.boundarySpan();

    // Align gridSliceTime to a nearest round value.
    // We allow spans that fit into the formula: span = (1|2|5)x10^n,
    // e.g.: ...  .1  .2  .5  1  2  5  10  20  50  ...
    // After a span has been chosen make grid lines at multiples of the span.

    const logGridSliceTime = Math.ceil(Math.log(gridSliceTime) / Math.LN10);
    gridSliceTime = Math.pow(10, logGridSliceTime);
    if (gridSliceTime * pixelsPerTime >= 5 * minGridSlicePx) {
      gridSliceTime = gridSliceTime / 5;
    }
    if (gridSliceTime * pixelsPerTime >= 2 * minGridSlicePx) {
      gridSliceTime = gridSliceTime / 2;
    }

    const firstDividerTime =
        Math.ceil((calculator.minimumBoundary() - calculator.zeroTime()) / gridSliceTime) * gridSliceTime +
        calculator.zeroTime();
    let lastDividerTime = calculator.maximumBoundary();
    // Add some extra space past the right boundary as the rightmost divider label text
    // may be partially shown rather than just pop up when a new rightmost divider gets into the view.
    lastDividerTime += minGridSlicePx / pixelsPerTime;
    dividersCount = Math.ceil((lastDividerTime - firstDividerTime) / gridSliceTime);

    if (!gridSliceTime) {
      dividersCount = 0;
    }

    const offsets = [];
    for (let i = 0; i < dividersCount; ++i) {
      const time = firstDividerTime + gridSliceTime * i;
      if (calculator.computePosition(time) < freeZoneAtLeft) {
        continue;
      }
      offsets.push({position: Math.floor(calculator.computePosition(time)), time: time});
    }

    return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSliceTime * 1.01) / Math.LN10))};
  }

  /**
   * @param {!CanvasRenderingContext2D} context
   * @param {!PerfUI.TimelineGrid.DividersData} dividersData
   */
  static drawCanvasGrid(context, dividersData) {
    context.save();
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
    const height = Math.floor(context.canvas.height / window.devicePixelRatio);
    context.strokeStyle = UI.themeSupport.patchColorText('rgba(0, 0, 0, 0.1)', UI.ThemeSupport.ColorUsage.Foreground);
    context.lineWidth = 1;

    context.translate(0.5, 0.5);
    context.beginPath();
    for (const offsetInfo of dividersData.offsets) {
      context.moveTo(offsetInfo.position, 0);
      context.lineTo(offsetInfo.position, height);
    }
    context.stroke();
    context.restore();
  }

  /**
   * @param {!CanvasRenderingContext2D} context
   * @param {!PerfUI.TimelineGrid.DividersData} dividersData
   * @param {function(number):string} formatTimeFunction
   * @param {number} paddingTop
   * @param {number} headerHeight
   * @param {number=} freeZoneAtLeft
   */
  static drawCanvasHeaders(context, dividersData, formatTimeFunction, paddingTop, headerHeight, freeZoneAtLeft) {
    context.save();
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
    const width = Math.ceil(context.canvas.width / window.devicePixelRatio);

    context.beginPath();
    context.fillStyle =
        UI.themeSupport.patchColorText('rgba(255, 255, 255, 0.5)', UI.ThemeSupport.ColorUsage.Background);
    context.fillRect(0, 0, width, headerHeight);

    context.fillStyle = UI.themeSupport.patchColorText('#333', UI.ThemeSupport.ColorUsage.Foreground);
    context.textBaseline = 'hanging';
    context.font = '11px ' + Host.fontFamily();

    const paddingRight = 4;
    for (const offsetInfo of dividersData.offsets) {
      const text = formatTimeFunction(offsetInfo.time);
      const textWidth = context.measureText(text).width;
      const textPosition = offsetInfo.position - textWidth - paddingRight;
      if (!freeZoneAtLeft || freeZoneAtLeft < textPosition) {
        context.fillText(text, textPosition, paddingTop);
      }
    }
    context.restore();
  }

  get dividersElement() {
    return this._dividersElement;
  }

  get dividersLabelBarElement() {
    return this._dividersLabelBarElement;
  }

  removeDividers() {
    this._dividersElement.removeChildren();
    this._dividersLabelBarElement.removeChildren();
  }

  /**
   * @param {!PerfUI.TimelineGrid.Calculator} calculator
   * @param {number=} freeZoneAtLeft
   * @return {boolean}
   */
  updateDividers(calculator, freeZoneAtLeft) {
    const dividersData = PerfUI.TimelineGrid.calculateGridOffsets(calculator, freeZoneAtLeft);
    const dividerOffsets = dividersData.offsets;
    const precision = dividersData.precision;

    const dividersElementClientWidth = this._dividersElement.clientWidth;

    // Reuse divider elements and labels.
    let divider = /** @type {?Element} */ (this._dividersElement.firstChild);
    let dividerLabelBar = /** @type {?Element} */ (this._dividersLabelBarElement.firstChild);

    for (let i = 0; i < dividerOffsets.length; ++i) {
      if (!divider) {
        divider = createElement('div');
        divider.className = 'resources-divider';
        this._dividersElement.appendChild(divider);

        dividerLabelBar = createElement('div');
        dividerLabelBar.className = 'resources-divider';
        const label = createElement('div');
        label.className = 'resources-divider-label';
        dividerLabelBar._labelElement = label;
        dividerLabelBar.appendChild(label);
        this._dividersLabelBarElement.appendChild(dividerLabelBar);
      }

      const time = dividerOffsets[i].time;
      const position = dividerOffsets[i].position;
      dividerLabelBar._labelElement.textContent = calculator.formatValue(time, precision);

      const percentLeft = 100 * position / dividersElementClientWidth;
      divider.style.left = percentLeft + '%';
      dividerLabelBar.style.left = percentLeft + '%';

      divider = /** @type {?Element} */ (divider.nextSibling);
      dividerLabelBar = /** @type {?Element} */ (dividerLabelBar.nextSibling);
    }

    // Remove extras.
    while (divider) {
      const nextDivider = divider.nextSibling;
      this._dividersElement.removeChild(divider);
      divider = nextDivider;
    }
    while (dividerLabelBar) {
      const nextDivider = dividerLabelBar.nextSibling;
      this._dividersLabelBarElement.removeChild(dividerLabelBar);
      dividerLabelBar = nextDivider;
    }
    return true;
  }

  /**
   * @param {!Element} divider
   */
  addEventDivider(divider) {
    this._eventDividersElement.appendChild(divider);
  }

  /**
   * @param {!Array.<!Element>} dividers
   */
  addEventDividers(dividers) {
    this._gridHeaderElement.removeChild(this._eventDividersElement);
    for (const divider of dividers) {
      this._eventDividersElement.appendChild(divider);
    }
    this._gridHeaderElement.appendChild(this._eventDividersElement);
  }

  removeEventDividers() {
    this._eventDividersElement.removeChildren();
  }

  hideEventDividers() {
    this._eventDividersElement.classList.add('hidden');
  }

  showEventDividers() {
    this._eventDividersElement.classList.remove('hidden');
  }

  hideDividers() {
    this._dividersElement.classList.add('hidden');
  }

  showDividers() {
    this._dividersElement.classList.remove('hidden');
  }

  /**
   * @param {number} scrollTop
   */
  setScrollTop(scrollTop) {
    this._dividersLabelBarElement.style.top = scrollTop + 'px';
    this._eventDividersElement.style.top = scrollTop + 'px';
  }
};

/** @typedef {!{offsets: !Array<!{position: number, time: number}>, precision: number}} */
PerfUI.TimelineGrid.DividersData;

/**
 * @interface
 */
PerfUI.TimelineGrid.Calculator = function() {};

PerfUI.TimelineGrid.Calculator.prototype = {
  /**
   * @param {number} time
   * @return {number}
   */
  computePosition(time) {},

  /**
   * @param {number} time
   * @param {number=} precision
   * @return {string}
   */
  formatValue(time, precision) {},

  /** @return {number} */
  minimumBoundary() {},

  /** @return {number} */
  zeroTime() {},

  /** @return {number} */
  maximumBoundary() {},

  /** @return {number} */
  boundarySpan() {}
};