- Revision
- 113434
- Author
- [email protected]
- Date
- 2012-04-06 07:43:46 -0700 (Fri, 06 Apr 2012)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (113433 => 113434)
--- trunk/Source/WebCore/ChangeLog 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/ChangeLog 2012-04-06 14:43:46 UTC (rev 113434)
@@ -1,3 +1,37 @@
+2012-04-06 Andrey Kosyakov <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: show "dirty" flag for CSS files edited in the resources panel.
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js
(Binary files differ)
Modified: trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/TimelineFrameController.js 2012-04-06 14:43:46 UTC (rev 113434)
@@ -83,12 +83,14 @@
}
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;
Modified: trunk/Source/WebCore/inspector/front-end/TimelineModel.js (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/TimelineModel.js 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/TimelineModel.js 2012-04-06 14:43:46 UTC (rev 113434)
@@ -233,6 +233,14 @@
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;
}
}
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-06 14:43:46 UTC (rev 113434)
@@ -369,6 +369,8 @@
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 @@
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 @@
_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 @@
{
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 @@
*/
_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()
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js 2012-04-06 14:43:46 UTC (rev 113434)
@@ -463,28 +463,14 @@
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));
@@ -660,6 +646,24 @@
}
/**
+ * @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
*/
WebInspector.TimelinePresentationModel.PopupContentHelper = function(title)
@@ -733,6 +737,21 @@
}
}
+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
*/
Modified: trunk/Source/WebCore/inspector/front-end/inspectorCommon.css (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/inspectorCommon.css 2012-04-06 14:43:46 UTC (rev 113434)
@@ -88,6 +88,7 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 20px;
z-index: 200;
+ pointer-events: none;
}
.resources-divider {
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (113433 => 113434)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-06 14:27:29 UTC (rev 113433)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-06 14:43:46 UTC (rev 113434)
@@ -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;
}
