Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (107708 => 107709)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-14 12:55:56 UTC (rev 107708)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-14 14:24:59 UTC (rev 107709)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2012 Google Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
@@ -38,9 +38,6 @@
this._overviewGrid = new WebInspector.TimelineGrid();
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";
@@ -60,32 +57,8 @@
this._overviewGrid.setScrollAndDividerTop(0, 0);
- this._overviewWindowElement = document.createElement("div");
- this._overviewWindowElement.id = "timeline-overview-window";
- this._overviewGrid.element.appendChild(this._overviewWindowElement);
-
- this._overviewWindowBordersElement = document.createElement("div");
- this._overviewWindowBordersElement.className = "timeline-overview-window-rulers";
- this._overviewGrid.element.appendChild(this._overviewWindowBordersElement);
-
- var overviewDividersBackground = document.createElement("div");
- overviewDividersBackground.className = "timeline-overview-dividers-background";
- this._overviewGrid.element.appendChild(overviewDividersBackground);
-
- this._leftResizeElement = document.createElement("div");
- this._leftResizeElement.className = "timeline-window-resizer";
- this._leftResizeElement.style.left = 0;
- this._overviewGrid.element.appendChild(this._leftResizeElement);
-
- this._rightResizeElement = document.createElement("div");
- this._rightResizeElement.className = "timeline-window-resizer timeline-window-resizer-right";
- this._rightResizeElement.style.right = 0;
- this._overviewGrid.element.appendChild(this._rightResizeElement);
-
+ this._overviewWindow = new WebInspector.TimelineOverviewWindow(this._overviewGrid.element, presentationModel);
this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
-
- this.windowLeft = 0.0;
- this.windowRight = 1.0;
}
WebInspector.TimelineOverviewPane.MinSelectableSize = 12;
@@ -202,16 +175,63 @@
reset: function()
{
- this.windowLeft = 0.0;
- this.windowRight = 1.0;
+ this._overviewWindow.reset();
+ this._overviewCalculator.reset();
+ this._overviewGrid.updateDividers(true, this._overviewCalculator);
+ },
+
+ scrollWindow: function(event)
+ {
+ this._overviewWindow.scrollWindow(event);
+ }
+}
+
+/**
+ * @constructor
+ * @param {Element} parentElement
+ * @param {WebInspector.TimelinePresentationModel} model
+ */
+WebInspector.TimelineOverviewWindow = function(parentElement, model)
+{
+ this._parentElement = parentElement;
+ this._presentationModel = model;
+
+ this._parentElement.addEventListener("mousedown", this._dragWindow.bind(this), true);
+ this._parentElement.addEventListener("mousewheel", this.scrollWindow.bind(this), true);
+ this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
+
+ this._overviewWindowElement = document.createElement("div");
+ this._overviewWindowElement.id = "timeline-overview-window";
+ parentElement.appendChild(this._overviewWindowElement);
+
+ this._overviewWindowBordersElement = document.createElement("div");
+ this._overviewWindowBordersElement.className = "timeline-overview-window-rulers";
+ parentElement.appendChild(this._overviewWindowBordersElement);
+
+ var overviewDividersBackground = document.createElement("div");
+ overviewDividersBackground.className = "timeline-overview-dividers-background";
+ parentElement.appendChild(overviewDividersBackground);
+
+ this._leftResizeElement = document.createElement("div");
+ this._leftResizeElement.className = "timeline-window-resizer";
+ this._leftResizeElement.style.left = 0;
+ parentElement.appendChild(this._leftResizeElement);
+
+ this._rightResizeElement = document.createElement("div");
+ this._rightResizeElement.className = "timeline-window-resizer timeline-window-resizer-right";
+ this._rightResizeElement.style.right = 0;
+ parentElement.appendChild(this._rightResizeElement);
+}
+
+WebInspector.TimelineOverviewWindow.prototype = {
+ reset: function()
+ {
this._overviewWindowElement.style.left = "0%";
this._overviewWindowElement.style.width = "100%";
this._overviewWindowBordersElement.style.left = "0%";
this._overviewWindowBordersElement.style.right = "0%";
this._leftResizeElement.style.left = "0%";
this._rightResizeElement.style.left = "100%";
- this._overviewCalculator.reset();
- this._overviewGrid.updateDividers(true, this._overviewCalculator);
},
_resizeWindow: function(resizeElement, event)
@@ -222,9 +242,9 @@
_windowResizeDragging: function(resizeElement, event)
{
if (resizeElement === this._leftResizeElement)
- this._resizeWindowLeft(event.pageX - this._overviewGrid.element.offsetLeft);
+ this._resizeWindowLeft(event.pageX - this._parentElement.offsetLeft);
else
- this._resizeWindowRight(event.pageX - this._overviewGrid.element.offsetLeft);
+ this._resizeWindowRight(event.pageX - this._parentElement.offsetLeft);
event.preventDefault();
},
@@ -232,13 +252,13 @@
{
var node = event.target;
while (node) {
- if (node === this._overviewGrid._dividersLabelBarElement) {
+ if (node.hasStyleClass("resources-dividers-label-bar")) {
WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX,
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;
- this._overviewWindowSelector = new WebInspector.TimelinePanel.WindowSelector(this._overviewGrid.element, position, event);
+ } else if (node === this._parentElement) {
+ var position = event.pageX - this._parentElement.offsetLeft;
+ this._overviewWindowSelector = new WebInspector.TimelinePanel.WindowSelector(this._parentElement, position);
WebInspector.elementDragStart(null, this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), event, "ew-resize");
break;
} else if (node === this._leftResizeElement || node === this._rightResizeElement) {
@@ -251,20 +271,21 @@
_windowSelectorDragging: function(event)
{
- this._overviewWindowSelector._updatePosition(event.pageX - this._overviewGrid.element.offsetLeft);
+ this._overviewWindowSelector._updatePosition(event.pageX - this._parentElement.offsetLeft);
event.preventDefault();
},
_endWindowSelectorDragging: function(event)
{
WebInspector.elementDragEnd(event);
- var window = this._overviewWindowSelector._close(event.pageX - this._overviewGrid.element.offsetLeft);
+ var window = this._overviewWindowSelector._close(event.pageX - this._parentElement.offsetLeft);
delete this._overviewWindowSelector;
- if (window.end - window.start < WebInspector.TimelineOverviewPane.MinSelectableSize)
- if (this._overviewGrid.itemsGraphsElement.offsetWidth - window.end > WebInspector.TimelineOverviewPane.MinSelectableSize)
+ if (window.end - window.start < WebInspector.TimelineOverviewPane.MinSelectableSize) {
+ if (this._parentElement.clientWidth - window.end > WebInspector.TimelineOverviewPane.MinSelectableSize)
window.end = window.start + WebInspector.TimelineOverviewPane.MinSelectableSize;
else
window.start = window.end - WebInspector.TimelineOverviewPane.MinSelectableSize;
+ }
this._setWindowPosition(window.start, window.end);
},
@@ -280,8 +301,8 @@
end = windowSize;
}
- if (end > this._overviewGrid.element.clientWidth) {
- end = this._overviewGrid.element.clientWidth;
+ if (end > this._parentElement.clientWidth) {
+ end = this._parentElement.clientWidth;
start = end - windowSize;
}
this._setWindowPosition(start, end);
@@ -302,8 +323,8 @@
_resizeWindowRight: function(end)
{
// Glue to edge.
- if (end > this._overviewGrid.element.clientWidth - 10)
- end = this._overviewGrid.element.clientWidth;
+ if (end > this._parentElement.clientWidth - 10)
+ end = this._parentElement.clientWidth;
else if (end < this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.MinSelectableSize)
end = this._leftResizeElement.offsetLeft + WebInspector.TimelineOverviewPane.MinSelectableSize;
this._setWindowPosition(null, end);
@@ -311,25 +332,28 @@
_resizeWindowMaximum: function()
{
- this._setWindowPosition(0, this._overviewGrid.element.clientWidth);
+ this._setWindowPosition(0, this._parentElement.clientWidth);
},
_setWindowPosition: function(start, end)
{
- const rulerAdjustment = 1 / this._overviewGrid.element.clientWidth;
+ var clientWidth = this._parentElement.clientWidth;
+ const rulerAdjustment = 1 / clientWidth;
+ var windowLeft = this._presentationModel.windowLeft;
+ var windowRight = this._presentationModel.windowRight;
if (typeof start === "number") {
- this.windowLeft = start / this._overviewGrid.element.clientWidth;
- this._leftResizeElement.style.left = this.windowLeft * 100 + "%";
- this._overviewWindowElement.style.left = this.windowLeft * 100 + "%";
- this._overviewWindowBordersElement.style.left = (this.windowLeft - rulerAdjustment) * 100 + "%";
+ windowLeft = start / clientWidth;
+ this._leftResizeElement.style.left = windowLeft * 100 + "%";
+ this._overviewWindowElement.style.left = windowLeft * 100 + "%";
+ this._overviewWindowBordersElement.style.left = (windowLeft - rulerAdjustment) * 100 + "%";
}
if (typeof end === "number") {
- this.windowRight = end / this._overviewGrid.element.clientWidth;
- this._rightResizeElement.style.left = this.windowRight * 100 + "%";
+ windowRight = end / clientWidth;
+ this._rightResizeElement.style.left = windowRight * 100 + "%";
}
- this._overviewWindowElement.style.width = (this.windowRight - this.windowLeft) * 100 + "%";
- this._overviewWindowBordersElement.style.right = (1 - this.windowRight + 2 * rulerAdjustment) * 100 + "%";
- this._presentationModel.setWindowPosition(this.windowLeft, this.windowRight);
+ this._overviewWindowElement.style.width = (windowRight - windowLeft) * 100 + "%";
+ this._overviewWindowBordersElement.style.right = (1 - windowRight + 2 * rulerAdjustment) * 100 + "%";
+ this._presentationModel.setWindowPosition(windowLeft, windowRight);
},
_endWindowDragging: function(event)
@@ -344,8 +368,6 @@
}
}
-WebInspector.TimelineOverviewPane.prototype.__proto__ = WebInspector.Object.prototype;
-
/**
* @constructor
*/
@@ -438,7 +460,7 @@
/**
* @constructor
*/
-WebInspector.TimelinePanel.WindowSelector = function(parent, position, event)
+WebInspector.TimelinePanel.WindowSelector = function(parent, position)
{
this._startPosition = position;
this._width = parent.offsetWidth;
