Skip to content
Permalink
Browse files
Web Inspector: display frame details in popover on frame strip in Tim…
…eline panel

https://bugs.webkit.org/show_bug.cgi?id=83365

Reviewed by Pavel Feldman.

- added popovers for frame strips;
- factored out generateAggregatedInfo for reuse in the above;
- made frame event dividers thinner, darker and greyer.

* English.lproj/localizedStrings.js: Added "FPS" and "Frame"
* inspector/front-end/TimelineFrameController.js:
(WebInspector.TimelineFrameController.prototype._flushFrame): added startTimeOffset.
(WebInspector.TimelineFrameController.prototype._createSyntheticFrame): ditto.
* inspector/front-end/TimelineModel.js:
(WebInspector.TimelineModel.prototype._updateBoundaries):
(WebInspector.TimelineModel.prototype.recordOffsetInSeconds):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype._updateFrames): added link to frame to strip div.
(WebInspector.TimelinePanel.prototype._refresh):
(WebInspector.TimelinePanel.prototype._getPopoverAnchor): handle frame anchors separately.
(WebInspector.TimelinePanel.prototype._mouseMove): ditto.
(WebInspector.TimelinePanel.prototype._showPopover):
* inspector/front-end/TimelinePresentationModel.js:
(WebInspector.TimelinePresentationModel.Record.prototype.generatePopupContent):
(WebInspector.TimelinePresentationModel._generateAggregatedInfo): factored out for reuse.
(WebInspector.TimelinePresentationModel.generatePopupContentForFrame):
* inspector/front-end/inspectorCommon.css:
(.resources-dividers-label-bar):
* inspector/front-end/timelinePanel.css:
(.timeline .resources-event-divider.timeline-frame-divider): made divider thin and grey.
(.timeline-frame-strip): bumped z-index, added pointer-events: auto.

Canonical link: https://commits.webkit.org/100761@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@113434 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
caseq committed Apr 6, 2012
1 parent 5d0c7ae commit 609783b060160e14d08e8aeba1abf03a52e10094
@@ -1,3 +1,37 @@
2012-04-06 Andrey Kosyakov <caseq@chromium.org>

Web Inspector: display frame details in popover on frame strip in Timeline panel
https://bugs.webkit.org/show_bug.cgi?id=83365

Reviewed by Pavel Feldman.

- added popovers for frame strips;
- factored out generateAggregatedInfo for reuse in the above;
- made frame event dividers thinner, darker and greyer.

* English.lproj/localizedStrings.js: Added "FPS" and "Frame"
* inspector/front-end/TimelineFrameController.js:
(WebInspector.TimelineFrameController.prototype._flushFrame): added startTimeOffset.
(WebInspector.TimelineFrameController.prototype._createSyntheticFrame): ditto.
* inspector/front-end/TimelineModel.js:
(WebInspector.TimelineModel.prototype._updateBoundaries):
(WebInspector.TimelineModel.prototype.recordOffsetInSeconds):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype._updateFrames): added link to frame to strip div.
(WebInspector.TimelinePanel.prototype._refresh):
(WebInspector.TimelinePanel.prototype._getPopoverAnchor): handle frame anchors separately.
(WebInspector.TimelinePanel.prototype._mouseMove): ditto.
(WebInspector.TimelinePanel.prototype._showPopover):
* inspector/front-end/TimelinePresentationModel.js:
(WebInspector.TimelinePresentationModel.Record.prototype.generatePopupContent):
(WebInspector.TimelinePresentationModel._generateAggregatedInfo): factored out for reuse.
(WebInspector.TimelinePresentationModel.generatePopupContentForFrame):
* inspector/front-end/inspectorCommon.css:
(.resources-dividers-label-bar):
* inspector/front-end/timelinePanel.css:
(.timeline .resources-event-divider.timeline-frame-divider): made divider thin and grey.
(.timeline-frame-strip): bumped z-index, added pointer-events: auto.

2012-04-06 Pavel Feldman <pfeldman@chromium.org>

Web Inspector: show "dirty" flag for CSS files edited in the resources panel.
Binary file not shown.
@@ -83,12 +83,14 @@ WebInspector.TimelineFrameController.prototype = {
}
this._lastFrame = new WebInspector.TimelineFrame();
this._lastFrame.startTime = frameBeginTime;
this._lastFrame.startTimeOffset = this._model.recordOffsetInSeconds(record);
},

_createSyntheticFrame: function(record)
{
var frame = new WebInspector.TimelineFrame();
frame.startTime = WebInspector.TimelineModel.startTimeInSeconds(record);
frame.startTimeOffset = this._model.recordOffsetInSeconds(record);
frame.endTime = WebInspector.TimelineModel.endTimeInSeconds(record);
frame.cpuTime = WebInspector.TimelineModel.durationInSeconds(record);
return frame;
@@ -233,6 +233,14 @@ WebInspector.TimelineModel.prototype = {
this._minimumRecordTime = startTime;
if (this._maximumRecordTime === -1 || endTime > this._maximumRecordTime)
this._maximumRecordTime = endTime;
},

/**
* @param {Object} rawRecord
*/
recordOffsetInSeconds: function(rawRecord)
{
return WebInspector.TimelineModel.startTimeInSeconds(rawRecord) - this._minimumRecordTime;
}
}

@@ -369,6 +369,8 @@ WebInspector.TimelinePanel.prototype = {
var width = frameEnd - actualStart;
frameStrip.style.left = actualStart + "px";
frameStrip.style.width = width + "px";
frameStrip._frame = frame;

const minWidthForFrameInfo = 60;
if (width > minWidthForFrameInfo)
frameStrip.textContent = Number.secondsToString(frame.endTime - frame.startTime, true);
@@ -576,7 +578,7 @@ WebInspector.TimelinePanel.prototype = {
this._calculator.setWindow(this._overviewPane.windowStartTime(), this._overviewPane.windowEndTime());
this._calculator.setDisplayWindow(!this._overviewPane.windowLeft() ? this._expandOffset : 0, this._graphRowsElement.clientWidth);

var recordsInWindowCount = this._refreshRecords(!this._boundariesAreValid);
var recordsInWindowCount = this._refreshRecords();
this._updateRecordsCounter(recordsInWindowCount);
if(!this._boundariesAreValid) {
this._updateEventDividers();
@@ -711,7 +713,9 @@ WebInspector.TimelinePanel.prototype = {

_getPopoverAnchor: function(element)
{
return element.enclosingNodeOrSelfWithClass("timeline-graph-bar") || element.enclosingNodeOrSelfWithClass("timeline-tree-item");
return element.enclosingNodeOrSelfWithClass("timeline-graph-bar") ||
element.enclosingNodeOrSelfWithClass("timeline-tree-item") ||
element.enclosingNodeOrSelfWithClass("timeline-frame-strip");
},

_mouseOut: function(e)
@@ -723,7 +727,7 @@ WebInspector.TimelinePanel.prototype = {
{
var anchor = this._getPopoverAnchor(e.target);

if (anchor && anchor.row._record.type === "Paint")
if (anchor && anchor.row && anchor.row._record.type === "Paint")
this._highlightRect(anchor.row._record);
else
this._hideRectHighlight();
@@ -751,8 +755,13 @@ WebInspector.TimelinePanel.prototype = {
*/
_showPopover: function(anchor, popover)
{
var record = anchor.row._record;
popover.show(record.generatePopupContent(), anchor);
if (anchor.hasStyleClass("timeline-frame-strip")) {
var frame = anchor._frame;
popover.show(WebInspector.TimelinePresentationModel.generatePopupContentForFrame(frame), anchor);
} else {
var record = anchor.row._record;
popover.show(record.generatePopupContent(), anchor);
}
},

_closeRecordDetails: function()
@@ -463,28 +463,14 @@ WebInspector.TimelinePresentationModel.Record.prototype = {
return this.startTime <= time && time <= this.endTime;
},

_generateAggregatedInfo: function()
{
var cell = document.createElement("span");
cell.className = "timeline-aggregated-info";
for (var index in this._aggregatedStats) {
var label = document.createElement("div");
label.className = "timeline-aggregated-category timeline-" + index;
cell.appendChild(label);
var text = document.createElement("span");
text.textContent = Number.secondsToString(this._aggregatedStats[index], true);
cell.appendChild(text);
}
return cell;
},

generatePopupContent: function()
{
var contentHelper = new WebInspector.TimelinePresentationModel.PopupContentHelper(this.title);

if (this._children && this._children.length) {
contentHelper._appendTextRow(WebInspector.UIString("Self Time"), Number.secondsToString(this._selfTime, true));
contentHelper._appendElementRow(WebInspector.UIString("Aggregated Time"), this._generateAggregatedInfo());
contentHelper._appendElementRow(WebInspector.UIString("Aggregated Time"),
WebInspector.TimelinePresentationModel._generateAggregatedInfo(this._aggregatedStats));
}
var text = WebInspector.UIString("%s (at %s)", Number.secondsToString(this._lastChildEndTime - this.startTime, true),
Number.secondsToString(this._startTimeOffset));
@@ -659,6 +645,24 @@ WebInspector.TimelinePresentationModel.Record.prototype = {
}
}

/**
* @param {Object} aggregatedStats
*/
WebInspector.TimelinePresentationModel._generateAggregatedInfo = function(aggregatedStats)
{
var cell = document.createElement("span");
cell.className = "timeline-aggregated-info";
for (var index in aggregatedStats) {
var label = document.createElement("div");
label.className = "timeline-aggregated-category timeline-" + index;
cell.appendChild(label);
var text = document.createElement("span");
text.textContent = Number.secondsToString(aggregatedStats[index], true);
cell.appendChild(text);
}
return cell;
}

/**
* @constructor
*/
@@ -733,6 +737,21 @@ WebInspector.TimelinePresentationModel.PopupContentHelper.prototype = {
}
}

WebInspector.TimelinePresentationModel.generatePopupContentForFrame = function(frame)
{
var contentHelper = new WebInspector.TimelinePresentationModel.PopupContentHelper(WebInspector.UIString("Frame"));
var durationInSeconds = frame.endTime - frame.startTime;
var durationText = WebInspector.UIString("%s (at %s)", Number.secondsToString(frame.endTime - frame.startTime, true),
Number.secondsToString(frame.startTimeOffset, true));
contentHelper._appendTextRow(WebInspector.UIString("Duration"), durationText);
contentHelper._appendTextRow(WebInspector.UIString("FPS"), Math.floor(1 / durationInSeconds));
contentHelper._appendTextRow(WebInspector.UIString("CPU time"), Number.secondsToString(frame.cpuTime, true));
contentHelper._appendElementRow(WebInspector.UIString("Aggregated Time"),
WebInspector.TimelinePresentationModel._generateAggregatedInfo(frame.timeByCategory));

return contentHelper._contentTable;
}

/**
* @interface
*/
@@ -88,6 +88,7 @@ iframe.view {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 20px;
z-index: 200;
pointer-events: none;
}

.resources-divider {
@@ -603,7 +603,8 @@
}

.timeline .resources-event-divider.timeline-frame-divider {
background-color: rgba(200, 185, 200, 0.8);
background-color: rgba(180, 180, 180, 0.8);
width: 1px;
height: 100%;
}

@@ -674,4 +675,6 @@
color: black;
text-align: center;
padding-top: 3px;
z-index: 350;
pointer-events: auto;
}

0 comments on commit 609783b

Please sign in to comment.