// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview ARC Graphics Tracing UI.
 */

// Namespace of SVG elements
const svgNS = 'http://www.w3.org/2000/svg';

// Background color for the band with events.
const bandColor = '#d3d3d3';

// Color that should never appear on UI.
const unusedColor = '#ff0000';

// Supported zooms, mcs per pixel
const zooms = [
  2.5,
  5.0,
  10.0,
  25.0,
  50.0,
  100.0,
  250.0,
  500.0,
  1000.0,
  2500.0,
  5000.0,
  10000.0,
  25000.0,
];

// Active zoom level, as index in |zooms|. By default 100 mcs per pixel.
let zoomLevel = 5;

// Graphics event types which are used in the model JSON data. These must match
// the graphics event types in
// chrome/browser/ash/arc/tracing/arc_tracing_graphics_model.h. To aid in
// maintaining consistency, do not modify values once added - deprecation and
// removal are allowed.
const kExoSurfaceCommit = 206;
const kExoSurfaceCommitJank = 207;
const kChromeOSPresentationDone = 503;
const kChromeOSSwapDone = 504;
const kChromeOSPerceivedJank = 506;
const kChromeOSSwapJank = 507;

/**
 * Keep in sync with ArcTracingGraphicsModel::EventType
 * See chrome/browser/ash/arc/tracing/arc_tracing_graphics_model.h.
 * Describes how events should be rendered. |color| specifies color of the
 * event, |name| is used in tooltips. |width| defines the width in case it is
 * rendered as a line and |radius| defines the radius in case it is rendered as
 * a circle.
 *
 * TODO(matvore): Only kIdleIn and kIdleOut are used in bands. Verify and clean
 * up.
 */
const eventAttributes = {
  // kIdleIn
  0: {color: bandColor, name: 'idle'},
  // kIdleOut
  1: {color: '#ffbf00', name: 'active'},

  // kBufferQueueDequeueStart
  100: {color: '#99cc00', name: 'app requests buffer'},
  // kBufferQueueDequeueDone
  101: {color: '#669999', name: 'app fills buffer'},
  // kBufferQueueQueueStart
  102: {color: '#cccc00', name: 'app queues buffer'},
  // kBufferQueueQueueDone
  103: {color: unusedColor, name: 'buffer is queued'},
  // kBufferQueueAcquire
  104: {color: '#66ffcc', name: 'use buffer'},
  // kBufferQueueReleased
  105: {color: unusedColor, name: 'buffer released'},
  // kBufferFillJank
  106: {color: '#ff0000', name: 'buffer filling jank', width: 1.0, radius: 4.0},

  [kExoSurfaceCommitJank]: {name: 'commit jank', radius: 4.0},

  // kChromeBarrierOrder.
  300: {color: '#ff9933', name: 'barrier order'},
  // kChromeBarrierFlush
  301: {color: unusedColor, name: 'barrier flush'},

  // kSurfaceFlingerInvalidationStart
  401: {color: '#ff9933', name: 'invalidation start'},
  // kSurfaceFlingerInvalidationDone
  402: {color: unusedColor, name: 'invalidation done'},
  // kSurfaceFlingerCompositionStart
  403: {color: '#3399ff', name: 'composition start'},
  // kSurfaceFlingerCompositionDone
  404: {color: unusedColor, name: 'composition done'},

  // kChromeOSDraw
  500: {color: '#3399ff', name: 'draw'},
  // kChromeOSSwap
  501: {color: '#cc9900', name: 'swap'},
  // kChromeOSWaitForAck
  502: {color: '#ccffff', name: 'wait for ack'},
  // kChromeOSPresentationDone
  503: {color: '#ffbf00', name: 'presentation done'},
  // kChromeOSSwapDone
  504: {color: '#65f441', name: 'swap done'},
  // kChromeOSJank
  505: {
    color: '#ff0000',
    name: 'Chrome composition jank',
    width: 1.0,
    radius: 4.0,
  },
  [kChromeOSPerceivedJank]: {
    name: 'perceived jank',
    radius: 4.0,
  },
  [kChromeOSSwapJank]: {
    name: 'swap jank',
    radius: 4.0,
  },

  // kCustomEvent
  600: {color: '#7cb342', name: 'Custom event', width: 1.0, radius: 4.0},

  // Service events.
  // kTimeMark
  10000: {color: '#888', name: 'Time mark', width: 0.75},
  // kTimeMarkSmall
  10001: {color: '#888', name: 'Time mark', width: 0.15},
};

/**
 * Defines the map of events that can be treated as the end of event sequence.
 * Time after such events is considered as idle time until the next event
 * starts. Key of |endSequenceEvents| is event type as defined in
 * ArcTracingGraphicsModel::EventType and value is the list of event
 * types that should follow after the tested event to consider it as end of
 * sequence. Empty list means that tested event is certainly end of the
 * sequence.
 */
const endSequenceEvents = {
  // kIdleIn
  0: [],
  // kBufferQueueQueueDone
  103: [],
  // kBufferQueueReleased
  105: [],
  // kChromeBarrierFlush
  301: [],
  // kSurfaceFlingerInvalidationDone
  402: [],
  // kSurfaceFlingerCompositionDone
  404: [],
  // kChromeOSPresentationDone. Chrome does not define exactly which event
  // is the last. Different
  // pipelines may produce different sequences. Both event type may indicate
  // the end of the
  // sequence.
  503: [500 /* kChromeOSDraw */],
  // kChromeOSSwapDone
  504: [500 /* kChromeOSDraw */],
};

/**
 * Keep in sync with ArcValueEvent::Type
 * See chrome/browser/ash/arc/tracing/arc_value_event.h.
 * Describes how value events should be rendered in charts. |color| specifies
 * color of the event, |name| is used in tooltips, |width| specify width of
 * the line in chart, |scale| is used to convert actual value to rendered value.
 * When rendered, min and max values and determined and used as a range where
 * chart is drawn. However, in the case range is small, let say 1 mb for
 * |kMemUsed| this may lead to user confusion that huge amount of memory was
 * allocated. To prevent this scanario, |minRange| defines the minimum range of
 * values and is set in scaled units.
 */
const valueAttributes = {
  // kMemUsed.
  1: {
    color: '#ff3d00',
    minRange: 512.0,
    name: 'used mb',
    scale: 1.0 / 1024.0,
    width: 1.0,
  },
  // kSwapRead.
  2: {
    color: '#ffc400',
    minRange: 32.0,
    name: 'swap read sectors',
    scale: 1.0,
    width: 1.0,
  },
  // kSwapWrite.
  3: {
    color: '#ff9100',
    minRange: 32.0,
    name: 'swap write sectors',
    scale: 1.0,
    width: 1.0,
  },
  // kGemObjects.
  5: {
    color: '#3d5afe',
    minRange: 1000,
    name: 'geom. objects',
    scale: 1.0,
    width: 1.0,
  },
  // kGemSize.
  6: {
    color: '#7c4dff',
    minRange: 256.0,
    name: 'geom. size mb',
    scale: 1.0 / 1024.0,
    width: 1.0,
  },
  // kGpuFrequency.
  7: {
    color: '#01579b',
    minRange: 300.0,
    name: 'GPU frequency mhz',
    scale: 1.0,
    width: 1.0,
  },
  // kCpuTemperature.
  8: {
    color: '#ff3d00',
    minRange: 20.0,
    name: 'CPU celsius.',
    scale: 1.0 / 1000.0,
    width: 1.0,
  },
  // kCpuFrequency.
  9: {
    color: '#ff80ab',
    minRange: 300.0,
    name: 'CPU Mhz.',
    scale: 1.0 / 1000.0,
    width: 1.0,
  },
  // kCpuPower.
  10: {
    color: '#dd2c00',
    minRange: 0.0,
    name: 'CPU milli-watts.',
    scale: 1.0,
    width: 1.0,
  },
  // kGpuPower.
  11: {
    color: '#dd2c00',
    minRange: 0.0,
    name: 'GPU milli-watts.',
    scale: 1.0,
    width: 1.0,
  },
  // kMemoryPower.
  12: {
    color: '#dd2c00',
    minRange: 0.0,
    name: 'Memory milli-watts.',
    scale: 1.0,
    width: 1.0,
  },
  // kPackagePowerConstraint.
  13: {
    color: '#dd0050',
    minRange: 0.0,
    name: 'CPU package constraint milli-watts.',
    scale: 1.0,
    width: 1.0,
  },
};

/**
 * @type {function()}.
 * Callback when UI has to be updted.
 */
let updateUiCallback = null;

/**
 * @type {DetailedInfoView}.
 * Currently active detailed view.
 */
let activeDetailedInfoView = null;

/**
 * Discards active detailed view if it exists.
 */
function discardDetailedInfo() {
  if (activeDetailedInfoView) {
    activeDetailedInfoView.discard();
    activeDetailedInfoView = null;
  }
}

/**
 * Shows detailed view for |eventBand| in response to mouse click event
 * |mouseEvent|.
 */
function showDetailedInfoForBand(eventBand, mouseEvent) {
  discardDetailedInfo();
  activeDetailedInfoView = eventBand.showDetailedInfo(mouseEvent);
  mouseEvent.preventDefault();
}

/**
 * Returns text representation of timestamp in milliseconds with one number
 * after the decimal point.
 *
 * @param {number} timestamp in microseconds.
 */
function timestampToMsText(timestamp) {
  return (timestamp / 1000.0).toFixed(1);
}

/**
 * Changes zoom. |delta| specifies how many zoom levels to adjust. Negative
 * |delta| means zoom in and positive zoom out.
 */
function updateZoom(delta) {
  const newZoomLevel = zoomLevel + delta;
  if (newZoomLevel < 0 || newZoomLevel >= zooms.length) {
    return;
  }

  zoomLevel = newZoomLevel;
  updateUiCallback();
}

/**
 * Initialises common tracing UI.
 *  * handle zoom.
 *  * handle load request
 *  * set keyboard and mouse listeners to discard detailed view overlay.
 */
function initializeUi(initZoomLevel, callback) {
  zoomLevel = initZoomLevel;
  updateUiCallback = callback;

  document.body.onkeydown = function(event) {
    // Escape and Enter.
    if (event.key === 'Escape' || event.key === 'Enter') {
      discardDetailedInfo();
    } else if (event.key === 'w') {
      // Zoom in.
      updateZoom(-1 /* delta */);
    } else if (event.key === 's') {
      // Zoom out.
      updateZoom(1 /* delta */);
    }
  };

  window.onclick = function(event) {
    // Detect click outside the detailed view.
    if (event.defaultPrevented || activeDetailedInfoView == null) {
      return;
    }
    if (!activeDetailedInfoView.overlay.contains(event.target)) {
      discardDetailedInfo();
    }
  };

  if ($('arc-tracing-load')) {
    $('arc-tracing-load').onclick = function(event) {
      const fileElement = document.createElement('input');
      fileElement.type = 'file';

      fileElement.onchange = function(event) {
        const reader = new FileReader();
        reader.onload = function(response) {
          chrome.send('loadFromText', [response.target.result]);
        };
        reader.readAsText(event.target.files[0]);
      };

      fileElement.click();
    };
  }
}

/**
 * Updates current status.
 * @param {string} statusText text to set as a status.
 */
function setStatus(statusText) {
  $('arc-tracing-status').textContent = statusText;
}

/** Factory class for SVG elements. */
class SVG {
  // Creates rectangle element in the |svg| with provided attributes.
  static addRect(svg, x, y, width, height, color, opacity) {
    const rect = document.createElementNS(svgNS, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'width', width);
    rect.setAttributeNS(null, 'height', height);
    rect.setAttributeNS(null, 'fill', color);
    rect.setAttributeNS(null, 'stroke', 'none');
    if (opacity) {
      rect.setAttributeNS(null, 'fill-opacity', opacity);
    }
    svg.appendChild(rect);
    return rect;
  }

  // Creates line element in the |svg| with provided attributes.
  static addLine(svg, x1, y1, x2, y2, color, width) {
    const line = document.createElementNS(svgNS, 'line');
    line.setAttributeNS(null, 'x1', x1);
    line.setAttributeNS(null, 'y1', y1);
    line.setAttributeNS(null, 'x2', x2);
    line.setAttributeNS(null, 'y2', y2);
    line.setAttributeNS(null, 'stroke', color);
    line.setAttributeNS(null, 'stroke-width', width);
    svg.appendChild(line);
    return line;
  }

  // Creates polyline element in the |svg| with provided attributes.
  static addPolyline(svg, points, color, width) {
    const polyline = document.createElementNS(svgNS, 'polyline');
    polyline.setAttributeNS(null, 'points', points.join(' '));
    polyline.setAttributeNS(null, 'stroke', color);
    polyline.setAttributeNS(null, 'stroke-width', width);
    polyline.setAttributeNS(null, 'fill', 'none');
    svg.appendChild(polyline);
    return polyline;
  }

  // Creates circle element in the |svg| with provided attributes.
  static addCircle(svg, x, y, radius, strokeWidth, color, strokeColor) {
    const circle = document.createElementNS(svgNS, 'circle');
    circle.setAttributeNS(null, 'cx', x);
    circle.setAttributeNS(null, 'cy', y);
    circle.setAttributeNS(null, 'r', radius);
    circle.setAttributeNS(null, 'fill', color);
    circle.setAttributeNS(null, 'stroke', strokeColor);
    circle.setAttributeNS(null, 'stroke-width', strokeWidth);
    svg.appendChild(circle);
    return circle;
  }

  // Creates text element in the |svg| with provided attributes.
  static addText(svg, x, y, fontSize, textContent, anchor, transform) {
    const lines = textContent.split('\n');
    let text;
    for (let i = 0; i < lines.length; ++i) {
      text = document.createElementNS(svgNS, 'text');
      text.setAttributeNS(null, 'x', x);
      text.setAttributeNS(null, 'y', y);
      text.setAttributeNS(null, 'fill', 'black');
      text.setAttributeNS(null, 'font-size', fontSize);
      if (anchor) {
        text.setAttributeNS(null, 'text-anchor', anchor);
      }
      if (transform) {
        text.setAttributeNS(null, 'transform', transform);
      }
      text.appendChild(document.createTextNode(lines[i]));
      svg.appendChild(text);
      y += fontSize;
    }
    return text;
  }
}

/**
 * Represents title for events bands that can collapse/expand controlled
 * content.
 */
class EventBandTitle {
  constructor(parent, anchor, title, className, opt_iconContent) {
    this.div = document.createElement('div');
    this.div.classList.add(className);
    if (opt_iconContent) {
      const icon = document.createElement('img');
      icon.src = 'data:image/png;base64,' + opt_iconContent;
      this.div.appendChild(icon);
    }
    const span = document.createElement('span');
    span.appendChild(document.createTextNode(title));
    this.div.appendChild(span);
    this.controlledItems = [];
    this.div.onclick = this.onClick_.bind(this);
    this.parent = parent;
    if (anchor && anchor.nextSibling) {
      this.parent.insertBefore(this.div, anchor.nextSibling);
    } else {
      this.parent.appendChild(this.div);
    }
  }

  /**
   * Adds extra HTML element under the control. This element will be
   * automatically expanded/collapsed together with this title.
   *
   * @param {HTMLElement} item svg element to control.
   */
  addContolledItems(item) {
    this.controlledItems.push(item);
  }

  onClick_() {
    this.div.classList.toggle('hidden');
    for (let i = 0; i < this.controlledItems.length; ++i) {
      this.controlledItems[i].classList.toggle('hidden');
    }
  }
}

/** Represents container for event bands. */
class EventBands {
  /**
   * Creates container for the event bands.
   *
   * @param {EventBandTitle} title controls visibility of this band.
   * @param {string} className class name of the svg element that represents
   *     this band. 'arc-events-top-band' is used for top-level events and
   *     'arc-events-inner-band' is used for per-buffer events.
   * @param {number} resolution the resolution of bands microseconds per 1
   *     pixel.
   * @param {number} minTimestamp the minimum timestamp to display on bands.
   * @param {number} minTimestamp the maximum timestamp to display on bands.
   */
  constructor(title, className, resolution, minTimestamp, maxTimestamp) {
    // Keep information about bands and charts and their bounds.
    this.bands = [];
    this.charts = [];
    this.globalEvents = [];
    this.tooltips = [];
    this.resolution = resolution;
    this.minTimestamp = minTimestamp;
    this.maxTimestamp = maxTimestamp;
    this.height = 0;
    // Offset of the next band of events.
    this.nextYOffset = 0;
    this.svg = document.createElementNS(svgNS, 'svg');
    this.svg.setAttributeNS(
        'http://www.w3.org/2000/xmlns/', 'xmlns:xlink',
        'http://www.w3.org/1999/xlink');
    this.setBandOffsetX(0);
    this.setWidth(0);
    this.svg.setAttribute('height', this.height + 'px');
    this.svg.classList.add(className);

    this.setTooltip_();
    this.title = title;
    title.addContolledItems(this.svg);
    title.parent.insertBefore(this.svg, title.div.nextSibling);

    // Set of constants, used for rendering content.
    this.fontSize = 12;
    this.verticalGap = 5;
    this.horizontalGap = 10;
    this.lineHeight = 16;
    this.iconOffset = 24;
    this.iconRadius = 4;
    this.textOffset = 32;
  }

  /**
   * Sets the horizontal offset to render bands.
   * @param {number} offsetX offset in pixels.
   */
  setBandOffsetX(offsetX) {
    this.bandOffsetX = offsetX;
  }

  /**
   * Sets the widths of event bands.
   * @param {number} width width in pixels.
   */
  setWidth(width) {
    this.width = width;
    this.svg.setAttribute('width', this.width + 'px');
  }

  /**
   * Converts timestamp into pixel offset. 1 pixel corresponds resolution
   * microseconds.
   *
   * @param {number} timestamp in microseconds.
   */
  timestampToOffset(timestamp) {
    return (timestamp - this.minTimestamp) / this.resolution;
  }

  /**
   * Opposite conversion of |timestampToOffset|
   *
   * @param {number} offset in pixels.
   */
  offsetToTime(offset) {
    return offset * this.resolution + this.minTimestamp;
  }

  /**
   * This adds new band of events. Height of svg container is automatically
   * adjusted to fit the new content.
   *
   * @param {Events} eventBand event band to add.
   * @param {number} height of the band.
   * @param {number} padding to separate from the next band or chart.
   */
  addBand(eventBand, height, padding) {
    let currentColor = unusedColor;
    let addToBand = false;
    let x = this.bandOffsetX;
    let eventIndex = eventBand.getFirstAfter(this.minTimestamp);
    while (eventIndex >= 0) {
      const event = eventBand.events[eventIndex];
      if (event[1] >= this.maxTimestamp) {
        break;
      }
      const nextX = this.timestampToOffset(event[1]) + this.bandOffsetX;
      if (addToBand) {
        SVG.addRect(
            this.svg, x, this.nextYOffset, nextX - x, height, currentColor);
      }
      if (eventBand.isEndOfSequence(eventIndex)) {
        currentColor = unusedColor;
        addToBand = false;
      } else {
        currentColor = eventAttributes[event[0]].color;
        addToBand = true;
      }
      x = nextX;
      eventIndex = eventBand.getNextEvent(eventIndex, 1 /* direction */);
    }
    if (addToBand) {
      SVG.addRect(
          this.svg, x, this.nextYOffset,
          this.timestampToOffset(this.maxTimestamp) - x + this.bandOffsetX,
          height, currentColor);
    }

    this.bands.push({
      band: eventBand,
      top: this.nextYOffset,
      bottom: this.nextYOffset + height,
    });

    this.updateHeight(height, padding);
  }

  /**
   * This adds horizontal separator at |nextYOffset|.
   *
   * @param {number} padding to separate from the next band or chart.
   */
  addBandSeparator(padding) {
    SVG.addLine(
        this.svg, 0, this.nextYOffset, this.width, this.nextYOffset, '#888',
        0.25);
    this.updateHeight(0 /* height */, padding);
  }

  /**
   * This adds new chart. Height of svg container is automatically adjusted to
   * fit the new content. This creates empty chart and one or more calls
   * |addChartSources| are expected to add actual content to the chart.
   *
   * @param {number} height of the chart.
   * @param {number} padding to separate from the next band or chart.
   */
  addChart(height, padding) {
    this.charts.push({
      sourcesWithBounds: [],
      top: this.nextYOffset,
      bottom: this.nextYOffset + height,
    });

    this.updateHeight(height, padding);
  }

  /**
   * This adds new chart into existing area.
   * @param {number} top position of chart.
   * @param {number} bottom position of chart.
   */
  addChartToExistingArea(top, bottom) {
    this.charts.push({sourcesWithBounds: [], top: top, bottom: bottom});
  }


  /**
   * This adds sources of events to the last chart.
   *
   * @param {Events[]} sources is array of groupped source of events to add.
   *     These events are logically linked to each other and represented as a
   *     separate line.
   * @param {boolean} smooth if set to true then indicates that chart should
   *                  display value interpolated, otherwise values are changed
   *                  discretely.
   * @param {Object=} opt_attributes optional argument that defines view of
   *                  the chart. If not set then it is automatically selected
   *                  based on event type.
   */
  addChartSources(sources, smooth, opt_attributes) {
    const chart = this.charts[this.charts.length - 1];

    // Calculate min/max for sources and event indices.
    let minValue = null;
    let maxValue = null;
    const eventIndicesForAll = [];
    let eventDetected = false;
    let attributes = opt_attributes;
    const autoDetectRange = !attributes ||
        typeof attributes.minValue === 'undefined' ||
        typeof attributes.maxValue === 'undefined';
    for (let i = 0; i < sources.length; ++i) {
      const source = sources[i];
      let eventIndex = source.getFirstAfter(this.minTimestamp);
      if (eventIndex < 0 || source.events[eventIndex][1] > this.maxTimestamp) {
        eventIndicesForAll.push([]);
        continue;
      }
      if (autoDetectRange && !minValue) {
        minValue = source.events[eventIndex][2];
        maxValue = source.events[eventIndex][2];
      }
      const eventIndices = [];
      while (eventIndex >= 0 &&
             source.events[eventIndex][1] <= this.maxTimestamp) {
        eventIndices.push(eventIndex);
        eventDetected = true;
        if (autoDetectRange) {
          minValue = Math.min(minValue, source.events[eventIndex][2]);
          maxValue = Math.max(maxValue, source.events[eventIndex][2]);
        }
        if (!attributes) {
          attributes = valueAttributes[source.events[eventIndex][0]];
        }
        eventIndex = source.getNextEvent(eventIndex, 1 /* direction */);
      }
      eventIndicesForAll.push(eventIndices);
    }

    if (!eventDetected) {
      // no one event to render.
      return;
    }

    if (autoDetectRange) {
      // Ensure minimum value range.
      if (maxValue - minValue < attributes.minRange / attributes.scale) {
        maxValue = minValue + attributes.minRange / attributes.scale;
      }

      // Add +-1% to bounds.
      const dif = maxValue - minValue;
      minValue -= dif * 0.01;
      maxValue += dif * 0.01;
    } else {
      minValue = attributes.minValue;
      maxValue = attributes.maxValue;
    }
    const divider = 1.0 / (maxValue - minValue);

    // Render now.
    const height = chart.bottom - chart.top;
    for (let i = 0; i < sources.length; ++i) {
      const source = sources[i];
      const eventIndices = eventIndicesForAll[i];
      if (eventIndices.length === 0) {
        continue;
      }
      // Determine type using first element.
      const eventType = source.events[eventIndices[0]][0];

      const points = [];
      let lastY = 0;
      for (let j = 0; j < eventIndices.length; ++j) {
        const event = source.events[eventIndices[j]];
        const x = this.timestampToOffset(event[1]);
        const y = height * (maxValue - event[2]) * divider;
        if (!smooth && j !== 0) {
          points.push([x, lastY]);
        }
        points.push([x, y]);
        lastY = y;
      }

      chart.sourcesWithBounds.push({
        attributes: attributes,
        minValue: minValue,
        maxValue: maxValue,
        source: source,
        smooth: smooth,
      });

      SVG.addPolyline(this.svg, points, attributes.color, attributes.width);
    }
  }

  /**
   * This adds text to chart.
   *
   * @param {string} text to display.
   * @param {number} x horizontal position in the chart.
   * @param {number} y vertical position the chart.
   * @param {string} anchor align of the text relative to x.
   */
  addChartText(text, x, y, anchor) {
    SVG.addText(this.svg, x, y, this.fontSize, text, anchor);
  }

  /**
   * This adds bar as rectangle to the chart.
   *
   * @param {number} x horizontal position in the chart.
   * @param {number} y vertical position in the chart.
   * @param {number} width horizontal dimension of the bar.
   * @param {number} height vertical dimension of the bar.
   * @param {string} color of the bar.
   */
  addChartBar(x, y, width, height, color) {
    SVG.addRect(this.svg, x, y, width, height, color, 1.0 /* opacity */);
  }

  /**
   * This adds popup tooltip for the fixed area in the chart.
   *
   * @param {number} x horizontal position of the tooltip area in the chart.
   * @param {number} y vertical position of the tooltip area in the chart.
   * @param {number} width of the tooltip area.
   * @param {number} height of the tooltip area.
   * @param {string} tooltip text to display.
   * @param {number} tooltipWidth of the tooltip window.
   * @param {number} tooltipHeight of the tooltip window.
   */
  addChartTooltip(x, y, width, height, tooltip, tooltipWidth, tooltipHeight) {
    this.tooltips.push({
      left: x,
      top: y,
      right: x + width - 1,
      bottom: y + height - 1,
      tooltip: tooltip,
      tooltipWidth: tooltipWidth,
      tooltipHeight: tooltipHeight,
    });
  }

  /**
   * This adds HTML input element to the title of the section.
   *
   * @param {string} type specifies input type, like radio.
   * @param {string} text label for the input.
   * @param {boolean} checked if radio should be initially checked.
   * @param {function} handler callback for input change.
   */
  createTitleInput(type, text, checked, handler) {
    const input = document.createElement('input');
    input.onclick = handler;
    input.setAttribute('type', type);
    if (type === 'button') {
      input.setAttribute('value', text);
    }
    if (checked) {
      input.checked = true;
    }
    this.title.addContolledItems(input);
    this.title.div.appendChild(input);
    if (type === 'button') {
      return;
    }
    const label = document.createElement('label');
    label.onclick = handler;
    label.appendChild(document.createTextNode(text));
    this.title.addContolledItems(label);
    this.title.div.appendChild(label);
  }

  /**
   * This adds sources of events to the last chart as a bars.
   *
   * @param {Events[]} sources is array of groupped source of events to add.
   *     These events are logically linked to each other and represented as a
   *     bar where each bar has color corresponded the value of the event.
   * @param {Object=} attributes dictionary to resolve the color of the bar.
   * @param {number} y vertical offset of bars.
   * @param {number} height height of bars.
   */
  addBarSource(source, attributes, y, height) {
    const chart = this.charts[this.charts.length - 1];

    let eventIndex = source.getFirstAfter(this.minTimestamp);
    if (eventIndex < 0 || source.events[eventIndex][1] > this.maxTimestamp) {
      return;
    }

    while (eventIndex >= 0 &&
           source.events[eventIndex][1] <= this.maxTimestamp) {
      const eventIndexNext = source.getNextEvent(eventIndex, 1 /* direction */);
      const event = source.events[eventIndex];
      const x = this.timestampToOffset(event[1]);
      const color = attributes[event[2]].color;
      let nextTimestamp = 0;
      if (eventIndexNext >= 0 &&
          source.events[eventIndexNext][1] <= this.maxTimestamp) {
        nextTimestamp = source.events[eventIndexNext][1];
      } else {
        nextTimestamp = this.maxTimestamp;
      }
      const width = this.timestampToOffset(nextTimestamp);
      eventIndex = eventIndexNext;
      SVG.addRect(this.svg, x, y, width, height, color, 1.0 /* opacity */);
    }
    chart.sourcesWithBounds.push(
        {attributes: attributes, source: source, perValue: true});
  }

  addChartGridLine(y) {
    SVG.addLine(this.svg, 0, y, this.width, y, '#ccc', 0.5);
  }

  /**
   * Updates height of svg container.
   *
   * @param {number} new height of the chart.
   * @param {number} padding to separate from the next band or chart.
   */
  updateHeight(height, padding) {
    this.nextYOffset += height;
    this.height = this.nextYOffset;
    this.svg.setAttribute('height', this.height + 'px');
    this.nextYOffset += padding;
  }

  /**
   * This adds events as a global events that do not belong to any band.
   *
   * @param {Events} events to add.
   * @param {string} renderType defines how to render events, can be underfined
   *                 for default or set to 'circle'.
   * @param {string} color the color (fill color if rendered as a circle), or
   *                 omitted to use the color defined in eventAttributes for
   *                 each event type.
   * @param {number} y for circles, the y position, as a fraction of this band's
   *                 height, such as 0.5 for vertically-centered, or 0.95 for
   *                 close to the bottom.
   */
  addGlobal(events, renderType, color, y) {
    let eventIndex = -1;
    if (typeof y === 'undefined') {
      y = 0.5;
    }
    while (true) {
      eventIndex = events.getNextEvent(eventIndex, 1 /* direction */);
      if (eventIndex < 0) {
        break;
      }
      const event = events.events[eventIndex];
      const attributes = events.getEventAttributes(eventIndex);
      const x = this.timestampToOffset(event[1]) + this.bandOffsetX;
      const evColor = color || attributes.color;
      if (renderType === 'circle') {
        SVG.addCircle(
            this.svg, x, this.height * y, attributes.radius,
            1 /* strokeWidth */, evColor, 'black' /* strokeColor */);
      } else {
        SVG.addLine(this.svg, x, 0, x, this.height, evColor, attributes.width);
      }
    }
    this.globalEvents.push(events);
  }

  /** Initializes tooltip support by observing mouse events */
  setTooltip_() {
    this.tooltip = $('arc-event-band-tooltip');
    this.svg.onmouseover = this.showToolTip_.bind(this);
    this.svg.onmouseout = this.hideToolTip_.bind(this);
    this.svg.onmousemove = this.updateToolTip_.bind(this);
    this.svg.onclick = (event) => {
      showDetailedInfoForBand(this, event);
    };
  }

  /** Updates tooltip and shows it for this band. */
  showToolTip_(event) {
    this.updateToolTip_(event);
  }

  /** Hides the tooltip. */
  hideToolTip_() {
    this.tooltip.classList.remove('active');
  }

  /**
   * Finds global events around |timestamp| and not farther than |distance|.
   *
   * @param {number} timestamp to search.
   * @param {number} distance to search.
   * @returns {Array} array of events sorted by distance to |timestamp| from
   *                  closest to farthest.
   */
  findGlobalEvents_(timestamp, distance) {
    const events = [];
    const leftBorder = timestamp - distance;
    const rightBorder = timestamp + distance;
    for (let i = 0; i < this.globalEvents.length; ++i) {
      let index = this.globalEvents[i].getFirstAfter(leftBorder);
      while (index >= 0) {
        const event = this.globalEvents[i].events[index];
        if (event[1] > rightBorder) {
          break;
        }
        events.push(event);
        index = this.globalEvents[i].getNextEvent(index, 1 /* direction */);
      }
    }
    events.sort(function(a, b) {
      const distanceA = Math.abs(timestamp - a[1]);
      const distanceB = Math.abs(timestamp - b[1]);
      return distanceA - distanceB;
    });
    return events;
  }

  /**
   * Updates tool tip based on event under the current cursor.
   *
   * @param {Object} event mouse event.
   */
  updateToolTip_(event) {
    // Clear previous content.
    this.tooltip.textContent = '';

    const svgStyle = window.getComputedStyle(this.svg, null);
    const paddingLeft = parseFloat(svgStyle.getPropertyValue('padding-left'));
    const paddingTop = parseFloat(svgStyle.getPropertyValue('padding-top'));
    const eventX = event.offsetX - paddingLeft;
    const eventY = event.offsetY - paddingTop;

    const svg = document.createElementNS(svgNS, 'svg');
    svg.setAttributeNS(
        'http://www.w3.org/2000/xmlns/', 'xmlns:xlink',
        'http://www.w3.org/1999/xlink');
    this.tooltip.appendChild(svg);

    for (const areaTooltip of this.tooltips) {
      if (areaTooltip.left <= eventX && areaTooltip.top <= eventY &&
          areaTooltip.right >= eventX && areaTooltip.bottom >= eventY) {
        SVG.addText(
            svg, this.horizontalGap, this.verticalGap + this.fontSize,
            this.fontSize, areaTooltip.tooltip);
        this.showTooltipForEvent_(
            event, svg, areaTooltip.tooltipHeight, areaTooltip.tooltipWidth);
        return;
      }
    }

    if (eventX < this.bandOffsetX) {
      this.tooltip.classList.remove('active');
      return;
    }

    const eventTimestamp = this.offsetToTime(eventX - this.bandOffsetX);

    const width = 220;
    let yOffset = this.verticalGap;

    // In case of global events are not available, render tooltip for band and
    // chart.
    yOffset =
        this.updateToolTipForGlobalEvents_(event, svg, eventTimestamp, yOffset);
    if (yOffset === this.verticalGap) {
      // Find band for this mouse event.
      for (let i = 0; i < this.bands.length; ++i) {
        if (this.bands[i].top <= eventY && this.bands[i].bottom > eventY) {
          yOffset = this.updateToolTipForBand_(
              event, svg, eventTimestamp, this.bands[i].band, yOffset);
          break;
        }
      }

      // Find chart for this mouse event.
      for (let i = 0; i < this.charts.length; ++i) {
        if (this.charts[i].top <= eventY && this.charts[i].bottom > eventY) {
          yOffset = this.updateToolTipForChart_(
              event, svg, eventTimestamp, this.charts[i], yOffset);
          break;
        }
      }
    }

    if (yOffset > this.verticalGap) {
      // Content was added.
      if (this.canShowDetailedInfo()) {
        yOffset += this.lineHeight;
        SVG.addText(
            svg, this.horizontalGap, yOffset, this.fontSize,
            'Click for detailed info');
      }

      yOffset += this.verticalGap;

      this.showTooltipForEvent_(event, svg, yOffset, width);
    } else {
      this.tooltip.classList.remove('active');
    }
  }


  /**
   * Adds time information for |eventTimestamp| to the tooltip. Global time is
   * added first and VSYNC relative time is added next in case VSYNC event could
   * be found.
   *
   * @param {Object} svg tooltip container.
   * @param {number} yOffset current vertical offset.
   * @param {number} eventTimestamp timestamp of the event.
   * @returns {number} vertical position of the next element.
   */
  addTimeInfoToTooltip_(svg, yOffset, eventTimestamp) {
    const text = timestampToMsText(eventTimestamp) + ' ms';

    yOffset += this.lineHeight;
    SVG.addText(svg, this.horizontalGap, yOffset, this.fontSize, text);

    return yOffset;
  }

  /**
   * Creates and shows tooltip for global events in case they are found around
   * mouse event position.
   *
   * @param {Object} mouse event.
   * @param {Object} svg tooltip content.
   * @param (number} eventTimestamp timestamp of event.
   * @param {number} yOffset starting vertical position to fill this content.
   * @returns {number} next vertical position to fill the next content.
   */
  updateToolTipForGlobalEvents_(event, svg, eventTimestamp, yOffset) {
    // Try to find closest global events in the range -3..3 pixels. Several
    // events may stick close each other so let diplay up to 3 closest events.
    const distanceMcs = 3 * this.resolution;
    const globalEvents = this.findGlobalEvents_(eventTimestamp, distanceMcs);
    if (globalEvents.length === 0) {
      return yOffset;
    }

    // Show the global events info.
    const globalEventCnt = Math.min(globalEvents.length, 3);
    for (let i = 0; i < globalEventCnt; ++i) {
      const globalEvent = globalEvents[i];
      const globalEventType = globalEvent[0];
      const globalEventTimestamp = globalEvent[1];

      yOffset = this.addTimeInfoToTooltip_(svg, yOffset, globalEventTimestamp);

      const attributes = eventAttributes[globalEventType];
      yOffset += this.lineHeight;
      SVG.addCircle(
          svg, this.iconOffset, yOffset - this.iconRadius, this.iconRadius, 1,
          attributes.color, 'black');
      SVG.addText(
          svg, this.textOffset, yOffset, this.fontSize, attributes.name);

      // Render content if exists.
      if (globalEvent.length > 2) {
        yOffset += this.lineHeight;
        SVG.addText(
            svg, this.textOffset + this.horizontalGap, yOffset, this.fontSize,
            globalEvent[2]);
      }
    }

    yOffset += this.verticalGap;

    return yOffset;
  }

  /**
   * Creates and shows tooltip for event band for the position under |event|.
   *
   * @param {Object} mouse event.
   * @param {Object} svg tooltip content.
   * @param (number} eventTimestamp timestamp of event.
   * @param {Object} active event band.
   * @param {number} yOffset starting vertical position to fill this content.
   * @returns {number} next vertical position to fill the next content.
   */
  updateToolTipForBand_(event, svg, eventTimestamp, eventBand, yOffset) {
    // Find the event under the cursor. |index| points to the current event
    // and |nextIndex| points to the next event.
    let nextIndex = eventBand.getFirstEvent();
    while (nextIndex >= 0) {
      if (eventBand.events[nextIndex][1] > eventTimestamp) {
        break;
      }
      nextIndex = eventBand.getNextEvent(nextIndex, 1 /* direction */);
    }
    let index = eventBand.getNextEvent(nextIndex, -1 /* direction */);

    if (index < 0 || eventBand.isEndOfSequence(index)) {
      // In case cursor points to idle event, show its interval.
      yOffset += this.lineHeight;
      const startIdle = index < 0 ? 0 : eventBand.events[index][1];
      const endIdle =
          nextIndex < 0 ? this.maxTimestamp : eventBand.events[nextIndex][1];
      SVG.addText(
          svg, this.horizontalGap, yOffset, this.fontSize,
          'Idle ' + timestampToMsText(startIdle) + '...' +
              timestampToMsText(endIdle) + ' chart time ms.');
    } else {
      // Show the sequence of non-idle events.
      // Find the start of the non-idle sequence.
      while (true) {
        const prevIndex = eventBand.getNextEvent(index, -1 /* direction */);
        if (prevIndex < 0 || eventBand.isEndOfSequence(prevIndex)) {
          break;
        }
        index = prevIndex;
      }

      const sequenceTimestamp = eventBand.events[index][1];
      yOffset = this.addTimeInfoToTooltip_(svg, yOffset, sequenceTimestamp);

      let lastTimestamp = sequenceTimestamp;
      // Scan for the entries to show.
      const entriesToShow = [];
      while (index >= 0) {
        const attributes = eventBand.getEventAttributes(index);
        const eventTimestamp = eventBand.events[index][1];
        const entryToShow = {};
        entryToShow.color = attributes.color;
        if (eventBand.events[index].length > 2) {
          entryToShow.text = attributes.name + ' ' + eventBand.events[index][2];
        } else {
          entryToShow.text = attributes.name;
        }
        if (entriesToShow.length > 0) {
          entriesToShow[entriesToShow.length - 1].text +=
              ' [' + timestampToMsText(eventTimestamp - lastTimestamp) + ' ms]';
        }
        entriesToShow.push(entryToShow);
        if (eventBand.isEndOfSequence(index)) {
          break;
        }
        lastTimestamp = eventTimestamp;
        index = eventBand.getNextEvent(index, 1 /* direction */);
      }

      // Last element is end of sequence, use bandColor for the icon.
      if (entriesToShow.length > 0) {
        entriesToShow[entriesToShow.length - 1].color = bandColor;
      }
      for (let i = 0; i < entriesToShow.length; ++i) {
        const entryToShow = entriesToShow[i];
        yOffset += this.lineHeight;
        SVG.addCircle(
            svg, this.iconOffset, yOffset - this.iconRadius, this.iconRadius, 1,
            entryToShow.color, 'black');
        SVG.addText(
            svg, this.textOffset, yOffset, this.fontSize, entryToShow.text);
      }
    }

    yOffset += this.verticalGap;

    return yOffset;
  }

  /**
   * Creates and show tooltip for event chart for the position under |event|.
   *
   * @param {Object} mouse event.
   * @param {Object} svg tooltip content.
   * @param (number} eventTimestamp timestamp of event.
   * @param {Object} active event chart.
   * @param {number} yOffset starting vertical position to fill this content.
   * @returns {number} next vertical position to fill the next content.
   */
  updateToolTipForChart_(event, svg, eventTimestamp, chart, yOffset) {
    const valueOffset = 32;

    let contentAdded = false;
    for (let i = 0; i < chart.sourcesWithBounds.length; ++i) {
      const sourceWithBounds = chart.sourcesWithBounds[i];

      let color;
      let text;
      if (sourceWithBounds.perValue) {
        // Tooltip per value
        const index = sourceWithBounds.source.getLastBefore(eventTimestamp);
        if (index < 0) {
          continue;
        }
        const event = sourceWithBounds.source.events[index];
        color = sourceWithBounds.attributes[event[2]].color;
        text = sourceWithBounds.attributes[event[2]].name;
      } else {
        // Interpolate results.
        const indexAfter =
            sourceWithBounds.source.getFirstAfter(eventTimestamp);
        if (indexAfter < 0) {
          continue;
        }
        const indexBefore = sourceWithBounds.source.getNextEvent(
            indexAfter, -1 /* direction */);
        if (indexBefore < 0) {
          continue;
        }
        const eventBefore = sourceWithBounds.source.events[indexBefore];
        const eventAfter = sourceWithBounds.source.events[indexAfter];
        let factor = (eventTimestamp - eventBefore[1]) /
            (eventAfter[1] - eventBefore[1]);

        if (!sourceWithBounds.smooth) {
          // Clamp to before value.
          if (factor < 1.0) {
            factor = 0.0;
          }
        }
        const value = factor * eventAfter[2] + (1.0 - factor) * eventBefore[2];
        text = (value * sourceWithBounds.attributes.scale).toFixed(1) + ' ' +
            sourceWithBounds.attributes.name;
        color = sourceWithBounds.attributes.color;
      }
      if (!contentAdded) {
        yOffset = this.addTimeInfoToTooltip_(svg, yOffset, eventTimestamp);
        contentAdded = true;
      }

      yOffset += this.lineHeight;
      SVG.addCircle(
          svg, this.iconOffset, yOffset - this.iconRadius, this.iconRadius, 1,
          color, 'black');
      SVG.addText(svg, valueOffset, yOffset, this.fontSize, text);
    }

    if (contentAdded) {
      yOffset += this.verticalGap;
    }

    return yOffset;
  }

  /**
   * Helper that shows tooltip after filling its content.
   *
   * @param {Object} mouse event, used to determine the position of tooltip.
   * @param {Object} svg content of tooltip.
   * @param {number} height of the tooltip view.
   * @param {number} width of the tooltip view.
   */
  showTooltipForEvent_(event, svg, height, width) {
    svg.setAttribute('height', height + 'px');
    svg.setAttribute('width', width + 'px');
    this.tooltip.style.left = event.pageX + 'px';
    this.tooltip.style.top = event.pageY + 'px';
    this.tooltip.style.height = height + 'px';
    this.tooltip.style.width = width + 'px';
    this.tooltip.classList.add('active');
  }

  /**
   * Returns true in case band can show detailed info.
   */
  canShowDetailedInfo() {
    return false;
  }

  /**
   * Shows detailed info for the position under mouse event |event|. By default
   * it creates nothing.
   */
  showDetailedInfo(event) {
    return null;
  }
}

/**
 * Base class for detailed info view.
 */
class DetailedInfoView {
  discard() {}
}

/**
 * CPU detailed info view. Renders 4x zoomed CPU events split by processes and
 * threads.
 */
class CpuDetailedInfoView extends DetailedInfoView {
  create(overviewBand) {
    this.overlay = $('arc-detailed-view-overlay');
    const overviewRect = overviewBand.svg.getBoundingClientRect();

    // Clear previous content.
    this.overlay.textContent = '';

    // UI constants to render.
    const columnNameWidth = 130;
    const columnUsageWidth = 40;
    const scrollBarWidth = 3;
    const zoomFactor = 4.0;
    const cpuBandHeight = 14;
    const processInfoHeight = 14;
    const padding = 2;
    const fontSize = 12;
    const processInfoPadding = 2;
    const threadInfoPadding = 12;
    const cpuUsagePadding = 2;
    const columnsWidth = columnNameWidth + columnUsageWidth;

    // Use minimum 80% of inner width or 600 pixels to display detailed view
    // zoomed |zoomFactor| times.
    let availableWidthPixels =
        window.innerWidth * 0.8 - columnsWidth - scrollBarWidth;
    availableWidthPixels = Math.max(availableWidthPixels, 600);
    const availableForHalfBandMcs = Math.floor(
        overviewBand.offsetToTime(availableWidthPixels) / (2.0 * zoomFactor));
    // Determine the interval to display.
    const eventTimestamp =
        overviewBand.offsetToTime(event.offsetX - overviewBand.bandOffsetX);
    const minTimestamp = eventTimestamp - availableForHalfBandMcs;
    const maxTimestamp = eventTimestamp + availableForHalfBandMcs + 1;
    const duration = maxTimestamp - minTimestamp;

    // Construct sub-model of active/idle events per each thread, active within
    // this interval.
    const eventsPerTid = {};
    for (let cpuId = 0; cpuId < overviewBand.model.system.cpu.length; cpuId++) {
      const activeEvents = new Events(
          overviewBand.model.system.cpu[cpuId], 3 /* kActive */,
          3 /* kActive */);
      // Assume we have an idle before minTimestamp.
      let activeTid = 0;
      let index = activeEvents.getFirstAfter(minTimestamp);
      let activeStartTimestamp = minTimestamp;
      // Check if previous event goes over minTimestamp, in that case extract
      // the active thread.
      if (index > 0) {
        const lastBefore = activeEvents.getNextEvent(index, -1 /* direction */);
        if (lastBefore >= 0) {
          // This may be idle (tid=0) or real thread.
          activeTid = activeEvents.events[lastBefore][2];
        }
      }
      while (index >= 0 && activeEvents.events[index][1] < maxTimestamp) {
        this.addActivityTime_(
            eventsPerTid, activeTid, activeStartTimestamp,
            activeEvents.events[index][1]);
        activeTid = activeEvents.events[index][2];
        activeStartTimestamp = activeEvents.events[index][1];
        index = activeEvents.getNextEvent(index, 1 /* direction */);
      }
      this.addActivityTime_(
          eventsPerTid, activeTid, activeStartTimestamp, maxTimestamp - 1);
    }

    // The same thread might be executed on different CPU cores. Sort events.
    for (const tid in eventsPerTid) {
      eventsPerTid[tid].events.sort(function(a, b) {
        return a[1] - b[1];
      });
    }

    // Group threads by process.
    const threadsPerPid = {};
    const pids = [];
    let totalTime = 0;
    for (const tid in eventsPerTid) {
      const thread = eventsPerTid[tid];
      const pid = overviewBand.model.system.threads[tid].pid;
      if (!(pid in threadsPerPid)) {
        pids.push(pid);
        threadsPerPid[pid] = {};
        threadsPerPid[pid].totalTime = 0;
        threadsPerPid[pid].threads = [];
      }
      threadsPerPid[pid].totalTime += thread.totalTime;
      threadsPerPid[pid].threads.push(thread);
      totalTime += thread.totalTime;
    }

    // Sort processes per time usage.
    pids.sort(function(a, b) {
      return threadsPerPid[b].totalTime - threadsPerPid[a].totalTime;
    });

    const totalUsage = 100.0 * totalTime / duration;
    const cpuInfo = 'CPU view. ' + pids.length + '/' +
        Object.keys(eventsPerTid).length +
        ' active processes/threads. Total cpu usage: ' + totalUsage.toFixed(2) +
        '%.';
    const title = new EventBandTitle(
        this.overlay, undefined /* anchor */, cpuInfo, 'arc-cpu-view-title');
    const bands = new EventBands(
        title, 'arc-events-cpu-detailed-band',
        overviewBand.resolution / zoomFactor, minTimestamp, maxTimestamp);
    bands.setBandOffsetX(columnsWidth);
    const bandsWidth = bands.timestampToOffset(maxTimestamp);
    const totalWidth = bandsWidth + columnsWidth;
    bands.setWidth(totalWidth);

    for (let i = 0; i < pids.length; i++) {
      const pid = pids[i];
      const threads = threadsPerPid[pid].threads;
      let processName;
      if (pid in overviewBand.model.system.threads) {
        processName = overviewBand.model.system.threads[pid].name;
      } else {
        processName = 'Others';
      }
      const processCpuUsage = 100.0 * threadsPerPid[pid].totalTime / duration;
      const processInfo = processName + ' <' + pid + '>';
      const processInfoTextLine =
          bands.nextYOffset + processInfoHeight - padding;
      SVG.addText(
          bands.svg, processInfoPadding, processInfoTextLine, fontSize,
          processInfo);
      SVG.addText(
          bands.svg, columnsWidth - cpuUsagePadding, processInfoTextLine,
          fontSize, processCpuUsage.toFixed(2), 'end' /* anchor */);

      // Sort threads per time usage.
      threads.sort(function(a, b) {
        return eventsPerTid[b.tid].totalTime - eventsPerTid[a.tid].totalTime;
      });

      // In case we have only one main thread add CPU info to process.
      if (threads.length === 1 && threads[0].tid === pid) {
        bands.addBand(
            new Events(eventsPerTid[pid].events, 0, 1), cpuBandHeight, padding);
        bands.addBandSeparator(2 /* padding */);
        continue;
      }

      bands.nextYOffset += (processInfoHeight + padding);

      for (let j = 0; j < threads.length; j++) {
        const tid = threads[j].tid;
        bands.addBand(
            new Events(eventsPerTid[tid].events, 0, 1), cpuBandHeight, padding);
        const threadName = overviewBand.model.system.threads[tid].name;
        const threadCpuUsage = 100.0 * threads[j].totalTime / duration;
        SVG.addText(
            bands.svg, threadInfoPadding, bands.nextYOffset - padding, fontSize,
            threadName);
        SVG.addText(
            bands.svg, columnsWidth - cpuUsagePadding,
            bands.nextYOffset - 2 * padding, fontSize,
            threadCpuUsage.toFixed(2), 'end' /* anchor */);
      }
      bands.addBandSeparator(2 /* padding */);
    }

    // Add center and boundary lines.
    const kTimeMark = 10000;
    const timeEvents = [
      [kTimeMark, minTimestamp],
      [kTimeMark, eventTimestamp],
      [kTimeMark, maxTimestamp - 1],
    ];
    bands.addGlobal(new Events(timeEvents, kTimeMark, kTimeMark));

    SVG.addLine(
        bands.svg, columnNameWidth, 0, columnNameWidth, bands.height, '#888',
        0.25);

    SVG.addLine(
        bands.svg, columnsWidth, 0, columnsWidth, bands.height, '#888', 0.25);

    // Mark zoomed interval in overview.
    const overviewX = overviewBand.timestampToOffset(minTimestamp);
    const overviewWidth =
        overviewBand.timestampToOffset(maxTimestamp) - overviewX;
    this.bandSelection = SVG.addRect(
        overviewBand.svg, overviewX, 0, overviewWidth, overviewBand.height,
        '#000' /* color */, 0.1 /* opacity */);
    // Prevent band selection to capture mouse events that would lead to
    // incorrect anchor position computation for detailed view.
    this.bandSelection.classList.add('arc-no-mouse-events');

    // Align position in overview and middle line here if possible.
    const left = Math.max(
        Math.min(
            Math.round(event.clientX - columnsWidth - bandsWidth * 0.5),
            window.innerWidth - totalWidth),
        0);
    this.overlay.style.left = left + 'px';
    // Place below the overview with small gap.
    this.overlay.style.top = (overviewRect.bottom + window.scrollY + 2) + 'px';
    this.overlay.classList.add('active');
  }

  discard() {
    this.overlay.classList.remove('active');
    this.bandSelection.remove();
  }

  /**
   * Helper that adds kIdleIn/kIdleOut events into the dictionary.
   *
   * @param {Object} eventsPerTid dictionary to fill. Key is thread id and
   *     value is object that contains all events for thread with related
   *     information.
   * @param {number} tid thread id.
   * @param {number} timestampFrom start time of thread activity.
   * @param {number} timestampTo end time of thread activity.
   */
  addActivityTime_(eventsPerTid, tid, timestampFrom, timestampTo) {
    if (tid === 0) {
      // Don't process idle thread.
      return;
    }
    if (!(tid in eventsPerTid)) {
      // Create the band for the new thread.
      eventsPerTid[tid] = {};
      eventsPerTid[tid].totalTime = 0;
      eventsPerTid[tid].events = [];
      eventsPerTid[tid].tid = tid;
    }
    eventsPerTid[tid].events.push([1 /* kIdleOut */, timestampFrom]);
    eventsPerTid[tid].events.push([0 /* kIdleIn */, timestampTo]);
    // Update total time for this thread.
    eventsPerTid[tid].totalTime += (timestampTo - timestampFrom);
  }
}

class CpuEventBands extends EventBands {
  setModel(model) {
    this.model = model;
    this.showDetailedInfo = true;
    const bandHeight = 6;
    const padding = 2;
    for (let cpuId = 0; cpuId < this.model.system.cpu.length; cpuId++) {
      this.addBand(
          new Events(this.model.system.cpu[cpuId], 0, 1), bandHeight, padding);
    }
  }

  canShowDetailedInfo() {
    return this.showDetailedInfo;
  }

  showDetailedInfo(event) {
    const view = new CpuDetailedInfoView();
    view.create(this);
    return view;
  }
}

/** Represents one band with events. */
class Events {
  /**
   * Assigns events for this band. Events with type between |eventTypeMin| and
   * |eventTypeMax| are only displayed on the band.
   *
   * @param {Object[]} events non-filtered list of all events. Each has array
   *     where first element is type and second is timestamp.
   * @param {number} eventTypeMin minimum inclusive type of the event to be
   *     displayed on this band.
   * @param {number=} opt_eventTypeMax maximum inclusive type of the event to be
   *     displayed on this band. It is optional and in case is not set then
   *     range of one event type eventTypeMin is used.
   */
  constructor(events, eventTypeMin, opt_eventTypeMax) {
    this.events = events;
    this.eventTypeMin = eventTypeMin;
    if (opt_eventTypeMax) {
      this.eventTypeMax = opt_eventTypeMax;
    } else {
      this.eventTypeMax = eventTypeMin;
    }
  }

  /**
   * Helper that finds next or previous event. Events that pass filter are
   * only processed.
   *
   * @param {number} index starting index for the search, not inclusive.
   * @param {direction} direction to search, 1 means to find the next event and
   *     -1 means the previous event.
   * @returns {number} index of the next or previous event or -1 in case not
   *     found.
   */
  getNextEvent(index, direction) {
    while (true) {
      index += direction;
      if (index < 0 || index >= this.events.length) {
        return -1;
      }
      if (this.events[index][0] >= this.eventTypeMin &&
          this.events[index][0] <= this.eventTypeMax) {
        return index;
      }
    }
  }

  /**
   * Helper that finds first event. Events that pass filter are only processed.
   *
   * @returns {number} index of the first event or -1 in case not found.
   */
  getFirstEvent() {
    return this.getNextEvent(-1 /* index */, 1 /* direction */);
  }

  /**
   * Helper that returns render attributes for the event.
   *
   * @param {number} index element index in |this.events|.
   */
  getEventAttributes(index) {
    return eventAttributes[this.events[index][0]];
  }

  /**
   * Returns true if the tested event denotes end of event sequence.
   *
   * @param {number} index element index in |this.events|.
   */
  isEndOfSequence(index) {
    const nextEventTypes = endSequenceEvents[this.events[index][0]];
    if (!nextEventTypes) {
      return false;
    }
    if (nextEventTypes.length === 0) {
      return true;
    }
    const nextIndex = this.getNextEvent(index, 1 /* direction */);
    if (nextIndex < 0) {
      // No more events after and it is listed as possible end of sequence.
      return true;
    }
    return nextEventTypes.includes(this.events[nextIndex][0]);
  }

  /**
   * Returns the index of closest event to the requested |timestamp|.
   *
   * @param {number} timestamp to search.
   */
  getClosest(timestamp) {
    if (this.events.length === 0) {
      return -1;
    }
    if (this.events[0][1] >= timestamp) {
      return this.getFirstEvent();
    }
    if (this.events[this.events.length - 1][1] <= timestamp) {
      return this.getNextEvent(
          this.events.length /* index */, -1 /* direction */);
    }
    // At this moment |firstBefore| and |firstAfter| points to any event.
    let firstBefore = 0;
    let firstAfter = this.events.length - 1;
    while (firstBefore + 1 !== firstAfter) {
      const candidateIndex = Math.ceil((firstBefore + firstAfter) / 2);
      if (this.events[candidateIndex][1] < timestamp) {
        firstBefore = candidateIndex;
      } else {
        firstAfter = candidateIndex;
      }
    }
    // Point |firstBefore| and |firstAfter| to the supported event types.
    firstBefore =
        this.getNextEvent(firstBefore + 1 /* index */, -1 /* direction */);
    firstAfter =
        this.getNextEvent(firstAfter - 1 /* index */, 1 /* direction */);
    if (firstBefore < 0) {
      return firstAfter;
    } else if (firstAfter < 0) {
      return firstBefore;
    } else {
      const diffBefore = timestamp - this.events[firstBefore][1];
      const diffAfter = this.events[firstAfter][1] - timestamp;
      if (diffBefore < diffAfter) {
        return firstBefore;
      } else {
        return firstAfter;
      }
    }
  }

  /**
   * Returns the index of the first event after or on requested |timestamp|.
   *
   * @param {number} timestamp to search.
   */
  getFirstAfter(timestamp) {
    const closest = this.getClosest(timestamp);
    if (closest < 0) {
      return -1;
    }
    if (this.events[closest][1] >= timestamp) {
      return closest;
    }
    return this.getNextEvent(closest, 1 /* direction */);
  }

  /**
   * Returns the index of the last event before or on requested |timestamp|.
   *
   * @param {number} timestamp to search.
   */
  getLastBefore(timestamp) {
    const closest = this.getClosest(timestamp);
    if (closest < 0) {
      return -1;
    }
    if (this.events[closest][1] <= timestamp) {
      return closest;
    }
    return this.getNextEvent(closest, -1 /* direction */);
  }
}

/**
 * Helper function that creates chart with required attributes.
 *
 * @param {HTMLElement} parent container for the newly created chart.
 * @param {string} title of the chart.
 * @param {number} resolution scale of the chart in microseconds per pixel.
 * @param {number} duration length of the chart in microseconds.
 * @param {number} height of the chart in pixels.
 * @param {number} gridLinesCount number of extra intermediate grid lines, 0 i
 *                 not required.
 * @param {HTMLElement} anchor insert point. View will be added after this.
 *                             may be optional.
 *
 */
function createChart(
    parent, title, resolution, duration, height, gridLinesCount, anchor) {
  const titleBands =
      new EventBandTitle(parent, anchor, title, 'arc-events-band-title');
  const bands =
      new EventBands(titleBands, 'arc-events-band', resolution, 0, duration);
  bands.setWidth(bands.timestampToOffset(duration));
  bands.addChart(height, 4 /* padding */);
  for (let i = 0; i < gridLinesCount; i++) {
    bands.addChartGridLine((i + 1) * height / (gridLinesCount + 1));
  }
  return bands;
}