Diff
Modified: trunk/LayoutTests/ChangeLog (113176 => 113177)
--- trunk/LayoutTests/ChangeLog 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/LayoutTests/ChangeLog 2012-04-04 12:41:45 UTC (rev 113177)
@@ -1,3 +1,14 @@
+2012-04-04 Andrey Kosyakov <[email protected]>
+
+ Web Inspector: make padding and client window width part of timeline calculator's state
+ https://bugs.webkit.org/show_bug.cgi?id=83122
+
+ Reviewed by Pavel Feldman.
+
+ - re-enable 4 injspector tests skipped after previous landing attempt.
+
+ * platform/gtk/Skipped:
+
2012-04-04 Zoltan Arvai <[email protected]>
[Qt] Unreviewed gardening
Modified: trunk/LayoutTests/platform/gtk/Skipped (113176 => 113177)
--- trunk/LayoutTests/platform/gtk/Skipped 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/LayoutTests/platform/gtk/Skipped 2012-04-04 12:41:45 UTC (rev 113177)
@@ -1659,9 +1659,3 @@
# https://bugs.webkit.org/show_bug.cgi?id=83006
fast/events/drop-handler-should-not-stop-navigate.html
-
-# https://bugs.webkit.org/show_bug.cgi?id=83136
-http/tests/inspector/network/network-sidebar-width.html
-http/tests/inspector/network/network-initiator-from-console.html
-inspector/network-status-non-http.html
-inspector/debugger/watch-expressions-panel-switch.html
Modified: trunk/Source/WebCore/ChangeLog (113176 => 113177)
--- trunk/Source/WebCore/ChangeLog 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/ChangeLog 2012-04-04 12:41:45 UTC (rev 113177)
@@ -1,3 +1,40 @@
+2012-04-04 Andrey Kosyakov <[email protected]>
+
+ Web Inspector: make padding and client window width part of timeline calculator's state
+ https://bugs.webkit.org/show_bug.cgi?id=83122
+
+ Reviewed by Pavel Feldman.
+
+ - preserve window width and padding within TimelineCalculator
+ - rely on calculator to add expansion arrow padding
+ - add TimelineCalculator::computePosition() for computing single position (not entire bar dimensions)
+
+ * inspector/front-end/MemoryStatistics.js:
+ (WebInspector.MemoryStatistics.prototype._refreshDividers):
+ * inspector/front-end/NetworkPanel.js:
+ (WebInspector.NetworkLogView.prototype._updateDividersIfNeeded):
+ (WebInspector.NetworkLogView.prototype._reset):
+ (WebInspector.NetworkBaseCalculator.prototype.computePosition):
+ (WebInspector.NetworkBaseCalculator.prototype.formatTime):
+ (WebInspector.NetworkBaseCalculator.prototype.setDisplayWindow):
+ * inspector/front-end/TimelineGrid.js:
+ (WebInspector.TimelineGrid.prototype.updateDividers):
+ (WebInspector.TimelineGrid.prototype.addEventDividers):
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane.prototype._update):
+ (WebInspector.TimelineOverviewPane.prototype._reset):
+ (WebInspector.TimelineOverviewCalculator.prototype.computePosition):
+ (WebInspector.TimelineOverviewCalculator.prototype.setDisplayWindow):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype._updateEventDividers):
+ (WebInspector.TimelinePanel.prototype._refresh):
+ (WebInspector.TimelinePanel.prototype._refreshRecords):
+ (WebInspector.TimelineCalculator.prototype.computePosition):
+ (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition):
+ (WebInspector.TimelineCalculator.prototype.setDisplayWindow):
+ (WebInspector.TimelineRecordGraphRow.prototype.update):
+ (WebInspector.TimelineExpandableElement.prototype._update):
+
2012-04-04 Noel Gordon <[email protected]>
[FileSystem] Forward declare File in FileCallback.h
Modified: trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js (113176 => 113177)
--- trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-04-04 12:41:45 UTC (rev 113177)
@@ -420,7 +420,7 @@
_refreshDividers: function()
{
- this._timelineGrid.updateDividers(true, this._timelinePanel.calculator, this._timelinePanel.timelinePaddingLeft);
+ this._timelineGrid.updateDividers(this._timelinePanel.calculator);
},
_setVerticalClip: function(originY, height)
Modified: trunk/Source/WebCore/inspector/front-end/NetworkPanel.js (113176 => 113177)
--- trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2012-04-04 12:41:45 UTC (rev 113177)
@@ -520,7 +520,7 @@
this._refreshTimeout = setTimeout(this.refresh.bind(this), this._defaultRefreshDelay);
},
- _updateDividersIfNeeded: function(force)
+ _updateDividersIfNeeded: function()
{
if (!this._dataGrid)
return;
@@ -537,9 +537,10 @@
if (!this.isShowing()) {
this._scheduleRefresh();
proceed = false;
- } else
- proceed = this._timelineGrid.updateDividers(force, this.calculator);
-
+ } else {
+ this.calculator.setDisplayWindow(this._timelineGrid.element.clientWidth);
+ proceed = this._timelineGrid.updateDividers(this.calculator);
+ }
if (!proceed)
return;
@@ -738,7 +739,7 @@
if (this._dataGrid) {
this._dataGrid.removeChildren();
- this._updateDividersIfNeeded(true);
+ this._updateDividersIfNeeded();
this._updateSummaryBar();
}
@@ -1448,6 +1449,11 @@
}
WebInspector.NetworkBaseCalculator.prototype = {
+ computePosition: function(time)
+ {
+ return (time - this.minimumBoundary) / this.boundarySpan * this._workingArea;
+ },
+
computeBarGraphPercentages: function(item)
{
return {start: 0, middle: 0, end: (this._value(item) / this.boundarySpan) * 100};
@@ -1490,6 +1496,11 @@
formatTime: function(value)
{
return value.toString();
+ },
+
+ setDisplayWindow: function(clientWidth)
+ {
+ this._workingArea = clientWidth;
}
}
Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (113176 => 113177)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-04-04 12:41:45 UTC (rev 113177)
@@ -63,26 +63,19 @@
return this._dividersElement;
},
- /**
- * @param {number=} paddingLeft
- */
- updateDividers: function(force, calculator, paddingLeft)
+ updateDividers: function(calculator)
{
- var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
+ var dividersElementClientWidth = this._dividersElement.clientWidth;
+ var dividerCount = Math.round(dividersElementClientWidth / 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 dividersElementClientWidth = this._dividersElement.clientWidth;
- var clientWidth = dividersElementClientWidth - paddingLeft;
+ var paddingLeft = calculator.paddingLeft;
for (var i = paddingLeft ? 0 : 1; i <= dividerCount; ++i) {
if (!divider) {
divider = document.createElement("div");
@@ -114,7 +107,7 @@
dividerLabelBar.removeStyleClass("last");
}
- var left = paddingLeft + clientWidth * (i / dividerCount);
+ var left = calculator.computePosition(calculator.minimumBoundary + slice * i);
var percentLeft = 100 * left / dividersElementClientWidth;
this._setDividerAndBarLeft(divider, dividerLabelBar, percentLeft);
@@ -158,9 +151,10 @@
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 (113176 => 113177)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-04-04 12:41:45 UTC (rev 113177)
@@ -196,6 +196,9 @@
{
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)
@@ -203,8 +206,7 @@
else
this._updateCategoryStrips();
- this._overviewCalculator.setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
- this._overviewGrid.updateDividers(true, this._overviewCalculator);
+ this._overviewGrid.updateDividers(this._overviewCalculator);
this._updateEventDividers();
},
@@ -217,7 +219,6 @@
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)
@@ -310,8 +311,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();
@@ -586,6 +587,14 @@
}
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;
@@ -604,6 +613,16 @@
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 (113176 => 113177)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-04 12:34:09 UTC (rev 113176)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-04-04 12:41:45 UTC (rev 113177)
@@ -329,7 +329,7 @@
_updateEventDividers: function()
{
this._timelineGrid.removeEventDividers();
- var clientWidth = this._graphRowsElement.offsetWidth - this._expandOffset;
+ 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;
@@ -338,13 +338,13 @@
var record = this._timeStampRecords[i];
if (record.type === WebInspector.TimelineModel.RecordType.BeginFrame && !showFrames)
continue;
- var positions = this._calculator.computeBarGraphWindowPosition(record, clientWidth);
+ 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;
- divider.style.left = (dividerPosition + this._expandOffset) + "px";
+ divider.style.left = dividerPosition + "px";
dividers[dividerPosition] = divider;
}
this._timelineGrid.addEventDividers(dividers);
@@ -538,8 +538,8 @@
delete this._refreshTimeout;
}
- if (!this._boundariesAreValid)
- this._calculator.setWindow(this._overviewPane.windowStartTime(), this._overviewPane.windowEndTime());
+ 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);
this._updateRecordsCounter(recordsInWindowCount);
@@ -619,7 +619,8 @@
var lastChildIndex = i + record.visibleChildrenCount;
if (lastChildIndex >= startIndex && lastChildIndex < endIndex) {
var expandElement = new WebInspector.TimelineExpandableElement(this._expandElements);
- expandElement._update(record, i, this._calculator.computeBarGraphWindowPosition(record, width - this._expandOffset));
+ var positions = this._calculator.computeBarGraphWindowPosition(record);
+ expandElement._update(record, i, positions.left - this._expandOffset, positions.width);
}
} else {
if (!listRowElement) {
@@ -632,7 +633,7 @@
}
listRowElement.row.update(record, isEven, visibleTop);
- graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
+ graphRowElement.row.update(record, isEven, this._calculator, this._expandOffset, i);
listRowElement = listRowElement.nextSibling;
graphRowElement = graphRowElement.nextSibling;
@@ -656,17 +657,12 @@
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(true, this._calculator, this.timelinePaddingLeft);
+ this._timelineGrid.updateDividers(this._calculator);
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.
@@ -737,7 +733,18 @@
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;
@@ -747,19 +754,16 @@
return {start: start, end: end, endWithChildren: endWithChildren, cpuWidth: cpuWidth};
},
- computeBarGraphWindowPosition: function(record, clientWidth)
+ computeBarGraphWindowPosition: function(record)
{
- const minWidth = 5;
- const borderWidth = 4;
- var workingArea = clientWidth - minWidth - borderWidth;
var percentages = this.computeBarGraphPercentages(record);
- 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;
+ 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;
if (percentages.endWithChildren > percentages.end)
- widthWithChildren += borderWidth + minWidth;
+ widthWithChildren += WebInspector.TimelineCalculator._borderWidth + WebInspector.TimelineCalculator._minWidth;
return {left: left, width: width, widthWithChildren: widthWithChildren, cpuWidth: cpuWidth};
},
@@ -770,6 +774,16 @@
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());
@@ -866,18 +880,18 @@
}
WebInspector.TimelineRecordGraphRow.prototype = {
- update: function(record, isEven, calculator, clientWidth, expandOffset, index)
+ update: function(record, isEven, calculator, expandOffset, index)
{
this._record = record;
this.element.className = "timeline-graph-side timeline-category-" + record.category.name + (isEven ? " even" : "");
- var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth - expandOffset);
- this._barWithChildrenElement.style.left = barPosition.left + expandOffset + "px";
+ var barPosition = calculator.computeBarGraphWindowPosition(record);
+ this._barWithChildrenElement.style.left = barPosition.left + "px";
this._barWithChildrenElement.style.width = barPosition.widthWithChildren + "px";
- this._barElement.style.left = barPosition.left + expandOffset + "px";
+ this._barElement.style.left = barPosition.left + "px";
this._barElement.style.width = barPosition.width + "px";
- this._barCpuElement.style.left = barPosition.left + expandOffset + "px";
+ this._barCpuElement.style.left = barPosition.left + "px";
this._barCpuElement.style.width = barPosition.cpuWidth + "px";
- this._expandElement._update(record, index, barPosition);
+ this._expandElement._update(record, index, barPosition.left - expandOffset, barPosition.width);
},
_onClick: function(event)
@@ -909,13 +923,13 @@
}
WebInspector.TimelineExpandableElement.prototype = {
- _update: function(record, index, barPosition)
+ _update: function(record, index, left, width)
{
const rowHeight = WebInspector.TimelinePanel.rowHeight;
if (record.visibleChildrenCount || record.invisibleChildrenCount) {
this._element.style.top = index * rowHeight + "px";
- this._element.style.left = barPosition.left + "px";
- this._element.style.width = Math.max(12, barPosition.width + 25) + "px";
+ this._element.style.left = left + "px";
+ this._element.style.width = Math.max(12, width + 25) + "px";
if (!record.collapsed) {
this._element.style.height = (record.visibleChildrenCount + 1) * rowHeight + "px";
this._element.addStyleClass("timeline-expandable-expanded");
