Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2502)

Unified Diff: chrome/browser/resources/net_internals/topmidbottomview.js

Issue 1593009: Add extra views to the new net internals page. This adds tabs along the top f... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 10 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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();
-};
« no previous file with comments | « chrome/browser/resources/net_internals/tabswitcherview.js ('k') | chrome/browser/resources/net_internals/util.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698