Diff
Modified: trunk/Source/WebCore/ChangeLog (146203 => 146204)
--- trunk/Source/WebCore/ChangeLog 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/ChangeLog 2013-03-19 14:47:15 UTC (rev 146204)
@@ -1,3 +1,60 @@
+2013-03-19 Ilya Tikhonovsky <loi...@chromium.org>
+
+ Web Inspector: move OverviewGrid and OverviewWindow into separate file.
+ https://bugs.webkit.org/show_bug.cgi?id=112693
+
+ Reviewed by Yury Semikhatsky.
+
+ It is the third patch for the meta bug "Web Inspector: meta bug: extract OverviewGrid from TimelineOverviewPane"
+ It just moves the OverviewGrid and the related classes into its own file.
+
+ * WebCore.gypi:
+ * WebCore.vcproj/WebCore.vcproj:
+ * WebCore.vcxproj/WebCore.vcxproj:
+ * WebCore.vcxproj/WebCore.vcxproj.filters:
+ * inspector/compile-front-end.py:
+ * inspector/front-end/OverviewGrid.js: Added.
+ (WebInspector.OverviewGrid):
+ (WebInspector.OverviewGrid.prototype.itemsGraphsElement):
+ (WebInspector.OverviewGrid.prototype.insertBeforeItemsGraphsElement):
+ (WebInspector.OverviewGrid.prototype.clientWidth):
+ (WebInspector.OverviewGrid.prototype.showItemsGraphsElement):
+ (WebInspector.OverviewGrid.prototype.hideItemsGraphsElement):
+ (WebInspector.OverviewGrid.prototype.updateDividers):
+ (WebInspector.OverviewGrid.prototype.addEventDividers):
+ (WebInspector.OverviewGrid.prototype.removeEventDividers):
+ (WebInspector.OverviewGrid.prototype.setWindowPosition):
+ (WebInspector.OverviewGrid.prototype.reset):
+ (WebInspector.OverviewGrid.prototype.windowLeft):
+ (WebInspector.OverviewGrid.prototype.windowRight):
+ (WebInspector.OverviewGrid.prototype.setWindow):
+ (WebInspector.OverviewGrid.prototype.addEventListener):
+ (WebInspector.OverviewGrid.Window):
+ (WebInspector.OverviewGrid.Window.prototype.reset):
+ (WebInspector.OverviewGrid.Window.prototype._leftResizeElementDragging):
+ (WebInspector.OverviewGrid.Window.prototype._rightResizeElementDragging):
+ (WebInspector.OverviewGrid.Window.prototype._startWindowSelectorDragging):
+ (WebInspector.OverviewGrid.Window.prototype._windowSelectorDragging):
+ (WebInspector.OverviewGrid.Window.prototype._endWindowSelectorDragging):
+ (WebInspector.OverviewGrid.Window.prototype._startWindowDragging):
+ (WebInspector.OverviewGrid.Window.prototype._windowDragging):
+ (WebInspector.OverviewGrid.Window.prototype._endWindowDragging):
+ (WebInspector.OverviewGrid.Window.prototype._moveWindow):
+ (WebInspector.OverviewGrid.Window.prototype._resizeWindowLeft):
+ (WebInspector.OverviewGrid.Window.prototype._resizeWindowRight):
+ (WebInspector.OverviewGrid.Window.prototype._resizeWindowMaximum):
+ (WebInspector.OverviewGrid.Window.prototype._setWindow):
+ (WebInspector.OverviewGrid.Window.prototype._setWindowPosition):
+ (WebInspector.OverviewGrid.Window.prototype._onMouseWheel):
+ (WebInspector.OverviewGrid.Window.prototype._zoom):
+ (WebInspector.OverviewGrid.WindowSelector):
+ (WebInspector.OverviewGrid.WindowSelector.prototype._createSelectorElement):
+ (WebInspector.OverviewGrid.WindowSelector.prototype._close):
+ (WebInspector.OverviewGrid.WindowSelector.prototype._updatePosition):
+ * inspector/front-end/TimelineOverviewPane.js:
+ * inspector/front-end/WebKit.qrc:
+ * inspector/front-end/inspector.html:
+
2013-03-19 Allan Sandfeld Jensen <allan.jen...@digia.com>
[Qt] Monospace font does not render in proper sizes
Modified: trunk/Source/WebCore/WebCore.gypi (146203 => 146204)
--- trunk/Source/WebCore/WebCore.gypi 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/WebCore.gypi 2013-03-19 14:47:15 UTC (rev 146204)
@@ -5386,6 +5386,7 @@
'inspector/front-end/ObjectPopoverHelper.js',
'inspector/front-end/ObjectPropertiesSection.js',
'inspector/front-end/OverridesView.js',
+ 'inspector/front-end/OverviewGrid.js',
'inspector/front-end/Panel.js',
'inspector/front-end/PanelEnablerView.js',
'inspector/front-end/ParsedURL.js',
Modified: trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj (146203 => 146204)
--- trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj 2013-03-19 14:47:15 UTC (rev 146204)
@@ -77706,6 +77706,10 @@
>
</File>
<File
+ RelativePath="..\inspector\front-end\OverviewGrid.js"
+ >
+ </File>
+ <File
RelativePath="..\inspector\front-end\Panel.js"
>
</File>
Modified: trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj (146203 => 146204)
--- trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj 2013-03-19 14:47:15 UTC (rev 146204)
@@ -13520,6 +13520,7 @@
<None Include="..\inspector\front-end\ObjectPopoverHelper.js" />
<None Include="..\inspector\front-end\ObjectPropertiesSection.js" />
<None Include="..\inspector\front-end\OverridesView.js" />
+ <None Include="..\inspector\front-end\OverviewGrid.js" />
<None Include="..\inspector\front-end\Panel.js" />
<None Include="..\inspector\front-end\panelEnablerView.css" />
<None Include="..\inspector\front-end\PanelEnablerView.js" />
@@ -13638,4 +13639,4 @@
<Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
<ImportGroup Label="ExtensionTargets">
</ImportGroup>
-</Project>
\ No newline at end of file
+</Project>
Modified: trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj.filters (146203 => 146204)
--- trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj.filters 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/WebCore.vcxproj/WebCore.vcxproj.filters 2013-03-19 14:47:15 UTC (rev 146204)
@@ -14893,6 +14893,9 @@
<None Include="..\inspector\front-end\OverridesView.js">
<Filter>inspector\front-end</Filter>
</None>
+ <None Include="..\inspector\front-end\OverviewGrid.js">
+ <Filter>inspector\front-end</Filter>
+ </None>
<None Include="..\inspector\front-end\Panel.js">
<Filter>inspector\front-end</Filter>
</None>
@@ -15345,4 +15348,4 @@
<Filter>rendering</Filter>
</CustomBuildStep>
</ItemGroup>
-</Project>
\ No newline at end of file
+</Project>
Modified: trunk/Source/WebCore/inspector/compile-front-end.py (146203 => 146204)
--- trunk/Source/WebCore/inspector/compile-front-end.py 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/inspector/compile-front-end.py 2013-03-19 14:47:15 UTC (rev 146204)
@@ -135,6 +135,7 @@
"HelpScreen.js",
"InspectorView.js",
"KeyboardShortcut.js",
+ "OverviewGrid.js",
"Panel.js",
"PanelEnablerView.js",
"Placard.js",
Added: trunk/Source/WebCore/inspector/front-end/OverviewGrid.js (0 => 146204)
--- trunk/Source/WebCore/inspector/front-end/OverviewGrid.js (rev 0)
+++ trunk/Source/WebCore/inspector/front-end/OverviewGrid.js 2013-03-19 14:47:15 UTC (rev 146204)
@@ -0,0 +1,488 @@
+/*
+ * Copyright (C) 2013 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
+ * met:
+ *
+ * * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ * * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @param {string} prefix
+ */
+WebInspector.OverviewGrid = function(prefix)
+{
+ this.element = document.createElement("div");
+ this.element.className = "fill";
+ this.element.id = prefix + "-overview-container";
+
+ this._grid = new WebInspector.TimelineGrid();
+ this._grid.element.id = prefix + "-overview-grid";
+ this._grid.itemsGraphsElement.id = prefix + "-overview-timelines";
+ this._grid.setScrollAndDividerTop(0, 0);
+
+ this.element.appendChild(this._grid.element);
+
+ this._window = new WebInspector.OverviewGrid.Window(this.element, this._grid.dividersLabelBarElement, prefix);
+}
+
+WebInspector.OverviewGrid.prototype = {
+ itemsGraphsElement: function()
+ {
+ return this._grid.itemsGraphsElement;
+ },
+
+ /**
+ * @param {!Node} child
+ */
+ insertBeforeItemsGraphsElement: function(child)
+ {
+ this._grid.element.insertBefore(child, this._grid.itemsGraphsElement);
+ },
+
+ /**
+ * @return {number}
+ */
+ clientWidth: function()
+ {
+ return this.element.clientWidth;
+ },
+
+ showItemsGraphsElement: function()
+ {
+ this._grid.itemsGraphsElement.removeStyleClass("hidden");
+ },
+
+ hideItemsGraphsElement: function()
+ {
+ this._grid.itemsGraphsElement.addStyleClass("hidden");
+ },
+
+ /**
+ * @param {!WebInspector.TimelineOverviewCalculator} calculator
+ */
+ updateDividers: function(calculator)
+ {
+ this._grid.updateDividers(calculator);
+ },
+
+ /**
+ * @param {!Array.<Element>} dividers
+ */
+ addEventDividers: function(dividers)
+ {
+ this._grid.addEventDividers(dividers);
+ },
+
+ removeEventDividers: function()
+ {
+ this._grid.removeEventDividers();
+ },
+
+ /**
+ * @param {?number} start
+ * @param {?number} end
+ */
+ setWindowPosition: function(start, end)
+ {
+ this._window._setWindowPosition(start, end);
+ },
+
+ reset: function()
+ {
+ this._window.reset();
+ },
+
+ /**
+ * @return {number}
+ */
+ windowLeft: function()
+ {
+ return this._window.windowLeft;
+ },
+
+ /**
+ * @return {number}
+ */
+ windowRight: function()
+ {
+ return this._window.windowRight;
+ },
+
+ /**
+ * @param {number} left
+ * @param {number} right
+ */
+ setWindow: function(left, right)
+ {
+ this._window._setWindow(left, right);
+ },
+
+ /**
+ * @param {string} eventType
+ * @param {function(WebInspector.Event)} listener
+ * @param {Object=} thisObject
+ */
+ addEventListener: function(eventType, listener, thisObject)
+ {
+ this._window.addEventListener(eventType, listener, thisObject);
+ }
+}
+
+
+WebInspector.OverviewGrid.MinSelectableSize = 12;
+
+WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3;
+
+WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @param {Element} parentElement
+ * @param {Element} dividersLabelBarElement
+ * @param {string} prefix
+ */
+WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarElement, prefix)
+{
+ this._parentElement = parentElement;
+ this._dividersLabelBarElement = dividersLabelBarElement;
+ this._prefix = prefix;
+
+ WebInspector.installDragHandle(this._parentElement, this._startWindowSelectorDragging.bind(this), this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), "ew-resize");
+ WebInspector.installDragHandle(this._dividersLabelBarElement, this._startWindowDragging.bind(this), this._windowDragging.bind(this), this._endWindowDragging.bind(this), "ew-resize");
+
+ this.windowLeft = 0.0;
+ this.windowRight = 1.0;
+
+ this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
+ this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
+
+ this._overviewWindowElement = document.createElement("div");
+ this._overviewWindowElement.className = prefix + "-overview-window";
+ parentElement.appendChild(this._overviewWindowElement);
+
+ this._overviewWindowBordersElement = document.createElement("div");
+ this._overviewWindowBordersElement.className = prefix + "-overview-window-rulers";
+ parentElement.appendChild(this._overviewWindowBordersElement);
+
+ var overviewDividersBackground = document.createElement("div");
+ overviewDividersBackground.className = prefix + "-overview-dividers-background";
+ parentElement.appendChild(overviewDividersBackground);
+
+ this._leftResizeElement = document.createElement("div");
+ this._leftResizeElement.className = prefix + "-window-resizer";
+ this._leftResizeElement.style.left = 0;
+ parentElement.appendChild(this._leftResizeElement);
+ WebInspector.installDragHandle(this._leftResizeElement, null, this._leftResizeElementDragging.bind(this), null, "ew-resize");
+
+ this._rightResizeElement = document.createElement("div");
+ this._rightResizeElement.className = prefix + "-window-resizer " + prefix + "-window-resizer-right";
+ this._rightResizeElement.style.right = 0;
+ parentElement.appendChild(this._rightResizeElement);
+ WebInspector.installDragHandle(this._rightResizeElement, null, this._rightResizeElementDragging.bind(this), null, "ew-resize");
+}
+
+WebInspector.OverviewGrid.Events = {
+ WindowChanged: "WindowChanged"
+}
+
+WebInspector.OverviewGrid.Window.prototype = {
+ reset: function()
+ {
+ this.windowLeft = 0.0;
+ this.windowRight = 1.0;
+
+ 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%";
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _leftResizeElementDragging: function(event)
+ {
+ this._resizeWindowLeft(event.pageX - this._parentElement.offsetLeft);
+ event.preventDefault();
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _rightResizeElementDragging: function(event)
+ {
+ this._resizeWindowRight(event.pageX - this._parentElement.offsetLeft);
+ event.preventDefault();
+ },
+
+ /**
+ * @param {Event} event
+ * @return {boolean}
+ */
+ _startWindowSelectorDragging: function(event)
+ {
+ var position = event.pageX - this._parentElement.offsetLeft;
+ this._overviewWindowSelector = new WebInspector.OverviewGrid.WindowSelector(this._parentElement, position, this._prefix);
+ return true;
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _windowSelectorDragging: function(event)
+ {
+ this._overviewWindowSelector._updatePosition(event.pageX - this._parentElement.offsetLeft);
+ event.preventDefault();
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _endWindowSelectorDragging: function(event)
+ {
+ var window = this._overviewWindowSelector._close(event.pageX - this._parentElement.offsetLeft);
+ delete this._overviewWindowSelector;
+ if (window.end === window.start) { // Click, not drag.
+ var middle = window.end;
+ window.start = Math.max(0, middle - WebInspector.OverviewGrid.MinSelectableSize / 2);
+ window.end = Math.min(this._parentElement.clientWidth, middle + WebInspector.OverviewGrid.MinSelectableSize / 2);
+ } else if (window.end - window.start < WebInspector.OverviewGrid.MinSelectableSize) {
+ if (this._parentElement.clientWidth - window.end > WebInspector.OverviewGrid.MinSelectableSize)
+ window.end = window.start + WebInspector.OverviewGrid.MinSelectableSize;
+ else
+ window.start = window.end - WebInspector.OverviewGrid.MinSelectableSize;
+ }
+ this._setWindowPosition(window.start, window.end);
+ },
+
+ /**
+ * @param {Event} event
+ * @return {boolean}
+ */
+ _startWindowDragging: function(event)
+ {
+ var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ this._dragOffset = windowLeft - event.pageX;
+ return true;
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _windowDragging: function(event)
+ {
+ var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ var start = this._dragOffset + event.pageX;
+ this._moveWindow(start);
+ event.preventDefault();
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _endWindowDragging: function(event)
+ {
+ delete this._dragOffset;
+ },
+
+ /**
+ * @param {number} start
+ */
+ _moveWindow: function(start)
+ {
+ var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ var windowRight = this._rightResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ var windowSize = windowRight - windowLeft;
+ var end = start + windowSize;
+
+ if (start < 0) {
+ start = 0;
+ end = windowSize;
+ }
+
+ if (end > this._parentElement.clientWidth) {
+ end = this._parentElement.clientWidth;
+ start = end - windowSize;
+ }
+ this._setWindowPosition(start, end);
+ },
+
+ /**
+ * @param {number} start
+ */
+ _resizeWindowLeft: function(start)
+ {
+ // Glue to edge.
+ if (start < 10)
+ start = 0;
+ else if (start > this._rightResizeElement.offsetLeft - 4)
+ start = this._rightResizeElement.offsetLeft - 4;
+ this._setWindowPosition(start, null);
+ },
+
+ /**
+ * @param {number} end
+ */
+ _resizeWindowRight: function(end)
+ {
+ // Glue to edge.
+ if (end > this._parentElement.clientWidth - 10)
+ end = this._parentElement.clientWidth;
+ else if (end < this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize)
+ end = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize;
+ this._setWindowPosition(null, end);
+ },
+
+ _resizeWindowMaximum: function()
+ {
+ this._setWindowPosition(0, this._parentElement.clientWidth);
+ },
+
+ /**
+ * @param {number} left
+ * @param {number} right
+ */
+ _setWindow: function(left, right)
+ {
+ var clientWidth = this._parentElement.clientWidth;
+ this._setWindowPosition(left * clientWidth, right * clientWidth);
+ },
+
+ /**
+ * @param {?number} start
+ * @param {?number} end
+ */
+ _setWindowPosition: function(start, end)
+ {
+ var clientWidth = this._parentElement.clientWidth;
+ const rulerAdjustment = 1 / clientWidth;
+ if (typeof start === "number") {
+ this.windowLeft = start / clientWidth;
+ this._leftResizeElement.style.left = this.windowLeft * 100 + "%";
+ this._overviewWindowElement.style.left = this.windowLeft * 100 + "%";
+ this._overviewWindowBordersElement.style.left = (this.windowLeft - rulerAdjustment) * 100 + "%";
+ }
+ if (typeof end === "number") {
+ this.windowRight = end / clientWidth;
+ this._rightResizeElement.style.left = this.windowRight * 100 + "%";
+ }
+ this._overviewWindowElement.style.width = (this.windowRight - this.windowLeft) * 100 + "%";
+ this._overviewWindowBordersElement.style.right = (1 - this.windowRight + 2 * rulerAdjustment) * 100 + "%";
+ this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
+ },
+
+ /**
+ * @param {Event} event
+ */
+ _onMouseWheel: function(event)
+ {
+ const zoomFactor = 1.1;
+ const mouseWheelZoomSpeed = 1 / 120;
+
+ if (typeof event.wheelDeltaY === "number" && event.wheelDeltaY) {
+ var referencePoint = event.pageX - this._parentElement.offsetLeft;
+ this._zoom(Math.pow(zoomFactor, -event.wheelDeltaY * mouseWheelZoomSpeed), referencePoint);
+ }
+ if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX) {
+ var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ var start = windowLeft - Math.round(event.wheelDeltaX * WebInspector.OverviewGrid.WindowScrollSpeedFactor);
+ this._moveWindow(start);
+ event.preventDefault();
+ }
+ },
+
+ /**
+ * @param {number} factor
+ * @param {number} referencePoint
+ */
+ _zoom: function(factor, referencePoint)
+ {
+ var left = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+ var right = this._rightResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
+
+ var delta = factor * (right - left);
+ if (factor < 1 && delta < WebInspector.OverviewGrid.MinSelectableSize)
+ return;
+ var max = this._parentElement.clientWidth;
+ left = Math.max(0, Math.min(max - delta, referencePoint + (left - referencePoint) * factor));
+ right = Math.min(max, left + delta);
+ this._setWindowPosition(left, right);
+ },
+
+ __proto__: WebInspector.Object.prototype
+}
+
+/**
+ * @constructor
+ * @param {string} prefix
+ */
+WebInspector.OverviewGrid.WindowSelector = function(parent, position, prefix)
+{
+ this._prefix = prefix;
+ this._startPosition = position;
+ this._width = parent.offsetWidth;
+ this._windowSelector = document.createElement("div");
+ this._windowSelector.className = prefix + "-window-selector";
+ this._windowSelector.style.left = this._startPosition + "px";
+ this._windowSelector.style.right = this._width - this._startPosition + + "px";
+ parent.appendChild(this._windowSelector);
+}
+
+WebInspector.OverviewGrid.WindowSelector.prototype = {
+ _createSelectorElement: function(parent, left, width, height)
+ {
+ var selectorElement = document.createElement("div");
+ selectorElement.className = this._prefix + "-window-selector";
+ selectorElement.style.left = left + "px";
+ selectorElement.style.width = width + "px";
+ selectorElement.style.top = "0px";
+ selectorElement.style.height = height + "px";
+ parent.appendChild(selectorElement);
+ return selectorElement;
+ },
+
+ _close: function(position)
+ {
+ position = Math.max(0, Math.min(position, this._width));
+ this._windowSelector.parentNode.removeChild(this._windowSelector);
+ return this._startPosition < position ? {start: this._startPosition, end: position} : {start: position, end: this._startPosition};
+ },
+
+ _updatePosition: function(position)
+ {
+ position = Math.max(0, Math.min(position, this._width));
+ if (position < this._startPosition) {
+ this._windowSelector.style.left = position + "px";
+ this._windowSelector.style.right = this._width - this._startPosition + "px";
+ } else {
+ this._windowSelector.style.left = this._startPosition + "px";
+ this._windowSelector.style.right = this._width - position + "px";
+ }
+ }
+}
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (146203 => 146204)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2013-03-19 14:47:15 UTC (rev 146204)
@@ -99,136 +99,6 @@
this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
}
-/**
- * @constructor
- * @param {string} prefix
- */
-WebInspector.OverviewGrid = function(prefix)
-{
- this.element = document.createElement("div");
- this.element.className = "fill";
- this.element.id = prefix + "-overview-container";
-
- this._grid = new WebInspector.TimelineGrid();
- this._grid.element.id = prefix + "-overview-grid";
- this._grid.itemsGraphsElement.id = prefix + "-overview-timelines";
- this._grid.setScrollAndDividerTop(0, 0);
-
- this.element.appendChild(this._grid.element);
-
- this._window = new WebInspector.OverviewGrid.Window(this.element, this._grid.dividersLabelBarElement, prefix);
-}
-
-WebInspector.OverviewGrid.prototype = {
- itemsGraphsElement: function()
- {
- return this._grid.itemsGraphsElement;
- },
-
- /**
- * @param {!Node} child
- */
- insertBeforeItemsGraphsElement: function(child)
- {
- this._grid.element.insertBefore(child, this._grid.itemsGraphsElement);
- },
-
- /**
- * @return {number}
- */
- clientWidth: function()
- {
- return this.element.clientWidth;
- },
-
- showItemsGraphsElement: function()
- {
- this._grid.itemsGraphsElement.removeStyleClass("hidden");
- },
-
- hideItemsGraphsElement: function()
- {
- this._grid.itemsGraphsElement.addStyleClass("hidden");
- },
-
- /**
- * @param {!WebInspector.TimelineOverviewCalculator} calculator
- */
- updateDividers: function(calculator)
- {
- this._grid.updateDividers(calculator);
- },
-
- /**
- * @param {!Array.<Element>} dividers
- */
- addEventDividers: function(dividers)
- {
- this._grid.addEventDividers(dividers);
- },
-
- removeEventDividers: function()
- {
- this._grid.removeEventDividers();
- },
-
- /**
- * @param {?number} start
- * @param {?number} end
- */
- setWindowPosition: function(start, end)
- {
- this._window._setWindowPosition(start, end);
- },
-
- reset: function()
- {
- this._window.reset();
- },
-
- /**
- * @return {number}
- */
- windowLeft: function()
- {
- return this._window.windowLeft;
- },
-
- /**
- * @return {number}
- */
- windowRight: function()
- {
- return this._window.windowRight;
- },
-
- /**
- * @param {number} left
- * @param {number} right
- */
- setWindow: function(left, right)
- {
- this._window._setWindow(left, right);
- },
-
- /**
- * @param {string} eventType
- * @param {function(WebInspector.Event)} listener
- * @param {Object=} thisObject
- */
- addEventListener: function(eventType, listener, thisObject)
- {
- this._window.addEventListener(eventType, listener, thisObject);
- }
-}
-
-
-WebInspector.OverviewGrid.MinSelectableSize = 12;
-
-WebInspector.OverviewGrid.WindowScrollSpeedFactor = .3;
-
-WebInspector.OverviewGrid.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
-
WebInspector.TimelineOverviewPane.Mode = {
Events: "Events",
Frames: "Frames",
@@ -469,287 +339,7 @@
/**
* @constructor
- * @extends {WebInspector.Object}
- * @param {Element} parentElement
- * @param {Element} dividersLabelBarElement
- * @param {string} prefix
*/
-WebInspector.OverviewGrid.Window = function(parentElement, dividersLabelBarElement, prefix)
-{
- this._parentElement = parentElement;
- this._dividersLabelBarElement = dividersLabelBarElement;
- this._prefix = prefix;
-
- WebInspector.installDragHandle(this._parentElement, this._startWindowSelectorDragging.bind(this), this._windowSelectorDragging.bind(this), this._endWindowSelectorDragging.bind(this), "ew-resize");
- WebInspector.installDragHandle(this._dividersLabelBarElement, this._startWindowDragging.bind(this), this._windowDragging.bind(this), this._endWindowDragging.bind(this), "ew-resize");
-
- this.windowLeft = 0.0;
- this.windowRight = 1.0;
-
- this._parentElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), true);
- this._parentElement.addEventListener("dblclick", this._resizeWindowMaximum.bind(this), true);
-
- this._overviewWindowElement = document.createElement("div");
- this._overviewWindowElement.className = prefix + "-overview-window";
- parentElement.appendChild(this._overviewWindowElement);
-
- this._overviewWindowBordersElement = document.createElement("div");
- this._overviewWindowBordersElement.className = prefix + "-overview-window-rulers";
- parentElement.appendChild(this._overviewWindowBordersElement);
-
- var overviewDividersBackground = document.createElement("div");
- overviewDividersBackground.className = prefix + "-overview-dividers-background";
- parentElement.appendChild(overviewDividersBackground);
-
- this._leftResizeElement = document.createElement("div");
- this._leftResizeElement.className = prefix + "-window-resizer";
- this._leftResizeElement.style.left = 0;
- parentElement.appendChild(this._leftResizeElement);
- WebInspector.installDragHandle(this._leftResizeElement, null, this._leftResizeElementDragging.bind(this), null, "ew-resize");
-
- this._rightResizeElement = document.createElement("div");
- this._rightResizeElement.className = prefix + "-window-resizer " + prefix + "-window-resizer-right";
- this._rightResizeElement.style.right = 0;
- parentElement.appendChild(this._rightResizeElement);
- WebInspector.installDragHandle(this._rightResizeElement, null, this._rightResizeElementDragging.bind(this), null, "ew-resize");
-}
-
-WebInspector.OverviewGrid.Events = {
- WindowChanged: "WindowChanged"
-}
-
-WebInspector.OverviewGrid.Window.prototype = {
- reset: function()
- {
- this.windowLeft = 0.0;
- this.windowRight = 1.0;
-
- 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%";
- },
-
- /**
- * @param {Event} event
- */
- _leftResizeElementDragging: function(event)
- {
- this._resizeWindowLeft(event.pageX - this._parentElement.offsetLeft);
- event.preventDefault();
- },
-
- /**
- * @param {Event} event
- */
- _rightResizeElementDragging: function(event)
- {
- this._resizeWindowRight(event.pageX - this._parentElement.offsetLeft);
- event.preventDefault();
- },
-
- /**
- * @param {Event} event
- * @return {boolean}
- */
- _startWindowSelectorDragging: function(event)
- {
- var position = event.pageX - this._parentElement.offsetLeft;
- this._overviewWindowSelector = new WebInspector.OverviewGrid.WindowSelector(this._parentElement, position, this._prefix);
- return true;
- },
-
- /**
- * @param {Event} event
- */
- _windowSelectorDragging: function(event)
- {
- this._overviewWindowSelector._updatePosition(event.pageX - this._parentElement.offsetLeft);
- event.preventDefault();
- },
-
- /**
- * @param {Event} event
- */
- _endWindowSelectorDragging: function(event)
- {
- var window = this._overviewWindowSelector._close(event.pageX - this._parentElement.offsetLeft);
- delete this._overviewWindowSelector;
- if (window.end === window.start) { // Click, not drag.
- var middle = window.end;
- window.start = Math.max(0, middle - WebInspector.OverviewGrid.MinSelectableSize / 2);
- window.end = Math.min(this._parentElement.clientWidth, middle + WebInspector.OverviewGrid.MinSelectableSize / 2);
- } else if (window.end - window.start < WebInspector.OverviewGrid.MinSelectableSize) {
- if (this._parentElement.clientWidth - window.end > WebInspector.OverviewGrid.MinSelectableSize)
- window.end = window.start + WebInspector.OverviewGrid.MinSelectableSize;
- else
- window.start = window.end - WebInspector.OverviewGrid.MinSelectableSize;
- }
- this._setWindowPosition(window.start, window.end);
- },
-
- /**
- * @param {Event} event
- * @return {boolean}
- */
- _startWindowDragging: function(event)
- {
- var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- this._dragOffset = windowLeft - event.pageX;
- return true;
- },
-
- /**
- * @param {Event} event
- */
- _windowDragging: function(event)
- {
- var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- var start = this._dragOffset + event.pageX;
- this._moveWindow(start);
- event.preventDefault();
- },
-
- /**
- * @param {Event} event
- */
- _endWindowDragging: function(event)
- {
- delete this._dragOffset;
- },
-
- /**
- * @param {number} start
- */
- _moveWindow: function(start)
- {
- var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- var windowRight = this._rightResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- var windowSize = windowRight - windowLeft;
- var end = start + windowSize;
-
- if (start < 0) {
- start = 0;
- end = windowSize;
- }
-
- if (end > this._parentElement.clientWidth) {
- end = this._parentElement.clientWidth;
- start = end - windowSize;
- }
- this._setWindowPosition(start, end);
- },
-
- /**
- * @param {number} start
- */
- _resizeWindowLeft: function(start)
- {
- // Glue to edge.
- if (start < 10)
- start = 0;
- else if (start > this._rightResizeElement.offsetLeft - 4)
- start = this._rightResizeElement.offsetLeft - 4;
- this._setWindowPosition(start, null);
- },
-
- /**
- * @param {number} end
- */
- _resizeWindowRight: function(end)
- {
- // Glue to edge.
- if (end > this._parentElement.clientWidth - 10)
- end = this._parentElement.clientWidth;
- else if (end < this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize)
- end = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.MinSelectableSize;
- this._setWindowPosition(null, end);
- },
-
- _resizeWindowMaximum: function()
- {
- this._setWindowPosition(0, this._parentElement.clientWidth);
- },
-
- /**
- * @param {number} left
- * @param {number} right
- */
- _setWindow: function(left, right)
- {
- var clientWidth = this._parentElement.clientWidth;
- this._setWindowPosition(left * clientWidth, right * clientWidth);
- },
-
- /**
- * @param {?number} start
- * @param {?number} end
- */
- _setWindowPosition: function(start, end)
- {
- var clientWidth = this._parentElement.clientWidth;
- const rulerAdjustment = 1 / clientWidth;
- if (typeof start === "number") {
- this.windowLeft = start / clientWidth;
- this._leftResizeElement.style.left = this.windowLeft * 100 + "%";
- this._overviewWindowElement.style.left = this.windowLeft * 100 + "%";
- this._overviewWindowBordersElement.style.left = (this.windowLeft - rulerAdjustment) * 100 + "%";
- }
- if (typeof end === "number") {
- this.windowRight = end / clientWidth;
- this._rightResizeElement.style.left = this.windowRight * 100 + "%";
- }
- this._overviewWindowElement.style.width = (this.windowRight - this.windowLeft) * 100 + "%";
- this._overviewWindowBordersElement.style.right = (1 - this.windowRight + 2 * rulerAdjustment) * 100 + "%";
- this.dispatchEventToListeners(WebInspector.OverviewGrid.Events.WindowChanged);
- },
-
- /**
- * @param {Event} event
- */
- _onMouseWheel: function(event)
- {
- const zoomFactor = 1.1;
- const mouseWheelZoomSpeed = 1 / 120;
-
- if (typeof event.wheelDeltaY === "number" && event.wheelDeltaY) {
- var referencePoint = event.pageX - this._parentElement.offsetLeft;
- this._zoom(Math.pow(zoomFactor, -event.wheelDeltaY * mouseWheelZoomSpeed), referencePoint);
- }
- if (typeof event.wheelDeltaX === "number" && event.wheelDeltaX) {
- var windowLeft = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- var start = windowLeft - Math.round(event.wheelDeltaX * WebInspector.OverviewGrid.WindowScrollSpeedFactor);
- this._moveWindow(start);
- event.preventDefault();
- }
- },
-
- /**
- * @param {number} factor
- * @param {number} referencePoint
- */
- _zoom: function(factor, referencePoint)
- {
- var left = this._leftResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
- var right = this._rightResizeElement.offsetLeft + WebInspector.OverviewGrid.ResizerOffset;
-
- var delta = factor * (right - left);
- if (factor < 1 && delta < WebInspector.OverviewGrid.MinSelectableSize)
- return;
- var max = this._parentElement.clientWidth;
- left = Math.max(0, Math.min(max - delta, referencePoint + (left - referencePoint) * factor));
- right = Math.min(max, left + delta);
- this._setWindowPosition(left, right);
- },
-
- __proto__: WebInspector.Object.prototype
-}
-
-/**
- * @constructor
- */
WebInspector.TimelineOverviewCalculator = function()
{
}
@@ -818,55 +408,6 @@
/**
* @constructor
- * @param {string} prefix
- */
-WebInspector.OverviewGrid.WindowSelector = function(parent, position, prefix)
-{
- this._prefix = prefix;
- this._startPosition = position;
- this._width = parent.offsetWidth;
- this._windowSelector = document.createElement("div");
- this._windowSelector.className = prefix + "-window-selector";
- this._windowSelector.style.left = this._startPosition + "px";
- this._windowSelector.style.right = this._width - this._startPosition + + "px";
- parent.appendChild(this._windowSelector);
-}
-
-WebInspector.OverviewGrid.WindowSelector.prototype = {
- _createSelectorElement: function(parent, left, width, height)
- {
- var selectorElement = document.createElement("div");
- selectorElement.className = this._prefix + "-window-selector";
- selectorElement.style.left = left + "px";
- selectorElement.style.width = width + "px";
- selectorElement.style.top = "0px";
- selectorElement.style.height = height + "px";
- parent.appendChild(selectorElement);
- return selectorElement;
- },
-
- _close: function(position)
- {
- position = Math.max(0, Math.min(position, this._width));
- this._windowSelector.parentNode.removeChild(this._windowSelector);
- return this._startPosition < position ? {start: this._startPosition, end: position} : {start: position, end: this._startPosition};
- },
-
- _updatePosition: function(position)
- {
- position = Math.max(0, Math.min(position, this._width));
- if (position < this._startPosition) {
- this._windowSelector.style.left = position + "px";
- this._windowSelector.style.right = this._width - this._startPosition + "px";
- } else {
- this._windowSelector.style.left = this._startPosition + "px";
- this._windowSelector.style.right = this._width - position + "px";
- }
- }
-}
-
-/**
- * @constructor
* @param {WebInspector.TimelineModel} model
*/
WebInspector.HeapGraph = function(model)
Modified: trunk/Source/WebCore/inspector/front-end/WebKit.qrc (146203 => 146204)
--- trunk/Source/WebCore/inspector/front-end/WebKit.qrc 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/inspector/front-end/WebKit.qrc 2013-03-19 14:47:15 UTC (rev 146204)
@@ -136,6 +136,7 @@
<file>ObjectPopoverHelper.js</file>
<file>ObjectPropertiesSection.js</file>
<file>OverridesView.js</file>
+ <file>OverviewGrid.js</file>
<file>Panel.js</file>
<file>PanelEnablerView.js</file>
<file>ParsedURL.js</file>
Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (146203 => 146204)
--- trunk/Source/WebCore/inspector/front-end/inspector.html 2013-03-19 14:28:39 UTC (rev 146203)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html 2013-03-19 14:47:15 UTC (rev 146204)
@@ -70,6 +70,7 @@
<script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
+ <script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
