Index: chrome/browser/resources/net_internals/resizableverticalsplitview.js |
=================================================================== |
--- chrome/browser/resources/net_internals/resizableverticalsplitview.js (revision 43430) |
+++ chrome/browser/resources/net_internals/resizableverticalsplitview.js (working copy) |
@@ -3,118 +3,89 @@ |
// found in the LICENSE file. |
/** |
- * The class LayoutManager implements a vertically split layout that takes up |
- * the whole window, and provides a draggable bar to resize the left and right |
- * panes. Its elements are layed out as follows: |
+ * This view implements a vertically split display with a draggable divider. |
* |
- * |
* <<-- sizer -->> |
* |
* +----------------------++----------------+ |
- * | topbar || | |
- * +----------------------+| | |
* | || | |
* | || | |
* | || | |
* | || | |
- * | middlebox || rightbox | |
+ * | leftView || rightView | |
* | || | |
* | || | |
* | || | |
* | || | |
* | || | |
- * +----------------------++ | |
- * | bottombar || | |
* +----------------------++----------------+ |
* |
- * The "topbar" and "bottombar" have a fixed height which is determined |
- * by their initial content height. The rest of the boxes fill to occupy the |
- * remaining space. |
- * |
- * The consumer provides DIVs for each of these regions, and the LayoutManager |
- * positions them correctly in the window. |
- * |
+ * @param {!View} leftView The widget to position on the left. |
+ * @param {!View} rightView The widget to position on the right. |
+ * @param {!DivView} sizerView The widget that will serve as draggable divider. |
* @constructor |
*/ |
-function LayoutManager(topbarId, |
- middleboxId, |
- bottombarId, |
- sizerId, |
- rightboxId) { |
- // Lookup the elements. |
- this.topbar_ = document.getElementById(topbarId); |
- this.middlebox_ = document.getElementById(middleboxId); |
- this.bottombar_ = document.getElementById(bottombarId); |
- this.sizer_ = document.getElementById(sizerId); |
- this.rightbox_ = document.getElementById(rightboxId); |
+function ResizableVerticalSplitView(leftView, rightView, sizerView) { |
+ View.call(this); |
- // Make all the elements absolutely positioned. |
- this.topbar_.style.position = "absolute"; |
- this.middlebox_.style.position = "absolute"; |
- this.bottombar_.style.position = "absolute"; |
- this.sizer_.style.position = "absolute"; |
- this.rightbox_.style.position = "absolute"; |
+ this.leftView_ = leftView; |
+ this.rightView_ = rightView; |
+ this.sizerView_ = sizerView; |
- // Set the initial split position at 50%. |
- setNodeWidth(this.rightbox_, window.innerWidth / 2); |
- |
// Setup the "sizer" so it can be dragged left/right to reposition the |
// vertical split. |
- this.sizer_.addEventListener("mousedown", this.onDragSizerStart_.bind(this), |
- true); |
- |
- // Recalculate the layout whenever the window size changes. |
- window.addEventListener("resize", this.recalculateLayout_.bind(this), true); |
- |
- // Do the initial layout . |
- this.recalculateLayout_(); |
+ sizerView.getNode().addEventListener( |
+ "mousedown", this.onDragSizerStart_.bind(this), true); |
} |
+inherits(ResizableVerticalSplitView, View); |
+ |
// Minimum width to size panels to, in pixels. |
-LayoutManager.MIN_PANEL_WIDTH = 50; |
+ResizableVerticalSplitView.MIN_PANEL_WIDTH = 50; |
/** |
* Repositions all of the elements to fit the window. |
*/ |
-LayoutManager.prototype.recalculateLayout_ = function() { |
+ResizableVerticalSplitView.prototype.setGeometry = function( |
+ left, top, width, height) { |
+ ResizableVerticalSplitView.superClass_.setGeometry.call( |
+ this, left, top, width, height); |
+ |
+ // If this is the first setGeometry(), initialize the split point at 50%. |
+ if (!this.rightSplit_) |
+ this.rightSplit_ = parseInt((width / 2).toFixed(0)); |
+ |
// Calculate the horizontal split points. |
- var totalWidth = window.innerWidth; |
- var rightboxWidth = this.rightbox_.offsetWidth; |
- var sizerWidth = this.sizer_.offsetWidth; |
- var leftPaneWidth = totalWidth - (rightboxWidth + sizerWidth); |
+ var rightboxWidth = this.rightSplit_; |
+ var sizerWidth = this.sizerView_.getWidth(); |
+ var leftboxWidth = width - (rightboxWidth + sizerWidth); |
// Don't let the left pane get too small. |
- if (leftPaneWidth < LayoutManager.MIN_PANEL_WIDTH) { |
- leftPaneWidth = LayoutManager.MIN_PANEL_WIDTH; |
- rightboxWidth = totalWidth - (sizerWidth + leftPaneWidth); |
+ if (leftboxWidth < ResizableVerticalSplitView.MIN_PANEL_WIDTH) { |
+ leftboxWidth = ResizableVerticalSplitView.MIN_PANEL_WIDTH; |
+ rightboxWidth = width - (sizerWidth + leftboxWidth); |
} |
- // Calculate the vertical split points. |
- var totalHeight = window.innerHeight; |
- var topbarHeight = this.topbar_.offsetHeight; |
- var bottombarHeight = this.bottombar_.offsetHeight; |
- var middleboxHeight = totalHeight - (topbarHeight + bottombarHeight); |
- |
// Position the boxes using calculated split points. |
- setNodePosition(this.topbar_, 0, 0, |
- leftPaneWidth, topbarHeight); |
- setNodePosition(this.middlebox_, 0, topbarHeight, |
- leftPaneWidth, |
- middleboxHeight); |
- setNodePosition(this.bottombar_, 0, (topbarHeight + middleboxHeight), |
- leftPaneWidth, bottombarHeight); |
+ this.leftView_.setGeometry(left, top, leftboxWidth, height); |
+ this.sizerView_.setGeometry(this.leftView_.getRight(), top, |
+ sizerWidth, height); |
+ this.rightView_.setGeometry(this.sizerView_.getRight(), top, |
+ rightboxWidth, height); |
+}; |
- setNodePosition(this.sizer_, leftPaneWidth, 0, |
- sizerWidth, totalHeight); |
- setNodePosition(this.rightbox_, leftPaneWidth + sizerWidth, 0, |
- rightboxWidth, totalHeight); |
+ResizableVerticalSplitView.prototype.show = function(isVisible) { |
+ ResizableVerticalSplitView.superClass_.show.call(this, isVisible); |
+ this.leftView_.show(isVisible); |
+ this.sizerView_.show(isVisible); |
+ this.rightView_.show(isVisible); |
}; |
/** |
* Called once we have clicked into the sizer. Starts capturing the mouse |
* position to implement dragging. |
*/ |
-LayoutManager.prototype.onDragSizerStart_ = function(event) { |
+ResizableVerticalSplitView.prototype.onDragSizerStart_ = function(event) { |
this.sizerMouseMoveListener_ = this.onDragSizer.bind(this); |
this.sizerMouseUpListener_ = this.onDragSizerEnd.bind(this); |
@@ -127,20 +98,23 @@ |
/** |
* Called when the mouse has moved after dragging started. |
*/ |
-LayoutManager.prototype.onDragSizer = function(event) { |
- var newWidth = window.innerWidth - event.pageX; |
+ResizableVerticalSplitView.prototype.onDragSizer = function(event) { |
+ // Convert from page coordinates, to view coordinates. |
+ this.rightSplit_ = this.getWidth() - (event.pageX - this.getLeft()); |
// Avoid shrinking the right box too much. |
- newWidth = Math.max(newWidth, LayoutManager.MIN_PANEL_WIDTH); |
+ this.rightSplit_ = Math.max( |
+ this.rightSplit_, ResizableVerticalSplitView.MIN_PANEL_WIDTH); |
- setNodeWidth(this.rightbox_, newWidth); |
- this.recalculateLayout_(); |
+ // Force a layout with the new |rightSplit_|. |
+ this.setGeometry( |
+ this.getLeft(), this.getTop(), this.getWidth(), this.getHeight()); |
}; |
/** |
* Called once the mouse has been released, and the dragging is over. |
*/ |
-LayoutManager.prototype.onDragSizerEnd = function(event) { |
+ResizableVerticalSplitView.prototype.onDragSizerEnd = function(event) { |
window.removeEventListener("mousemove", this.sizerMouseMoveListener_, true); |
window.removeEventListener("mouseup", this.sizerMouseUpListener_, true); |