- Revision
- 113314
- Author
- [email protected]
- Date
- 2012-04-05 05:19:01 -0700 (Thu, 05 Apr 2012)
Log Message
Web Inspector: display frame duration instead of time ruler in Timeline panel's frame mode
https://bugs.webkit.org/show_bug.cgi?id=83184
Reviewed by Pavel Feldman.
* inspector/front-end/TimelineFrameController.js:
(WebInspector.TimelineFrameController): Maintain reference to TimelinePresentationModel
(WebInspector.TimelineFrameController.prototype._flushFrame): Report frames to TimelinePresentationModel (only real ones)
* inspector/front-end/TimelineGrid.js:
(WebInspector.TimelineGrid.prototype.removeDividers): remove time marks/labels from upper time ruler
* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewPane.prototype._updateEventDividers): Updated call site of createEventDivider
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype._updateEventDividers):
(WebInspector.TimelinePanel.prototype._shouldShowFrames):
(WebInspector.TimelinePanel.prototype._updateFrames): Frame bars rendering logic.
(WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline.addTimestampRecords): Do not keep frames in the panel any more.
(WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
(WebInspector.TimelinePanel.prototype._refresh): Moved updateDividers() call here...
(WebInspector.TimelinePanel.prototype._refreshRecords): ... from here.
* inspector/front-end/TimelinePresentationModel.js:
(WebInspector.TimelinePresentationModel.createEventDivider): Use type & title, not entire record.
(WebInspector.TimelinePresentationModel.prototype.frames): Maintain frames in the TimelinePresentationModel.
(WebInspector.TimelinePresentationModel.prototype.reset): ditto.
(WebInspector.TimelinePresentationModel.prototype.addFrame): ditto.
(WebInspector.TimelinePresentationModel.Record): Fix title for timestamp events (drive by).
* inspector/front-end/timelinePanel.css:
(.timeline-frame-strip):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (113313 => 113314)
--- trunk/Source/WebCore/ChangeLog 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/ChangeLog 2012-04-05 12:19:01 UTC (rev 113314)
@@ -1,3 +1,34 @@
+2012-04-04 Andrey Kosyakov <[email protected]>
+
+ Web Inspector: display frame duration instead of time ruler in Timeline panel's frame mode
+ https://bugs.webkit.org/show_bug.cgi?id=83184
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/front-end/TimelineFrameController.js:
+ (WebInspector.TimelineFrameController): Maintain reference to TimelinePresentationModel
+ (WebInspector.TimelineFrameController.prototype._flushFrame): Report frames to TimelinePresentationModel (only real ones)
+ * inspector/front-end/TimelineGrid.js:
+ (WebInspector.TimelineGrid.prototype.removeDividers): remove time marks/labels from upper time ruler
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane.prototype._updateEventDividers): Updated call site of createEventDivider
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype._updateEventDividers):
+ (WebInspector.TimelinePanel.prototype._shouldShowFrames):
+ (WebInspector.TimelinePanel.prototype._updateFrames): Frame bars rendering logic.
+ (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline.addTimestampRecords): Do not keep frames in the panel any more.
+ (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
+ (WebInspector.TimelinePanel.prototype._refresh): Moved updateDividers() call here...
+ (WebInspector.TimelinePanel.prototype._refreshRecords): ... from here.
+ * inspector/front-end/TimelinePresentationModel.js:
+ (WebInspector.TimelinePresentationModel.createEventDivider): Use type & title, not entire record.
+ (WebInspector.TimelinePresentationModel.prototype.frames): Maintain frames in the TimelinePresentationModel.
+ (WebInspector.TimelinePresentationModel.prototype.reset): ditto.
+ (WebInspector.TimelinePresentationModel.prototype.addFrame): ditto.
+ (WebInspector.TimelinePresentationModel.Record): Fix title for timestamp events (drive by).
+ * inspector/front-end/timelinePanel.css:
+ (.timeline-frame-strip):
+
2012-04-05 MORITA Hajime <[email protected]>
IsCommentNode flags is a waste.
Modified: trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js 2012-04-05 12:19:01 UTC (rev 113314)
@@ -32,12 +32,14 @@
* @constructor
* @param {WebInspector.TimelineModel} model
* @param {WebInspector.TimelineOverviewPane} overviewPane
+ * @param {WebInspector.TimelinePresentationModel} presentationModel
*/
-WebInspector.TimelineFrameController = function(model, overviewPane)
+WebInspector.TimelineFrameController = function(model, overviewPane, presentationModel)
{
this._lastFrame = null;
this._model = model;
this._overviewPane = overviewPane;
+ this._presentationModel = presentationModel;
this._model.addEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onRecordAdded, this);
this._model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._onRecordsCleared, this);
@@ -77,6 +79,7 @@
if (this._lastFrame) {
this._lastFrame.endTime = frameBeginTime;
this._overviewPane.addFrame(this._lastFrame);
+ this._presentationModel.addFrame(this._lastFrame);
}
this._lastFrame = new WebInspector.TimelineFrame();
this._lastFrame.startTime = frameBeginTime;
Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-05 12:19:01 UTC (rev 113314)
@@ -63,6 +63,12 @@
return this._dividersElement;
},
+ removeDividers: function()
+ {
+ this._dividersElement.removeChildren();
+ this._dividersLabelBarElement.removeChildren();
+ },
+
updateDividers: function(calculator)
{
var dividersElementClientWidth = this._dividersElement.clientWidth;
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-05 12:19:01 UTC (rev 113314)
@@ -270,7 +270,7 @@
var dividerPosition = Math.round(positions.start * 10);
if (dividers[dividerPosition])
continue;
- var divider = WebInspector.TimelinePresentationModel.createEventDivider(record);
+ var divider = WebInspector.TimelinePresentationModel.createEventDivider(record.type);
divider.style.left = positions.start + "%";
dividers[dividerPosition] = divider;
}
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-05 12:19:01 UTC (rev 113314)
@@ -331,25 +331,59 @@
this._timelineGrid.removeEventDividers();
var clientWidth = this._graphRowsElement.offsetWidth;
var dividers = [];
- // Only show frames if we're zoomed close enough -- otherwise they'd be to dense to be useful and will overpopulate DOM.
- var showFrames = this.calculator.boundarySpan < 1.0 && this._verticalOverview;
for (var i = 0; i < this._timeStampRecords.length; ++i) {
var record = this._timeStampRecords[i];
- if (record.type === WebInspector.TimelineModel.RecordType.BeginFrame && !showFrames)
- continue;
var positions = this._calculator.computeBarGraphWindowPosition(record);
var dividerPosition = Math.round(positions.left);
if (dividerPosition < 0 || dividerPosition >= clientWidth || dividers[dividerPosition])
continue;
- var divider = WebInspector.TimelinePresentationModel.createEventDivider(record);
- divider.title = record.title;
+ var divider = WebInspector.TimelinePresentationModel.createEventDivider(record.type, record.title);
divider.style.left = dividerPosition + "px";
dividers[dividerPosition] = divider;
}
this._timelineGrid.addEventDividers(dividers);
},
+ _shouldShowFrames: function()
+ {
+ return this._verticalOverview && this._presentationModel.frames().length > 0 && this.calculator.boundarySpan < 1.0;
+ },
+
+ _updateFrames: function()
+ {
+ var frames = this._presentationModel.frames();
+ var clientWidth = this._graphRowsElement.offsetWidth;
+ 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);
+ if (frameEnd <= 0 || frameStart >= clientWidth)
+ continue;
+
+ var frameStrip = document.createElement("div");
+ frameStrip.className = "timeline-frame-strip";
+ var actualStart = Math.max(frameStart, 0);
+ var width = frameEnd - actualStart;
+ frameStrip.style.left = actualStart + "px";
+ frameStrip.style.width = width + "px";
+ const minWidthForFrameInfo = 60;
+ if (width > minWidthForFrameInfo)
+ frameStrip.textContent = Number.secondsToString(frame.endTime - frame.startTime, true);
+
+ dividers.push(frameStrip);
+
+ if (actualStart > 0) {
+ var frameMarker = WebInspector.TimelinePresentationModel.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
+ frameMarker.style.left = frameStart + "px";
+ dividers.push(frameMarker);
+ }
+ }
+ this._timelineGrid.addEventDividers(dividers);
+ },
+
_timelinesOverviewModeChanged: function(event)
{
var shouldShowMemory = event.data ="" WebInspector.TimelineOverviewPane.Mode.Memory;
@@ -357,16 +391,17 @@
if (verticalOverview !== this._verticalOverview) {
this._verticalOverview = verticalOverview;
this._glueParentButton.disabled = verticalOverview;
+ this._presentationModel.setGlueRecords(this._glueParentButton.toggled && !verticalOverview);
+ this._repopulateRecords();
+
if (verticalOverview) {
this.element.addStyleClass("timeline-vertical-overview");
- this._frameController = new WebInspector.TimelineFrameController(this._model, this._overviewPane);
+ this._frameController = new WebInspector.TimelineFrameController(this._model, this._overviewPane, this._presentationModel);
} else {
this._frameController.dispose();
this._frameController = null;
this.element.removeStyleClass("timeline-vertical-overview");
}
- this._presentationModel.setGlueRecords(this._glueParentButton.toggled && !verticalOverview);
- this._repopulateRecords();
}
if (shouldShowMemory === this._memoryStatistics.visible())
return;
@@ -442,7 +477,7 @@
var timeStampRecords = this._timeStampRecords;
function addTimestampRecords(record)
{
- if (WebInspector.TimelinePresentationModel.isEventDivider(record) || record.type === recordTypes.BeginFrame)
+ if (WebInspector.TimelinePresentationModel.isEventDivider(record))
timeStampRecords.push(record);
}
WebInspector.TimelinePresentationModel.forAllRecords([ formattedRecord ], addTimestampRecords);
@@ -543,8 +578,15 @@
var recordsInWindowCount = this._refreshRecords(!this._boundariesAreValid);
this._updateRecordsCounter(recordsInWindowCount);
- if(!this._boundariesAreValid)
+ if(!this._boundariesAreValid) {
this._updateEventDividers();
+ if (this._shouldShowFrames()) {
+ this._timelineGrid.removeDividers();
+ this._updateFrames();
+ } else {
+ this._timelineGrid.updateDividers(this._calculator);
+ }
+ }
if (this._memoryStatistics.visible())
this._memoryStatistics.refresh();
this._boundariesAreValid = true;
@@ -580,7 +622,7 @@
this._containerElement.scrollTop = index * WebInspector.TimelinePanel.rowHeight;
},
- _refreshRecords: function(updateBoundaries)
+ _refreshRecords: function()
{
var recordsInWindow = this._presentationModel.filteredRecords();
@@ -655,9 +697,6 @@
this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);
this._itemsGraphsElement.appendChild(this._expandElements);
this.splitView.sidebarResizerElement.style.height = this.sidebarElement.clientHeight + "px";
- // Reserve some room for expand / collapse controls to the left for records that start at 0ms.
- if (updateBoundaries)
- this._timelineGrid.updateDividers(this._calculator);
this._adjustScrollPosition((recordsInWindow.length + 1) * rowHeight);
return recordsInWindow.length;
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-04-05 12:19:01 UTC (rev 113314)
@@ -127,7 +127,11 @@
}
}
-WebInspector.TimelinePresentationModel.createEventDivider = function(record)
+/**
+ * @param {string} recordType
+ * @param {string=} title
+ */
+WebInspector.TimelinePresentationModel.createEventDivider = function(recordType, title)
{
var eventDivider = document.createElement("div");
eventDivider.className = "resources-event-divider";
@@ -136,16 +140,18 @@
var eventDividerPadding = document.createElement("div");
eventDividerPadding.className = "resources-event-divider-padding";
- if (record.type === recordTypes.MarkDOMContent)
+ if (recordType === recordTypes.MarkDOMContent)
eventDivider.className += " resources-blue-divider";
- else if (record.type === recordTypes.MarkLoad)
+ else if (recordType === recordTypes.MarkLoad)
eventDivider.className += " resources-red-divider";
- else if (record.type === recordTypes.TimeStamp) {
+ else if (recordType === recordTypes.TimeStamp)
eventDivider.className += " resources-orange-divider";
- eventDividerPadding.title = record.data["message"];
- } else if (record.type === recordTypes.BeginFrame)
+ else if (recordType === recordTypes.BeginFrame)
eventDivider.className += " timeline-frame-divider";
+ if (title)
+ eventDividerPadding.title = title;
+
eventDividerPadding.appendChild(eventDivider);
return eventDividerPadding;
}
@@ -164,6 +170,11 @@
return this._rootRecord;
},
+ frames: function()
+ {
+ return this._frames;
+ },
+
reset: function()
{
this._linkifier.reset();
@@ -172,9 +183,15 @@
this._scheduledResourceRequests = {};
this._timerRecords = {};
this._requestAnimationFrameRecords = {};
+ this._frames = [];
this._minimumRecordTime = -1;
},
+ addFrame: function(frame)
+ {
+ this._frames.push(frame);
+ },
+
addRecord: function(record, parentRecord)
{
var connectedToOldRecord = false;
@@ -333,7 +350,7 @@
if (parentRecord)
parentRecord.children.push(this);
this.category = style.category;
- this.title = style.title;
+ this.title = record.type === recordTypes.TimeStamp ? record.data["message"] : style.title;
this.startTime = WebInspector.TimelineModel.startTimeInSeconds(record);
this.data = ""
this.type = record.type;
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (113313 => 113314)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-05 11:56:14 UTC (rev 113313)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-05 12:19:01 UTC (rev 113314)
@@ -665,3 +665,13 @@
.timeline-mode-horizontal-bars .glyph {
-webkit-mask-position: -192px -48px;
}
+
+.timeline-frame-strip {
+ position: absolute;
+ height: 19px;
+ background-color: rgb(220, 220, 220);
+ opacity: 0.6;
+ color: black;
+ text-align: center;
+ padding-top: 3px;
+}
