Add extra views to the new net internals page. This adds tabs along the top f...

chrome/browser/resources/net_internals/topmidbottomview.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // 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);
-
-  // Don't let the left pane get too small.
-  if (leftPaneWidth < LayoutManager.MIN_PANEL_WIDTH) {
-    leftPaneWidth = LayoutManager.MIN_PANEL_WIDTH;
-    rightboxWidth = totalWidth - (sizerWidth + leftPaneWidth);
-  }
+TopMidBottomView.prototype.setGeometry = function(left, top, width, height) {
+  TopMidBottomView.superClass_.setGeometry.call(this, left, top, width, height);
 
   // 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();
-};