Modified: trunk/Source/WebCore/ChangeLog (87775 => 87776)
--- trunk/Source/WebCore/ChangeLog 2011-06-01 06:18:43 UTC (rev 87775)
+++ trunk/Source/WebCore/ChangeLog 2011-06-01 06:25:44 UTC (rev 87776)
@@ -1,3 +1,25 @@
+2011-05-31 Tonis Tiigi <[email protected]>
+
+ Reviewed by Pavel Feldman.
+
+ Web Inspector: Timeline panel improvements for managing current selection
+ https://bugs.webkit.org/show_bug.cgi?id=61468
+
+ Enables X-axis dragging of the selected area.
+ Double click zoom-out.
+ Fixes slightly wrong selection area position.
+
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane):
+ (WebInspector.TimelineOverviewPane.prototype._dragWindow):
+ (WebInspector.TimelineOverviewPane.prototype._endWindowSelectorDragging):
+ (WebInspector.TimelineOverviewPane.prototype._resizeWindowRight):
+ (WebInspector.TimelineOverviewPane.prototype._resizeWindowMaximum):
+ (WebInspector.TimelineOverviewPane.prototype.scrollWindow):
+ (WebInspector.TimelineOverviewPane.prototype._createTimelineCategoryStatusBarCheckbox):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel):
+
2011-05-31 Keishi Hattori <[email protected]>
Reviewed by Kent Tamura.
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (87775 => 87776)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2011-06-01 06:18:43 UTC (rev 87775)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2011-06-01 06:25:44 UTC (rev 87776)
@@ -43,6 +43,8 @@
this._overviewGrid.element.id = "timeline-overview-grid";
this._overviewGrid.itemsGraphsElement.id = "timeline-overview-timelines";
this._overviewGrid.element.addEventListener("mousedown", this._dragWindow.bind(this), true);
+ this._overviewGrid.element.addEventListener("mousewheel", this.scrollWindow.bind(this), true);
+ this._overviewGrid.element.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
this._heapGraph = new WebInspector.HeapGraph();
this._heapGraph.element.id = "timeline-overview-memory";
@@ -87,8 +89,12 @@
this.windowRight = 1.0;
}
-WebInspector.TimelineOverviewPane.minSelectableSize = 12;
+WebInspector.TimelineOverviewPane.MinSelectableSize = 12;
+WebInspector.TimelineOverviewPane.WindowScrollSpeedFactor = .3;
+
+WebInspector.TimelineOverviewPane.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
+
WebInspector.TimelineOverviewPane.prototype = {
showTimelines: function(event) {
this._heapGraph.hide();
@@ -233,7 +239,7 @@
while (node) {
if (node === this._overviewGrid._dividersLabelBarElement) {
WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX,
- this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "ew-resize");
+ this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset, this._rightResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset), this._endWindowDragging.bind(this), event, "ew-resize");
break;
} else if (node === this._overviewGrid.element) {
var position = event.pageX - this._overviewGrid.element.offsetLeft;
@@ -259,11 +265,11 @@
WebInspector.elementDragEnd(event);
var window = this._overviewWindowSelector._close(event.pageX - this._overviewGrid.element.offsetLeft);
delete this._overviewWindowSelector;
- if (window.end - window.start < WebInspector.TimelineOverviewPane.minSelectableSize)
- if (this._overviewGrid.itemsGraphsElement.offsetWidth - window.end > WebInspector.TimelineOverviewPane.minSelectableSize)
- window.end = window.start + WebInspector.TimelineOverviewPane.minSelectableSize;
+ if (window.end - window.start < WebInspector.TimelineOverviewPane.MinSelectableSize)
+ if (this._overviewGrid.itemsGraphsElement.offsetWidth - window.end > WebInspector.TimelineOverviewPane.MinSelectableSize)
+ window.end = window.start + WebInspector.TimelineOverviewPane.MinSelectableSize;
else
- window.start = window.end - WebInspector.TimelineOverviewPane.minSelectableSize;
+ window.start = window.end - WebInspector.TimelineOverviewPane.MinSelectableSize;
this._setWindowPosition(window.start, window.end);
},
@@ -303,11 +309,16 @@
// Glue to edge.
if (end > this._overviewGrid.element.clientWidth - 10)
end = this._overviewGrid.element.clientWidth;
- else if (end < this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize)
- end = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.minSelectableSize;
+ else if (end < this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.MinSelectableSize)
+ end = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.MinSelectableSize;
this._setWindowPosition(null, end);
},
+ _resizeWindowMaximum: function()
+ {
+ this._setWindowPosition(0, this._overviewGrid.element.clientWidth);
+ },
+
_setWindowPosition: function(start, end)
{
const rulerAdjustment = 1 / this._overviewGrid.element.clientWidth;
@@ -331,6 +342,12 @@
WebInspector.elementDragEnd(event);
},
+ scrollWindow: function(event)
+ {
+ if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX !== 0)
+ this._windowDragging(event.pageX + Math.round(event.wheelDeltaX * WebInspector.TimelineOverviewPane.WindowScrollSpeedFactor), this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset, this._rightResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.ResizerOffset, event);
+ },
+
_createTimelineCategoryStatusBarCheckbox: function(category, onCheckboxClicked)
{
var labelContainer = document.createElement("div");
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (87775 => 87776)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2011-06-01 06:18:43 UTC (rev 87775)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2011-06-01 06:25:44 UTC (rev 87776)
@@ -59,6 +59,7 @@
this._timelineGrid = new WebInspector.TimelineGrid();
this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
this._itemsGraphsElement.id = "timeline-graphs";
+ this._itemsGraphsElement.addEventListener("mousewheel", this._overviewPane.scrollWindow.bind(this._overviewPane), true);
this._containerContentElement.appendChild(this._timelineGrid.element);
this._topGapElement = document.createElement("div");
