strong-arc
Version:
A visual suite for the StrongLoop API Platform
1,307 lines (1,150 loc) • 48.9 kB
JavaScript
/*
* Copyright (C) 2013 Google Inc. All rights reserved.
* Copyright (C) 2012 Intel 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
* @extends {WebInspector.HBox}
* @implements {WebInspector.TimelineModeView}
* @param {!WebInspector.TimelineModeViewDelegate} delegate
* @param {!WebInspector.TimelineModel} model
* @param {!WebInspector.TimelineUIUtils} uiUtils
*/
WebInspector.TimelineView = function(delegate, model, uiUtils)
{
WebInspector.HBox.call(this);
this.element.classList.add("timeline-view");
this._delegate = delegate;
this._model = model;
this._uiUtils = uiUtils;
this._presentationModel = new WebInspector.TimelinePresentationModel(model, uiUtils);
this._calculator = new WebInspector.TimelineCalculator(model);
this._linkifier = new WebInspector.Linkifier();
this._frameStripByFrame = new Map();
this._boundariesAreValid = true;
this._scrollTop = 0;
this._recordsView = this._createRecordsView();
this._recordsView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
this._recordsView.show(this.element);
this._headerElement = this.element.createChild("div", "fill");
this._headerElement.id = "timeline-graph-records-header";
// Create gpu tasks containers.
this._cpuBarsElement = this._headerElement.createChild("div", "timeline-utilization-strip");
if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
this._gpuBarsElement = this._headerElement.createChild("div", "timeline-utilization-strip gpu");
this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
this.element.addEventListener("mousemove", this._mouseMove.bind(this), false);
this.element.addEventListener("mouseout", this._mouseOut.bind(this), false);
this.element.addEventListener("keydown", this._keyDown.bind(this), false);
this._expandOffset = 15;
}
WebInspector.TimelineView.prototype = {
/**
* @param {?WebInspector.TimelineFrameModelBase} frameModel
*/
setFrameModel: function(frameModel)
{
this._frameModel = frameModel;
},
/**
* @return {!WebInspector.SplitView}
*/
_createRecordsView: function()
{
var recordsView = new WebInspector.SplitView(true, false, "timelinePanelRecorsSplitViewState");
this._containerElement = recordsView.element;
this._containerElement.tabIndex = 0;
this._containerElement.id = "timeline-container";
this._containerElement.addEventListener("scroll", this._onScroll.bind(this), false);
// Create records list in the records sidebar.
recordsView.sidebarElement().createChild("div", "timeline-records-title").textContent = WebInspector.UIString("RECORDS");
this._sidebarListElement = recordsView.sidebarElement().createChild("div", "timeline-records-list");
// Create grid in the records main area.
this._gridContainer = new WebInspector.VBoxWithResizeCallback(this._onViewportResize.bind(this));
this._gridContainer.element.id = "resources-container-content";
this._gridContainer.show(recordsView.mainElement());
this._timelineGrid = new WebInspector.TimelineGrid();
this._gridContainer.element.appendChild(this._timelineGrid.element);
this._itemsGraphsElement = this._gridContainer.element.createChild("div");
this._itemsGraphsElement.id = "timeline-graphs";
// Create gap elements
this._topGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
this._graphRowsElement = this._itemsGraphsElement.createChild("div");
this._bottomGapElement = this._itemsGraphsElement.createChild("div", "timeline-gap");
this._expandElements = this._itemsGraphsElement.createChild("div");
this._expandElements.id = "orphan-expand-elements";
return recordsView;
},
_rootRecord: function()
{
return this._presentationModel.rootRecord();
},
_updateEventDividers: function()
{
this._timelineGrid.removeEventDividers();
var clientWidth = this._graphRowsElementWidth;
var dividers = [];
var eventDividerRecords = this._model.eventDividerRecords();
for (var i = 0; i < eventDividerRecords.length; ++i) {
var record = eventDividerRecords[i];
var position = this._calculator.computePosition(record.startTime());
var dividerPosition = Math.round(position);
if (dividerPosition < 0 || dividerPosition >= clientWidth || dividers[dividerPosition])
continue;
var title = this._uiUtils.titleForRecord(record);
var divider = this._uiUtils.createEventDivider(record.type(), title);
divider.style.left = dividerPosition + "px";
dividers[dividerPosition] = divider;
}
this._timelineGrid.addEventDividers(dividers);
},
_updateFrameBars: function(frames)
{
var clientWidth = this._graphRowsElementWidth;
if (this._frameContainer) {
this._frameContainer.removeChildren();
} else {
const frameContainerBorderWidth = 1;
this._frameContainer = document.createElementWithClass("div", "fill timeline-frame-container");
this._frameContainer.style.height = WebInspector.TimelinePanel.rowHeight + frameContainerBorderWidth + "px";
this._frameContainer.addEventListener("dblclick", this._onFrameDoubleClicked.bind(this), false);
this._frameContainer.addEventListener("click", this._onFrameClicked.bind(this), false);
}
this._frameStripByFrame.clear();
var dividers = [];
for (var i = 0; i < frames.length; ++i) {
var frame = frames[i];
var frameStart = this._calculator.computePosition(frame.startTime);
var frameEnd = this._calculator.computePosition(frame.endTime);
var frameStrip = document.createElementWithClass("div", "timeline-frame-strip");
var actualStart = Math.max(frameStart, 0);
var width = frameEnd - actualStart;
frameStrip.style.left = actualStart + "px";
frameStrip.style.width = width + "px";
frameStrip._frame = frame;
this._frameStripByFrame.set(frame, frameStrip);
const minWidthForFrameInfo = 60;
if (width > minWidthForFrameInfo)
frameStrip.textContent = Number.millisToString(frame.endTime - frame.startTime, true);
this._frameContainer.appendChild(frameStrip);
if (actualStart > 0) {
var frameMarker = this._uiUtils.createBeginFrameDivider();
frameMarker.style.left = frameStart + "px";
dividers.push(frameMarker);
}
}
this._timelineGrid.addEventDividers(dividers);
this._headerElement.appendChild(this._frameContainer);
},
_onFrameDoubleClicked: function(event)
{
var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
if (!frameBar)
return;
this._delegate.requestWindowTimes(frameBar._frame.startTime, frameBar._frame.endTime);
},
_onFrameClicked: function(event)
{
var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
if (!frameBar)
return;
this._delegate.select(WebInspector.TimelineSelection.fromFrame(frameBar._frame));
},
/**
* @param {!WebInspector.TimelineModel.Record} record
*/
addRecord: function(record)
{
this._presentationModel.addRecord(record);
this._invalidateAndScheduleRefresh(false, false);
},
/**
* @param {number} width
*/
setSidebarSize: function(width)
{
this._recordsView.setSidebarSize(width);
},
/**
* @param {!WebInspector.Event} event
*/
_sidebarResized: function(event)
{
this.dispatchEventToListeners(WebInspector.SplitView.Events.SidebarSizeChanged, event.data);
},
_onViewportResize: function()
{
this._resize(this._recordsView.sidebarSize());
},
/**
* @param {number} sidebarWidth
*/
_resize: function(sidebarWidth)
{
this._closeRecordDetails();
this._graphRowsElementWidth = this._graphRowsElement.offsetWidth;
this._headerElement.style.left = sidebarWidth + "px";
this._headerElement.style.width = this._itemsGraphsElement.offsetWidth + "px";
this._scheduleRefresh(false, true);
},
_resetView: function()
{
this._windowStartTime = 0;
this._windowEndTime = 0;
this._boundariesAreValid = false;
this._adjustScrollPosition(0);
this._linkifier.reset();
this._closeRecordDetails();
this._automaticallySizeWindow = true;
this._presentationModel.reset();
},
/**
* @return {!WebInspector.View}
*/
view: function()
{
return this;
},
dispose: function()
{
},
reset: function()
{
this._resetView();
this._invalidateAndScheduleRefresh(true, true);
},
/**
* @return {!Array.<!Element>}
*/
elementsToRestoreScrollPositionsFor: function()
{
return [this._containerElement];
},
/**
* @param {?RegExp} textFilter
*/
refreshRecords: function(textFilter)
{
this._automaticallySizeWindow = false;
this._presentationModel.setTextFilter(textFilter);
this._invalidateAndScheduleRefresh(false, true);
},
willHide: function()
{
this._closeRecordDetails();
WebInspector.View.prototype.willHide.call(this);
},
wasShown: function()
{
this._presentationModel.refreshRecords();
WebInspector.HBox.prototype.wasShown.call(this);
},
_onScroll: function(event)
{
this._closeRecordDetails();
this._scrollTop = this._containerElement.scrollTop;
var dividersTop = Math.max(0, this._scrollTop);
this._timelineGrid.setScrollAndDividerTop(this._scrollTop, dividersTop);
this._scheduleRefresh(true, true);
},
/**
* @param {boolean} preserveBoundaries
* @param {boolean} userGesture
*/
_invalidateAndScheduleRefresh: function(preserveBoundaries, userGesture)
{
this._presentationModel.invalidateFilteredRecords();
this._scheduleRefresh(preserveBoundaries, userGesture);
},
_clearSelection: function()
{
this._delegate.select(null);
},
/**
* @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
*/
_selectRecord: function(presentationRecord)
{
if (presentationRecord.coalesced()) {
// Presentation record does not have model record to highlight.
this._innerSetSelectedRecord(presentationRecord);
var aggregatedStats = {};
var presentationChildren = presentationRecord.presentationChildren();
for (var i = 0; i < presentationChildren.length; ++i)
this._uiUtils.aggregateTimeForRecord(aggregatedStats, presentationChildren[i].record());
var idle = presentationRecord.endTime() - presentationRecord.startTime();
for (var category in aggregatedStats)
idle -= aggregatedStats[category];
aggregatedStats["idle"] = idle;
var pieChart = WebInspector.TimelineUIUtils.generatePieChart(aggregatedStats);
var title = this._uiUtils.titleForRecord(presentationRecord.record());
this._delegate.showInDetails(title, pieChart);
return;
}
this._delegate.select(WebInspector.TimelineSelection.fromRecord(presentationRecord.record()));
},
/**
* @param {?WebInspector.TimelineSelection} selection
*/
setSelection: function(selection)
{
if (!selection) {
this._innerSetSelectedRecord(null);
this._setSelectedFrame(null);
return;
}
if (selection.type() === WebInspector.TimelineSelection.Type.Record) {
var record = /** @type {!WebInspector.TimelineModel.Record} */ (selection.object());
this._innerSetSelectedRecord(this._presentationModel.toPresentationRecord(record));
this._setSelectedFrame(null);
} else if (selection.type() === WebInspector.TimelineSelection.Type.Frame) {
var frame = /** @type {!WebInspector.TimelineFrame} */ (selection.object());
this._innerSetSelectedRecord(null);
this._setSelectedFrame(frame);
}
},
/**
* @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
*/
_innerSetSelectedRecord: function(presentationRecord)
{
if (presentationRecord === this._lastSelectedRecord)
return;
// Remove selection rendering.p
if (this._lastSelectedRecord) {
if (this._lastSelectedRecord.listRow())
this._lastSelectedRecord.listRow().renderAsSelected(false);
if (this._lastSelectedRecord.graphRow())
this._lastSelectedRecord.graphRow().renderAsSelected(false);
}
this._lastSelectedRecord = presentationRecord;
if (!presentationRecord)
return;
this._innerRevealRecord(presentationRecord);
if (presentationRecord.listRow())
presentationRecord.listRow().renderAsSelected(true);
if (presentationRecord.graphRow())
presentationRecord.graphRow().renderAsSelected(true);
},
/**
* @param {?WebInspector.TimelineFrame} frame
*/
_setSelectedFrame: function(frame)
{
if (this._lastSelectedFrame === frame)
return;
var oldStripElement = this._lastSelectedFrame && this._frameStripByFrame.get(this._lastSelectedFrame);
if (oldStripElement)
oldStripElement.classList.remove("selected");
var newStripElement = frame && this._frameStripByFrame.get(frame);
if (newStripElement)
newStripElement.classList.add("selected");
this._lastSelectedFrame = frame;
},
/**
* @param {number} startTime
* @param {number} endTime
*/
setWindowTimes: function(startTime, endTime)
{
this._windowStartTime = startTime;
this._windowEndTime = endTime;
this._presentationModel.setWindowTimes(startTime, endTime);
this._automaticallySizeWindow = false;
this._invalidateAndScheduleRefresh(false, true);
this._clearSelection();
},
/**
* @param {boolean} preserveBoundaries
* @param {boolean} userGesture
*/
_scheduleRefresh: function(preserveBoundaries, userGesture)
{
this._closeRecordDetails();
this._boundariesAreValid &= preserveBoundaries;
if (!this.isShowing())
return;
if (preserveBoundaries || userGesture)
this._refresh();
else {
if (!this._refreshTimeout)
this._refreshTimeout = setTimeout(this._refresh.bind(this), 300);
}
},
_refresh: function()
{
if (this._refreshTimeout) {
clearTimeout(this._refreshTimeout);
delete this._refreshTimeout;
}
var windowStartTime = this._windowStartTime || this._model.minimumRecordTime();
var windowEndTime = this._windowEndTime || this._model.maximumRecordTime();
this._timelinePaddingLeft = this._expandOffset;
this._calculator.setWindow(windowStartTime, windowEndTime);
this._calculator.setDisplayWindow(this._timelinePaddingLeft, this._graphRowsElementWidth);
this._refreshRecords();
if (!this._boundariesAreValid) {
this._updateEventDividers();
if (this._frameContainer)
this._frameContainer.remove();
if (this._frameModel) {
var frames = this._frameModel.filteredFrames(windowStartTime, windowEndTime);
const maxFramesForFrameBars = 30;
if (frames.length && frames.length < maxFramesForFrameBars) {
this._timelineGrid.removeDividers();
this._updateFrameBars(frames);
} else {
this._timelineGrid.updateDividers(this._calculator);
}
} else
this._timelineGrid.updateDividers(this._calculator);
this._refreshAllUtilizationBars();
}
this._boundariesAreValid = true;
},
/**
* @param {!WebInspector.TimelinePresentationModel.Record} recordToReveal
*/
_innerRevealRecord: function(recordToReveal)
{
var needRefresh = false;
// Expand all ancestors.
for (var parent = recordToReveal.presentationParent(); parent !== this._rootRecord(); parent = parent.presentationParent()) {
if (!parent.collapsed())
continue;
this._presentationModel.invalidateFilteredRecords();
parent.setCollapsed(false);
needRefresh = true;
}
var recordsInWindow = this._presentationModel.filteredRecords();
var index = recordsInWindow.indexOf(recordToReveal);
var itemOffset = index * WebInspector.TimelinePanel.rowHeight;
var visibleTop = this._scrollTop - WebInspector.TimelinePanel.headerHeight;
var visibleBottom = visibleTop + this._containerElementHeight - WebInspector.TimelinePanel.rowHeight;
if (itemOffset < visibleTop)
this._containerElement.scrollTop = itemOffset;
else if (itemOffset > visibleBottom)
this._containerElement.scrollTop = itemOffset - this._containerElementHeight + WebInspector.TimelinePanel.headerHeight + WebInspector.TimelinePanel.rowHeight;
else if (needRefresh)
this._refreshRecords();
},
_refreshRecords: function()
{
this._containerElementHeight = this._containerElement.clientHeight;
var recordsInWindow = this._presentationModel.filteredRecords();
// Calculate the visible area.
var visibleTop = this._scrollTop;
var visibleBottom = visibleTop + this._containerElementHeight;
var rowHeight = WebInspector.TimelinePanel.rowHeight;
var headerHeight = WebInspector.TimelinePanel.headerHeight;
// Convert visible area to visible indexes. Always include top-level record for a visible nested record.
var startIndex = Math.max(0, Math.min(Math.floor((visibleTop - headerHeight) / rowHeight), recordsInWindow.length - 1));
var endIndex = Math.min(recordsInWindow.length, Math.ceil(visibleBottom / rowHeight));
var lastVisibleLine = Math.max(0, Math.floor((visibleBottom - headerHeight) / rowHeight));
if (this._automaticallySizeWindow && recordsInWindow.length > lastVisibleLine) {
this._automaticallySizeWindow = false;
this._clearSelection();
// If we're at the top, always use real timeline start as a left window bound so that expansion arrow padding logic works.
var windowStartTime = startIndex ? recordsInWindow[startIndex].startTime() : this._model.minimumRecordTime();
var windowEndTime = recordsInWindow[Math.max(0, lastVisibleLine - 1)].endTime();
this._delegate.requestWindowTimes(windowStartTime, windowEndTime);
recordsInWindow = this._presentationModel.filteredRecords();
endIndex = Math.min(recordsInWindow.length, lastVisibleLine);
}
// Resize gaps first.
this._topGapElement.style.height = (startIndex * rowHeight) + "px";
this._recordsView.sidebarElement().firstElementChild.style.flexBasis = (startIndex * rowHeight + headerHeight) + "px";
this._bottomGapElement.style.height = (recordsInWindow.length - endIndex) * rowHeight + "px";
var rowsHeight = headerHeight + recordsInWindow.length * rowHeight;
var totalHeight = Math.max(this._containerElementHeight, rowsHeight);
this._recordsView.mainElement().style.height = totalHeight + "px";
this._recordsView.sidebarElement().style.height = totalHeight + "px";
this._recordsView.resizerElement().style.height = totalHeight + "px";
// Update visible rows.
var listRowElement = this._sidebarListElement.firstChild;
var width = this._graphRowsElementWidth;
this._itemsGraphsElement.removeChild(this._graphRowsElement);
var graphRowElement = this._graphRowsElement.firstChild;
var scheduleRefreshCallback = this._invalidateAndScheduleRefresh.bind(this, true, true);
var selectRecordCallback = this._selectRecord.bind(this);
this._itemsGraphsElement.removeChild(this._expandElements);
this._expandElements.removeChildren();
for (var i = 0; i < endIndex; ++i) {
var record = recordsInWindow[i];
if (i < startIndex) {
var lastChildIndex = i + record.visibleChildrenCount();
if (lastChildIndex >= startIndex && lastChildIndex < endIndex) {
var expandElement = new WebInspector.TimelineExpandableElement(this._expandElements);
var positions = this._calculator.computeBarGraphWindowPosition(record);
expandElement._update(record, i, positions.left - this._expandOffset, positions.width);
}
} else {
if (!listRowElement) {
listRowElement = new WebInspector.TimelineRecordListRow(this._linkifier, selectRecordCallback, scheduleRefreshCallback).element;
this._sidebarListElement.appendChild(listRowElement);
}
if (!graphRowElement) {
graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, selectRecordCallback, scheduleRefreshCallback).element;
this._graphRowsElement.appendChild(graphRowElement);
}
listRowElement.row.update(record, visibleTop, this._uiUtils);
graphRowElement.row.update(record, this._calculator, this._expandOffset, i, this._uiUtils);
if (this._lastSelectedRecord === record) {
listRowElement.row.renderAsSelected(true);
graphRowElement.row.renderAsSelected(true);
}
listRowElement = listRowElement.nextSibling;
graphRowElement = graphRowElement.nextSibling;
}
}
// Remove extra rows.
while (listRowElement) {
var nextElement = listRowElement.nextSibling;
listRowElement.row.dispose();
listRowElement = nextElement;
}
while (graphRowElement) {
var nextElement = graphRowElement.nextSibling;
graphRowElement.row.dispose();
graphRowElement = nextElement;
}
this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);
this._itemsGraphsElement.appendChild(this._expandElements);
this._adjustScrollPosition(recordsInWindow.length * rowHeight + headerHeight);
return recordsInWindow.length;
},
_refreshAllUtilizationBars: function()
{
this._refreshUtilizationBars(WebInspector.UIString("CPU"), this._model.mainThreadTasks(), this._cpuBarsElement);
if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
this._refreshUtilizationBars(WebInspector.UIString("GPU"), this._model.gpuThreadTasks(), this._gpuBarsElement);
},
/**
* @param {string} name
* @param {!Array.<!WebInspector.TimelineModel.Record>} tasks
* @param {?Element} container
*/
_refreshUtilizationBars: function(name, tasks, container)
{
if (!container)
return;
const barOffset = 3;
const minGap = 3;
var minWidth = WebInspector.TimelineCalculator._minWidth;
var widthAdjustment = minWidth / 2;
var width = this._graphRowsElementWidth;
var boundarySpan = this._windowEndTime - this._windowStartTime;
var scale = boundarySpan / (width - minWidth - this._timelinePaddingLeft);
var startTime = (this._windowStartTime - this._timelinePaddingLeft * scale);
var endTime = startTime + width * scale;
/**
* @param {number} value
* @param {!WebInspector.TimelineModel.Record} task
* @return {number}
*/
function compareEndTime(value, task)
{
return value < task.endTime() ? -1 : 1;
}
var taskIndex = insertionIndexForObjectInListSortedByFunction(startTime, tasks, compareEndTime);
var foreignStyle = "gpu-task-foreign";
var element = /** @type {?Element} */ (container.firstChild);
var lastElement;
var lastLeft;
var lastRight;
for (; taskIndex < tasks.length; ++taskIndex) {
var task = tasks[taskIndex];
if (task.startTime() > endTime)
break;
var left = Math.max(0, this._calculator.computePosition(task.startTime()) + barOffset - widthAdjustment);
var right = Math.min(width, this._calculator.computePosition(task.endTime() || 0) + barOffset + widthAdjustment);
if (lastElement) {
var gap = Math.floor(left) - Math.ceil(lastRight);
if (gap < minGap) {
if (!task.data["foreign"])
lastElement.classList.remove(foreignStyle);
lastRight = right;
lastElement._tasksInfo.lastTaskIndex = taskIndex;
continue;
}
lastElement.style.width = (lastRight - lastLeft) + "px";
}
if (!element)
element = container.createChild("div", "timeline-graph-bar");
element.style.left = left + "px";
element._tasksInfo = {name: name, tasks: tasks, firstTaskIndex: taskIndex, lastTaskIndex: taskIndex};
if (task.data["foreign"])
element.classList.add(foreignStyle);
lastLeft = left;
lastRight = right;
lastElement = element;
element = /** @type {?Element} */ (element.nextSibling);
}
if (lastElement)
lastElement.style.width = (lastRight - lastLeft) + "px";
while (element) {
var nextElement = element.nextSibling;
element._tasksInfo = null;
container.removeChild(element);
element = nextElement;
}
},
_adjustScrollPosition: function(totalHeight)
{
// Prevent the container from being scrolled off the end.
if ((this._scrollTop + this._containerElementHeight) > totalHeight + 1)
this._containerElement.scrollTop = (totalHeight - this._containerElement.offsetHeight);
},
/**
* @param {!Element} element
* @param {!Event} event
* @return {!Element|!AnchorBox|undefined}
*/
_getPopoverAnchor: function(element, event)
{
var anchor = element.enclosingNodeOrSelfWithClass("timeline-graph-bar");
if (anchor && anchor._tasksInfo)
return anchor;
},
_mouseOut: function()
{
this._hideQuadHighlight();
},
/**
* @param {!Event} e
*/
_mouseMove: function(e)
{
var rowElement = e.target.enclosingNodeOrSelfWithClass("timeline-tree-item");
if (!this._highlightQuad(rowElement))
this._hideQuadHighlight();
var taskBarElement = e.target.enclosingNodeOrSelfWithClass("timeline-graph-bar");
if (taskBarElement && taskBarElement._tasksInfo) {
var offset = taskBarElement.offsetLeft;
this._timelineGrid.showCurtains(offset >= 0 ? offset : 0, taskBarElement.offsetWidth);
} else
this._timelineGrid.hideCurtains();
},
/**
* @param {!Event} event
*/
_keyDown: function(event)
{
if (!this._lastSelectedRecord || event.shiftKey || event.metaKey || event.ctrlKey)
return;
var record = this._lastSelectedRecord;
var recordsInWindow = this._presentationModel.filteredRecords();
var index = recordsInWindow.indexOf(record);
var recordsInPage = Math.floor(this._containerElementHeight / WebInspector.TimelinePanel.rowHeight);
var rowHeight = WebInspector.TimelinePanel.rowHeight;
if (index === -1)
index = 0;
switch (event.keyIdentifier) {
case "Left":
if (record.presentationParent()) {
if ((!record.expandable() || record.collapsed()) && record.presentationParent() !== this._presentationModel.rootRecord()) {
this._selectRecord(record.presentationParent());
} else {
record.setCollapsed(true);
this._invalidateAndScheduleRefresh(true, true);
}
}
event.consume(true);
break;
case "Up":
if (--index < 0)
break;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
case "Right":
if (record.expandable() && record.collapsed()) {
record.setCollapsed(false);
this._invalidateAndScheduleRefresh(true, true);
} else {
if (++index >= recordsInWindow.length)
break;
this._selectRecord(recordsInWindow[index]);
}
event.consume(true);
break;
case "Down":
if (++index >= recordsInWindow.length)
break;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
case "PageUp":
index = Math.max(0, index - recordsInPage);
this._scrollTop = Math.max(0, this._scrollTop - recordsInPage * rowHeight);
this._containerElement.scrollTop = this._scrollTop;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
case "PageDown":
index = Math.min(recordsInWindow.length - 1, index + recordsInPage);
this._scrollTop = Math.min(this._containerElement.scrollHeight - this._containerElementHeight, this._scrollTop + recordsInPage * rowHeight);
this._containerElement.scrollTop = this._scrollTop;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
case "Home":
index = 0;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
case "End":
index = recordsInWindow.length - 1;
this._selectRecord(recordsInWindow[index]);
event.consume(true);
break;
}
},
/**
* @param {?Element} rowElement
* @return {boolean}
*/
_highlightQuad: function(rowElement)
{
if (!rowElement || !rowElement.row)
return false;
var presentationRecord = rowElement.row._record;
if (presentationRecord.coalesced())
return false;
var record = presentationRecord.record();
if (this._highlightedQuadRecord === record)
return true;
var quad = this._uiUtils.highlightQuadForRecord(record);
var target = record.target();
if (!quad || !target)
return false;
this._highlightedQuadRecord = record;
target.domAgent().highlightQuad(quad, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA());
return true;
},
_hideQuadHighlight: function()
{
var target = this._highlightedQuadRecord ? this._highlightedQuadRecord.target() : null;
if (target)
target.domAgent().hideHighlight();
if (this._highlightedQuadRecord)
delete this._highlightedQuadRecord;
},
/**
* @param {!Element} anchor
* @param {!WebInspector.Popover} popover
*/
_showPopover: function(anchor, popover)
{
if (!anchor._tasksInfo)
return;
popover.show(WebInspector.TimelineUIUtils.generateMainThreadBarPopupContent(this._model, anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
},
_closeRecordDetails: function()
{
this._popoverHelper.hidePopover();
},
/**
* @param {?WebInspector.TimelineModel.Record} record
* @param {string=} regex
* @param {boolean=} selectRecord
*/
highlightSearchResult: function(record, regex, selectRecord)
{
if (this._highlightDomChanges)
WebInspector.revertDomChanges(this._highlightDomChanges);
this._highlightDomChanges = [];
var presentationRecord = this._presentationModel.toPresentationRecord(record);
if (!presentationRecord)
return;
if (selectRecord)
this._selectRecord(presentationRecord);
for (var element = this._sidebarListElement.firstChild; element; element = element.nextSibling) {
if (element.row._record === presentationRecord) {
element.row.highlight(regex, this._highlightDomChanges);
break;
}
}
},
__proto__: WebInspector.HBox.prototype
}
/**
* @constructor
* @param {!WebInspector.TimelineModel} model
* @implements {WebInspector.TimelineGrid.Calculator}
*/
WebInspector.TimelineCalculator = function(model)
{
this._model = model;
}
WebInspector.TimelineCalculator._minWidth = 5;
WebInspector.TimelineCalculator.prototype = {
/**
* @return {number}
*/
paddingLeft: function()
{
return this._paddingLeft;
},
/**
* @param {number} time
* @return {number}
*/
computePosition: function(time)
{
return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea + this._paddingLeft;
},
/**
* @param {!WebInspector.TimelinePresentationModel.Record} record
* @return {!{start: number, end: number, cpuWidth: number}}
*/
computeBarGraphPercentages: function(record)
{
var start = (record.startTime() - this._minimumBoundary) / this.boundarySpan() * 100;
var end = (record.startTime() + record.selfTime() - this._minimumBoundary) / this.boundarySpan() * 100;
var cpuWidth = (record.endTime() - record.startTime()) / this.boundarySpan() * 100;
return {start: start, end: end, cpuWidth: cpuWidth};
},
/**
* @param {!WebInspector.TimelinePresentationModel.Record} record
* @return {!{left: number, width: number, cpuWidth: number}}
*/
computeBarGraphWindowPosition: function(record)
{
var percentages = this.computeBarGraphPercentages(record);
var widthAdjustment = 0;
var left = this.computePosition(record.startTime());
var width = (percentages.end - percentages.start) / 100 * this._workingArea;
if (width < WebInspector.TimelineCalculator._minWidth) {
widthAdjustment = WebInspector.TimelineCalculator._minWidth - width;
width = WebInspector.TimelineCalculator._minWidth;
}
var cpuWidth = percentages.cpuWidth / 100 * this._workingArea + widthAdjustment;
return {left: left, width: width, cpuWidth: cpuWidth};
},
setWindow: function(minimumBoundary, maximumBoundary)
{
this._minimumBoundary = minimumBoundary;
this._maximumBoundary = maximumBoundary;
},
/**
* @param {number} paddingLeft
* @param {number} clientWidth
*/
setDisplayWindow: function(paddingLeft, clientWidth)
{
this._workingArea = clientWidth - WebInspector.TimelineCalculator._minWidth - paddingLeft;
this._paddingLeft = paddingLeft;
},
/**
* @param {number} value
* @param {number=} precision
* @return {string}
*/
formatTime: function(value, precision)
{
return Number.preciseMillisToString(value - this.zeroTime(), precision);
},
/**
* @return {number}
*/
maximumBoundary: function()
{
return this._maximumBoundary;
},
/**
* @return {number}
*/
minimumBoundary: function()
{
return this._minimumBoundary;
},
/**
* @return {number}
*/
zeroTime: function()
{
return this._model.minimumRecordTime();
},
/**
* @return {number}
*/
boundarySpan: function()
{
return this._maximumBoundary - this._minimumBoundary;
}
}
/**
* @constructor
* @param {!WebInspector.Linkifier} linkifier
* @param {function(!WebInspector.TimelinePresentationModel.Record)} selectRecord
* @param {function()} scheduleRefresh
*/
WebInspector.TimelineRecordListRow = function(linkifier, selectRecord, scheduleRefresh)
{
this.element = document.createElement("div");
this.element.row = this;
this.element.style.cursor = "pointer";
this.element.addEventListener("click", this._onClick.bind(this), false);
this.element.addEventListener("mouseover", this._onMouseOver.bind(this), false);
this.element.addEventListener("mouseout", this._onMouseOut.bind(this), false);
this._linkifier = linkifier;
// Warning is float right block, it goes first.
this._warningElement = this.element.createChild("div", "timeline-tree-item-warning hidden");
this._expandArrowElement = this.element.createChild("div", "timeline-tree-item-expand-arrow");
this._expandArrowElement.addEventListener("click", this._onExpandClick.bind(this), false);
var iconElement = this.element.createChild("span", "timeline-tree-icon");
this._typeElement = this.element.createChild("span", "type");
this._dataElement = this.element.createChild("span", "data dimmed");
this._scheduleRefresh = scheduleRefresh;
this._selectRecord = selectRecord;
}
WebInspector.TimelineRecordListRow.prototype = {
/**
* @param {!WebInspector.TimelinePresentationModel.Record} presentationRecord
* @param {number} offset
* @param {!WebInspector.TimelineUIUtils} uiUtils
*/
update: function(presentationRecord, offset, uiUtils)
{
this._record = presentationRecord;
var record = presentationRecord.record();
this._offset = offset;
this.element.className = "timeline-tree-item timeline-category-" + uiUtils.categoryForRecord(record).name;
var paddingLeft = 5;
var step = -3;
for (var currentRecord = presentationRecord.presentationParent() ? presentationRecord.presentationParent().presentationParent() : null; currentRecord; currentRecord = currentRecord.presentationParent())
paddingLeft += 12 / (Math.max(1, step++));
this.element.style.paddingLeft = paddingLeft + "px";
if (record.thread() !== WebInspector.TimelineModel.MainThreadName)
this.element.classList.add("background");
this._typeElement.textContent = uiUtils.titleForRecord(record);
if (this._dataElement.firstChild)
this._dataElement.removeChildren();
this._warningElement.classList.toggle("hidden", !presentationRecord.hasWarnings() && !presentationRecord.childHasWarnings());
this._warningElement.classList.toggle("timeline-tree-item-child-warning", presentationRecord.childHasWarnings() && !presentationRecord.hasWarnings());
if (presentationRecord.coalesced()) {
this._dataElement.createTextChild(WebInspector.UIString("× %d", presentationRecord.presentationChildren().length));
} else {
var detailsNode = uiUtils.buildDetailsNode(record, this._linkifier);
if (detailsNode) {
this._dataElement.createTextChild("(");
this._dataElement.appendChild(detailsNode);
this._dataElement.createTextChild(")");
}
}
this._expandArrowElement.classList.toggle("parent", presentationRecord.expandable());
this._expandArrowElement.classList.toggle("expanded", !!presentationRecord.visibleChildrenCount());
this._record.setListRow(this);
},
highlight: function(regExp, domChanges)
{
var matchInfo = this.element.textContent.match(regExp);
if (matchInfo)
WebInspector.highlightSearchResult(this.element, matchInfo.index, matchInfo[0].length, domChanges);
},
dispose: function()
{
this.element.remove();
},
/**
* @param {!Event} event
*/
_onExpandClick: function(event)
{
this._record.setCollapsed(!this._record.collapsed());
this._scheduleRefresh();
event.consume(true);
},
/**
* @param {!Event} event
*/
_onClick: function(event)
{
this._selectRecord(this._record);
},
/**
* @param {boolean} selected
*/
renderAsSelected: function(selected)
{
this.element.classList.toggle("selected", selected);
},
/**
* @param {!Event} event
*/
_onMouseOver: function(event)
{
this.element.classList.add("hovered");
if (this._record.graphRow())
this._record.graphRow().element.classList.add("hovered");
},
/**
* @param {!Event} event
*/
_onMouseOut: function(event)
{
this.element.classList.remove("hovered");
if (this._record.graphRow())
this._record.graphRow().element.classList.remove("hovered");
}
}
/**
* @constructor
* @param {!Element} graphContainer
* @param {function(!WebInspector.TimelinePresentationModel.Record)} selectRecord
* @param {function()} scheduleRefresh
*/
WebInspector.TimelineRecordGraphRow = function(graphContainer, selectRecord, scheduleRefresh)
{
this.element = document.createElement("div");
this.element.row = this;
this.element.addEventListener("mouseover", this._onMouseOver.bind(this), false);
this.element.addEventListener("mouseout", this._onMouseOut.bind(this), false);
this.element.addEventListener("click", this._onClick.bind(this), false);
this._barAreaElement = this.element.createChild("div", "timeline-graph-bar-area");
this._barCpuElement = this._barAreaElement.createChild("div", "timeline-graph-bar cpu");
this._barCpuElement.row = this;
this._barElement = this._barAreaElement.createChild("div", "timeline-graph-bar");
this._barElement.row = this;
this._expandElement = new WebInspector.TimelineExpandableElement(graphContainer);
this._selectRecord = selectRecord;
this._scheduleRefresh = scheduleRefresh;
}
WebInspector.TimelineRecordGraphRow.prototype = {
/**
* @param {!WebInspector.TimelinePresentationModel.Record} presentationRecord
* @param {!WebInspector.TimelineCalculator} calculator
* @param {number} expandOffset
* @param {number} index
* @param {!WebInspector.TimelineUIUtils} uiUtils
*/
update: function(presentationRecord, calculator, expandOffset, index, uiUtils)
{
this._record = presentationRecord;
var record = presentationRecord.record();
this.element.className = "timeline-graph-side timeline-category-" + uiUtils.categoryForRecord(record).name;
if (record.thread() !== WebInspector.TimelineModel.MainThreadName)
this.element.classList.add("background");
var barPosition = calculator.computeBarGraphWindowPosition(presentationRecord);
this._barElement.style.left = barPosition.left + "px";
this._barElement.style.width = barPosition.width + "px";
this._barCpuElement.style.left = barPosition.left + "px";
this._barCpuElement.style.width = barPosition.cpuWidth + "px";
this._expandElement._update(presentationRecord, index, barPosition.left - expandOffset, barPosition.width);
this._record.setGraphRow(this);
},
/**
* @param {!Event} event
*/
_onClick: function(event)
{
// check if we click arrow and expand if yes.
if (this._expandElement._arrow.containsEventPoint(event))
this._expand();
this._selectRecord(this._record);
},
/**
* @param {boolean} selected
*/
renderAsSelected: function(selected)
{
this.element.classList.toggle("selected", selected);
},
_expand: function()
{
this._record.setCollapsed(!this._record.collapsed());
this._scheduleRefresh();
},
/**
* @param {!Event} event
*/
_onMouseOver: function(event)
{
this.element.classList.add("hovered");
if (this._record.listRow())
this._record.listRow().element.classList.add("hovered");
},
/**
* @param {!Event} event
*/
_onMouseOut: function(event)
{
this.element.classList.remove("hovered");
if (this._record.listRow())
this._record.listRow().element.classList.remove("hovered");
},
dispose: function()
{
this.element.remove();
this._expandElement._dispose();
}
}
/**
* @constructor
*/
WebInspector.TimelineExpandableElement = function(container)
{
this._element = container.createChild("div", "timeline-expandable");
this._element.createChild("div", "timeline-expandable-left");
this._arrow = this._element.createChild("div", "timeline-expandable-arrow");
}
WebInspector.TimelineExpandableElement.prototype = {
/**
* @param {!WebInspector.TimelinePresentationModel.Record} record
* @param {number} index
* @param {number} left
* @param {number} width
*/
_update: function(record, index, left, width)
{
const rowHeight = WebInspector.TimelinePanel.rowHeight;
if (record.visibleChildrenCount() || record.expandable()) {
this._element.style.top = index * rowHeight + "px";
this._element.style.left = left + "px";
this._element.style.width = Math.max(12, width + 25) + "px";
if (!record.collapsed()) {
this._element.style.height = (record.visibleChildrenCount() + 1) * rowHeight + "px";
this._element.classList.add("timeline-expandable-expanded");
this._element.classList.remove("timeline-expandable-collapsed");
} else {
this._element.style.height = rowHeight + "px";
this._element.classList.add("timeline-expandable-collapsed");
this._element.classList.remove("timeline-expandable-expanded");
}
this._element.classList.remove("hidden");
} else {
this._element.classList.add("hidden");
}
},
_dispose: function()
{
this._element.remove();
}
}