Index: chrome/browser/resources/net_internals/topmidbottomview.js |
=================================================================== |
--- chrome/browser/resources/net_internals/topmidbottomview.js (revision 43430) |
+++ chrome/browser/resources/net_internals/topmidbottomview.js (working copy) |
@@ -3,149 +3,57 @@ |
// 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 stacks three boxes -- one at the top, one at the bottom, and |
+ * one that fills the remaining space between those two. |
* |
+ * +----------------------+ |
+ * | topbar | |
+ * +----------------------+ |
+ * | | |
+ * | | |
+ * | | |
+ * | | |
+ * | middlebox | |
+ * | | |
+ * | | |
+ * | | |
+ * | | |
+ * | | |
+ * +----------------------+ |
+ * | bottombar | |
+ * +----------------------+ |
* |
- * <<-- sizer -->> |
- * |
- * +----------------------++----------------+ |
- * | topbar || | |
- * +----------------------+| | |
- * | || | |
- * | || | |
- * | || | |
- * | || | |
- * | middlebox || rightbox | |
- * | || | |
- * | || | |
- * | || | |
- * | || | |
- * | || | |
- * +----------------------++ | |
- * | 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. |
- * |
- * @constructor |
+ * @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 TopMidBottomView(topView, midView, bottomView) { |
+ 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"; |
- |
- // 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_(); |
+ this.topView_ = topView; |
+ this.midView_ = midView; |
+ this.bottomView_ = bottomView; |
} |
-// Minimum width to size panels to, in pixels. |
-LayoutManager.MIN_PANEL_WIDTH = 50; |
+inherits(TopMidBottomView, View); |
-/** |
- * Repositions all of the elements to fit the window. |
- */ |
-LayoutManager.prototype.recalculateLayout_ = function() { |
- // Calculate the horizontal split points. |
- var totalWidth = window.innerWidth; |
- var rightboxWidth = this.rightbox_.offsetWidth; |
- var sizerWidth = this.sizer_.offsetWidth; |
- var leftPaneWidth = totalWidth - (rightboxWidth + sizerWidth); |
+TopMidBottomView.prototype.setGeometry = function(left, top, width, height) { |
+ TopMidBottomView.superClass_.setGeometry.call(this, left, top, width, height); |
- // Don't let the left pane get too small. |
- if (leftPaneWidth < LayoutManager.MIN_PANEL_WIDTH) { |
- leftPaneWidth = LayoutManager.MIN_PANEL_WIDTH; |
- rightboxWidth = totalWidth - (sizerWidth + leftPaneWidth); |
- } |
- |
// Calculate the vertical split points. |
- var totalHeight = window.innerHeight; |
- var topbarHeight = this.topbar_.offsetHeight; |
- var bottombarHeight = this.bottombar_.offsetHeight; |
- var middleboxHeight = totalHeight - (topbarHeight + bottombarHeight); |
+ var topbarHeight = this.topView_.getHeight(); |
+ var bottombarHeight = this.bottomView_.getHeight(); |
+ var middleboxHeight = height - (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); |
- |
- setNodePosition(this.sizer_, leftPaneWidth, 0, |
- sizerWidth, totalHeight); |
- setNodePosition(this.rightbox_, leftPaneWidth + sizerWidth, 0, |
- rightboxWidth, totalHeight); |
+ this.topView_.setGeometry(left, top, width, topbarHeight); |
+ this.midView_.setGeometry(left, this.topView_.getBottom(), |
+ width, middleboxHeight); |
+ this.bottomView_.setGeometry(left, this.midView_.getBottom(), |
+ width, bottombarHeight); |
}; |
-/** |
- * Called once we have clicked into the sizer. Starts capturing the mouse |
- * position to implement dragging. |
- */ |
-LayoutManager.prototype.onDragSizerStart_ = function(event) { |
- this.sizerMouseMoveListener_ = this.onDragSizer.bind(this); |
- this.sizerMouseUpListener_ = this.onDragSizerEnd.bind(this); |
- |
- window.addEventListener("mousemove", this.sizerMouseMoveListener_, true); |
- window.addEventListener("mouseup", this.sizerMouseUpListener_, true); |
- |
- event.preventDefault(); |
+TopMidBottomView.prototype.show = function(isVisible) { |
+ TopMidBottomView.superClass_.show.call(this, isVisible); |
+ this.topView_.show(isVisible); |
+ this.midView_.show(isVisible); |
+ this.bottomView_.show(isVisible); |
}; |
- |
-/** |
- * Called when the mouse has moved after dragging started. |
- */ |
-LayoutManager.prototype.onDragSizer = function(event) { |
- var newWidth = window.innerWidth - event.pageX; |
- |
- // Avoid shrinking the right box too much. |
- newWidth = Math.max(newWidth, LayoutManager.MIN_PANEL_WIDTH); |
- |
- setNodeWidth(this.rightbox_, newWidth); |
- this.recalculateLayout_(); |
-}; |
- |
-/** |
- * Called once the mouse has been released, and the dragging is over. |
- */ |
-LayoutManager.prototype.onDragSizerEnd = function(event) { |
- window.removeEventListener("mousemove", this.sizerMouseMoveListener_, true); |
- window.removeEventListener("mouseup", this.sizerMouseUpListener_, true); |
- |
- this.sizerMouseMoveListener_ = null; |
- this.sizerMouseUpListener_ = null; |
- |
- event.preventDefault(); |
-}; |