| /* |
| * 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. |
| */ |
| |
| /** |
| * @constructor |
| */ |
| WebInspector.TimelineFrameModelBase = function() |
| { |
| this.reset(); |
| } |
| |
| WebInspector.TimelineFrameModelBase.prototype = { |
| /** |
| * @param {boolean} value |
| */ |
| setMergeRecords: function(value) |
| { |
| }, |
| |
| /** |
| * @return {!Array.<!WebInspector.TimelineFrame>} |
| */ |
| frames: function() |
| { |
| return this._frames; |
| }, |
| |
| /** |
| * @param {number} startTime |
| * @param {number} endTime |
| * @return {!Array.<!WebInspector.TimelineFrame>} |
| */ |
| filteredFrames: function(startTime, endTime) |
| { |
| /** |
| * @param {number} value |
| * @param {!WebInspector.TimelineFrame} object |
| * @return {number} |
| */ |
| function compareStartTime(value, object) |
| { |
| return value - object.startTime; |
| } |
| /** |
| * @param {number} value |
| * @param {!WebInspector.TimelineFrame} object |
| * @return {number} |
| */ |
| function compareEndTime(value, object) |
| { |
| return value - object.endTime; |
| } |
| var frames = this._frames; |
| var firstFrame = insertionIndexForObjectInListSortedByFunction(startTime, frames, compareEndTime); |
| var lastFrame = insertionIndexForObjectInListSortedByFunction(endTime, frames, compareStartTime); |
| return frames.slice(firstFrame, lastFrame); |
| }, |
| |
| reset: function() |
| { |
| this._minimumRecordTime = Infinity; |
| this._frames = []; |
| this._lastFrame = null; |
| this._lastLayerTree = null; |
| this._hasThreadedCompositing = false; |
| this._mainFrameCommitted = false; |
| this._mainFrameRequested = false; |
| this._framePendingCommit = null; |
| }, |
| |
| /** |
| * @param {number} startTime |
| */ |
| handleBeginFrame: function(startTime) |
| { |
| if (!this._lastFrame) |
| this._startBackgroundFrame(startTime); |
| }, |
| |
| /** |
| * @param {number} startTime |
| */ |
| handleDrawFrame: function(startTime) |
| { |
| if (!this._lastFrame) { |
| this._startBackgroundFrame(startTime); |
| return; |
| } |
| |
| // - if it wasn't drawn, it didn't happen! |
| // - only show frames that either did not wait for the main thread frame or had one committed. |
| if (this._mainFrameCommitted || !this._mainFrameRequested) |
| this._startBackgroundFrame(startTime); |
| this._mainFrameCommitted = false; |
| }, |
| |
| handleActivateLayerTree: function() |
| { |
| if (!this._lastFrame) |
| return; |
| this._mainFrameRequested = false; |
| this._mainFrameCommitted = true; |
| if (this._framePendingActivation) { |
| this._lastFrame._addTimeForCategories(this._framePendingActivation.timeByCategory); |
| this._lastFrame.paints = this._framePendingActivation.paints; |
| this._framePendingActivation = null; |
| } |
| }, |
| |
| handleRequestMainThreadFrame: function() |
| { |
| if (!this._lastFrame) |
| return; |
| this._mainFrameRequested = true; |
| }, |
| |
| handleCompositeLayers: function() |
| { |
| if (!this._hasThreadedCompositing || !this._framePendingCommit) |
| return; |
| this._framePendingActivation = this._framePendingCommit; |
| this._framePendingCommit = null; |
| }, |
| |
| /** |
| * @param {!WebInspector.DeferredLayerTree} layerTree |
| */ |
| handleLayerTreeSnapshot: function(layerTree) |
| { |
| this._lastLayerTree = layerTree; |
| }, |
| |
| /** |
| * @param {number} startTime |
| */ |
| _startBackgroundFrame: function(startTime) |
| { |
| if (!this._hasThreadedCompositing) { |
| this._lastFrame = null; |
| this._hasThreadedCompositing = true; |
| } |
| if (this._lastFrame) |
| this._flushFrame(this._lastFrame, startTime); |
| |
| this._lastFrame = new WebInspector.TimelineFrame(startTime, startTime - this._minimumRecordTime); |
| }, |
| |
| /** |
| * @param {number} startTime |
| */ |
| _startMainThreadFrame: function(startTime) |
| { |
| if (this._lastFrame) |
| this._flushFrame(this._lastFrame, startTime); |
| this._lastFrame = new WebInspector.TimelineFrame(startTime, startTime - this._minimumRecordTime); |
| }, |
| |
| /** |
| * @param {!WebInspector.TimelineFrame} frame |
| * @param {number} endTime |
| */ |
| _flushFrame: function(frame, endTime) |
| { |
| frame._setLayerTree(this._lastLayerTree); |
| frame._setEndTime(endTime); |
| this._frames.push(frame); |
| }, |
| |
| /** |
| * @param {!Array.<string>} types |
| * @param {!WebInspector.TimelineModel.Record} record |
| * @return {?WebInspector.TimelineModel.Record} record |
| */ |
| _findRecordRecursively: function(types, record) |
| { |
| if (types.indexOf(record.type()) >= 0) |
| return record; |
| if (!record.children()) |
| return null; |
| for (var i = 0; i < record.children().length; ++i) { |
| var result = this._findRecordRecursively(types, record.children()[i]); |
| if (result) |
| return result; |
| } |
| return null; |
| } |
| } |
| |
| /** |
| * @constructor |
| * @extends {WebInspector.TimelineFrameModelBase} |
| */ |
| WebInspector.TimelineFrameModel = function() |
| { |
| WebInspector.TimelineFrameModelBase.call(this); |
| } |
| |
| WebInspector.TimelineFrameModel._mainFrameMarkers = [ |
| WebInspector.TimelineModel.RecordType.ScheduleStyleRecalculation, |
| WebInspector.TimelineModel.RecordType.InvalidateLayout, |
| WebInspector.TimelineModel.RecordType.BeginFrame, |
| WebInspector.TimelineModel.RecordType.ScrollLayer |
| ]; |
| |
| WebInspector.TimelineFrameModel.prototype = { |
| reset: function() |
| { |
| this._mergeRecords = true; |
| this._mergingBuffer = new WebInspector.TimelineMergingRecordBuffer(); |
| WebInspector.TimelineFrameModelBase.prototype.reset.call(this); |
| }, |
| |
| /** |
| * @param {boolean} value |
| */ |
| setMergeRecords: function(value) |
| { |
| this._mergeRecords = value; |
| }, |
| |
| /** |
| * @param {!Array.<!WebInspector.TimelineModel.Record>} records |
| */ |
| addRecords: function(records) |
| { |
| if (!records.length) |
| return; |
| if (records[0].startTime() < this._minimumRecordTime) |
| this._minimumRecordTime = records[0].startTime(); |
| for (var i = 0; i < records.length; ++i) |
| this.addRecord(records[i]); |
| }, |
| |
| /** |
| * @param {!WebInspector.TimelineModel.Record} record |
| */ |
| addRecord: function(record) |
| { |
| var recordTypes = WebInspector.TimelineModel.RecordType; |
| var programRecord = record.type() === recordTypes.Program ? record : null; |
| |
| // Start collecting main frame |
| if (programRecord) { |
| if (!this._framePendingCommit && this._findRecordRecursively(WebInspector.TimelineFrameModel._mainFrameMarkers, programRecord)) |
| this._framePendingCommit = new WebInspector.PendingFrame(); |
| } |
| /** type {Array.<!WebInspector.TimelineModel.Record>} */ |
| var records = []; |
| if (!this._mergeRecords) |
| records = [record]; |
| else |
| records = this._mergingBuffer.process(record.thread(), /** type {Array.<!WebInspector.TimelineModel.Record>} */(programRecord ? record.children() || [] : [record])); |
| for (var i = 0; i < records.length; ++i) { |
| if (records[i].thread() === WebInspector.TimelineModel.MainThreadName) |
| this._addMainThreadRecord(programRecord, records[i]); |
| else |
| this._addBackgroundRecord(records[i]); |
| } |
| }, |
| |
| /** |
| * @param {!WebInspector.TimelineModel.Record} record |
| */ |
| _addBackgroundRecord: function(record) |
| { |
| var recordTypes = WebInspector.TimelineModel.RecordType; |
| if (record.type() === recordTypes.BeginFrame) |
| this.handleBeginFrame(record.startTime()); |
| else if (record.type() === recordTypes.DrawFrame) |
| this.handleDrawFrame(record.startTime()); |
| else if (record.type() === recordTypes.RequestMainThreadFrame) |
| this.handleRequestMainThreadFrame(); |
| else if (record.type() === recordTypes.ActivateLayerTree) |
| this.handleActivateLayerTree(); |
| |
| if (this._lastFrame) |
| this._lastFrame._addTimeFromRecord(record); |
| }, |
| |
| /** |
| * @param {?WebInspector.TimelineModel.Record} programRecord |
| * @param {!WebInspector.TimelineModel.Record} record |
| */ |
| _addMainThreadRecord: function(programRecord, record) |
| { |
| var recordTypes = WebInspector.TimelineModel.RecordType; |
| if (record.type() === recordTypes.UpdateLayerTree && record.data()["layerTree"]) |
| this.handleLayerTreeSnapshot(new WebInspector.DeferredAgentLayerTree(record.target(), record.data()["layerTree"])); |
| if (!this._hasThreadedCompositing) { |
| if (record.type() === recordTypes.BeginFrame) |
| this._startMainThreadFrame(record.startTime()); |
| |
| if (!this._lastFrame) |
| return; |
| |
| this._lastFrame._addTimeFromRecord(record); |
| |
| // Account for "other" time at the same time as the first child. |
| if (programRecord.children()[0] === record) |
| this._lastFrame._addTimeForCategory("other", this._deriveOtherTime(programRecord)); |
| return; |
| } |
| |
| if (!this._framePendingCommit) |
| return; |
| |
| WebInspector.TimelineUIUtilsImpl.aggregateTimeForRecord(this._framePendingCommit.timeByCategory, record); |
| if (programRecord.children()[0] === record) |
| this._framePendingCommit.timeByCategory["other"] = (this._framePendingCommit.timeByCategory["other"] || 0) + this._deriveOtherTime(programRecord); |
| |
| if (record.type() === recordTypes.CompositeLayers) |
| this.handleCompositeLayers(); |
| }, |
| |
| /** |
| * @param {!WebInspector.TimelineModel.Record} programRecord |
| * @return {number} |
| */ |
| _deriveOtherTime: function(programRecord) |
| { |
| var accounted = 0; |
| for (var i = 0; i < programRecord.children().length; ++i) |
| accounted += programRecord.children()[i].endTime() - programRecord.children()[i].startTime(); |
| return programRecord.endTime() - programRecord.startTime() - accounted; |
| }, |
| |
| __proto__: WebInspector.TimelineFrameModelBase.prototype, |
| }; |
| |
| /** |
| * @constructor |
| * @extends {WebInspector.TimelineFrameModelBase} |
| */ |
| WebInspector.TracingTimelineFrameModel = function() |
| { |
| WebInspector.TimelineFrameModelBase.call(this); |
| } |
| |
| WebInspector.TracingTimelineFrameModel._mainFrameMarkers = [ |
| WebInspector.TracingTimelineModel.RecordType.ScheduleStyleRecalculation, |
| WebInspector.TracingTimelineModel.RecordType.InvalidateLayout, |
| WebInspector.TracingTimelineModel.RecordType.BeginMainThreadFrame, |
| WebInspector.TracingTimelineModel.RecordType.ScrollLayer |
| ]; |
| |
| WebInspector.TracingTimelineFrameModel.prototype = { |
| /** |
| * @param {!Array.<!WebInspector.TracingModel.Event>} events |
| * @param {string} sessionId |
| */ |
| addTraceEvents: function(events, sessionId) |
| { |
| this._sessionId = sessionId; |
| if (!events.length) |
| return; |
| if (events[0].startTime < this._minimumRecordTime) |
| this._minimumRecordTime = events[0].startTime; |
| for (var i = 0; i < events.length; ++i) |
| this._addTraceEvent(events[i]); |
| }, |
| |
| /** |
| * @param {!WebInspector.TracingModel.Event} event |
| */ |
| _addTraceEvent: function(event) |
| { |
| var eventNames = WebInspector.TracingTimelineModel.RecordType; |
| |
| if (event.name === eventNames.SetLayerTreeId) { |
| if (this._sessionId === event.args["sessionId"]) |
| this._layerTreeId = event.args["layerTreeId"]; |
| return; |
| } |
| if (event.name === eventNames.TracingStartedInPage) { |
| this._mainThread = event.thread; |
| return; |
| } |
| if (event.thread === this._mainThread) |
| this._addMainThreadTraceEvent(event); |
| else |
| this._addBackgroundTraceEvent(event); |
| }, |
| |
| /** |
| * @param {!WebInspector.TracingModel.Event} event |
| */ |
| _addBackgroundTraceEvent: function(event) |
| { |
| var eventNames = WebInspector.TracingTimelineModel.RecordType; |
| if (event.phase === WebInspector.TracingModel.Phase.SnapshotObject && event.name === eventNames.LayerTreeHostImplSnapshot && parseInt(event.id, 0) === this._layerTreeId) { |
| var snapshot = /** @type {!WebInspector.TracingModel.ObjectSnapshot} */ (event); |
| this.handleLayerTreeSnapshot(new WebInspector.DeferredTracingLayerTree(snapshot)); |
| return; |
| } |
| if (this._lastFrame && event.selfTime) |
| this._lastFrame._addTimeForCategory(WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name, event.selfTime); |
| |
| if (event.args["layerTreeId"] !== this._layerTreeId) |
| return; |
| |
| var timestamp = event.startTime; |
| if (event.name === eventNames.BeginFrame) |
| this.handleBeginFrame(timestamp); |
| else if (event.name === eventNames.DrawFrame) |
| this.handleDrawFrame(timestamp); |
| else if (event.name === eventNames.ActivateLayerTree) |
| this.handleActivateLayerTree(); |
| else if (event.name === eventNames.RequestMainThreadFrame) |
| this.handleRequestMainThreadFrame(); |
| }, |
| |
| /** |
| * @param {!WebInspector.TracingModel.Event} event |
| */ |
| _addMainThreadTraceEvent: function(event) |
| { |
| var eventNames = WebInspector.TracingTimelineModel.RecordType; |
| var timestamp = event.startTime; |
| var selfTime = event.selfTime || 0; |
| |
| if (!this._hasThreadedCompositing) { |
| if (event.name === eventNames.BeginMainThreadFrame) |
| this._startMainThreadFrame(timestamp); |
| if (!this._lastFrame) |
| return; |
| if (!selfTime) |
| return; |
| |
| var categoryName = WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name; |
| this._lastFrame._addTimeForCategory(categoryName, selfTime); |
| return; |
| } |
| |
| if (!this._framePendingCommit && WebInspector.TracingTimelineFrameModel._mainFrameMarkers.indexOf(event.name) >= 0) |
| this._framePendingCommit = new WebInspector.PendingFrame(); |
| if (!this._framePendingCommit) |
| return; |
| if (event.name === eventNames.Paint && event.args["data"]["layerId"] && event.picture) |
| this._framePendingCommit.paints.push(new WebInspector.LayerPaintEvent(event)); |
| |
| if (selfTime) { |
| var categoryName = WebInspector.TracingTimelineUIUtils.eventStyle(event).category.name; |
| this._framePendingCommit.timeByCategory[categoryName] = (this._framePendingCommit.timeByCategory[categoryName] || 0) + selfTime; |
| } |
| if (event.name === eventNames.CompositeLayers && event.args["layerTreeId"] === this._layerTreeId) |
| this.handleCompositeLayers(); |
| }, |
| |
| __proto__: WebInspector.TimelineFrameModelBase.prototype |
| } |
| |
| /** |
| * @constructor |
| * @extends {WebInspector.DeferredLayerTree} |
| * @param {!WebInspector.TracingModel.ObjectSnapshot} snapshot |
| */ |
| WebInspector.DeferredTracingLayerTree = function(snapshot) |
| { |
| WebInspector.DeferredLayerTree.call(this, snapshot.thread.target()); |
| this._snapshot = snapshot; |
| } |
| |
| WebInspector.DeferredTracingLayerTree.prototype = { |
| /** |
| * @param {function(!WebInspector.LayerTreeBase)} callback |
| */ |
| resolve: function(callback) |
| { |
| this._snapshot.requestObject(onGotObject.bind(this)); |
| /** |
| * @this {WebInspector.DeferredTracingLayerTree} |
| * @param {?Object} result |
| */ |
| function onGotObject(result) |
| { |
| if (!result) |
| return; |
| var viewport = result["device_viewport_size"]; |
| var rootLayer = result["active_tree"]["root_layer"]; |
| var layerTree = new WebInspector.TracingLayerTree(this._target); |
| layerTree.setViewportSize(viewport); |
| layerTree.setLayers(rootLayer, callback.bind(null, layerTree)); |
| } |
| }, |
| |
| __proto__: WebInspector.DeferredLayerTree.prototype |
| }; |
| |
| |
| /** |
| * @constructor |
| * @param {!Array.<!WebInspector.TimelineFrame>} frames |
| */ |
| WebInspector.FrameStatistics = function(frames) |
| { |
| this.frameCount = frames.length; |
| this.minDuration = Infinity; |
| this.maxDuration = 0; |
| this.timeByCategory = {}; |
| this.startOffset = frames[0].startTimeOffset; |
| var lastFrame = frames[this.frameCount - 1]; |
| this.endOffset = lastFrame.startTimeOffset + lastFrame.duration; |
| |
| var totalDuration = 0; |
| var sumOfSquares = 0; |
| for (var i = 0; i < this.frameCount; ++i) { |
| var duration = frames[i].duration; |
| totalDuration += duration; |
| sumOfSquares += duration * duration; |
| this.minDuration = Math.min(this.minDuration, duration); |
| this.maxDuration = Math.max(this.maxDuration, duration); |
| WebInspector.FrameStatistics._aggregateTimeByCategory(this.timeByCategory, frames[i].timeByCategory); |
| } |
| this.average = totalDuration / this.frameCount; |
| var variance = sumOfSquares / this.frameCount - this.average * this.average; |
| this.stddev = Math.sqrt(variance); |
| } |
| |
| /** |
| * @param {!Object} total |
| * @param {!Object} addend |
| */ |
| WebInspector.FrameStatistics._aggregateTimeByCategory = function(total, addend) |
| { |
| for (var category in addend) |
| total[category] = (total[category] || 0) + addend[category]; |
| } |
| |
| /** |
| * @constructor |
| * @param {number} startTime |
| * @param {number} startTimeOffset |
| */ |
| WebInspector.TimelineFrame = function(startTime, startTimeOffset) |
| { |
| this.startTime = startTime; |
| this.startTimeOffset = startTimeOffset; |
| this.endTime = this.startTime; |
| this.duration = 0; |
| this.timeByCategory = {}; |
| this.cpuTime = 0; |
| /** @type {?WebInspector.DeferredLayerTree} */ |
| this.layerTree = null; |
| this.paintTiles = null; |
| } |
| |
| WebInspector.TimelineFrame.prototype = { |
| /** |
| * @param {number} endTime |
| */ |
| _setEndTime: function(endTime) |
| { |
| this.endTime = endTime; |
| this.duration = this.endTime - this.startTime; |
| }, |
| |
| /** |
| * @param {?WebInspector.DeferredLayerTree} layerTree |
| */ |
| _setLayerTree: function(layerTree) |
| { |
| this.layerTree = layerTree; |
| }, |
| |
| /** |
| * @param {!WebInspector.TimelineModel.Record} record |
| */ |
| _addTimeFromRecord: function(record) |
| { |
| if (!record.endTime()) |
| return; |
| var timeByCategory = {}; |
| WebInspector.TimelineUIUtilsImpl.aggregateTimeForRecord(timeByCategory, record); |
| this._addTimeForCategories(timeByCategory); |
| }, |
| |
| /** |
| * @param {!Object} timeByCategory |
| */ |
| _addTimeForCategories: function(timeByCategory) |
| { |
| for (var category in timeByCategory) |
| this._addTimeForCategory(category, timeByCategory[category]); |
| }, |
| |
| /** |
| * @param {string} category |
| * @param {number} time |
| */ |
| _addTimeForCategory: function(category, time) |
| { |
| this.timeByCategory[category] = (this.timeByCategory[category] || 0) + time; |
| this.cpuTime += time; |
| }, |
| } |
| |
| /** |
| * @constructor |
| * @param {!WebInspector.TracingModel.Event} event |
| */ |
| WebInspector.LayerPaintEvent = function(event) |
| { |
| this._event = event; |
| } |
| |
| WebInspector.LayerPaintEvent.prototype = { |
| /** |
| * @return {string} |
| */ |
| layerId: function() |
| { |
| return this._event.args["data"]["layerId"]; |
| }, |
| |
| /** |
| * @return {!WebInspector.TracingModel.Event} |
| */ |
| event: function() |
| { |
| return this._event; |
| }, |
| |
| /** |
| * @param {function(?Array.<number>, ?WebInspector.PaintProfilerSnapshot)} callback |
| */ |
| loadPicture: function(callback) |
| { |
| var target = this._event.thread.target(); |
| this._event.picture.requestObject(onGotObject); |
| /** |
| * @param {?Object} result |
| */ |
| function onGotObject(result) |
| { |
| if (!result || !result["skp64"]) { |
| callback(null, null); |
| return; |
| } |
| var rect = result["params"] && result["params"]["layer_rect"]; |
| WebInspector.PaintProfilerSnapshot.load(target, result["skp64"], callback.bind(null, rect)); |
| } |
| } |
| }; |
| |
| /** |
| * @constructor |
| */ |
| WebInspector.PendingFrame = function() |
| { |
| /** @type {!Object.<string, number>} */ |
| this.timeByCategory = {}; |
| /** @type {!Array.<!WebInspector.LayerPaintEvent>} */ |
| this.paints = []; |
| } |
