chrome/browser/resources/net_internals/timeline_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  * TimelineView displays a zoomable and scrollable graph of a number of values
   7  * over time.  The TimelineView class itself is responsible primarily for
   8  * updating the TimelineDataSeries its GraphView displays.
   9  */
  10 var TimelineView = (function() {
  11   'use strict';
  12
  13   // We inherit from HorizontalSplitView.
  14   var superClass = HorizontalSplitView;
  15
  16   /**
  17    * @constructor
  18    */
  19   function TimelineView() {
  20     assertFirstConstructorCall(TimelineView);
  21
  22     this.graphView_ = new TimelineGraphView(
  23         TimelineView.GRAPH_DIV_ID,
  24         TimelineView.GRAPH_CANVAS_ID,
  25         TimelineView.SCROLLBAR_DIV_ID,
  26         TimelineView.SCROLLBAR_INNER_DIV_ID);
  27
  28     // Call superclass's constructor.
  29
  30     var selectionView = new DivView(TimelineView.SELECTION_DIV_ID);
  31     superClass.call(this, selectionView, this.graphView_);
  32
  33     this.selectionDivFullWidth_ = selectionView.getWidth();
  34     $(TimelineView.SELECTION_TOGGLE_ID).onclick =
  35         this.toggleSelectionDiv_.bind(this);
  36
  37     // Interval id returned by window.setInterval for update timer.
  38     this.updateIntervalId_ = null;
  39
  40     // List of DataSeries.  These are shared with the TimelineGraphView.  The
  41     // TimelineView updates their state, the TimelineGraphView reads their
  42     // state and draws them.
  43     this.dataSeries_ = [];
  44
  45     // DataSeries depend on some of the global constants, so they're only
  46     // created once constants have been received.  We also use this message to
  47     // recreate DataSeries when log files are being loaded.
  48     g_browser.addConstantsObserver(this);
  49
  50     // We observe new log entries to determine the range of the graph, and pass
  51     // them on to each DataSource.  We initialize the graph range to initially
  52     // include all events, but after that, we only update it to be the current
  53     // time on a timer.
  54     EventsTracker.getInstance().addLogEntryObserver(this);
  55     this.graphRangeInitialized_ = false;
  56   }
  57
  58   TimelineView.TAB_ID = 'tab-handle-timeline';
  59   TimelineView.TAB_NAME = 'Timeline';
  60   TimelineView.TAB_HASH = '#timeline';
  61
  62   // IDs for special HTML elements in timeline_view.html
  63   TimelineView.GRAPH_DIV_ID = 'timeline-view-graph-div';
  64   TimelineView.GRAPH_CANVAS_ID = 'timeline-view-graph-canvas';
  65   TimelineView.SELECTION_DIV_ID = 'timeline-view-selection-div';
  66   TimelineView.SELECTION_TOGGLE_ID = 'timeline-view-selection-toggle';
  67   TimelineView.SELECTION_UL_ID = 'timeline-view-selection-ul';
  68   TimelineView.SCROLLBAR_DIV_ID = 'timeline-view-scrollbar-div';
  69   TimelineView.SCROLLBAR_INNER_DIV_ID = 'timeline-view-scrollbar-inner-div';
  70
  71   TimelineView.OPEN_SOCKETS_ID = 'timeline-view-open-sockets';
  72   TimelineView.IN_USE_SOCKETS_ID = 'timeline-view-in-use-sockets';
  73   TimelineView.URL_REQUESTS_ID = 'timeline-view-url-requests';
  74   TimelineView.DNS_JOBS_ID = 'timeline-view-dns-jobs';
  75   TimelineView.BYTES_RECEIVED_ID = 'timeline-view-bytes-received';
  76   TimelineView.BYTES_SENT_ID = 'timeline-view-bytes-sent';
  77   TimelineView.DISK_CACHE_BYTES_READ_ID =
  78       'timeline-view-disk-cache-bytes-read';
  79   TimelineView.DISK_CACHE_BYTES_WRITTEN_ID =
  80       'timeline-view-disk-cache-bytes-written';
  81
  82   // Class used for hiding the colored squares next to the labels for the
  83   // lines.
  84   TimelineView.HIDDEN_CLASS = 'timeline-view-hidden';
  85
  86   cr.addSingletonGetter(TimelineView);
  87
  88   // Frequency with which we increase update the end date to be the current
  89   // time, when actively capturing events.
  90   var UPDATE_INTERVAL_MS = 2000;
  91
  92   TimelineView.prototype = {
  93     // Inherit the superclass's methods.
  94     __proto__: superClass.prototype,
  95
  96     setGeometry: function(left, top, width, height) {
  97       superClass.prototype.setGeometry.call(this, left, top, width, height);
  98     },
  99
 100     show: function(isVisible) {
 101       superClass.prototype.show.call(this, isVisible);
 102       // If we're hidden or not capturing events, we don't want to update the
 103       // graph's range.
 104       if (!isVisible || g_browser.isDisabled()) {
 105         this.setUpdateEndDateInterval_(0);
 106         return;
 107       }
 108
 109       // Otherwise, update the visible range on a timer.
 110       this.setUpdateEndDateInterval_(UPDATE_INTERVAL_MS);
 111       this.updateEndDate_();
 112     },
 113
 114     /**
 115      * Starts calling the GraphView's updateEndDate function every |intervalMs|
 116      * milliseconds.  If |intervalMs| is 0, stops calling the function.
 117      */
 118     setUpdateEndDateInterval_: function(intervalMs) {
 119       if (this.updateIntervalId_ !== null) {
 120         window.clearInterval(this.updateIntervalId_);
 121         this.updateIntervalId_ = null;
 122       }
 123       if (intervalMs > 0) {
 124         this.updateIntervalId_ =
 125             window.setInterval(this.updateEndDate_.bind(this), intervalMs);
 126       }
 127     },
 128
 129     /**
 130      * Updates the end date of graph to be the current time, unless the
 131      * BrowserBridge is disabled.
 132      */
 133     updateEndDate_: function() {
 134       // If we loaded a log file or capturing data was stopped, stop the timer.
 135       if (g_browser.isDisabled()) {
 136         this.setUpdateEndDateInterval_(0);
 137         return;
 138       }
 139       this.graphView_.updateEndDate();
 140     },
 141
 142     onLoadLogFinish: function(data) {
 143       this.setUpdateEndDateInterval_(0);
 144       return true;
 145     },
 146
 147     /**
 148      * Updates the visibility state of |dataSeries| to correspond to the
 149      * current checked state of |checkBox|.  Also updates the class of
 150      * |listItem| based on the new visibility state.
 151      */
 152     updateDataSeriesVisibility_: function(dataSeries, listItem, checkBox) {
 153       dataSeries.show(checkBox.checked);
 154       if (checkBox.checked)
 155         listItem.classList.remove(TimelineView.HIDDEN_CLASS);
 156       else
 157         listItem.classList.add(TimelineView.HIDDEN_CLASS);
 158     },
 159
 160     dataSeriesClicked_: function(dataSeries, listItem, checkBox) {
 161       this.updateDataSeriesVisibility_(dataSeries, listItem, checkBox);
 162       this.graphView_.repaint();
 163     },
 164
 165     /**
 166      * Adds the specified DataSeries to |dataSeries_|, and hooks up
 167      * |listItemId|'s checkbox and color to correspond to the current state
 168      * of the given DataSeries.
 169      */
 170     addDataSeries_: function(dataSeries, listItemId) {
 171       this.dataSeries_.push(dataSeries);
 172       var listItem = $(listItemId);
 173       var checkBox = $(listItemId).querySelector('input');
 174
 175       // Make sure |listItem| is visible, and then use its color for the
 176       // DataSource.
 177       listItem.classList.remove(TimelineView.HIDDEN_CLASS);
 178       dataSeries.setColor(getComputedStyle(listItem).color);
 179
 180       this.updateDataSeriesVisibility_(dataSeries, listItem, checkBox);
 181       checkBox.onclick = this.dataSeriesClicked_.bind(this, dataSeries,
 182                                                       listItem, checkBox);
 183     },
 184
 185     /**
 186      * Recreate all DataSeries.  Global constants must have been set before
 187      * this is called.
 188      */
 189     createDataSeries_: function() {
 190       this.graphRangeInitialized_ = false;
 191       this.dataSeries_ = [];
 192
 193       this.addDataSeries_(new SourceCountDataSeries(
 194                               EventSourceType.SOCKET,
 195                               EventType.SOCKET_ALIVE),
 196                           TimelineView.OPEN_SOCKETS_ID);
 197
 198       this.addDataSeries_(new SocketsInUseDataSeries(),
 199                           TimelineView.IN_USE_SOCKETS_ID);
 200
 201       this.addDataSeries_(new SourceCountDataSeries(
 202                               EventSourceType.URL_REQUEST,
 203                               EventType.REQUEST_ALIVE),
 204                           TimelineView.URL_REQUESTS_ID);
 205
 206       this.addDataSeries_(new SourceCountDataSeries(
 207                               EventSourceType.HOST_RESOLVER_IMPL_JOB,
 208                               EventType.HOST_RESOLVER_IMPL_JOB),
 209                           TimelineView.DNS_JOBS_ID);
 210
 211       this.addDataSeries_(new NetworkTransferRateDataSeries(
 212                               EventType.SOCKET_BYTES_RECEIVED,
 213                               EventType.UDP_BYTES_RECEIVED),
 214                           TimelineView.BYTES_RECEIVED_ID);
 215
 216       this.addDataSeries_(new NetworkTransferRateDataSeries(
 217                               EventType.SOCKET_BYTES_SENT,
 218                               EventType.UDP_BYTES_SENT),
 219                           TimelineView.BYTES_SENT_ID);
 220
 221       this.addDataSeries_(new DiskCacheTransferRateDataSeries(
 222                               EventType.ENTRY_READ_DATA),
 223                           TimelineView.DISK_CACHE_BYTES_READ_ID);
 224
 225       this.addDataSeries_(new DiskCacheTransferRateDataSeries(
 226                               EventType.ENTRY_WRITE_DATA),
 227                           TimelineView.DISK_CACHE_BYTES_WRITTEN_ID);
 228
 229       this.graphView_.setDataSeries(this.dataSeries_);
 230     },
 231
 232     /**
 233      * When we receive the constants, create or recreate the DataSeries.
 234      */
 235     onReceivedConstants: function(constants) {
 236       this.createDataSeries_();
 237     },
 238
 239     /**
 240      * When all log entries are deleted, recreate the DataSeries.
 241      */
 242     onAllLogEntriesDeleted: function() {
 243       this.graphRangeInitialized_ = false;
 244       this.createDataSeries_();
 245     },
 246
 247     onReceivedLogEntries: function(entries) {
 248       // Pass each entry to every DataSeries, one at a time.  Not having each
 249       // data series get data directly from the EventsTracker saves us from
 250       // having very un-Javascript-like destructors for when we load new,
 251       // constants and slightly simplifies DataSeries objects.
 252       for (var entry = 0; entry < entries.length; ++entry) {
 253         for (var i = 0; i < this.dataSeries_.length; ++i)
 254           this.dataSeries_[i].onReceivedLogEntry(entries[entry]);
 255       }
 256
 257       // If this is the first non-empty set of entries we've received, or we're
 258       // viewing a loaded log file, we will need to update the date range.
 259       if (this.graphRangeInitialized_ && !MainView.isViewingLoadedLog())
 260         return;
 261       if (entries.length == 0)
 262         return;
 263
 264       // Update the date range.
 265       var startDate;
 266       if (!this.graphRangeInitialized_) {
 267         startDate = timeutil.convertTimeTicksToDate(entries[0].time);
 268       } else {
 269         startDate = this.graphView_.getStartDate();
 270       }
 271       var endDate =
 272           timeutil.convertTimeTicksToDate(entries[entries.length - 1].time);
 273       this.graphView_.setDateRange(startDate, endDate);
 274       this.graphRangeInitialized_ = true;
 275     },
 276
 277     toggleSelectionDiv_: function() {
 278       var toggle = $(TimelineView.SELECTION_TOGGLE_ID);
 279       var shouldCollapse = toggle.className == 'timeline-view-rotateleft';
 280
 281       setNodeDisplay($(TimelineView.SELECTION_UL_ID), !shouldCollapse);
 282       toggle.className = shouldCollapse ?
 283           'timeline-view-rotateright' : 'timeline-view-rotateleft';
 284
 285       // Figure out the appropriate width for the selection div.
 286       var newWidth;
 287       if (shouldCollapse) {
 288         newWidth = toggle.offsetWidth;
 289       } else {
 290         newWidth = this.selectionDivFullWidth_;
 291       }
 292
 293       // Change the width on the selection view (doesn't matter what we
 294       // set the other values to, since we will re-layout in the next line).
 295       this.leftView_.setGeometry(0, 0, newWidth, 100);
 296
 297       // Force a re-layout now that the left view has changed width.
 298       this.setGeometry(this.getLeft(), this.getTop(), this.getWidth(),
 299                        this.getHeight());
 300     }
 301   };
 302
 303   return TimelineView;
 304 })();