src/chrome/browser/resources/net_internals/view.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * Base class to represent a "view". A view is an absolutely positioned box on
   7  * the page.
   8  */
   9 var View = (function() {
  10   'use strict';
  11
  12   /**
  13    * @constructor
  14    */
  15   function View() {
  16     this.isVisible_ = true;
  17   }
  18
  19   View.prototype = {
  20     /**
  21      * Called to reposition the view on the page. Measurements are in pixels.
  22      */
  23     setGeometry: function(left, top, width, height) {
  24       this.left_ = left;
  25       this.top_ = top;
  26       this.width_ = width;
  27       this.height_ = height;
  28     },
  29
  30     /**
  31      * Called to show/hide the view.
  32      */
  33     show: function(isVisible) {
  34       this.isVisible_ = isVisible;
  35     },
  36
  37     isVisible: function() {
  38       return this.isVisible_;
  39     },
  40
  41     /**
  42      * Method of the observer class.
  43      *
  44      * Called to check if an observer needs the data it is
  45      * observing to be actively updated.
  46      */
  47     isActive: function() {
  48       return this.isVisible();
  49     },
  50
  51     getLeft: function() {
  52       return this.left_;
  53     },
  54
  55     getTop: function() {
  56       return this.top_;
  57     },
  58
  59     getWidth: function() {
  60       return this.width_;
  61     },
  62
  63     getHeight: function() {
  64       return this.height_;
  65     },
  66
  67     getRight: function() {
  68       return this.getLeft() + this.getWidth();
  69     },
  70
  71     getBottom: function() {
  72       return this.getTop() + this.getHeight();
  73     },
  74
  75     setParameters: function(params) {},
  76
  77     /**
  78      * Called when loading a log file, after clearing all events, but before
  79      * loading the new ones.  |polledData| contains the data from all
  80      * PollableData helpers.  |tabData| contains the data for the particular
  81      * tab.  |logDump| is the entire log dump, which includes the other two
  82      * values.  It's included separately so most views don't have to depend on
  83      * its specifics.
  84      */
  85     onLoadLogStart: function(polledData, tabData, logDump) {
  86     },
  87
  88     /**
  89      * Called as the final step of loading a log file.  Arguments are the same
  90      * as onLoadLogStart.  Returns true to indicate the tab should be shown,
  91      * false otherwise.
  92      */
  93     onLoadLogFinish: function(polledData, tabData, logDump) {
  94       return false;
  95     }
  96   };
  97
  98   return View;
  99 })();
 100
 101 //-----------------------------------------------------------------------------
 102
 103 /**
 104  * DivView is an implementation of View that wraps a DIV.
 105  */
 106 var DivView = (function() {
 107   'use strict';
 108
 109   // We inherit from View.
 110   var superClass = View;
 111
 112   /**
 113    * @constructor
 114    */
 115   function DivView(divId) {
 116     // Call superclass's constructor.
 117     superClass.call(this);
 118
 119     this.node_ = $(divId);
 120     if (!this.node_)
 121       throw new Error('Element ' + divId + ' not found');
 122
 123     // Initialize the default values to those of the DIV.
 124     this.width_ = this.node_.offsetWidth;
 125     this.height_ = this.node_.offsetHeight;
 126     this.isVisible_ = this.node_.style.display != 'none';
 127   }
 128
 129   DivView.prototype = {
 130     // Inherit the superclass's methods.
 131     __proto__: superClass.prototype,
 132
 133     setGeometry: function(left, top, width, height) {
 134       superClass.prototype.setGeometry.call(this, left, top, width, height);
 135
 136       this.node_.style.position = 'absolute';
 137       setNodePosition(this.node_, left, top, width, height);
 138     },
 139
 140     show: function(isVisible) {
 141       superClass.prototype.show.call(this, isVisible);
 142       setNodeDisplay(this.node_, isVisible);
 143     },
 144
 145     /**
 146      * Returns the wrapped DIV
 147      */
 148     getNode: function() {
 149       return this.node_;
 150     }
 151   };
 152
 153   return DivView;
 154 })();
 155
 156
 157 //-----------------------------------------------------------------------------
 158
 159 /**
 160  * Implementation of View that sizes its child to fit the entire window.
 161  *
 162  * @param {!View} childView The child view.
 163  */
 164 var WindowView = (function() {
 165   'use strict';
 166
 167   // We inherit from View.
 168   var superClass = View;
 169
 170   /**
 171    * @constructor
 172    */
 173   function WindowView(childView) {
 174     // Call superclass's constructor.
 175     superClass.call(this);
 176
 177     this.childView_ = childView;
 178     window.addEventListener('resize', this.resetGeometry.bind(this), true);
 179   }
 180
 181   WindowView.prototype = {
 182     // Inherit the superclass's methods.
 183     __proto__: superClass.prototype,
 184
 185     setGeometry: function(left, top, width, height) {
 186       superClass.prototype.setGeometry.call(this, left, top, width, height);
 187       this.childView_.setGeometry(left, top, width, height);
 188     },
 189
 190     show: function() {
 191       superClass.prototype.show.call(this, isVisible);
 192       this.childView_.show(isVisible);
 193     },
 194
 195     resetGeometry: function() {
 196       this.setGeometry(0, 0, window.innerWidth, window.innerHeight);
 197     }
 198   };
 199
 200   return WindowView;
 201 })();
 202
 203 /**
 204  * View that positions two views vertically. The top view should be
 205  * fixed-height, and the bottom view will fill the remainder of the space.
 206  *
 207  *  +-----------------------------------+
 208  *  |            topView                |
 209  *  +-----------------------------------+
 210  *  |                                   |
 211  *  |                                   |
 212  *  |                                   |
 213  *  |          bottomView               |
 214  *  |                                   |
 215  *  |                                   |
 216  *  |                                   |
 217  *  |                                   |
 218  *  +-----------------------------------+
 219  */
 220 var VerticalSplitView = (function() {
 221   'use strict';
 222
 223   // We inherit from View.
 224   var superClass = View;
 225
 226   /**
 227    * @param {!View} topView The top view.
 228    * @param {!View} bottomView The bottom view.
 229    * @constructor
 230    */
 231   function VerticalSplitView(topView, bottomView) {
 232     // Call superclass's constructor.
 233     superClass.call(this);
 234
 235     this.topView_ = topView;
 236     this.bottomView_ = bottomView;
 237   }
 238
 239   VerticalSplitView.prototype = {
 240     // Inherit the superclass's methods.
 241     __proto__: superClass.prototype,
 242
 243     setGeometry: function(left, top, width, height) {
 244       superClass.prototype.setGeometry.call(this, left, top, width, height);
 245
 246       var fixedHeight = this.topView_.getHeight();
 247       this.topView_.setGeometry(left, top, width, fixedHeight);
 248
 249       this.bottomView_.setGeometry(
 250           left, top + fixedHeight, width, height - fixedHeight);
 251     },
 252
 253     show: function(isVisible) {
 254       superClass.prototype.show.call(this, isVisible);
 255
 256       this.topView_.show(isVisible);
 257       this.bottomView_.show(isVisible);
 258     }
 259   };
 260
 261   return VerticalSplitView;
 262 })();
 263
 264 /**
 265  * View that positions two views horizontally. The left view should be
 266  * fixed-width, and the right view will fill the remainder of the space.
 267  *
 268  *  +----------+--------------------------+
 269  *  |          |                          |
 270  *  |          |                          |
 271  *  |          |                          |
 272  *  | leftView |       rightView          |
 273  *  |          |                          |
 274  *  |          |                          |
 275  *  |          |                          |
 276  *  |          |                          |
 277  *  |          |                          |
 278  *  |          |                          |
 279  *  |          |                          |
 280  *  +----------+--------------------------+
 281  */
 282 var HorizontalSplitView = (function() {
 283   'use strict';
 284
 285   // We inherit from View.
 286   var superClass = View;
 287
 288   /**
 289    * @param {!View} leftView The left view.
 290    * @param {!View} rightView The right view.
 291    * @constructor
 292    */
 293   function HorizontalSplitView(leftView, rightView) {
 294     // Call superclass's constructor.
 295     superClass.call(this);
 296
 297     this.leftView_ = leftView;
 298     this.rightView_ = rightView;
 299   }
 300
 301   HorizontalSplitView.prototype = {
 302     // Inherit the superclass's methods.
 303     __proto__: superClass.prototype,
 304
 305     setGeometry: function(left, top, width, height) {
 306       superClass.prototype.setGeometry.call(this, left, top, width, height);
 307
 308       var fixedWidth = this.leftView_.getWidth();
 309       this.leftView_.setGeometry(left, top, fixedWidth, height);
 310
 311       this.rightView_.setGeometry(
 312           left + fixedWidth, top, width - fixedWidth, height);
 313     },
 314
 315     show: function(isVisible) {
 316       superClass.prototype.show.call(this, isVisible);
 317
 318       this.leftView_.show(isVisible);
 319       this.rightView_.show(isVisible);
 320     }
 321   };
 322
 323   return HorizontalSplitView;
 324 })();