Diff
Modified: trunk/Source/WebCore/ChangeLog (109101 => 109102)
--- trunk/Source/WebCore/ChangeLog 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/ChangeLog 2012-02-28 14:22:06 UTC (rev 109102)
@@ -1,3 +1,31 @@
+2012-02-28 Yury Semikhatsky <[email protected]>
+
+ Web Inspector: show resource dividers on memory counter graphs
+ https://bugs.webkit.org/show_bug.cgi?id=79782
+
+ Resource dividers are drawn on the memory counter graphs.
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/front-end/MemoryStatistics.js:
+ (WebInspector.MemoryStatistics.prototype.updateDividers):
+ (WebInspector.MemoryStatistics.prototype.setMainTimelineGrid):
+ (WebInspector.MemoryStatistics.prototype._updateSize):
+ (WebInspector.MemoryStatistics.prototype.show):
+ (WebInspector.MemoryStatistics.prototype.refresh):
+ (WebInspector.MemoryStatistics.prototype._refreshDividers):
+ * inspector/front-end/TimelineGrid.js:
+ (WebInspector.TimelineGrid.prototype.get dividersElement):
+ (WebInspector.TimelineGrid.prototype.updateDividers):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel):
+ (WebInspector.TimelinePanel.prototype._timelinesOverviewModeChanged):
+ (WebInspector.TimelinePanel.prototype._refreshRecords):
+ (WebInspector.TimelinePanel.prototype.get timlinePaddingLeft):
+ * inspector/front-end/timelinePanel.css:
+ (#memory-graphs-canvas-container):
+ (#memory-graphs-canvas-container .resources-dividers):
+
2012-02-28 Nikolas Zimmermann <[email protected]>
Integrate SVGUseElement within the new shadow root concept
Modified: trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js (109101 => 109102)
--- trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-28 14:22:06 UTC (rev 109102)
@@ -46,6 +46,7 @@
this._memorySplitView.addEventListener(WebInspector.SplitView.EventTypes.Resized, this._sidebarResized.bind(this));
this._canvasContainer = this._memorySplitView.mainElement;
+ this._canvasContainer.id = "memory-graphs-canvas-container";
this._currentValuesBar = this._canvasContainer.createChild("div");
this._currentValuesBar.id = "counter-values-bar";
this._canvas = this._canvasContainer.createChild("canvas");
@@ -56,6 +57,9 @@
this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), true);
this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), true);
this._canvas.addEventListener("click", this._onClick.bind(this), true);
+ // We create extra timeline grid here to reuse its event dividers.
+ this._timelineGrid = new WebInspector.TimelineGrid();
+ this._canvasContainer.appendChild(this._timelineGrid.dividersElement);
// Populate sidebar
this._memorySplitView.sidebarElement.createChild("div", "sidebar-tree sidebar-tree-section").textContent = WebInspector.UIString("COUNTERS");
@@ -203,6 +207,11 @@
WebInspector.MemoryStatistics.prototype = {
+ setMainTimelineGrid: function(timelineGrid)
+ {
+ this._mainTimelineGrid = timelineGrid;
+ },
+
setTopPosition: function(top)
{
this._memorySplitView.element.style.top = top + "px";
@@ -229,8 +238,11 @@
_updateSize: function()
{
+ var width = this._mainTimelineGrid.dividersElement.offsetWidth + 1;
+ this._canvasContainer.style.width = width + "px";
+
var height = this._canvasContainer.offsetHeight - this._currentValuesBar.offsetHeight;
- this._canvas.width = this._canvasContainer.offsetWidth;
+ this._canvas.width = width;
this._canvas.height = height;
},
@@ -384,12 +396,14 @@
var anchor = /** @type {Element|null} */ this._containerAnchor.nextSibling;
this._memorySplitView.show(this._timelinePanel.element, anchor);
this._updateSize();
+ this._refreshDividers();
setTimeout(this._draw.bind(this), 0);
},
refresh: function()
{
this._updateSize();
+ this._refreshDividers();
this._draw();
this._refreshCurrentValues();
},
@@ -399,6 +413,11 @@
this._memorySplitView.detach();
},
+ _refreshDividers: function()
+ {
+ this._timelineGrid.updateDividers(true, this._timelinePanel.calculator, this._timelinePanel.timelinePaddingLeft);
+ },
+
_setVerticalClip: function(originY, height)
{
this._originY = originY;
Modified: trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js (109101 => 109102)
--- trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/inspector/front-end/SidebarOverlay.js 2012-02-28 14:22:06 UTC (rev 109102)
@@ -113,7 +113,7 @@
this.element.removeChild(this._resizerElement);
if (this._resizerWidgetElement)
this.element.removeChild(this._resizerWidgetElement);
- element.removeEventListener("DOMFocusIn", this._boundContainingElementFocused);
+ element.removeEventListener("DOMFocusIn", this._boundContainingElementFocused, false);
},
/**
Modified: trunk/Source/WebCore/inspector/front-end/TimelineGrid.js (109101 => 109102)
--- trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/inspector/front-end/TimelineGrid.js 2012-02-28 14:22:06 UTC (rev 109102)
@@ -58,6 +58,11 @@
return this._itemsGraphsElement;
},
+ get dividersElement()
+ {
+ return this._dividersElement;
+ },
+
/**
* @param {number=} paddingLeft
*/
@@ -76,8 +81,8 @@
var divider = this._dividersElement.firstChild;
var dividerLabelBar = this._dividersLabelBarElement.firstChild;
- var dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
- var clientWidth = dividersLabelBarElementClientWidth - 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");
@@ -91,7 +96,6 @@
dividerLabelBar._labelElement = label;
dividerLabelBar.appendChild(label);
this._dividersLabelBarElement.appendChild(dividerLabelBar);
- dividersLabelBarElementClientWidth = this._dividersLabelBarElement.clientWidth;
}
if (i === (paddingLeft ? 0 : 1)) {
@@ -111,7 +115,7 @@
}
var left = paddingLeft + clientWidth * (i / dividerCount);
- var percentLeft = 100 * left / dividersLabelBarElementClientWidth;
+ var percentLeft = 100 * left / dividersElementClientWidth;
this._setDividerAndBarLeft(divider, dividerLabelBar, percentLeft);
if (!isNaN(slice))
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (109101 => 109102)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-28 14:22:06 UTC (rev 109102)
@@ -79,6 +79,8 @@
this._itemsGraphsElement.id = "timeline-graphs";
this._itemsGraphsElement.addEventListener("mousewheel", this._overviewPane.scrollWindow.bind(this._overviewPane), true);
this._containerContentElement.appendChild(this._timelineGrid.element);
+ if (this._memoryStatistics)
+ this._memoryStatistics.setMainTimelineGrid(this._timelineGrid);
this._topGapElement = document.createElement("div");
this._topGapElement.className = "timeline-gap";
@@ -378,13 +380,13 @@
this._memoryStatistics.hide();
this.splitView.element.style.height = "auto";
this.splitView.element.style.bottom = "0";
- this.onResize();
} else {
this._timelineMemorySplitter.removeStyleClass("hidden");
this._memoryStatistics.show();
this.splitView.element.style.bottom = "auto";
this._setSplitterPosition(600);
}
+ this._refresh();
},
_toggleTimelineButtonClicked: function()
@@ -787,12 +789,16 @@
this._itemsGraphsElement.appendChild(this._expandElements);
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.
- var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;
if (updateBoundaries)
- this._timelineGrid.updateDividers(true, this._calculator, timelinePaddingLeft);
+ this._timelineGrid.updateDividers(true, this._calculator, this.timelinePaddingLeft);
this._adjustScrollPosition((recordsInWindow.length + 1) * rowHeight);
},
+ get timelinePaddingLeft()
+ {
+ return this._calculator.windowLeft === 0 ? this._expandOffset : 0;
+ },
+
_adjustScrollPosition: function(totalHeight)
{
// Prevent the container from being scrolled off the end.
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (109101 => 109102)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-02-28 13:30:26 UTC (rev 109101)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2012-02-28 14:22:06 UTC (rev 109102)
@@ -559,6 +559,14 @@
border-top: 1px solid #AAA;
}
+#memory-graphs-canvas-container {
+ border-right: 1px solid #AAA;
+}
+
+#memory-graphs-canvas-container .resources-dividers {
+ top: 15px;
+}
+
#memory-graphs-container .split-view-contents {
overflow: hidden;
}
