Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (113168 => 113169)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-04 11:37:24 UTC (rev 113168)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-04 11:52:43 UTC (rev 113169)
@@ -63,19 +63,26 @@
return this._dividersElement;
},
- updateDividers: function(calculator)
+ /**
+ * @param {number=} paddingLeft
+ */
+ updateDividers: function(force, calculator, paddingLeft)
{
- var dividersElementClientWidth = this._dividersElement.clientWidth;
- var dividerCount = Math.round(dividersElementClientWidth / 64);
+ var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
var slice = calculator.boundarySpan / dividerCount;
+ if (!force && this._currentDividerSlice === slice)
+ return false;
+ if (typeof paddingLeft !== "number")
+ paddingLeft = 0;
this._currentDividerSlice = slice;
// Reuse divider elements and labels.
var divider = this._dividersElement.firstChild;
var dividerLabelBar = this._dividersLabelBarElement.firstChild;
- var paddingLeft = calculator.paddingLeft;
+ var dividersElementClientWidth = this._dividersElement.clientWidth;
+ var clientWidth = dividersElementClientWidth - paddingLeft;
for (var i = paddingLeft ? 0 : 1; i <= dividerCount; ++i) {
if (!divider) {
divider = document.createElement("div");
@@ -107,7 +114,7 @@
dividerLabelBar.removeStyleClass("last");
}
- var left = calculator.computePosition(calculator.minimumBoundary + slice * i);
+ var left = paddingLeft + clientWidth * (i / dividerCount);
var percentLeft = 100 * left / dividersElementClientWidth;
this._setDividerAndBarLeft(divider, dividerLabelBar, percentLeft);
@@ -151,10 +158,9 @@
addEventDividers: function(dividers)
{
this.element.removeChild(this._eventDividersElement);
- for (var i = 0; i < dividers.length; ++i) {
+ for (var i = 0; i < dividers.length; ++i)
if (dividers[i])
this._eventDividersElement.appendChild(dividers[i]);
- }
this.element.appendChild(this._eventDividersElement);
},
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (113168 => 113169)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-04 11:37:24 UTC (rev 113168)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-04 11:52:43 UTC (rev 113169)
@@ -196,9 +196,6 @@
{
delete this._refreshTimeout;
- this._overviewCalculator.setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
- this._overviewCalculator.setDisplayWindow(0, this._overviewContainer.clientWidth);
-
if (this._heapGraph.visible)
this._heapGraph.update();
else if (this._verticalOverview)
@@ -206,7 +203,8 @@
else
this._updateCategoryStrips();
- this._overviewGrid.updateDividers(this._overviewCalculator);
+ this._overviewCalculator.setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
+ this._overviewGrid.updateDividers(true, this._overviewCalculator);
this._updateEventDividers();
},
@@ -219,6 +217,7 @@
timelines[category] = [];
this._categoryGraphs[category].clearChunks();
}
+ this._overviewCalculator.setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
// Create sparse arrays with 101 cells each to fill with chunks for a given category.
function markPercentagesForRecord(record)
@@ -311,8 +310,8 @@
this._windowEndTime = Infinity;
this._overviewWindow.reset();
this._overviewCalculator.reset();
+ this._overviewGrid.updateDividers(true, this._overviewCalculator);
this._eventDividers = [];
- this._overviewGrid.updateDividers(this._overviewCalculator);
if (this._verticalOverview)
this._verticalOverview.reset();
this._update();
@@ -587,14 +586,6 @@
}
WebInspector.TimelineOverviewCalculator.prototype = {
- /**
- * @param {number} time
- */
- computePosition: function(time)
- {
- return (time - this.minimumBoundary) / this.boundarySpan * this._workingArea + this.paddingLeft;
- },
-
computeBarGraphPercentages: function(record)
{
var start = (WebInspector.TimelineModel.startTimeInSeconds(record) - this.minimumBoundary) / this.boundarySpan * 100;
@@ -613,16 +604,6 @@
this.boundarySpan = this.maximumBoundary - this.minimumBoundary;
},
- /**
- * @param {number} paddingLeft
- * @param {number} clientWidth
- */
- setDisplayWindow: function(paddingLeft, clientWidth)
- {
- this._workingArea = clientWidth - paddingLeft;
- this.paddingLeft = paddingLeft;
- },
-
reset: function()
{
this.setWindow();
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (113168 => 113169)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-04 11:37:24 UTC (rev 113168)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-04 11:52:43 UTC (rev 113169)
@@ -329,7 +329,7 @@
_updateEventDividers: function()
{
this._timelineGrid.removeEventDividers();
- var clientWidth = this._graphRowsElement.offsetWidth;
+ var clientWidth = this._graphRowsElement.offsetWidth - this._expandOffset;
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;
@@ -338,13 +338,13 @@
var record = this._timeStampRecords[i];
if (record.type === WebInspector.TimelineModel.RecordType.BeginFrame && !showFrames)
continue;
- var positions = this._calculator.computeBarGraphWindowPosition(record);
+ var positions = this._calculator.computeBarGraphWindowPosition(record, clientWidth);
var dividerPosition = Math.round(positions.left);
if (dividerPosition < 0 || dividerPosition >= clientWidth || dividers[dividerPosition])
continue;
var divider = WebInspector.TimelinePresentationModel.createEventDivider(record);
divider.title = record.title;
- divider.style.left = dividerPosition + "px";
+ divider.style.left = (dividerPosition + this._expandOffset) + "px";
dividers[dividerPosition] = divider;
}
this._timelineGrid.addEventDividers(dividers);
@@ -538,8 +538,8 @@
delete this._refreshTimeout;
}
- this._calculator.setWindow(this._overviewPane.windowStartTime(), this._overviewPane.windowEndTime());
- this._calculator.setDisplayWindow(!this._overviewPane.windowLeft() ? this._expandOffset : 0, this._graphRowsElement.clientWidth);
+ if (!this._boundariesAreValid)
+ this._calculator.setWindow(this._overviewPane.windowStartTime(), this._overviewPane.windowEndTime());
var recordsInWindowCount = this._refreshRecords(!this._boundariesAreValid);
this._updateRecordsCounter(recordsInWindowCount);
@@ -619,8 +619,7 @@
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);
+ expandElement._update(record, i, this._calculator.computeBarGraphWindowPosition(record, width - this._expandOffset));
}
} else {
if (!listRowElement) {
@@ -633,7 +632,7 @@
}
listRowElement.row.update(record, isEven, visibleTop);
- graphRowElement.row.update(record, isEven, this._calculator, this._expandOffset, i);
+ graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
listRowElement = listRowElement.nextSibling;
graphRowElement = graphRowElement.nextSibling;
@@ -657,12 +656,17 @@
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._timelineGrid.updateDividers(true, this._calculator, this.timelinePaddingLeft);
this._adjustScrollPosition((recordsInWindow.length + 1) * rowHeight);
return recordsInWindow.length;
},
+ get timelinePaddingLeft()
+ {
+ return !this._overviewPane.windowLeft() ? this._expandOffset : 0;
+ },
+
_adjustScrollPosition: function(totalHeight)
{
// Prevent the container from being scrolled off the end.
@@ -733,18 +737,7 @@
this._model = model;
}
-WebInspector.TimelineCalculator._minWidth = 5;
-WebInspector.TimelineCalculator._borderWidth = 4;
-
WebInspector.TimelineCalculator.prototype = {
- /**
- * @param {number} time
- */
- computePosition: function(time)
- {
- return (time - this.minimumBoundary) / this.boundarySpan * this._workingArea + this.paddingLeft;
- },
-
computeBarGraphPercentages: function(record)
{
var start = (record.startTime - this.minimumBoundary) / this.boundarySpan * 100;
@@ -754,16 +747,19 @@
return {start: start, end: end, endWithChildren: endWithChildren, cpuWidth: cpuWidth};
},
- computeBarGraphWindowPosition: function(record)
+ computeBarGraphWindowPosition: function(record, clientWidth)
{
+ const minWidth = 5;
+ const borderWidth = 4;
+ var workingArea = clientWidth - minWidth - borderWidth;
var percentages = this.computeBarGraphPercentages(record);
- var left = this.computePosition(record.startTime);
- var width = (percentages.end - percentages.start) / 100 * this._workingArea + WebInspector.TimelineCalculator._minWidth;
- var widthWithChildren = (percentages.endWithChildren - percentages.start) / 100 * this._workingArea;
- var cpuWidth = percentages.cpuWidth / 100 * this._workingArea + WebInspector.TimelineCalculator._minWidth;
+ var left = percentages.start / 100 * workingArea;
+ var width = (percentages.end - percentages.start) / 100 * workingArea + minWidth;
+ var widthWithChildren = (percentages.endWithChildren - percentages.start) / 100 * workingArea;
+ var cpuWidth = percentages.cpuWidth / 100 * workingArea + minWidth;
if (percentages.endWithChildren > percentages.end)
- widthWithChildren += WebInspector.TimelineCalculator._borderWidth + WebInspector.TimelineCalculator._minWidth;
+ widthWithChildren += borderWidth + minWidth;
return {left: left, width: width, widthWithChildren: widthWithChildren, cpuWidth: cpuWidth};
},
@@ -774,16 +770,6 @@
this.boundarySpan = this.maximumBoundary - this.minimumBoundary;
},
- /**
- * @param {number} paddingLeft
- * @param {number} clientWidth
- */
- setDisplayWindow: function(paddingLeft, clientWidth)
- {
- this._workingArea = clientWidth - WebInspector.TimelineCalculator._minWidth - WebInspector.TimelineCalculator._borderWidth - paddingLeft;
- this.paddingLeft = paddingLeft;
- },
-
formatTime: function(value)
{
return Number.secondsToString(value + this.minimumBoundary - this._model.minimumRecordTime());
@@ -880,18 +866,18 @@
}
WebInspector.TimelineRecordGraphRow.prototype = {
- update: function(record, isEven, calculator, expandOffset, index)
+ update: function(record, isEven, calculator, clientWidth, expandOffset, index)
{
this._record = record;
this.element.className = "timeline-graph-side timeline-category-" + record.category.name + (isEven ? " even" : "");
- var barPosition = calculator.computeBarGraphWindowPosition(record);
- this._barWithChildrenElement.style.left = barPosition.left + "px";
+ var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth - expandOffset);
+ this._barWithChildrenElement.style.left = barPosition.left + expandOffset + "px";
this._barWithChildrenElement.style.width = barPosition.widthWithChildren + "px";
- this._barElement.style.left = barPosition.left + "px";
+ this._barElement.style.left = barPosition.left + expandOffset + "px";
this._barElement.style.width = barPosition.width + "px";
- this._barCpuElement.style.left = barPosition.left + "px";
+ this._barCpuElement.style.left = barPosition.left + expandOffset + "px";
this._barCpuElement.style.width = barPosition.cpuWidth + "px";
- this._expandElement._update(record, index, barPosition.left - expandOffset, barPosition.width);
+ this._expandElement._update(record, index, barPosition);
},
_onClick: function(event)
@@ -923,13 +909,13 @@
}
WebInspector.TimelineExpandableElement.prototype = {
- _update: function(record, index, left, width)
+ _update: function(record, index, barPosition)
{
const rowHeight = WebInspector.TimelinePanel.rowHeight;
if (record.visibleChildrenCount || record.invisibleChildrenCount) {
this._element.style.top = index * rowHeight + "px";
- this._element.style.left = left + "px";
- this._element.style.width = Math.max(12, width + 25) + "px";
+ this._element.style.left = barPosition.left + "px";
+ this._element.style.width = Math.max(12, barPosition.width + 25) + "px";
if (!record.collapsed) {
this._element.style.height = (record.visibleChildrenCount + 1) * rowHeight + "px";
this._element.addStyleClass("timeline-expandable-expanded");
