/*
 * Copyright (C) 2013 Apple Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 * THE POSSIBILITY OF SUCH DAMAGE.
 */

WebInspector.TimelinesContentView = function(representedObject)
{
    WebInspector.ContentView.call(this, representedObject);

    this.element.classList.add(WebInspector.TimelinesContentView.StyleClassName);

    this._timelineOverview = new WebInspector.TimelineOverview(this, [WebInspector.TimelineRecord.Type.Network, WebInspector.TimelineRecord.Type.Layout, WebInspector.TimelineRecord.Type.Script]);
    this.element.appendChild(this._timelineOverview.element);

    function createPathComponent(displayName, className, representedObject)
    {
        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, representedObject);
        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
        return pathComponent;
    }

    var networkPathComponent = createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network);
    var layoutPathComponent = createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout);
    var scriptPathComponent = createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script);

    networkPathComponent.nextSibling = layoutPathComponent;
    layoutPathComponent.previousSibling = networkPathComponent;
    layoutPathComponent.nextSibling = scriptPathComponent;
    scriptPathComponent.previousSibling = layoutPathComponent;

    this._currentRecordType = null;
    this._currentRecordTypeSetting = new WebInspector.Setting("timeline-view-current-record-type", WebInspector.TimelineRecord.Type.Network);
    this._currentDataGrid = null;

    var networkDataGridColumns = {name: {}, domain: {}, type: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, latency: {}, duration: {}, timeline: {}};

    networkDataGridColumns.name.title = WebInspector.UIString("Name");
    networkDataGridColumns.name.width = "15%";

    networkDataGridColumns.domain.title = WebInspector.UIString("Domain");
    networkDataGridColumns.domain.width = "10%";
    networkDataGridColumns.domain.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.type.title = WebInspector.UIString("Type");
    networkDataGridColumns.type.width = "8%";
    networkDataGridColumns.type.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
    networkDataGridColumns.type.scopeBar = this._makeColumnScopeBar("network", WebInspector.Resource.Type);

    networkDataGridColumns.statusCode.title = WebInspector.UIString("Status");
    networkDataGridColumns.statusCode.width = "6%";
    networkDataGridColumns.statusCode.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.cached.title = WebInspector.UIString("Cached");
    networkDataGridColumns.cached.width = "7%";
    networkDataGridColumns.cached.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.size.title = WebInspector.UIString("Size");
    networkDataGridColumns.size.width = "8%";
    networkDataGridColumns.size.aligned = "right";
    networkDataGridColumns.size.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.transferSize.title = WebInspector.UIString("Transferred");
    networkDataGridColumns.transferSize.width = "8%";
    networkDataGridColumns.transferSize.aligned = "right";
    networkDataGridColumns.transferSize.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.latency.title = WebInspector.UIString("Latency");
    networkDataGridColumns.latency.width = "9%";
    networkDataGridColumns.latency.aligned = "right";
    networkDataGridColumns.latency.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.duration.title = WebInspector.UIString("Duration");
    networkDataGridColumns.duration.width = "9%";
    networkDataGridColumns.duration.aligned = "right";
    networkDataGridColumns.duration.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    networkDataGridColumns.timeline.title = WebInspector.UIString("Timeline");
    networkDataGridColumns.timeline.width = "20%";
    networkDataGridColumns.timeline.sort = "ascending";
    networkDataGridColumns.timeline.collapsesGroup = WebInspector.NetworkDataGrid.DetailsColumnGroup;

    var layoutDataGridColumns = {eventType: {}, initiatorCallFrame: {}, width: {}, height: {}, area: {}, startTime: {}, duration: {}};

    layoutDataGridColumns.eventType.title = WebInspector.UIString("Type");
    layoutDataGridColumns.eventType.width = "15%";
    layoutDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("layout", WebInspector.LayoutTimelineRecord.EventType);

    layoutDataGridColumns.initiatorCallFrame.title = WebInspector.UIString("Initiator");
    layoutDataGridColumns.initiatorCallFrame.width = "25%";

    layoutDataGridColumns.width.title = WebInspector.UIString("Width");
    layoutDataGridColumns.width.width = "8%";

    layoutDataGridColumns.height.title = WebInspector.UIString("Height");
    layoutDataGridColumns.height.width = "8%";

    layoutDataGridColumns.area.title = WebInspector.UIString("Area");
    layoutDataGridColumns.area.width = "12%";

    layoutDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
    layoutDataGridColumns.startTime.width = "8%";
    layoutDataGridColumns.startTime.aligned = "right";
    layoutDataGridColumns.startTime.sort = "ascending";

    layoutDataGridColumns.duration.title = WebInspector.UIString("Duration");
    layoutDataGridColumns.duration.width = "8%";
    layoutDataGridColumns.duration.aligned = "right";

    var scriptDataGridColumns = {eventType: {}, details: {}, resource: {}, startTime: {}, duration: {}};

    scriptDataGridColumns.eventType.title = WebInspector.UIString("Type");
    scriptDataGridColumns.eventType.width = "15%";
    scriptDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("script", WebInspector.ScriptTimelineRecord.EventType);

    scriptDataGridColumns.details.title = WebInspector.UIString("Details");
    scriptDataGridColumns.details.width = "15%";

    scriptDataGridColumns.resource.title = WebInspector.UIString("Location");
    scriptDataGridColumns.resource.width = "15%";

    scriptDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
    scriptDataGridColumns.startTime.width = "10%";
    scriptDataGridColumns.startTime.aligned = "right";
    scriptDataGridColumns.startTime.sort = "ascending";

    scriptDataGridColumns.duration.title = WebInspector.UIString("Duration");
    scriptDataGridColumns.duration.width = "10%";
    scriptDataGridColumns.duration.aligned = "right";

    for (var column in networkDataGridColumns)
        networkDataGridColumns[column].sortable = true;

    for (var column in layoutDataGridColumns)
        layoutDataGridColumns[column].sortable = true;

    for (var column in scriptDataGridColumns)
        scriptDataGridColumns[column].sortable = true;

    var networkDataGrid = new WebInspector.NetworkDataGrid(networkDataGridColumns);
    var layoutDataGrid = new WebInspector.LayoutTimelineDataGrid(layoutDataGridColumns);
    var scriptDataGrid = new WebInspector.ScriptTimelineDataGrid(scriptDataGridColumns);

    networkDataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedNodeChanged, this);

    this._pathComponentMap = {};
    this._pathComponentMap[WebInspector.TimelineRecord.Type.Network] = networkPathComponent;
    this._pathComponentMap[WebInspector.TimelineRecord.Type.Layout] = layoutPathComponent;
    this._pathComponentMap[WebInspector.TimelineRecord.Type.Script] = scriptPathComponent;

    this._dataGridMap = {};
    this._dataGridMap[WebInspector.TimelineRecord.Type.Network] = networkDataGrid;
    this._dataGridMap[WebInspector.TimelineRecord.Type.Layout] = layoutDataGrid;
    this._dataGridMap[WebInspector.TimelineRecord.Type.Script] = scriptDataGrid;

    for (var type in this._dataGridMap) {
        var dataGrid = this._dataGridMap[type];
        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortCurrentDataGrid, this);
        dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
        dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
    }

    this._pendingRecords = {};

    for (var typeName in WebInspector.TimelineRecord.Type) {
        var type = WebInspector.TimelineRecord.Type[typeName];
        this._pendingRecords[type] = WebInspector.timelineManager.recordsWithType(type);
    }

    this._pendingRefreshGridNodes = {};
    this._pendingEventMarkers = {};

    WebInspector.ResourceTimelineDataGridNode.addEventListener(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh, this._scheduleGridNodeForRefresh, this);
    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordsCleared, this._recordsCleared, this);
    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordAdded, this._recordAdded, this);
    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordedEventMarker, this._recordedEventMarker, this);

    WebInspector.TimelinesContentView.generateEmbossedCollapseImages();
};

WebInspector.TimelinesContentView.StyleClassName = "timelines";
WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName = "offscreen";
WebInspector.TimelinesContentView.UpdateInterval = 500; // 0.5 seconds

WebInspector.TimelinesContentView.CollapseButton = {};
WebInspector.TimelinesContentView.CollapseButton.More = "more";
WebInspector.TimelinesContentView.CollapseButton.Less = "less";

WebInspector.TimelinesContentView.CollapseButton.States = {};
WebInspector.TimelinesContentView.CollapseButton.States.Normal = "normal";
WebInspector.TimelinesContentView.CollapseButton.States.Active = "active";

WebInspector.TimelinesContentView.generateEmbossedCollapseImages = function()
{
    if (WebInspector.TimelinesContentView._generatedImages)
        return;
    WebInspector.TimelinesContentView._generatedImages = true;

    generateEmbossedImages("Images/MoreColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.More));
    generateEmbossedImages("Images/LessColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.Less));

    function canvasIdentifier(type, state) {
        return "timeline-datagrid-collapse-button-" + type + "-" + state;
    }
}

WebInspector.TimelinesContentView.prototype = {
    constructor: WebInspector.TimelinesContentView,

    // Public

    get allowedNavigationSidebarPanels()
    {
        return ["instrument"];
    },

    showTimelineForRecordType: function(type)
    {
        if (this._currentRecordType === type)
            return;

        this._currentRecordType = type;
        this._currentRecordTypeSetting.value = type;

        if (this._currentDataGrid) {
            // Save scroll positon before removing from the document.
            if (this._currentDataGrid.isScrolledToLastRow()) {
                this._currentDataGrid._savedIsScrolledToLastRow = true;
                delete this._currentDataGrid._savedScrollTop;
            } else {
                this._currentDataGrid._savedScrollTop = this._currentDataGrid.scrollContainer.scrollTop;
                delete this._currentDataGrid._savedIsScrolledToLastRow;
            }

            this.element.removeChild(this._currentDataGrid.element);
            this._currentDataGrid.hidden();
        }

        this._currentDataGrid = this._dataGridMap[type];
        console.assert(this._currentDataGrid);

        this.element.appendChild(this._currentDataGrid.element);
        this._currentDataGrid.updateLayout();
        this._currentDataGrid.shown();

        // Restore scroll positon now that we are back in the document.
        if (this._currentDataGrid._savedIsScrolledToLastRow)
            this._currentDataGrid.scrollToLastRow()
        else if (this._currentDataGrid._savedScrollTop)
            this._currentDataGrid.scrollContainer.scrollTop = this._currentDataGrid._savedScrollTop;

        this._updatePendingRecords();

        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
        WebInspector.instrumentSidebarPanel.showTimelineForRecordType(type);
    },

    get supportsSplitContentBrowser()
    {
        // The layout of the overview and split content browser don't work well.
        return false;
    },

    get selectionPathComponents()
    {
        var pathComponents = [this._pathComponentMap[this._currentRecordType]] || [];

        if (this._currentDataGrid) {
            var selectedNode = this._currentDataGrid.selectedNode;
            if (selectedNode instanceof WebInspector.ResourceTimelineDataGridNode) {
                var pathComponent = new WebInspector.ResourceTimelineDataGridNodePathComponent(selectedNode);
                pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._dataGridNodePathComponentSelected, this);
                pathComponents.push(pathComponent);
            }
        }

        return pathComponents;
    },

    updateLayout: function()
    {
        if (this._currentDataGrid)
            this._currentDataGrid.updateLayout();
        this._timelineOverview.updateLayout();
        this._updateOffscreenRows();
    },

    get scrollableElements()
    {
        if (!this._currentDataGrid)
            return null;
        return [this._currentDataGrid.scrollContainer];
    },

    get shouldKeepElementsScrolledToBottom()
    {
        return true;
    },

    shown: function()
    {
        if (this._currentRecordType) {
            this._updatePendingRecords();
            return;
        }

        if (this._currentDataGrid)
            this._currentDataGrid.shown();

        this.showTimelineForRecordType(this._currentRecordTypeSetting.value);
    },

    hidden: function()
    {
        if (this._currentDataGrid)
            this._currentDataGrid.hidden();
    },

    timelineOverviewRecordsWithType: function(type)
    {
        return this._filterRecordsWithType(WebInspector.timelineManager.recordsWithType(type), type);
    },

    // Private

    _pathComponentSelected: function(event)
    {
        this.showTimelineForRecordType(event.data.pathComponent.representedObject);
    },

    _dataGridNodePathComponentSelected: function(event)
    {
        console.assert(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent);
        if (!(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent))
            return;

        event.data.pathComponent.resourceTimelineDataGridNode.revealAndSelect();
        event.data.pathComponent.resourceTimelineDataGridNode.dataGrid.element.focus();
    },

    _selectedNodeChanged: function(event)
    {
        if (this._ignoreSelectionEvent)
            return;

        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    },

    _recordsCleared: function(event)
    {
        this._pendingRecords = {};
        this._pendingRefreshGridNodes = {};
        this._pendingEventMarkers = {};

        for (var type in this._dataGridMap) {
            var dataGrid = this._dataGridMap[type];
            delete dataGrid._savedIsScrolledToLastRow;
            delete dataGrid._savedScrollTop;
            dataGrid.removeChildren();
            dataGrid.reset();
        }

        this._timelineOverview.clear();
    },

    _recordAdded: function(event)
    {
        this._addRecordToDataGrid(event.data.record);
    },

    _recordedEventMarker: function(event)
    {
        var eventMarker = event.data.eventMarker;
        this._timelineOverview.addTimelineEventMarker(eventMarker);

        for (var type in this._dataGridMap) {
            if (!this._pendingEventMarkers[type])
                this._pendingEventMarkers[type] = [];
            this._pendingEventMarkers[type].push(eventMarker);

            this._dataGridMap[type].addTimelineEventMarker(eventMarker);
        }

        this._updatePendingRecordsSoon();
    },

    _addRecordToDataGrid: function(record)
    {
        if (!this._pendingRecords[record.type])
            this._pendingRecords[record.type] = [];
        this._pendingRecords[record.type].push(record);

        this._updatePendingRecordsSoon();
    },

    _updatePendingRecordsSoon: function()
    {
        if (!this.visible || this._updatePendingRecordsTimeout)
            return;

        this._updatePendingRecordsTimeout = setTimeout(this._updatePendingRecords.bind(this), WebInspector.TimelinesContentView.UpdateInterval);
    },

    _updatePendingRecords: function()
    {
        if (this._updatePendingRecordsTimeout) {
            clearTimeout(this._updatePendingRecordsTimeout);
            delete this._updatePendingRecordsTimeout;
        }

        this._timelineOverview.update();

        console.assert(this._dataGridMap[this._currentRecordType] === this._currentDataGrid);
        if (this._dataGridMap[this._currentRecordType] !== this._currentDataGrid)
            return;

        var isScrolledToLastRow = this._currentDataGrid.isScrolledToLastRow();

        // If the data grid has a timeline calculator, pass through all the pending records first
        // to update the timeline bounds. If the bounds change we need to refresh all nodes
        // in the data grid, otherwise we can just proceed and update the pending records.
        var wasBoundsChange = this._updateCalculatorBoundsForPendingRecordsAndEventMarkers();
        this._updatePendingRecordsWithNewBounds(wasBoundsChange);

        this._updateOffscreenRows();

        this._currentDataGrid.update();
        if (isScrolledToLastRow)
            this._currentDataGrid.scrollToLastRow();
    },
    
    _updateCalculatorBoundsForPendingRecordsAndEventMarkers: function()
    {
        var currentDataGrid = this._currentDataGrid;
        if (!currentDataGrid.currentCalculator)
            return false;

        var wasBoundsChange = false;

        var pendingRecords = this._pendingRecords[this._currentRecordType];
        if (pendingRecords) {
            for (var i = 0; i < pendingRecords.length; ++i) {
                if (currentDataGrid.updateCalculatorBoundariesWithRecord(pendingRecords[i]))
                    wasBoundsChange = true;
            }
        }

        var pendingRefreshGridNodes = this._pendingRefreshGridNodes[this._currentRecordType];
        if (pendingRefreshGridNodes) {
            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
                if (currentDataGrid.updateCalculatorBoundariesWithDataGridNode(pendingRefreshGridNodes[i]))
                    wasBoundsChange = true;
            }
        }

        var pendingEventMarkers = this._pendingEventMarkers[this._currentRecordType];
        if (pendingEventMarkers) {
            delete this._pendingEventMarkers[this._currentRecordType];

            for (var i = 0; i < pendingEventMarkers.length; ++i) {
                if (currentDataGrid.updateCalculatorBoundariesWithEventMarker(pendingEventMarkers[i]))
                    wasBoundsChange = true;
            }
        }

        return wasBoundsChange;
    },

    _updatePendingRecordsWithNewBounds: function(refreshAllNodes)
    {
        var sortComparator = this._sortComparator.bind(this);

        var pendingRecords = this._pendingRecords[this._currentRecordType];
        if (pendingRecords) {
            delete this._pendingRecords[this._currentRecordType];
            pendingRecords = this._filterRecordsWithType(pendingRecords, this._currentRecordType);

            for (var i = 0; i < pendingRecords.length; ++i) {
                var dataGridNode = this._createDataGridNodeForRecord(pendingRecords[i]);
                if (this._currentDataGrid.sortColumnIdentifier) {
                    var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
                    this._currentDataGrid.insertChild(dataGridNode, insertionIndex);
                } else
                    this._currentDataGrid.appendChild(dataGridNode);
            }
        }

        var pendingRefreshGridNodes = refreshAllNodes ? this._currentDataGrid.children.slice() : this._pendingRefreshGridNodes[this._currentRecordType];
        if (pendingRefreshGridNodes) {
            delete this._pendingRefreshGridNodes[this._currentRecordType];

            var selectedNode = this._currentDataGrid.selectedNode;

            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
                var dataGridNode = pendingRefreshGridNodes[i];
                delete dataGridNode._pendingRefresh;
                dataGridNode.refresh();

                if (!this._currentDataGrid.sortColumnIdentifier)
                    continue;

                if (dataGridNode === selectedNode)
                    this._ignoreSelectionEvent = true;

                // Remove the data grid node so we can find the right sorted location to reinsert it. We need to
                // remove it first so insertionIndexForObjectInListSortedByFunction does not return the current index.
                this._currentDataGrid.removeChild(dataGridNode);

                var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
                this._currentDataGrid.insertChild(dataGridNode, insertionIndex);

                if (dataGridNode === selectedNode) {
                    selectedNode.revealAndSelect();
                    delete this._ignoreSelectionEvent;
                }
            }
        }
    },

    _updateOffscreenRows: function()
    {
        var dataTableBody = this._currentDataGrid.dataTableBody;
        var rows = dataTableBody.children;
        var recordsCount = rows.length;
        if (recordsCount < 2)
            return;  // Filler row only.

        const overflowPadding = 100;
        var visibleTop = this._currentDataGrid.scrollContainer.scrollTop - overflowPadding;
        var visibleBottom = visibleTop + this._currentDataGrid.scrollContainer.offsetHeight + overflowPadding;

        var rowHeight = 0;

        // Filler is at recordsCount - 1.
        for (var i = 0; i < recordsCount - 1; ++i) {
            var row = rows[i];
            if (!rowHeight)
                rowHeight = row.offsetHeight;

            var rowIsVisible = (i * rowHeight) < visibleBottom && ((i + 1) * rowHeight) > visibleTop;
            if (rowIsVisible !== row.rowIsVisible) {
                if (rowIsVisible)
                    row.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
                else
                    row.classList.add(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
                row.rowIsVisible = rowIsVisible;
            }
        }
    },

    _sortCurrentDataGrid: function()
    {
        console.assert(this._currentDataGrid);
        if (!this._currentDataGrid)
            return;

        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
        if (!sortColumnIdentifier)
            return;

        var selectedNode = this._currentDataGrid.selectedNode;
        this._ignoreSelectionEvent = true;

        var nodes = this._currentDataGrid.children.slice();
        nodes.sort(this._sortComparator.bind(this));

        this._currentDataGrid.removeChildren();
        for (var i = 0; i < nodes.length; ++i)
            this._currentDataGrid.appendChild(nodes[i]);

        if (selectedNode)
            selectedNode.revealAndSelect();

        delete this._ignoreSelectionEvent;

        this._updateOffscreenRows();
    },

    _sortComparator: function(node1, node2)
    {
        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
        if (!sortColumnIdentifier)
            return 0;

        var sortDirection = this._currentDataGrid.sortOrder === "ascending" ? 1 : -1;

        var value1 = node1.data[sortColumnIdentifier];
        var value2 = node2.data[sortColumnIdentifier];

        if (typeof value1 === "number" && typeof value2 === "number") {
            if (isNaN(value1) && isNaN(value2))
                return 0;
            if (isNaN(value1))
                return sortDirection * -1;
            if (isNaN(value2))
                return sortDirection * 1;
            return (value1 - value2) * sortDirection;
        }

        if (typeof value1 === "string" && typeof value2 === "string")
            return value1.localeCompare(value2) * sortDirection;

        if (value1 instanceof WebInspector.CallFrame || value2 instanceof WebInspector.CallFrame) {
            // Sort by function name if available, then fall back to the source code object.
            value1 = value1 && value1.functionName ? value1.functionName : (value1 && value1.sourceCodeLocation ? value1.sourceCodeLocation.sourceCode : "");
            value2 = value2 && value2.functionName ? value2.functionName : (value2 && value2.sourceCodeLocation ? value2.sourceCodeLocation.sourceCode : "");
        }

        if (value1 instanceof WebInspector.SourceCode || value2 instanceof WebInspector.SourceCode) {
            value1 = value1 ? value1.displayName || "" : "";
            value2 = value2 ? value2.displayName || "" : "";
        }

        // For everything else (mostly booleans).
        return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
    },

    _createDataGridNodeForRecord: function(record)
    {
        var baseStartTime = WebInspector.timelineManager.records[0].startTime;

        switch (record.type) {
        case WebInspector.TimelineRecord.Type.Network:
            return new WebInspector.ResourceTimelineDataGridNode(record);
        case WebInspector.TimelineRecord.Type.Layout:
            return new WebInspector.LayoutTimelineDataGridNode(record, baseStartTime);
        case WebInspector.TimelineRecord.Type.Script:
            return new WebInspector.ScriptTimelineDataGridNode(record, baseStartTime);
        }

        console.error("Unknown record type: " + record.type);
        return null;
    },

    _scheduleGridNodeForRefresh: function(event)
    {
        var gridNode = event.target;
        var record = gridNode.record;

        if (gridNode._pendingRefresh)
            return;
        gridNode._pendingRefresh = true;

        if (!this._pendingRefreshGridNodes[record.type])
            this._pendingRefreshGridNodes[record.type] = [];
        this._pendingRefreshGridNodes[record.type].push(gridNode);

        this._updatePendingRecordsSoon();
    },

    _makeColumnScopeBar: function(prefix, dictionary)
    {
        prefix = "timeline-" + prefix + "-data-grid-";

        var keys = Object.keys(dictionary).filter(function(key) {
            return typeof dictionary[key] === "string" || dictionary[key] instanceof String;
        });

        var scopeBarItems = keys.map(function(key) {
            var value = dictionary[key];
            var id = prefix + value;
            var label = dictionary.displayName(value, true);
            var item = new WebInspector.ScopeBarItem(id, label);
            item.value = value;
            return item;
        });

        scopeBarItems.unshift(new WebInspector.ScopeBarItem(prefix + "type-all", WebInspector.UIString("All"), true));
        
        return new WebInspector.ScopeBar(prefix + "scope-bar", scopeBarItems, scopeBarItems[0]);
    },

    _dataGridFiltersDidChange: function(event)
    {
        var dataGrid = event.target;
        if (this._currentDataGrid === dataGrid)
            this._refreshAllRecordsForCurrentDataGrid();

        this._timelineOverview.update();
    },

    _refreshAllRecordsForCurrentDataGrid: function()
    {
        var dataGrid = this._currentDataGrid;
        var recordType = this._currentRecordType;
        var records = this.timelineOverviewRecordsWithType(recordType);

        var nodes = records.map(function(record) {
            return this._createDataGridNodeForRecord(record);
        }, this);
        
        dataGrid.removeChildren();
        nodes.sort(this._sortComparator.bind(this)).forEach(function(node) {
            dataGrid.appendChild(node);
        });

        delete this._pendingRefreshGridNodes[recordType];
        
        this._updateOffscreenRows();
    },

    _filterRecordsWithType: function(records, type)
    {
        var dataGrid = this._dataGridMap[type];
        var identifiers = dataGrid.filterableColumns;

        function filterableValueForRecordAndIdentifier(record, identifier)
        {
            switch (type) {
            case WebInspector.TimelineRecord.Type.Network:
                return record.resource[identifier];
            case WebInspector.TimelineRecord.Type.Layout:
                return record[identifier];
            case WebInspector.TimelineRecord.Type.Script:
                return record[identifier];
            }
        }

        return records.filter(function(record) {
            for (var i = 0; i < identifiers.length; i++) {
                var identifier = identifiers[i];
                var scopeBar = dataGrid.columns[identifier].scopeBar;
                if (!scopeBar || scopeBar.defaultItem.selected)
                    continue;
                var value = filterableValueForRecordAndIdentifier(record, identifier);
                var matchesFilter = scopeBar.selectedItems.some(function(scopeBarItem) {
                    return (scopeBarItem.value === value);
                });
                if (!matchesFilter)
                    return false;
            }
            return true;
        });
    }
};

WebInspector.TimelinesContentView.prototype.__proto__ = WebInspector.ContentView.prototype;