Modified: trunk/Source/WebCore/ChangeLog (113995 => 113996)
--- trunk/Source/WebCore/ChangeLog 2012-04-12 16:31:50 UTC (rev 113995)
+++ trunk/Source/WebCore/ChangeLog 2012-04-12 16:40:23 UTC (rev 113996)
@@ -1,5 +1,28 @@
2012-04-11 Andrey Kosyakov <[email protected]>
+ Web Inspector: zoom timeline frame on dblclick on the frame bar
+ https://bugs.webkit.org/show_bug.cgi?id=83741
+
+ Reviewed by Pavel Feldman.
+
+ - put timeline frame bars into a container, so we can have one listener;
+ - upon dblclick, find the frame, get its window coordinates and set overview selection window accordingly.
+
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane.prototype.zoomToFrame): Get frame coordinates, set overview window.
+ (WebInspector.TimelineVerticalOverview.prototype.update): Maintain framesPerBar as a member for reuse in getFramePosition()
+ (WebInspector.TimelineVerticalOverview.prototype.framePosition): Map frame to screen positions.
+ (WebInspector.TimelineVerticalOverview.prototype._renderBars): Factored out barNumberToScreenPosition()
+ (WebInspector.TimelineVerticalOverview.prototype._barNumberToScreenPosition):
+ (WebInspector.TimelineVerticalOverview.prototype.getWindowTimes): Drive-by style fix.
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype._updateFrames): Put frames into a containing div.
+ (WebInspector.TimelinePanel.prototype._onFrameDoubleClicked): Zoom to frame upon double click.
+ * inspector/front-end/timelinePanel.css:
+ (.timeline-frame-container):
+
+2012-04-11 Andrey Kosyakov <[email protected]>
+
Web Inspector: show wall time frame duration on the vertical overview
https://bugs.webkit.org/show_bug.cgi?id=83718
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (113995 => 113996)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-12 16:31:50 UTC (rev 113995)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-12 16:40:23 UTC (rev 113996)
@@ -292,6 +292,18 @@
this._scheduleRefresh();
},
+ /**
+ * @param {WebInspector.TimelineFrame} frame
+ */
+ zoomToFrame: function(frame)
+ {
+ var window = this._verticalOverview.framePosition(frame);
+ if (!window)
+ return;
+
+ this._overviewWindow._setWindowPosition(window.start, window.end);
+ },
+
_onRecordAdded: function(event)
{
var record = event.data;
@@ -923,9 +935,9 @@
update: function()
{
const minBarWidth = 4;
- var framesPerBar = Math.max(1, this._frames.length * minBarWidth / this.element.clientWidth);
+ this._framesPerBar = Math.max(1, this._frames.length * minBarWidth / this.element.clientWidth);
this._barTimes = [];
- var visibleFrames = this._aggregateFrames(framesPerBar);
+ var visibleFrames = this._aggregateFrames(this._framesPerBar);
const paddingTop = 4;
var scale = (this.element.clientHeight - paddingTop) / this._normalBarLength;
@@ -941,6 +953,20 @@
this._frames.push(frame);
},
+ framePosition: function(frame)
+ {
+ var frameNumber = this._frames.indexOf(frame);
+ if (frameNumber < 0)
+ return;
+ var barNumber = Math.floor(frameNumber / this._framesPerBar);
+ var firstBar = this._framesPerBar > 1 ? barNumber : Math.max(barNumber - 1, 0);
+ var lastBar = this._framesPerBar > 1 ? barNumber : Math.min(barNumber + 1, this._barTimes.length - 1);
+ return {
+ start: Math.ceil(this._barNumberToScreenPosition(firstBar) - this._actualPadding / 2),
+ end: Math.floor(this._barNumberToScreenPosition(lastBar + 1) - this._actualPadding / 2)
+ }
+ },
+
/**
* @param {number} framesPerBar
*/
@@ -983,12 +1009,16 @@
this._actualPadding = Math.min(Math.floor(this._actualOuterBarWidth / 3), maxPadding);
for (var i = 0; i < frames.length; ++i) {
- var x = this._outerPadding + this._actualOuterBarWidth * i;
var width = this._actualOuterBarWidth - this._actualPadding;
- this._renderBar(x, width, frames[i], scale);
+ this._renderBar(this._barNumberToScreenPosition(i), width, frames[i], scale);
}
},
+ _barNumberToScreenPosition: function(n)
+ {
+ return this._outerPadding + this._actualOuterBarWidth * n;
+ },
+
_renderBar: function(left, width, frame, scale)
{
var categories = Object.keys(frame.timeByCategory);
@@ -1033,7 +1063,7 @@
getWindowTimes: function(windowLeft, windowRight)
{
- var windowSpan = this.element.clientWidth
+ var windowSpan = this.element.clientWidth;
var leftOffset = windowLeft * windowSpan - this._outerPadding + this._actualPadding;
var rightOffset = windowRight * windowSpan - this._outerPadding;
var bars = this.element.children;
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (113995 => 113996)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-12 16:31:50 UTC (rev 113995)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-12 16:40:23 UTC (rev 113996)
@@ -354,8 +354,17 @@
{
var frames = this._presentationModel.frames();
var clientWidth = this._graphRowsElement.offsetWidth;
- var dividers = [];
+ if (this._frameContainer)
+ this._frameContainer.removeChildren();
+ else {
+ this._frameContainer = document.createElement("div");
+ this._frameContainer.addStyleClass("fill");
+ this._frameContainer.addStyleClass("timeline-frame-container");
+ this._frameContainer.addEventListener("dblclick", this._onFrameDoubleClicked.bind(this), false);
+ }
+ var dividers = [ this._frameContainer ];
+
for (var i = 0; i < frames.length; ++i) {
var frame = frames[i];
var frameStart = this._calculator.computePosition(frame.startTime);
@@ -375,7 +384,7 @@
if (width > minWidthForFrameInfo)
frameStrip.textContent = Number.secondsToString(frame.endTime - frame.startTime, true);
- dividers.push(frameStrip);
+ this._frameContainer.appendChild(frameStrip);
if (actualStart > 0) {
var frameMarker = WebInspector.TimelinePresentationModel.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
@@ -386,6 +395,14 @@
this._timelineGrid.addEventDividers(dividers);
},
+ _onFrameDoubleClicked: function(event)
+ {
+ var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
+ if (!frameBar)
+ return;
+ this._overviewPane.zoomToFrame(frameBar._frame);
+ },
+
_timelinesOverviewModeChanged: function(event)
{
var shouldShowMemory = event.data ="" WebInspector.TimelineOverviewPane.Mode.Memory;
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (113995 => 113996)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-12 16:31:50 UTC (rev 113995)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-04-12 16:40:23 UTC (rev 113996)
@@ -667,6 +667,10 @@
-webkit-mask-position: -192px -48px;
}
+.timeline-frame-container {
+ height: 19px;
+}
+
.timeline-frame-strip {
position: absolute;
height: 19px;
