chrome/browser/resources/net_internals/waterfall_view.js

   1 // Copyright 2013 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 // TODO(viona): Write a README document/instructions.
   6
   7 /** This view displays the event waterfall. */
   8 var WaterfallView = (function() {
   9   'use strict';
  10
  11   // We inherit from DivView.
  12   var superClass = DivView;
  13
  14   /**
  15    * @constructor
  16    */
  17   function WaterfallView() {
  18     assertFirstConstructorCall(WaterfallView);
  19
  20     // Call superclass's constructor.
  21     superClass.call(this, WaterfallView.MAIN_BOX_ID);
  22
  23     SourceTracker.getInstance().addSourceEntryObserver(this);
  24
  25     // For adjusting the range of view.
  26     $(WaterfallView.SCALE_ID).addEventListener(
  27         'click', this.setStartEndTimes_.bind(this), true);
  28
  29     $(WaterfallView.MAIN_BOX_ID).addEventListener(
  30         'mousewheel', this.scrollToZoom_.bind(this), true);
  31
  32     $(WaterfallView.MAIN_BOX_ID).addEventListener(
  33         'scroll', this.scrollInfoTable_.bind(this), true);
  34
  35     this.initializeSourceList_();
  36
  37     window.onload = this.scrollInfoTable_();
  38   }
  39
  40   WaterfallView.TAB_ID = 'tab-handle-waterfall';
  41   WaterfallView.TAB_NAME = 'Waterfall';
  42   WaterfallView.TAB_HASH = '#waterfall';
  43
  44   // IDs for special HTML elements in events_waterfall_view.html.
  45   WaterfallView.MAIN_BOX_ID = 'waterfall-view-tab-content';
  46   WaterfallView.BAR_TABLE_ID = 'waterfall-view-time-bar-table';
  47   WaterfallView.BAR_TBODY_ID = 'waterfall-view-time-bar-tbody';
  48   WaterfallView.SCALE_ID = 'waterfall-view-adjust-to-window';
  49   WaterfallView.TIME_SCALE_HEADER_ID = 'waterfall-view-time-scale-labels';
  50   WaterfallView.TIME_RANGE_ID = 'waterfall-view-time-range-submit';
  51   WaterfallView.START_TIME_ID = 'waterfall-view-start-input';
  52   WaterfallView.END_TIME_ID = 'waterfall-view-end-input';
  53   WaterfallView.INFO_TABLE_ID = 'waterfall-view-information-table';
  54   WaterfallView.INFO_TBODY_ID = 'waterfall-view-information-tbody';
  55   WaterfallView.CONTROLS_ID = 'waterfall-view-controls';
  56   WaterfallView.ID_HEADER_ID = 'waterfall-view-id-header';
  57   WaterfallView.URL_HEADER_ID = 'waterfall-view-url-header';
  58
  59   // The number of units mouse wheel deltas increase for each tick of the
  60   // wheel.
  61   var MOUSE_WHEEL_UNITS_PER_CLICK = 120;
  62
  63   // Amount we zoom for one vertical tick of the mouse wheel, as a ratio.
  64   var MOUSE_WHEEL_ZOOM_RATE = 1.25;
  65   // Amount we scroll for one horizontal tick of the mouse wheel, in pixels.
  66   var MOUSE_WHEEL_SCROLL_RATE = MOUSE_WHEEL_UNITS_PER_CLICK;
  67
  68   cr.addSingletonGetter(WaterfallView);
  69
  70   WaterfallView.prototype = {
  71     // Inherit the superclass's methods.
  72     __proto__: superClass.prototype,
  73
  74     /**
  75      * Creates new WaterfallRows for URL Requests when the sourceEntries are
  76      * updated if they do not already exist.
  77      * Updates pre-existing WaterfallRows that correspond to updated sources.
  78      */
  79     onSourceEntriesUpdated: function(sourceEntries) {
  80       if (this.startTime_ == null && sourceEntries.length > 0) {
  81         var logEntries = sourceEntries[0].getLogEntries();
  82         this.startTime_ = timeutil.convertTimeTicksToTime(logEntries[0].time);
  83         // Initial scale factor.
  84         this.scaleFactor_ = 0.1;
  85       }
  86       for (var i = 0; i < sourceEntries.length; ++i) {
  87         var sourceEntry = sourceEntries[i];
  88         var id = sourceEntry.getSourceId();
  89         if (sourceEntry.getSourceType() == EventSourceType.URL_REQUEST) {
  90           var row = this.sourceIdToRowMap_[id];
  91           if (!row) {
  92             var newRow = new WaterfallRow(this, sourceEntry);
  93             this.sourceIdToRowMap_[id] = newRow;
  94           } else {
  95             row.onSourceUpdated();
  96           }
  97         }
  98       }
  99       this.scrollInfoTable_();
 100       this.positionBarTable_();
 101       this.updateTimeScale_(this.scaleFactor_);
 102     },
 103
 104     onAllSourceEntriesDeleted: function() {
 105       this.initializeSourceList_();
 106     },
 107
 108     onLoadLogFinish: function(data) {
 109       return true;
 110     },
 111
 112     getScaleFactor: function() {
 113       return this.scaleFactor_;
 114     },
 115
 116     getStartTime: function() {
 117       return this.startTime_;
 118     },
 119
 120     setGeometry: function(left, top, width, height) {
 121       superClass.prototype.setGeometry.call(this, left, top, width, height);
 122       this.scrollInfoTable_();
 123     },
 124
 125     show: function(isVisible) {
 126       superClass.prototype.show.call(this, isVisible);
 127       if (isVisible) {
 128         this.scrollInfoTable_();
 129       }
 130     },
 131
 132     /**
 133      * Initializes the list of source entries.  If source entries are already
 134      * being displayed, removes them all in the process.
 135      */
 136     initializeSourceList_: function() {
 137       this.sourceIdToRowMap_ = {};
 138       $(WaterfallView.BAR_TBODY_ID).innerHTML = '';
 139       $(WaterfallView.INFO_TBODY_ID).innerHTML = '';
 140       this.startTime_ = null;
 141       this.scaleFactor_ = null;
 142     },
 143
 144     /**
 145      * Changes scroll position of the window such that horizontally, everything
 146      * within the specified range fits into the user's viewport.
 147      */
 148     adjustToWindow_: function(windowStart, windowEnd) {
 149       var waterfallLeft = $(WaterfallView.INFO_TABLE_ID).offsetWidth +
 150           $(WaterfallView.INFO_TABLE_ID).offsetLeft +
 151           $(WaterfallView.ID_HEADER_ID).offsetWidth;
 152       var maxWidth = $(WaterfallView.MAIN_BOX_ID).offsetWidth - waterfallLeft;
 153       var totalDuration = 0;
 154       if (windowEnd != -1) {
 155         totalDuration = windowEnd - windowStart;
 156       } else {
 157         for (var id in this.sourceIdToRowMap_) {
 158           var row = this.sourceIdToRowMap_[id];
 159           var rowDuration = row.getEndTime() - this.startTime_;
 160           if (totalDuration < rowDuration && !row.hide) {
 161             totalDuration = rowDuration;
 162           }
 163         }
 164       }
 165       if (totalDuration <= 0) {
 166         return;
 167       }
 168       this.scaleAll_(maxWidth / totalDuration);
 169       $(WaterfallView.MAIN_BOX_ID).scrollLeft =
 170           windowStart * this.scaleFactor_;
 171     },
 172
 173     /** Updates the time tick indicators. */
 174     updateTimeScale_: function(scaleFactor) {
 175       var timePerTick = 1;
 176       var minTickDistance = 20;
 177
 178       $(WaterfallView.TIME_SCALE_HEADER_ID).innerHTML = '';
 179
 180       // Holder provides environment to prevent wrapping.
 181       var timeTickRow = addNode($(WaterfallView.TIME_SCALE_HEADER_ID), 'div');
 182       timeTickRow.classList.add('waterfall-view-time-scale-row');
 183
 184       var availableWidth = $(WaterfallView.BAR_TBODY_ID).clientWidth;
 185       var tickDistance = scaleFactor * timePerTick;
 186
 187       while (tickDistance < minTickDistance) {
 188         timePerTick = timePerTick * 10;
 189         tickDistance = scaleFactor * timePerTick;
 190       }
 191
 192       var tickCount = availableWidth / tickDistance;
 193       for (var i = 0; i < tickCount; ++i) {
 194         var timeCell = addNode(timeTickRow, 'div');
 195         setNodeWidth(timeCell, tickDistance);
 196         timeCell.classList.add('waterfall-view-time-scale');
 197         timeCell.title = i * timePerTick + ' to ' +
 198            (i + 1) * timePerTick + ' ms';
 199         // Red marker for every 5th bar.
 200         if (i % 5 == 0) {
 201           timeCell.classList.add('waterfall-view-time-scale-special');
 202         }
 203       }
 204     },
 205
 206     /**
 207      * Scales all existing rows by scaleFactor.
 208      */
 209     scaleAll_: function(scaleFactor) {
 210       this.scaleFactor_ = scaleFactor;
 211       for (var id in this.sourceIdToRowMap_) {
 212         var row = this.sourceIdToRowMap_[id];
 213         row.updateRow();
 214       }
 215       this.updateTimeScale_(scaleFactor);
 216     },
 217
 218     scrollToZoom_: function(event) {
 219       // To use scrolling to control zoom, hold down the alt key and scroll.
 220       if ('wheelDelta' in event && event.altKey) {
 221         event.preventDefault();
 222         var zoomFactor = Math.pow(MOUSE_WHEEL_ZOOM_RATE,
 223              event.wheelDeltaY / MOUSE_WHEEL_UNITS_PER_CLICK);
 224
 225         var waterfallLeft = $(WaterfallView.ID_HEADER_ID).offsetWidth +
 226             $(WaterfallView.URL_HEADER_ID).offsetWidth;
 227         var oldCursorPosition = event.pageX +
 228             $(WaterfallView.MAIN_BOX_ID).scrollLeft;
 229         var oldCursorPositionInTable = oldCursorPosition - waterfallLeft;
 230
 231         this.scaleAll_(this.scaleFactor_ * zoomFactor);
 232
 233         // Shifts the view when scrolling. newScroll could be less than 0 or
 234         // more than the maximum scroll position, but both cases are handled
 235         // by the inbuilt scrollLeft implementation.
 236         var newScroll =
 237             oldCursorPositionInTable * zoomFactor - event.pageX + waterfallLeft;
 238         $(WaterfallView.MAIN_BOX_ID).scrollLeft = newScroll;
 239       }
 240     },
 241
 242     /**
 243      * Positions the bar table such that it is in line with the right edge of
 244      * the info table.
 245      */
 246     positionBarTable_: function() {
 247       var offsetLeft = $(WaterfallView.INFO_TABLE_ID).offsetWidth +
 248           $(WaterfallView.INFO_TABLE_ID).offsetLeft;
 249       $(WaterfallView.BAR_TABLE_ID).style.left = offsetLeft + 'px';
 250     },
 251
 252     /**
 253      * Moves the info table when the page is scrolled vertically, ensuring that
 254      * the correct information is displayed on the page, and that no elements
 255      * are blocked unnecessarily.
 256      */
 257     scrollInfoTable_: function(event) {
 258       $(WaterfallView.INFO_TABLE_ID).style.top =
 259           $(WaterfallView.MAIN_BOX_ID).offsetTop +
 260           $(WaterfallView.BAR_TABLE_ID).offsetTop -
 261           $(WaterfallView.MAIN_BOX_ID).scrollTop + 'px';
 262
 263       if ($(WaterfallView.INFO_TABLE_ID).offsetHeight >
 264           $(WaterfallView.MAIN_BOX_ID).clientHeight) {
 265         var scroll = $(WaterfallView.MAIN_BOX_ID).scrollTop;
 266         var bottomClip =
 267             $(WaterfallView.MAIN_BOX_ID).clientHeight -
 268             $(WaterfallView.BAR_TABLE_ID).offsetTop +
 269             $(WaterfallView.MAIN_BOX_ID).scrollTop;
 270         // Clips the information table such that it does not cover the scroll
 271         // bars or the controls bar.
 272         $(WaterfallView.INFO_TABLE_ID).style.clip = 'rect(' + scroll +
 273             'px auto ' + bottomClip + 'px auto)';
 274       }
 275     },
 276
 277     /** Parses user input, then calls adjustToWindow to shift that into view. */
 278     setStartEndTimes_: function() {
 279       var windowStart = parseInt($(WaterfallView.START_TIME_ID).value);
 280       var windowEnd = parseInt($(WaterfallView.END_TIME_ID).value);
 281       if ($(WaterfallView.END_TIME_ID).value == '') {
 282         windowEnd = -1;
 283       }
 284       if ($(WaterfallView.START_TIME_ID).value == '') {
 285         windowStart = 0;
 286       }
 287       this.adjustToWindow_(windowStart, windowEnd);
 288     },
 289
 290
 291   };
 292
 293   return WaterfallView;
 294 })();