/**
 * Copyright (C) 2013 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:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * 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.
 *     * Neither the name of Google Inc. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT
 * OWNER OR 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.
 */

/**
 * @interface
 */
WebInspector.FlameChartDelegate = function() { }

WebInspector.FlameChartDelegate.prototype = {
    /**
     * @param {number} startTime
     * @param {number} endTime
     */
    requestWindowTimes: function(startTime, endTime) { },

    /**
     * @param {number} startTime
     * @param {number} endTime
     */
    updateRangeSelection: function(startTime, endTime) { },
}

/**
 * @constructor
 * @extends {WebInspector.HBox}
 * @param {!WebInspector.FlameChartDataProvider} dataProvider
 * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
 * @param {!WebInspector.Setting=} groupExpansionSetting
 */
WebInspector.FlameChart = function(dataProvider, flameChartDelegate, groupExpansionSetting)
{
    WebInspector.HBox.call(this, true);
    this.registerRequiredCSS("ui_lazy/flameChart.css");
    this.contentElement.classList.add("flame-chart-main-pane");
    this._flameChartDelegate = flameChartDelegate;
    this._groupExpansionSetting = groupExpansionSetting;
    this._groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};

    this._dataProvider = dataProvider;
    this._calculator = new WebInspector.FlameChart.Calculator(dataProvider);

    this._canvas = this.contentElement.createChild("canvas");
    this._canvas.tabIndex = 1;
    this.setDefaultFocusedElement(this._canvas);
    this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
    this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), false);
    this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
    this._canvas.addEventListener("click", this._onClick.bind(this), false);
    this._canvas.addEventListener("keydown", this._onKeyDown.bind(this), false);
    WebInspector.installInertialDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "-webkit-grabbing", null);
    WebInspector.installDragHandle(this._canvas, this._startRangeSelection.bind(this), this._rangeSelectionDragging.bind(this), this._endRangeSelection.bind(this), "text", null);

    this._vScrollElement = this.contentElement.createChild("div", "flame-chart-v-scroll");
    this._vScrollContent = this._vScrollElement.createChild("div");
    this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), false);
    this._scrollTop = 0;

    this._entryInfo = this.contentElement.createChild("div", "flame-chart-entry-info");
    this._markerHighlighElement = this.contentElement.createChild("div", "flame-chart-marker-highlight-element");
    this._highlightElement = this.contentElement.createChild("div", "flame-chart-highlight-element");
    this._selectedElement = this.contentElement.createChild("div", "flame-chart-selected-element");
    this._selectionOverlay = this.contentElement.createChild("div", "flame-chart-selection-overlay hidden");
    this._selectedTimeSpanLabel = this._selectionOverlay.createChild("div", "time-span");

    this._windowLeft = 0.0;
    this._windowRight = 1.0;
    this._timeWindowLeft = 0;
    this._timeWindowRight = Infinity;
    this._rangeSelectionStart = 0;
    this._rangeSelectionEnd = 0;
    this._barHeight = dataProvider.barHeight();
    this._paddingLeft = this._dataProvider.paddingLeft();
    var markerPadding = 2;
    this._markerRadius = this._barHeight / 2 - markerPadding;

    /** @const */
    this._headerLeftPadding = 6;
    /** @const */
    this._arrowSide = 8;
    /** @const */
    this._expansionArrowIndent = this._headerLeftPadding + this._arrowSide / 2;
    /** @const */
    this._headerLabelXPadding = 3;
    /** @const */
    this._headerLabelYPadding = 2;

    this._highlightedMarkerIndex = -1;
    this._highlightedEntryIndex = -1;
    this._selectedEntryIndex = -1;
    this._rawTimelineDataLength = 0;
    /** @type {!Map<string,!Map<string,number>>} */
    this._textWidth = new Map();

    this._lastMouseOffsetX = 0;
}

WebInspector.FlameChart.DividersBarHeight = 18;

WebInspector.FlameChart.MinimalTimeWindowMs = 0.5;

/**
 * @interface
 */
WebInspector.FlameChartDataProvider = function()
{
}

/**
 * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !WebInspector.FlameChart.GroupStyle}}
 */
WebInspector.FlameChart.Group;

/**
 * @typedef {!{
 *     height: number,
 *     padding: number,
 *     collapsible: boolean,
 *     font: string,
 *     color: string,
 *     backgroundColor: string,
 *     nestingLevel: number,
 *     shareHeaderLine: (boolean|undefined),
 *     useFirstLineForOverview: (boolean|undefined)
 * }}
 */
WebInspector.FlameChart.GroupStyle;

/**
 * @constructor
 * @param {!Array<number>|!Uint8Array} entryLevels
 * @param {!Array<number>|!Float32Array} entryTotalTimes
 * @param {!Array<number>|!Float64Array} entryStartTimes
 * @param {?Array<!WebInspector.FlameChart.Group>} groups
 */
WebInspector.FlameChart.TimelineData = function(entryLevels, entryTotalTimes, entryStartTimes, groups)
{
    this.entryLevels = entryLevels;
    this.entryTotalTimes = entryTotalTimes;
    this.entryStartTimes = entryStartTimes;
    this.groups = groups;
    /** @type {!Array.<!WebInspector.FlameChartMarker>} */
    this.markers = [];
    this.flowStartTimes = [];
    this.flowStartLevels = [];
    this.flowEndTimes = [];
    this.flowEndLevels = [];
}

WebInspector.FlameChartDataProvider.prototype = {
    /**
     * @return {number}
     */
    barHeight: function() { },

    /**
     * @param {number} startTime
     * @param {number} endTime
     * @return {?Array.<number>}
     */
    dividerOffsets: function(startTime, endTime) { },

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

    /**
     * @return {number}
     */
    totalTime: function() { },

    /**
     * @param {number} value
     * @param {number=} precision
     * @return {string}
     */
    formatValue: function(value, precision) { },

    /**
     * @return {number}
     */
    maxStackDepth: function() { },

    /**
     * @return {?WebInspector.FlameChart.TimelineData}
     */
    timelineData: function() { },

    /**
     * @param {number} entryIndex
     * @return {?Array.<!{title: string, value: (string|!Element)}>}
     */
    prepareHighlightedEntryInfo: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @return {boolean}
     */
    canJumpToEntry: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @return {?string}
     */
    entryTitle: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @return {?string}
     */
    entryFont: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @return {string}
     */
    entryColor: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @param {!CanvasRenderingContext2D} context
     * @param {?string} text
     * @param {number} barX
     * @param {number} barY
     * @param {number} barWidth
     * @param {number} barHeight
     * @param {number} unclippedBarX
     * @param {number} timeToPixels
     * @return {boolean}
     */
    decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixels) { },

    /**
     * @param {number} entryIndex
     * @return {boolean}
     */
    forceDecoration: function(entryIndex) { },

    /**
     * @param {number} entryIndex
     * @return {string}
     */
    textColor: function(entryIndex) { },

    /**
     * @return {number}
     */
    textBaseline: function() { },

    /**
     * @return {number}
     */
    textPadding: function() { },

    /**
     * @return {?{startTime: number, endTime: number}}
     */
    highlightTimeRange: function(entryIndex) { },

    /**
     * @return {number}
     */
    paddingLeft: function() { },
}

/**
 * @interface
 */
WebInspector.FlameChartMarker = function()
{
}

WebInspector.FlameChartMarker.prototype = {
    /**
     * @return {number}
     */
    startTime: function() { },

    /**
     * @return {string}
     */
    color: function() { },

    /**
     * @return {string}
     */
    title: function() { },

    /**
     * @param {!CanvasRenderingContext2D} context
     * @param {number} x
     * @param {number} height
     * @param {number} pixelsPerMillisecond
     */
    draw: function(context, x, height, pixelsPerMillisecond) { },
}

WebInspector.FlameChart.Events = {
    EntrySelected: "EntrySelected"
}


/**
 * @constructor
 * @param {!{min: number, max: number}|number=} hueSpace
 * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace
 * @param {!{min: number, max: number, count: (number|undefined)}|number=} lightnessSpace
 * @param {!{min: number, max: number, count: (number|undefined)}|number=} alphaSpace
 */
WebInspector.FlameChart.ColorGenerator = function(hueSpace, satSpace, lightnessSpace, alphaSpace)
{
    this._hueSpace = hueSpace || { min: 0, max: 360 };
    this._satSpace = satSpace || 67;
    this._lightnessSpace = lightnessSpace || 80;
    this._alphaSpace = alphaSpace || 1;
    /** @type {!Map<string, string>} */
    this._colors = new Map();
}

WebInspector.FlameChart.ColorGenerator.prototype = {
    /**
     * @param {string} id
     * @param {string} color
     */
    setColorForID: function(id, color)
    {
        this._colors.set(id, color);
    },

    /**
     * @param {string} id
     * @return {string}
     */
    colorForID: function(id)
    {
        var color = this._colors.get(id);
        if (!color) {
            color = this._generateColorForID(id);
            this._colors.set(id, color);
        }
        return color;
    },

    /**
     * @param {string} id
     * @return {string}
     */
    _generateColorForID: function(id)
    {
        var hash = String.hashCode(id);
        var h = this._indexToValueInSpace(hash, this._hueSpace);
        var s = this._indexToValueInSpace(hash >> 8, this._satSpace);
        var l = this._indexToValueInSpace(hash >> 16, this._lightnessSpace);
        var a = this._indexToValueInSpace(hash >> 24, this._alphaSpace);
        return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
    },

    /**
     * @param {number} index
     * @param {!{min: number, max: number, count: (number|undefined)}|number} space
     * @return {number}
     */
    _indexToValueInSpace: function(index, space)
    {
        if (typeof space === "number")
            return space;
        var count = space.count || space.max - space.min;
        index %= count;
        return space.min + Math.floor(index / (count - 1) * (space.max - space.min));
    }
}


/**
 * @constructor
 * @implements {WebInspector.TimelineGrid.Calculator}
 * @param {!WebInspector.FlameChartDataProvider} dataProvider
 */
WebInspector.FlameChart.Calculator = function(dataProvider)
{
    this._dataProvider = dataProvider;
    this._paddingLeft = 0;
}

WebInspector.FlameChart.Calculator.prototype = {
    /**
     * @override
     * @return {number}
     */
    paddingLeft: function()
    {
        return this._paddingLeft;
    },

    /**
     * @param {!WebInspector.FlameChart} mainPane
     */
    _updateBoundaries: function(mainPane)
    {
        this._totalTime = mainPane._dataProvider.totalTime();
        this._zeroTime = mainPane._dataProvider.minimumBoundary();
        this._minimumBoundaries = this._zeroTime + mainPane._windowLeft * this._totalTime;
        this._maximumBoundaries = this._zeroTime + mainPane._windowRight * this._totalTime;
        this._paddingLeft = mainPane._paddingLeft;
        this._width = mainPane._canvas.width / window.devicePixelRatio - this._paddingLeft;
        this._timeToPixel = this._width / this.boundarySpan();
    },

    /**
     * @override
     * @param {number} time
     * @return {number}
     */
    computePosition: function(time)
    {
        return Math.round((time - this._minimumBoundaries) * this._timeToPixel + this._paddingLeft);
    },

    /**
     * @override
     * @param {number} value
     * @param {number=} precision
     * @return {string}
     */
    formatValue: function(value, precision)
    {
        return this._dataProvider.formatValue(value - this._zeroTime, precision);
    },

    /**
     * @override
     * @return {number}
     */
    maximumBoundary: function()
    {
        return this._maximumBoundaries;
    },

    /**
     * @override
     * @return {number}
     */
    minimumBoundary: function()
    {
        return this._minimumBoundaries;
    },

    /**
     * @override
     * @return {number}
     */
    zeroTime: function()
    {
        return this._zeroTime;
    },

    /**
     * @override
     * @return {number}
     */
    boundarySpan: function()
    {
        return this._maximumBoundaries - this._minimumBoundaries;
    }
}

WebInspector.FlameChart.prototype = {
    /**
     * @override
     */
    willHide: function()
    {
        this.hideHighlight();
    },

    /**
     * @override
     * @return {!Array.<!Element>}
     */
    elementsToRestoreScrollPositionsFor: function()
    {
        return [this._vScrollElement];
    },

    /**
     * @param {number} entryIndex
     */
    highlightEntry: function(entryIndex)
    {
        if (this._highlightedEntryIndex === entryIndex)
            return;
        this._highlightedEntryIndex = entryIndex;
        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
    },

    hideHighlight: function()
    {
        this._entryInfo.removeChildren();
        this._canvas.style.cursor = "default";
        this._highlightedEntryIndex = -1;
        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
    },

    _resetCanvas: function()
    {
        var ratio = window.devicePixelRatio;
        this._canvas.width = this._offsetWidth * ratio;
        this._canvas.height = this._offsetHeight * ratio;
        this._canvas.style.width = this._offsetWidth + "px";
        this._canvas.style.height = this._offsetHeight + "px";
    },

    /**
     * @return {?WebInspector.FlameChart.TimelineData}
     */
    _timelineData: function()
    {
        var timelineData = this._dataProvider.timelineData();
        if (timelineData !== this._rawTimelineData || timelineData.entryStartTimes.length !== this._rawTimelineDataLength)
            this._processTimelineData(timelineData);
        return this._rawTimelineData;
    },

    _cancelAnimation: function()
    {
        if (this._cancelWindowTimesAnimation) {
            this._timeWindowLeft = this._pendingAnimationTimeLeft;
            this._timeWindowRight = this._pendingAnimationTimeRight;
            this._cancelWindowTimesAnimation();
            delete this._cancelWindowTimesAnimation;
        }
    },

    /**
     * @param {number} entryIndex
     */
    _revealEntry: function(entryIndex)
    {
        var timelineData = this._timelineData();
        if (!timelineData)
            return;
        // Think in terms of not where we are, but where we'll be after animation (if present)
        var timeLeft = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeLeft : this._timeWindowLeft;
        var timeRight = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeRight : this._timeWindowRight;
        var entryStartTime = timelineData.entryStartTimes[entryIndex];
        var entryTotalTime = timelineData.entryTotalTimes[entryIndex];
        var entryEndTime = entryStartTime + entryTotalTime;
        var minEntryTimeWindow = Math.min(entryTotalTime, timeRight - timeLeft);

        var y = this._levelToHeight(timelineData.entryLevels[entryIndex]);
        if (this._vScrollElement.scrollTop > y)
            this._vScrollElement.scrollTop = y;
        else if (this._vScrollElement.scrollTop < y - this._offsetHeight + this._barHeight)
            this._vScrollElement.scrollTop = y - this._offsetHeight + this._barHeight;

        if (timeLeft > entryEndTime) {
            var delta = timeLeft - entryEndTime + minEntryTimeWindow;
            this._flameChartDelegate.requestWindowTimes(timeLeft - delta, timeRight - delta);
        } else if (timeRight < entryStartTime) {
            var delta = entryStartTime - timeRight + minEntryTimeWindow;
            this._flameChartDelegate.requestWindowTimes(timeLeft + delta, timeRight + delta);
        }
    },

    /**
     * @param {number} startTime
     * @param {number} endTime
     */
    setWindowTimes: function(startTime, endTime)
    {
        if (this._muteAnimation || this._timeWindowLeft === 0 || this._timeWindowRight === Infinity || (startTime === 0 && endTime === Infinity) || (startTime === Infinity && endTime === Infinity)) {
            // Initial setup.
            this._timeWindowLeft = startTime;
            this._timeWindowRight = endTime;
            this.scheduleUpdate();
            return;
        }

        this._cancelAnimation();
        this._updateHighlight();
        this._cancelWindowTimesAnimation = WebInspector.animateFunction(this.element.window(), this._animateWindowTimes.bind(this),
            [{from: this._timeWindowLeft, to: startTime}, {from: this._timeWindowRight, to: endTime}], 5,
            this._animationCompleted.bind(this));
        this._pendingAnimationTimeLeft = startTime;
        this._pendingAnimationTimeRight = endTime;
    },

    /**
     * @param {number} startTime
     * @param {number} endTime
     */
    _animateWindowTimes: function(startTime, endTime)
    {
        this._timeWindowLeft = startTime;
        this._timeWindowRight = endTime;
        this._updateHighlight();
        this.update();
    },

    _animationCompleted: function()
    {
        delete this._cancelWindowTimesAnimation;
        this._updateHighlight();
    },

    /**
     * @param {!MouseEvent} event
     */
    _initMaxDragOffset: function(event)
    {
        this._maxDragOffsetSquared = 0;
        this._dragStartX = event.pageX;
        this._dragStartY = event.pageY;
    },

    /**
     * @param {number} x
     * @param {number} y
     */
    _updateMaxDragOffset: function(x, y)
    {
        var dx = x - this._dragStartX;
        var dy = y - this._dragStartY;
        var dragOffsetSquared = dx * dx + dy * dy;
        this._maxDragOffsetSquared = Math.max(this._maxDragOffsetSquared, dragOffsetSquared);
    },

    /**
     * @return {number}
     */
    _maxDragOffset: function()
    {
        return Math.sqrt(this._maxDragOffsetSquared);
    },

    /**
     * @param {number} x
     * @param {number} y
     * @param {!MouseEvent} event
     * @return {boolean}
     */
    _startCanvasDragging: function(x, y, event)
    {
        if (event.shiftKey)
            return false;
        if (!this._timelineData() || this._timeWindowRight === Infinity)
            return false;
        this._isDragging = true;
        this._initMaxDragOffset(event);
        this._dragStartPointX = x;
        this._dragStartPointY = y;
        this._dragStartScrollTop = this._vScrollElement.scrollTop;
        this._canvas.style.cursor = "";
        this.hideHighlight();
        return true;
    },

    /**
     * @param {number} x
     * @param {number} y
     */
    _canvasDragging: function(x, y)
    {
        var pixelShift = this._dragStartPointX - x;
        this._dragStartPointX = x;
        this._muteAnimation = true;
        this._handlePanGesture(pixelShift * this._pixelToTime);
        this._muteAnimation = false;

        var pixelScroll = this._dragStartPointY - y;
        this._vScrollElement.scrollTop = this._dragStartScrollTop + pixelScroll;
        this._updateMaxDragOffset(x, y);
    },

    _endCanvasDragging: function()
    {
        this._isDragging = false;
        this._updateHighlight();
    },

    /**
     * @param {!MouseEvent} event
     * @return {boolean}
     */
    _startRangeSelection: function(event)
    {
        if (!event.shiftKey)
            return false;
        this._isDragging = true;
        this._initMaxDragOffset(event);
        this._selectionOffsetShiftX = event.offsetX - event.pageX;
        this._selectionOffsetShiftY = event.offsetY - event.pageY;
        this._selectionStartX = event.offsetX;
        var style = this._selectionOverlay.style;
        style.left = this._selectionStartX + "px";
        style.width = "1px";
        this._selectedTimeSpanLabel.textContent = "";
        this._selectionOverlay.classList.remove("hidden");
        this.hideHighlight();
        return true;
    },

    _endRangeSelection: function()
    {
        this._isDragging = false;
        this._updateHighlight();
    },

    _hideRangeSelection: function()
    {
        this._selectionOverlay.classList.add("hidden");
    },

    /**
     * @param {!MouseEvent} event
     */
    _rangeSelectionDragging: function(event)
    {
        this._updateMaxDragOffset(event.pageX, event.pageY);
        var x = Number.constrain(event.pageX + this._selectionOffsetShiftX, 0, this._offsetWidth);
        var start = this._cursorTime(this._selectionStartX);
        var end = this._cursorTime(x);
        this._rangeSelectionStart = Math.min(start, end);
        this._rangeSelectionEnd = Math.max(start, end);
        this._updateRangeSelectionOverlay();
        this._flameChartDelegate.updateRangeSelection(this._rangeSelectionStart, this._rangeSelectionEnd);
    },

    _updateRangeSelectionOverlay: function()
    {
        var /** @const */ margin = 100;
        var left = Number.constrain(this._timeToPosition(this._rangeSelectionStart), -margin, this._offsetWidth + margin);
        var right = Number.constrain(this._timeToPosition(this._rangeSelectionEnd), -margin, this._offsetWidth + margin);
        var style = this._selectionOverlay.style;
        style.left = left + "px";
        style.width = (right - left) + "px";
        var timeSpan = this._rangeSelectionEnd - this._rangeSelectionStart;
        this._selectedTimeSpanLabel.textContent = Number.preciseMillisToString(timeSpan, 2);
    },

    /**
     * @param {!Event} event
     */
    _onMouseMove: function(event)
    {
        this._lastMouseOffsetX = event.offsetX;
        this._lastMouseOffsetY = event.offsetY;
        if (!this._enabled())
            return;
        if (this._isDragging)
            return;
        if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) {
            this.hideHighlight();
            this._canvas.style.cursor = "pointer";
            return;
        }
        this._updateHighlight();
    },

    _updateHighlight: function()
    {
        var inDividersBar = this._lastMouseOffsetY < WebInspector.FlameChart.DividersBarHeight;
        this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(this._lastMouseOffsetX) : -1;
        this._updateMarkerHighlight();

        var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this._lastMouseOffsetY);
        if (entryIndex === -1) {
            this.hideHighlight();
            return;
        }
        this._updatePopover(entryIndex);
        this._canvas.style.cursor = this._dataProvider.canJumpToEntry(entryIndex) ? "pointer" : "default";
        this.highlightEntry(entryIndex);
    },

    _onMouseOut: function()
    {
        this._lastMouseOffsetX = -1;
        this._lastMouseOffsetY = -1;
        this.hideHighlight();
    },

    /**
     * @param {number} entryIndex
     */
    _updatePopover: function(entryIndex)
    {
        if (entryIndex !== this._highlightedEntryIndex) {
            this._entryInfo.removeChildren();
            var entryInfo = this._dataProvider.prepareHighlightedEntryInfo(entryIndex);
            if (entryInfo)
                this._entryInfo.appendChild(this._buildEntryInfo(entryInfo));
        }
        var mouseX = this._lastMouseOffsetX;
        var mouseY = this._lastMouseOffsetY;
        var parentWidth = this._entryInfo.parentElement.clientWidth;
        var parentHeight = this._entryInfo.parentElement.clientHeight;
        var infoWidth = this._entryInfo.clientWidth;
        var infoHeight = this._entryInfo.clientHeight;
        var /** @const */ offsetX = 10;
        var /** @const */ offsetY = 6;
        var x;
        var y;
        for (var quadrant = 0; quadrant < 4; ++quadrant) {
            var dx = quadrant & 2 ? -offsetX - infoWidth  : offsetX;
            var dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
            x = Number.constrain(mouseX + dx, 0, parentWidth - infoWidth);
            y = Number.constrain(mouseY + dy, 0, parentHeight - infoHeight);
            if (x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight)
                break;
        }
        this._entryInfo.style.left = x + "px";
        this._entryInfo.style.top = y + "px";
    },

    _onClick: function(event)
    {
        this.focus();
        // onClick comes after dragStart and dragEnd events.
        // So if there was drag (mouse move) in the middle of that events
        // we skip the click. Otherwise we jump to the sources.
        const clickThreshold = 5;
        if (this._maxDragOffset() > clickThreshold)
            return;
        var groupIndex = this._coordinatesToGroupIndex(event.offsetX, event.offsetY);
        if (groupIndex >= 0) {
            this._toggleGroupVisibility(groupIndex);
            return;
        }
        this._hideRangeSelection();
        this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
    },

    /**
     * @param {number} groupIndex
     */
    _toggleGroupVisibility: function(groupIndex)
    {
        if (!this._isGroupCollapsible(groupIndex))
            return;
        var groups = this._rawTimelineData.groups;
        var group = groups[groupIndex];
        group.expanded = !group.expanded;
        this._groupExpansionState[group.name] = group.expanded;
        if (this._groupExpansionSetting)
            this._groupExpansionSetting.set(this._groupExpansionState);
        this._updateLevelPositions();

        this._updateHighlight();
        if (!group.expanded) {
            var timelineData = this._timelineData();
            var level = timelineData.entryLevels[this._selectedEntryIndex];
            if (this._selectedEntryIndex >= 0 && level >= group.startLevel && (groupIndex === groups.length || groups[groupIndex + 1].startLevel > level))
                this._selectedEntryIndex = -1;
        }

        this._updateHeight();
        this._resetCanvas();
        this._draw(this._offsetWidth, this._offsetHeight);
    },

    /**
     * @param {!Event} e
     */
    _onMouseWheel: function(e)
    {
        if (!this._enabled())
            return;
        // Pan vertically when shift down only.
        var panVertically = e.shiftKey && (e.wheelDeltaY || Math.abs(e.wheelDeltaX) === 120);
        var panHorizontally = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) && !e.shiftKey;
        if (panVertically) {
            this._vScrollElement.scrollTop -= (e.wheelDeltaY || e.wheelDeltaX) / 120 * this._offsetHeight / 8;
        } else if (panHorizontally) {
            var shift = -e.wheelDeltaX * this._pixelToTime;
            this._muteAnimation = true;
            this._handlePanGesture(shift);
            this._muteAnimation = false;
        } else {  // Zoom.
            const mouseWheelZoomSpeed = 1 / 120;
            this._handleZoomGesture(Math.pow(1.2, -(e.wheelDeltaY || e.wheelDeltaX) * mouseWheelZoomSpeed) - 1);
        }

        // Block swipe gesture.
        e.consume(true);
    },

    /**
     * @param {!Event} e
     */
    _onKeyDown: function(e)
    {
        this._handleZoomPanKeys(e);
        this._handleSelectionNavigation(e);
    },

    /**
     * @param {!Event} e
     */
    _handleSelectionNavigation: function(e)
    {
        if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
            return;
        if (this._selectedEntryIndex === -1)
            return;
        var timelineData = this._timelineData();
        if (!timelineData)
            return;

        /**
         * @param {number} time
         * @param {number} entryIndex
         * @return {number}
         */
        function timeComparator(time, entryIndex)
        {
            return time - timelineData.entryStartTimes[entryIndex];
        }

        /**
         * @param {number} entry1
         * @param {number} entry2
         * @return {boolean}
         */
        function entriesIntersect(entry1, entry2)
        {
            var start1 = timelineData.entryStartTimes[entry1];
            var start2 = timelineData.entryStartTimes[entry2];
            var end1 = start1 + timelineData.entryTotalTimes[entry1];
            var end2 = start2 + timelineData.entryTotalTimes[entry2];
            return start1 < end2 && start2 < end1;
        }

        var keys = WebInspector.KeyboardShortcut.Keys;
        if (e.keyCode === keys.Left.code || e.keyCode === keys.Right.code) {
            var level = timelineData.entryLevels[this._selectedEntryIndex];
            var levelIndexes = this._timelineLevels[level];
            var indexOnLevel = levelIndexes.lowerBound(this._selectedEntryIndex);
            indexOnLevel += e.keyCode === keys.Left.code ? -1 : 1;
            e.consume(true);
            if (indexOnLevel >= 0 && indexOnLevel < levelIndexes.length)
                this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
            return;
        }
        if (e.keyCode === keys.Up.code || e.keyCode === keys.Down.code) {
            e.consume(true);
            var level = timelineData.entryLevels[this._selectedEntryIndex];
            level += e.keyCode === keys.Up.code ? -1 : 1;
            if (level < 0 || level >= this._timelineLevels.length)
                return;
            var entryTime = timelineData.entryStartTimes[this._selectedEntryIndex] + timelineData.entryTotalTimes[this._selectedEntryIndex] / 2;
            var levelIndexes = this._timelineLevels[level];
            var indexOnLevel = levelIndexes.upperBound(entryTime, timeComparator) - 1;
            if (!entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel])) {
                ++indexOnLevel;
                if (indexOnLevel >= levelIndexes.length || !entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel]))
                    return;
            }
            this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
        }
    },

    /**
     * @param {!Event} e
     */
    _handleZoomPanKeys: function(e)
    {
        if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
            return;
        var zoomMultiplier = e.shiftKey ? 0.8 : 0.3;
        var panMultiplier = e.shiftKey ? 320 : 80;
        if (e.keyCode === "A".charCodeAt(0)) {
            this._handlePanGesture(-panMultiplier * this._pixelToTime);
            e.consume(true);
        } else if (e.keyCode === "D".charCodeAt(0)) {
            this._handlePanGesture(panMultiplier * this._pixelToTime);
            e.consume(true);
        } else if (e.keyCode === "W".charCodeAt(0)) {
            this._handleZoomGesture(-zoomMultiplier);
            e.consume(true);
        } else if (e.keyCode === "S".charCodeAt(0)) {
            this._handleZoomGesture(zoomMultiplier);
            e.consume(true);
        }
    },

    /**
     * @param {number} zoom
     */
    _handleZoomGesture: function(zoom)
    {
        this._cancelAnimation();
        var bounds = this._windowForGesture();
        var cursorTime = this._cursorTime(this._lastMouseOffsetX);
        bounds.left += (bounds.left - cursorTime) * zoom;
        bounds.right += (bounds.right - cursorTime) * zoom;
        this._requestWindowTimes(bounds);
    },

    /**
     * @param {number} shift
     */
    _handlePanGesture: function(shift)
    {
        this._cancelAnimation();
        var bounds = this._windowForGesture();
        shift = Number.constrain(shift, this._minimumBoundary - bounds.left, this._totalTime + this._minimumBoundary - bounds.right);
        bounds.left += shift;
        bounds.right += shift;
        this._requestWindowTimes(bounds);
    },

    /**
     * @return {{left: number, right: number}}
     */
    _windowForGesture: function()
    {
        var windowLeft = this._timeWindowLeft ? this._timeWindowLeft : this._dataProvider.minimumBoundary();
        var windowRight = this._timeWindowRight !== Infinity ? this._timeWindowRight : this._dataProvider.minimumBoundary() + this._dataProvider.totalTime();
        return {left: windowLeft, right: windowRight};
    },

    /**
     * @param {{left: number, right: number}} bounds
     */
    _requestWindowTimes: function(bounds)
    {
        bounds.left = Number.constrain(bounds.left, this._minimumBoundary, this._totalTime + this._minimumBoundary);
        bounds.right = Number.constrain(bounds.right, this._minimumBoundary, this._totalTime + this._minimumBoundary);
        if (bounds.right - bounds.left < WebInspector.FlameChart.MinimalTimeWindowMs)
            return;
        this._flameChartDelegate.requestWindowTimes(bounds.left, bounds.right);
    },

    /**
     * @param {number} x
     * @return {number}
     */
    _cursorTime: function(x)
    {
        return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._minimumBoundary;
    },

    /**
     * @param {number} x
     * @param {number} y
     * @return {number}
     */
    _coordinatesToEntryIndex: function(x, y)
    {
        if (x < 0 || y < 0)
            return -1;
        y += this._scrollTop;
        var timelineData = this._timelineData();
        if (!timelineData)
            return -1;
        var cursorTime = this._cursorTime(x);
        var cursorLevel = this._visibleLevelOffsets.upperBound(y) - 1;
        if (cursorLevel < 0 || !this._visibleLevels[cursorLevel])
            return -1;
        var offsetFromLevel = y - this._visibleLevelOffsets[cursorLevel];
        if (offsetFromLevel > this._barHeight)
            return -1;
        var entryStartTimes = timelineData.entryStartTimes;
        var entryTotalTimes = timelineData.entryTotalTimes;
        var entryIndexes = this._timelineLevels[cursorLevel];
        if (!entryIndexes || !entryIndexes.length)
            return -1;

        /**
         * @param {number} time
         * @param {number} entryIndex
         * @return {number}
         */
        function comparator(time, entryIndex)
        {
            return time - entryStartTimes[entryIndex];
        }
        var indexOnLevel = Math.max(entryIndexes.upperBound(cursorTime, comparator) - 1, 0);

        /**
         * @this {WebInspector.FlameChart}
         * @param {number} entryIndex
         * @return {boolean}
         */
        function checkEntryHit(entryIndex)
        {
            if (entryIndex === undefined)
                return false;
            var startTime = entryStartTimes[entryIndex];
            var duration = entryTotalTimes[entryIndex];
            if (isNaN(duration)) {
                var dx = (startTime - cursorTime) / this._pixelToTime;
                var dy = this._barHeight / 2 - offsetFromLevel;
                return dx * dx + dy * dy < this._markerRadius * this._markerRadius;
            }
            var endTime = startTime + duration;
            var barThreshold = 3 * this._pixelToTime;
            return startTime - barThreshold < cursorTime && cursorTime < endTime + barThreshold;
        }

        var entryIndex = entryIndexes[indexOnLevel];
        if (checkEntryHit.call(this, entryIndex))
            return entryIndex;
        entryIndex = entryIndexes[indexOnLevel + 1];
        if (checkEntryHit.call(this, entryIndex))
            return entryIndex;
        return -1;
    },

    /**
     * @param {number} x
     * @param {number} y
     * @return {number}
     */
    _coordinatesToGroupIndex: function(x, y)
    {
        if (x < 0 || y < 0)
            return -1;
        y += this._scrollTop;
        var groups = this._rawTimelineData.groups || [];
        var group = this._groupOffsets.upperBound(y) - 1;

        if (group < 0 || group >= groups.length || y - this._groupOffsets[group] >= groups[group].style.height)
            return -1;
        var context = this._canvas.getContext("2d");
        context.save();
        context.font = groups[group].style.font;
        var right = this._headerLeftPadding + this._labelWidthForGroup(context, groups[group]);
        context.restore();
        if (x > right)
            return -1;

        return group;
    },

    /**
     * @param {number} x
     * @return {number}
     */
    _markerIndexAtPosition: function(x)
    {
        var markers = this._timelineData().markers;
        if (!markers)
            return -1;
        var accurracyOffsetPx = 1;
        var time = this._cursorTime(x);
        var leftTime = this._cursorTime(x - accurracyOffsetPx);
        var rightTime = this._cursorTime(x + accurracyOffsetPx);

        var left = this._markerIndexBeforeTime(leftTime);
        var markerIndex = -1;
        var distance = Infinity;
        for (var i = left; i < markers.length && markers[i].startTime() < rightTime; i++) {
            var nextDistance = Math.abs(markers[i].startTime() - time);
            if (nextDistance < distance) {
                markerIndex = i;
                distance = nextDistance;
            }
        }
        return markerIndex;
    },

    /**
     * @param {number} time
     * @return {number}
     */
    _markerIndexBeforeTime: function(time)
    {
        /**
         * @param {number} markerTimestamp
         * @param {!WebInspector.FlameChartMarker} marker
         * @return {number}
         */
        function comparator(markerTimestamp, marker)
        {
            return markerTimestamp - marker.startTime();
        }
        return this._timelineData().markers.lowerBound(time, comparator);
    },

    /**
     * @param {number} height
     * @param {number} width
     */
    _draw: function(width, height)
    {
        var timelineData = this._timelineData();
        if (!timelineData)
            return;

        var context = this._canvas.getContext("2d");
        context.save();
        var ratio = window.devicePixelRatio;
        context.scale(ratio, ratio);
        context.translate(0, -this._scrollTop);
        context.font = "11px " + WebInspector.fontFamily();

        var timeWindowRight = this._timeWindowRight;
        var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
        var entryTotalTimes = timelineData.entryTotalTimes;
        var entryStartTimes = timelineData.entryStartTimes;
        var entryLevels = timelineData.entryLevels;

        var titleIndices = new Uint32Array(entryTotalTimes.length);
        var nextTitleIndex = 0;
        var markerIndices = new Uint32Array(entryTotalTimes.length);
        var nextMarkerIndex = 0;
        var textPadding = this._dataProvider.textPadding();
        var minTextWidth = 2 * textPadding + this._measureWidth(context, "\u2026");
        var unclippedWidth = width - (WebInspector.isMac() ? 0 : this._vScrollElement.offsetWidth);
        var barHeight = this._barHeight;
        var top = this._scrollTop;
        var minVisibleBarLevel = Math.max(this._visibleLevelOffsets.upperBound(top) - 1, 0);

        function comparator(time, entryIndex)
        {
            return time - entryStartTimes[entryIndex];
        }

        var colorBuckets = {};
        for (var level = minVisibleBarLevel; level < this._dataProvider.maxStackDepth(); ++level) {
            if (this._levelToHeight(level) > top + height)
                break;
            if (!this._visibleLevels[level])
                continue;

            // Entries are ordered by start time within a level, so find the last visible entry.
            var levelIndexes = this._timelineLevels[level];
            var rightIndexOnLevel = levelIndexes.lowerBound(timeWindowRight, comparator) - 1;
            var lastDrawOffset = Infinity;
            for (var entryIndexOnLevel = rightIndexOnLevel; entryIndexOnLevel >= 0; --entryIndexOnLevel) {
                var entryIndex = levelIndexes[entryIndexOnLevel];
                var entryStartTime = entryStartTimes[entryIndex];
                var entryOffsetRight = entryStartTime + (isNaN(entryTotalTimes[entryIndex]) ? 0 : entryTotalTimes[entryIndex]);
                if (entryOffsetRight <= timeWindowLeft)
                    break;

                var barX = this._timeToPositionClipped(entryStartTime);
                // Check if the entry entirely fits into an already drawn pixel, we can just skip drawing it.
                if (barX >= lastDrawOffset)
                    continue;
                lastDrawOffset = barX;

                var color = this._dataProvider.entryColor(entryIndex);
                var bucket = colorBuckets[color];
                if (!bucket) {
                    bucket = [];
                    colorBuckets[color] = bucket;
                }
                bucket.push(entryIndex);
            }
        }

        var colors = Object.keys(colorBuckets);
        // We don't use for-in here because it couldn't be optimized.
        for (var c = 0; c < colors.length; ++c) {
            var color = colors[c];
            context.fillStyle = color;
            context.strokeStyle = color;
            var indexes = colorBuckets[color];

            // First fill the boxes.
            context.beginPath();
            for (var i = 0; i < indexes.length; ++i) {
                var entryIndex = indexes[i];
                var entryStartTime = entryStartTimes[entryIndex];
                var barX = this._timeToPositionClipped(entryStartTime);
                var barRight = this._timeToPositionClipped(entryStartTime + entryTotalTimes[entryIndex]);
                var barWidth = Math.max(barRight - barX, 1);
                var barLevel = entryLevels[entryIndex];
                var barY = this._levelToHeight(barLevel);
                if (isNaN(entryTotalTimes[entryIndex])) {
                    context.moveTo(barX + this._markerRadius, barY + barHeight / 2);
                    context.arc(barX, barY + barHeight / 2, this._markerRadius, 0, Math.PI * 2);
                    markerIndices[nextMarkerIndex++] = entryIndex;
                } else {
                    context.rect(barX, barY, barWidth - 0.4, barHeight - 1);
                    if (barWidth > minTextWidth || this._dataProvider.forceDecoration(entryIndex))
                        titleIndices[nextTitleIndex++] = entryIndex;
                }
            }
            context.fill();
        }

        context.strokeStyle = "rgb(0, 0, 0)";
        context.beginPath();
        for (var m = 0; m < nextMarkerIndex; ++m) {
            var entryIndex = markerIndices[m];
            var entryStartTime = entryStartTimes[entryIndex];
            var barX = this._timeToPositionClipped(entryStartTime);
            var barLevel = entryLevels[entryIndex];
            var barY = this._levelToHeight(barLevel);
            context.moveTo(barX + this._markerRadius, barY + barHeight / 2);
            context.arc(barX, barY + barHeight / 2, this._markerRadius, 0, Math.PI * 2);
        }
        context.stroke();

        context.textBaseline = "alphabetic";
        var textBaseHeight = this._barHeight - this._dataProvider.textBaseline();

        for (var i = 0; i < nextTitleIndex; ++i) {
            var entryIndex = titleIndices[i];
            var entryStartTime = entryStartTimes[entryIndex];
            var barX = this._timeToPositionClipped(entryStartTime);
            var barRight = Math.min(this._timeToPositionClipped(entryStartTime + entryTotalTimes[entryIndex]), unclippedWidth) + 1;
            var barWidth = barRight - barX;
            var barLevel = entryLevels[entryIndex];
            var barY = this._levelToHeight(barLevel);
            var text = this._dataProvider.entryTitle(entryIndex);
            if (text && text.length) {
                context.font = this._dataProvider.entryFont(entryIndex);
                text = this._prepareText(context, text, barWidth - 2 * textPadding);
            }
            var unclippedBarX = this._timeToPosition(entryStartTime);
            if (this._dataProvider.decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, this._timeToPixel))
                continue;
            if (!text || !text.length)
                continue;
            context.fillStyle = this._dataProvider.textColor(entryIndex);
            context.fillText(text, barX + textPadding, barY + textBaseHeight);
        }

        this._drawFlowEvents(context, width, height);

        context.restore();

        var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
        WebInspector.TimelineGrid.drawCanvasGrid(this._canvas, this._calculator, offsets);
        this._drawMarkers();
        this._drawGroupHeaders(width, height);

        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
        this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
        this._updateMarkerHighlight();
        this._updateRangeSelectionOverlay();
    },

    /**
     * @param {number} width
     * @param {number} height
     */
    _drawGroupHeaders: function(width, height)
    {
        var context = this._canvas.getContext("2d");
        var top = this._scrollTop;
        var ratio = window.devicePixelRatio;
        var barHeight = this._barHeight;
        var textBaseHeight = barHeight - this._dataProvider.textBaseline();
        var groups = this._rawTimelineData.groups || [];
        if (!groups.length)
            return;

        var groupOffsets = this._groupOffsets;
        var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
        var colorUsage = WebInspector.ThemeSupport.ColorUsage;

        context.save();
        context.scale(ratio, ratio);
        context.translate(0, -top);

        context.fillStyle = WebInspector.themeSupport.patchColor("#eee", colorUsage.Background);
        forEachGroup.call(this, (offset, index, group) => {
            var paddingHeight = group.style.padding;
            if (paddingHeight < 5)
                return;
            context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight - 4);
        });
        if (groups.length && lastGroupOffset < top + height)
            context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset)

        context.strokeStyle = WebInspector.themeSupport.patchColor("#bbb", colorUsage.Background);
        context.beginPath();
        forEachGroup.call(this, (offset, index, group, isFirst) => {
            if (isFirst || group.style.padding < 4)
                return;
            hLine(offset - 2.5);
        });
        hLine(lastGroupOffset + 0.5);
        context.stroke();

        forEachGroup.call(this, (offset, index, group) => {
            if (group.style.useFirstLineForOverview)
                return;
            if (!this._isGroupCollapsible(index) || group.expanded) {
                if (!group.style.shareHeaderLine) {
                    context.fillStyle = group.style.backgroundColor;
                    context.fillRect(0, offset, width, group.style.height);
                }
                return;
            }
            var nextGroup = index + 1;
            while (nextGroup < groups.length && groups[nextGroup].style.nestingLevel > group.style.nestingLevel)
                nextGroup++;
            var endLevel = nextGroup < groups.length ? groups[nextGroup].startLevel : this._dataProvider.maxStackDepth();
            this._drawCollapsedOverviewForGroup(offset + 1, group.startLevel, endLevel);
        });

        context.save();
        forEachGroup.call(this, (offset, index, group) => {
            context.font = group.style.font;
            if (this._isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
                var width = this._labelWidthForGroup(context, group);
                context.fillStyle = WebInspector.Color.parse(group.style.backgroundColor).setAlpha(0.7).asString(null);
                context.fillRect(this._headerLeftPadding - this._headerLabelXPadding, offset + this._headerLabelYPadding, width, barHeight - 2 * this._headerLabelYPadding);
            }
            context.fillStyle = group.style.color;
            context.fillText(group.name, Math.floor(this._expansionArrowIndent * (group.style.nestingLevel + 1) + this._arrowSide), offset + textBaseHeight);
        });
        context.restore();

        context.fillStyle = WebInspector.themeSupport.patchColor("#6e6e6e", colorUsage.Foreground);
        context.beginPath();
        forEachGroup.call(this, (offset, index, group) => {
            if (this._isGroupCollapsible(index))
                drawExpansionArrow.call(this, this._expansionArrowIndent * (group.style.nestingLevel + 1), offset + textBaseHeight - this._arrowSide / 2, !!group.expanded)
        });
        context.fill();

        context.strokeStyle = WebInspector.themeSupport.patchColor("#ddd", colorUsage.Background);
        context.beginPath();
        context.stroke();

        context.restore();

        /**
         * @param {number} y
         */
        function hLine(y)
        {
            context.moveTo(0, y);
            context.lineTo(width, y);
        }

        /**
         * @param {number} x
         * @param {number} y
         * @param {boolean} expanded
         * @this {WebInspector.FlameChart}
         */
        function drawExpansionArrow(x, y, expanded)
        {
            var arrowHeight = this._arrowSide * Math.sqrt(3) / 2;
            var arrowCenterOffset = Math.round(arrowHeight / 2);
            context.save();
            context.translate(x, y);
            context.rotate(expanded ? Math.PI / 2 : 0);
            context.moveTo(-arrowCenterOffset, -this._arrowSide / 2);
            context.lineTo(-arrowCenterOffset, this._arrowSide / 2);
            context.lineTo(arrowHeight - arrowCenterOffset, 0);
            context.restore();
        }

        /**
         * @param {function(number, number, !WebInspector.FlameChart.Group, boolean)} callback
         * @this {WebInspector.FlameChart}
         */
        function forEachGroup(callback)
        {
            /** @type !Array<{nestingLevel: number, visible: boolean}> */
            var groupStack = [{nestingLevel: -1, visible: true}];
            for (var i = 0; i < groups.length; ++i) {
                var groupTop = groupOffsets[i];
                var group = groups[i];
                if (groupTop - group.style.padding > top + height)
                    break;
                var firstGroup = true;
                while (groupStack.peekLast().nestingLevel >= group.style.nestingLevel) {
                    groupStack.pop();
                    firstGroup = false;
                }
                var parentGroupVisible = groupStack.peekLast().visible;
                var thisGroupVisible = parentGroupVisible && (!this._isGroupCollapsible(i) || group.expanded);
                groupStack.push({nestingLevel: group.style.nestingLevel, visible: thisGroupVisible});
                if (!parentGroupVisible || groupTop + group.style.height < top)
                    continue;
                callback(groupTop, i, group, firstGroup);
            }
        }
    },

    /**
     * @param {!CanvasRenderingContext2D} context
     * @param {!WebInspector.FlameChart.Group} group
     * @return {number}
     */
    _labelWidthForGroup: function(context, group)
    {
        return this._measureWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) + 2 * this._headerLabelXPadding;
    },

    /**
     * @param {number} y
     * @param {number} startLevel
     * @param {number} endLevel
     */
    _drawCollapsedOverviewForGroup: function(y, startLevel, endLevel)
    {
        var range = new WebInspector.SegmentedRange(mergeCallback);
        var timeWindowRight = this._timeWindowRight;
        var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
        var context = this._canvas.getContext("2d");
        var barHeight = this._barHeight - 2;
        var entryStartTimes = this._rawTimelineData.entryStartTimes;
        var entryTotalTimes = this._rawTimelineData.entryTotalTimes;

        for (var level = startLevel; level < endLevel; ++level) {
            var levelIndexes = this._timelineLevels[level];
            var rightIndexOnLevel = levelIndexes.lowerBound(timeWindowRight, (time, entryIndex) => time - entryStartTimes[entryIndex]) - 1;
            var lastDrawOffset = Infinity;

            for (var entryIndexOnLevel = rightIndexOnLevel; entryIndexOnLevel >= 0; --entryIndexOnLevel) {
                var entryIndex = levelIndexes[entryIndexOnLevel];
                var entryStartTime = entryStartTimes[entryIndex];
                var startPosition = this._timeToPositionClipped(entryStartTime);
                var entryEndTime = entryStartTime + entryTotalTimes[entryIndex];
                if (isNaN(entryEndTime) || startPosition >= lastDrawOffset)
                    continue;
                if (entryEndTime <= timeWindowLeft)
                    break;
                lastDrawOffset = startPosition;
                var color = this._dataProvider.entryColor(entryIndex);
                range.append(new WebInspector.Segment(startPosition, this._timeToPositionClipped(entryEndTime), color));
            }
        }

        var segments = range.segments().slice().sort((a, b) => a.data.localeCompare(b.data));
        var lastColor;
        context.beginPath();
        for (var i = 0; i < segments.length; ++i) {
            var segment = segments[i];
            if (lastColor !== segments[i].data) {
                context.fill();
                context.beginPath();
                lastColor = segments[i].data;
                context.fillStyle = lastColor;
            }
            context.rect(segment.begin, y, segment.end - segment.begin, barHeight);
        }
        context.fill();

        /**
         * @param {!WebInspector.Segment} a
         * @param {!WebInspector.Segment} b
         * @return {?WebInspector.Segment}
         */
        function mergeCallback(a, b)
        {
            return a.data === b.data && a.end + 0.4 > b.end ? a : null;
        }
    },

    /**
     * @param {!CanvasRenderingContext2D} context
     * @param {number} height
     * @param {number} width
     */
    _drawFlowEvents: function(context, width, height)
    {
        var timelineData = this._timelineData();
        var timeWindowRight = this._timeWindowRight;
        var timeWindowLeft = this._timeWindowLeft;
        var flowStartTimes = timelineData.flowStartTimes;
        var flowEndTimes = timelineData.flowEndTimes;
        var flowStartLevels = timelineData.flowStartLevels;
        var flowEndLevels = timelineData.flowEndLevels;
        var flowCount = flowStartTimes.length;
        var endIndex = flowStartTimes.lowerBound(timeWindowRight);

        var color = [];
        var fadeColorsCount = 8;
        for (var i = 0; i <= fadeColorsCount; ++i)
            color[i] = "rgba(128, 0, 0, " + i / fadeColorsCount + ")";
        var fadeColorsRange = color.length;
        var minimumFlowDistancePx = 15;
        var flowArcHeight = 4 * this._barHeight;
        var colorIndex = 0;
        context.lineWidth = 0.5;
        for (var i = 0; i < endIndex; ++i) {
            if (flowEndTimes[i] < timeWindowLeft)
                continue;
            var startX = this._timeToPosition(flowStartTimes[i]);
            var endX = this._timeToPosition(flowEndTimes[i]);
            if (endX - startX < minimumFlowDistancePx)
                continue;
            if (startX < -minimumFlowDistancePx && endX > width + minimumFlowDistancePx)
                continue;
            // Assign a trasparent color if the flow is small enough or if the previous color was a transparent color.
            if (endX - startX < minimumFlowDistancePx + fadeColorsRange || colorIndex !== color.length - 1) {
                colorIndex = Math.min(fadeColorsRange - 1, Math.floor(endX - startX - minimumFlowDistancePx));
                context.strokeStyle = color[colorIndex];
            }
            var startY = this._levelToHeight(flowStartLevels[i]) + this._barHeight;
            var endY = this._levelToHeight(flowEndLevels[i]);
            context.beginPath();
            context.moveTo(startX, startY);
            var arcHeight = Math.max(Math.sqrt(Math.abs(startY - endY)), flowArcHeight) + 5;
            context.bezierCurveTo(startX, startY + arcHeight,
                                  endX, endY + arcHeight,
                                  endX, endY + this._barHeight);
            context.stroke();
        }
    },

    _drawMarkers: function()
    {
        var markers = this._timelineData().markers;
        var left = this._markerIndexBeforeTime(this._calculator.minimumBoundary());
        var rightBoundary = this._calculator.maximumBoundary();

        var context = this._canvas.getContext("2d");
        context.save();
        var ratio = window.devicePixelRatio;
        context.scale(ratio, ratio);
        var height = WebInspector.FlameChart.DividersBarHeight - 1;
        for (var i = left; i < markers.length; i++) {
            var timestamp = markers[i].startTime();
            if (timestamp > rightBoundary)
                break;
            markers[i].draw(context, this._calculator.computePosition(timestamp), height, this._timeToPixel);
        }
        context.restore();
    },

    _updateMarkerHighlight: function()
    {
        var element = this._markerHighlighElement;
        if (element.parentElement)
            element.remove();
        var markerIndex = this._highlightedMarkerIndex;
        if (markerIndex === -1)
            return;
        var marker = this._timelineData().markers[markerIndex];
        var barX = this._timeToPositionClipped(marker.startTime());
        element.title = marker.title();
        var style = element.style;
        style.left = barX + "px";
        style.backgroundColor = marker.color();
        this.contentElement.appendChild(element);
    },

    /**
     * @param {?WebInspector.FlameChart.TimelineData} timelineData
     */
    _processTimelineData: function(timelineData)
    {
        if (!timelineData) {
            this._timelineLevels = null;
            this._visibleLevelOffsets = null;
            this._visibleLevels = null;
            this._groupOffsets = null;
            this._rawTimelineData = null;
            this._rawTimelineDataLength = 0;
            return;
        }

        this._rawTimelineData = timelineData;
        this._rawTimelineDataLength = timelineData.entryStartTimes.length;

        var entryCounters = new Uint32Array(this._dataProvider.maxStackDepth() + 1);
        for (var i = 0; i < timelineData.entryLevels.length; ++i)
            ++entryCounters[timelineData.entryLevels[i]];
        var levelIndexes = new Array(entryCounters.length);
        for (var i = 0; i < levelIndexes.length; ++i) {
            levelIndexes[i] = new Uint32Array(entryCounters[i]);
            entryCounters[i] = 0;
        }
        for (var i = 0; i < timelineData.entryLevels.length; ++i) {
            var level = timelineData.entryLevels[i];
            levelIndexes[level][entryCounters[level]++] = i;
        }
        this._timelineLevels = levelIndexes;
        var groups = this._rawTimelineData.groups || [];
        for (var i = 0; i < groups.length; ++i) {
            var expanded = this._groupExpansionState[groups[i].name];
            if (expanded !== undefined)
                groups[i].expanded = expanded;
        }
        this._updateLevelPositions();
    },

    _updateLevelPositions: function()
    {
        var levelCount = this._dataProvider.maxStackDepth();
        var groups = this._rawTimelineData.groups || [];
        this._visibleLevelOffsets = new Uint32Array(levelCount + 1);
        this._visibleLevels = new Uint8Array(levelCount);
        this._groupOffsets = new Uint32Array(groups.length + 1);

        var groupIndex = -1;
        var currentOffset = WebInspector.FlameChart.DividersBarHeight;
        var visible = true;
        /** @type !Array<{nestingLevel: number, visible: boolean}> */
        var groupStack = [{nestingLevel: -1, visible: true}];
        for (var level = 0; level < levelCount; ++level) {
            while (groupIndex < groups.length - 1 && level === groups[groupIndex + 1].startLevel) {
                ++groupIndex;
                var style = groups[groupIndex].style;
                var nextLevel = true;
                while (groupStack.peekLast().nestingLevel >= style.nestingLevel) {
                    groupStack.pop();
                    nextLevel = false;
                }
                var thisGroupIsVisible = groupIndex >= 0 && this._isGroupCollapsible(groupIndex) ? groups[groupIndex].expanded : true;
                var parentGroupIsVisible = groupStack.peekLast().visible;
                visible = thisGroupIsVisible && parentGroupIsVisible;
                groupStack.push({nestingLevel: style.nestingLevel, visible: visible});
                if (parentGroupIsVisible)
                    currentOffset += nextLevel ? 0 : style.padding;
                this._groupOffsets[groupIndex] = currentOffset;
                if (parentGroupIsVisible && !style.shareHeaderLine)
                    currentOffset += style.height;
            }
            var isFirstOnLevel = groupIndex >= 0 && level === groups[groupIndex].startLevel;
            var thisLevelIsVisible = visible || isFirstOnLevel && groups[groupIndex].style.useFirstLineForOverview;
            this._visibleLevels[level] = thisLevelIsVisible;
            this._visibleLevelOffsets[level] = currentOffset;
            if (thisLevelIsVisible || (parentGroupIsVisible && style.shareHeaderLine && isFirstOnLevel))
                currentOffset += this._barHeight;
        }
        if (groupIndex >= 0)
            this._groupOffsets[groupIndex + 1] = currentOffset;
        this._visibleLevelOffsets[level] = currentOffset;
    },

    /**
     * @param {number} index
     */
    _isGroupCollapsible: function(index)
    {
        var groups = this._rawTimelineData.groups || [];
        var style = groups[index].style;
        if (!style.shareHeaderLine || !style.collapsible)
            return !!style.collapsible;
        var isLastGroup = index + 1 >= groups.length;
        if (!isLastGroup && groups[index + 1].style.nestingLevel > style.nestingLevel)
            return true;
        var nextGroupLevel = isLastGroup ? this._dataProvider.maxStackDepth() : groups[index + 1].startLevel;
        // For groups that only have one line and share header line, pretend these are not collapsible.
        return nextGroupLevel !== groups[index].startLevel + 1;
    },

    /**
     * @param {number} entryIndex
     */
    setSelectedEntry: function(entryIndex)
    {
        if (entryIndex === -1 && !this._isDragging)
            this._hideRangeSelection();
        if (this._selectedEntryIndex === entryIndex)
            return;
        this._selectedEntryIndex = entryIndex;
        this._revealEntry(entryIndex);
        this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
    },

    /**
     * @param {!Element} element
     * @param {number} entryIndex
     */
    _updateElementPosition: function(element, entryIndex)
    {
        /** @const */ var elementMinWidth = 2;
        if (element.parentElement)
            element.remove();
        if (entryIndex === -1)
            return;
        var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
        if (!timeRange)
            return;
        var timelineData = this._timelineData();
        var barX = this._timeToPositionClipped(timeRange.startTime);
        var barRight = this._timeToPositionClipped(timeRange.endTime);
        if (barRight === 0 || barX === this._canvas.width)
            return;
        var barWidth = barRight - barX;
        var barCenter = barX + barWidth / 2;
        barWidth = Math.max(barWidth, elementMinWidth);
        barX = barCenter - barWidth / 2;
        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this._scrollTop;
        var style = element.style;
        style.left = barX + "px";
        style.top = barY + "px";
        style.width = barWidth + "px";
        style.height = this._barHeight - 1 + "px";
        this.contentElement.appendChild(element);
    },

    /**
     * @param {number} time
     * @return {number}
     */
    _timeToPositionClipped: function(time)
    {
        return Number.constrain(this._timeToPosition(time), 0, this._canvas.width);
    },

    /**
     * @param {number} time
     * @return {number}
     */
    _timeToPosition: function(time)
    {
        return Math.floor((time - this._minimumBoundary) * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
    },

    /**
     * @param {number} level
     * @return {number}
     */
    _levelToHeight: function(level)
    {
        return this._visibleLevelOffsets[level];
    },

    /**
     * @param {!Array<!{title: string, value: (string|!Element)}>} entryInfo
     * @return {!Element}
     */
    _buildEntryInfo: function(entryInfo)
    {
        var infoTable = createElementWithClass("table", "info-table");
        for (var entry of entryInfo) {
            var row = infoTable.createChild("tr");
            row.createChild("td", "title").textContent = entry.title;
            if (typeof entry.value === "string")
                row.createChild("td").textContent = entry.value;
            else
                row.createChild("td").appendChild(entry.value);
        }
        return infoTable;
    },

    /**
     * @param {!CanvasRenderingContext2D} context
     * @param {string} text
     * @param {number} maxWidth
     * @return {string}
     */
    _prepareText: function(context, text, maxWidth)
    {
        var /** @const */ maxLength = 200;
        if (maxWidth <= 10)
            return "";
        if (text.length > maxLength)
            text = text.trimMiddle(maxLength);
        var textWidth = this._measureWidth(context, text);
        if (textWidth <= maxWidth)
            return text;

        var l = 0;
        var r = text.length;
        var lv = 0;
        var rv = textWidth;
        while (l < r && lv !== rv && lv !== maxWidth) {
            var m = Math.ceil(l + (r - l) * (maxWidth - lv) / (rv - lv));
            var mv = this._measureWidth(context, text.trimMiddle(m));
            if (mv <= maxWidth) {
                l = m;
                lv = mv;
            } else {
                r = m - 1;
                rv = mv;
            }
        }
        text = text.trimMiddle(l);
        return text !== "\u2026" ? text : "";
    },

    /**
     * @param {!CanvasRenderingContext2D} context
     * @param {string} text
     * @return {number}
     */
    _measureWidth: function(context, text)
    {
        var /** @const */ maxCacheableLength = 200;
        if (text.length > maxCacheableLength)
            return context.measureText(text).width;

        var font = context.font;
        var textWidths = this._textWidth.get(font);
        if (!textWidths) {
            textWidths = new Map();
            this._textWidth.set(font, textWidths);
        }
        var width = textWidths.get(text);
        if (!width) {
            width = context.measureText(text).width;
            textWidths.set(text, width);
        }
        return width;
    },

    _updateBoundaries: function()
    {
        this._totalTime = this._dataProvider.totalTime();
        this._minimumBoundary = this._dataProvider.minimumBoundary();

        var windowWidth = 1;
        if (this._timeWindowRight !== Infinity) {
            this._windowLeft = (this._timeWindowLeft - this._minimumBoundary) / this._totalTime;
            this._windowRight = (this._timeWindowRight - this._minimumBoundary) / this._totalTime;
            windowWidth = this._windowRight - this._windowLeft;
        } else if (this._timeWindowLeft === Infinity) {
            this._windowLeft = Infinity;
            this._windowRight = Infinity;
        } else {
            this._windowLeft = 0;
            this._windowRight = 1;
        }

        var totalPixels = Math.floor((this._offsetWidth - this._paddingLeft) / windowWidth);
        this._pixelWindowLeft = Math.floor(totalPixels * this._windowLeft);

        this._timeToPixel = totalPixels / this._totalTime;
        this._pixelToTime = this._totalTime / totalPixels;

        this._updateScrollBar();
    },

    _updateHeight: function()
    {
        this._totalHeight = this._levelToHeight(this._dataProvider.maxStackDepth());
        this._vScrollContent.style.height = this._totalHeight + "px";
        if (this._scrollTop + this._offsetHeight > this._totalHeight) {
            this._scrollTop = Math.max(0, this._totalHeight - this._offsetHeight);
            this._vScrollElement.scrollTop = this._scrollTop;
        }
    },

    onResize: function()
    {
        this._updateScrollBar();
        this._updateContentElementSize();
        this.scheduleUpdate();
    },

    _updateScrollBar: function()
    {
        var showScroll = this._totalHeight > this._offsetHeight;
        if (this._vScrollElement.classList.contains("hidden") === showScroll) {
            this._vScrollElement.classList.toggle("hidden", !showScroll);
            this._updateContentElementSize();
        }
    },

    _updateContentElementSize: function()
    {
        this._offsetWidth = this.contentElement.offsetWidth;
        this._offsetHeight = this.contentElement.offsetHeight;
    },

    _onScroll: function()
    {
        this._scrollTop = this._vScrollElement.scrollTop;
        this.scheduleUpdate();
    },

    scheduleUpdate: function()
    {
        if (this._updateTimerId || this._cancelWindowTimesAnimation)
            return;
        this._updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
    },

    update: function()
    {
        this._updateTimerId = 0;
        if (!this._timelineData())
            return;
        this._resetCanvas();
        this._updateHeight();
        this._updateBoundaries();
        this._calculator._updateBoundaries(this);
        this._draw(this._offsetWidth, this._offsetHeight);
        if (!this._isDragging)
            this._updateHighlight();
    },

    reset: function()
    {
        this._vScrollElement.scrollTop = 0;
        this._scrollTop = 0;
        this._highlightedMarkerIndex = -1;
        this._highlightedEntryIndex = -1;
        this._selectedEntryIndex = -1;
        this._rangeSelectionStart = 0;
        this._rangeSelectionEnd = 0;
        /** @type {!Map<string,!Map<string,number>>} */
        this._textWidth = new Map();
        this.update();
    },

    _enabled: function()
    {
        return this._rawTimelineDataLength !== 0;
    },

    __proto__: WebInspector.HBox.prototype
}
