Add an initial implementation of net-internals inspector in javascript....

chrome/browser/resources/net_internals/layoutmanager.js

Index: chrome/browser/resources/net_internals/layoutmanager.js
===================================================================
--- chrome/browser/resources/net_internals/layoutmanager.js	(revision 0)
+++ chrome/browser/resources/net_internals/layoutmanager.js	(revision 0)
@@ -0,0 +1,151 @@
+// 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:
+ *
+ *
+ *                  <<-- 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
+ */
+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);
+
+  // 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_();
+}
+
+// Minimum width to size panels to, in pixels.
+LayoutManager.MIN_PANEL_WIDTH = 50;
+
+/**
+ * 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);
+  }
+
+  // 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);
+
+  setNodePosition(this.sizer_, leftPaneWidth, 0,
+                  sizerWidth, totalHeight);
+  setNodePosition(this.rightbox_, leftPaneWidth + sizerWidth, 0,
+                  rightboxWidth, totalHeight);
+};
+
+/**
+ * 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();
+};
+
+/**
+ * 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();
+};
Property changes on: chrome\browser\resources\net_internals\layoutmanager.js
___________________________________________________________________
Added: svn:eol-style
   + LF