path: root/chromium/chrome/browser/resources/net_internals/waterfall_view.js

// Copyright 2013 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.

// TODO(viona): Write a README document/instructions.

/** This view displays the event waterfall. */
var WaterfallView = (function() {
  'use strict';

  // We inherit from DivView.
  var superClass = DivView;

  /**
   * @constructor
   */
  function WaterfallView() {
    assertFirstConstructorCall(WaterfallView);

    // Call superclass's constructor.
    superClass.call(this, WaterfallView.MAIN_BOX_ID);

    SourceTracker.getInstance().addSourceEntryObserver(this);

    // For adjusting the range of view.
    $(WaterfallView.SCALE_ID).addEventListener(
        'click', this.setStartEndTimes_.bind(this), true);

    $(WaterfallView.MAIN_BOX_ID).addEventListener(
        'mousewheel', this.scrollToZoom_.bind(this), true);

    $(WaterfallView.MAIN_BOX_ID).addEventListener(
        'scroll', this.scrollInfoTable_.bind(this), true);

    this.initializeSourceList_();

    window.onload = this.scrollInfoTable_();
  }

  WaterfallView.TAB_ID = 'tab-handle-waterfall';
  WaterfallView.TAB_NAME = 'Waterfall';
  WaterfallView.TAB_HASH = '#waterfall';

  // IDs for special HTML elements in events_waterfall_view.html.
  WaterfallView.MAIN_BOX_ID = 'waterfall-view-tab-content';
  WaterfallView.BAR_TABLE_ID = 'waterfall-view-time-bar-table';
  WaterfallView.BAR_TBODY_ID = 'waterfall-view-time-bar-tbody';
  WaterfallView.SCALE_ID = 'waterfall-view-adjust-to-window';
  WaterfallView.TIME_SCALE_HEADER_ID = 'waterfall-view-time-scale-labels';
  WaterfallView.TIME_RANGE_ID = 'waterfall-view-time-range-submit';
  WaterfallView.START_TIME_ID = 'waterfall-view-start-input';
  WaterfallView.END_TIME_ID = 'waterfall-view-end-input';
  WaterfallView.INFO_TABLE_ID = 'waterfall-view-information-table';
  WaterfallView.INFO_TBODY_ID = 'waterfall-view-information-tbody';
  WaterfallView.CONTROLS_ID = 'waterfall-view-controls';
  WaterfallView.ID_HEADER_ID = 'waterfall-view-id-header';
  WaterfallView.URL_HEADER_ID = 'waterfall-view-url-header';

  // The number of units mouse wheel deltas increase for each tick of the
  // wheel.
  var MOUSE_WHEEL_UNITS_PER_CLICK = 120;

  // Amount we zoom for one vertical tick of the mouse wheel, as a ratio.
  var MOUSE_WHEEL_ZOOM_RATE = 1.25;
  // Amount we scroll for one horizontal tick of the mouse wheel, in pixels.
  var MOUSE_WHEEL_SCROLL_RATE = MOUSE_WHEEL_UNITS_PER_CLICK;

  cr.addSingletonGetter(WaterfallView);

  WaterfallView.prototype = {
    // Inherit the superclass's methods.
    __proto__: superClass.prototype,

    /**
     * Creates new WaterfallRows for URL Requests when the sourceEntries are
     * updated if they do not already exist.
     * Updates pre-existing WaterfallRows that correspond to updated sources.
     */
    onSourceEntriesUpdated: function(sourceEntries) {
      if (this.startTime_ == null && sourceEntries.length > 0) {
        var logEntries = sourceEntries[0].getLogEntries();
        this.startTime_ = timeutil.convertTimeTicksToTime(logEntries[0].time);
        // Initial scale factor.
        this.scaleFactor_ = 0.1;
      }
      for (var i = 0; i < sourceEntries.length; ++i) {
        var sourceEntry = sourceEntries[i];
        var id = sourceEntry.getSourceId();
        if (sourceEntry.getSourceType() == EventSourceType.URL_REQUEST) {
          var row = this.sourceIdToRowMap_[id];
          if (!row) {
            var newRow = new WaterfallRow(this, sourceEntry);
            this.sourceIdToRowMap_[id] = newRow;
          } else {
            row.onSourceUpdated();
          }
        }
      }
      this.scrollInfoTable_();
      this.positionBarTable_();
      this.updateTimeScale_(this.scaleFactor_);
    },

    onAllSourceEntriesDeleted: function() {
      this.initializeSourceList_();
    },

    onLoadLogFinish: function(data) {
      return true;
    },

    getScaleFactor: function() {
      return this.scaleFactor_;
    },

    getStartTime: function() {
      return this.startTime_;
    },

    setGeometry: function(left, top, width, height) {
      superClass.prototype.setGeometry.call(this, left, top, width, height);
      this.scrollInfoTable_();
    },

    show: function(isVisible) {
      superClass.prototype.show.call(this, isVisible);
      if (isVisible) {
        this.scrollInfoTable_();
      }
    },

    /**
     * Initializes the list of source entries.  If source entries are already
     * being displayed, removes them all in the process.
     */
    initializeSourceList_: function() {
      this.sourceIdToRowMap_ = {};
      $(WaterfallView.BAR_TBODY_ID).innerHTML = '';
      $(WaterfallView.INFO_TBODY_ID).innerHTML = '';
      this.startTime_ = null;
      this.scaleFactor_ = null;
    },

    /**
     * Changes scroll position of the window such that horizontally, everything
     * within the specified range fits into the user's viewport.
     */
    adjustToWindow_: function(windowStart, windowEnd) {
      var waterfallLeft = $(WaterfallView.INFO_TABLE_ID).offsetWidth +
          $(WaterfallView.INFO_TABLE_ID).offsetLeft +
          $(WaterfallView.ID_HEADER_ID).offsetWidth;
      var maxWidth = $(WaterfallView.MAIN_BOX_ID).offsetWidth - waterfallLeft;
      var totalDuration = 0;
      if (windowEnd != -1) {
        totalDuration = windowEnd - windowStart;
      } else {
        for (var id in this.sourceIdToRowMap_) {
          var row = this.sourceIdToRowMap_[id];
          var rowDuration = row.getEndTime() - this.startTime_;
          if (totalDuration < rowDuration && !row.hide) {
            totalDuration = rowDuration;
          }
        }
      }
      if (totalDuration <= 0) {
        return;
      }
      this.scaleAll_(maxWidth / totalDuration);
      $(WaterfallView.MAIN_BOX_ID).scrollLeft =
          windowStart * this.scaleFactor_;
    },

    /** Updates the time tick indicators. */
    updateTimeScale_: function(scaleFactor) {
      var timePerTick = 1;
      var minTickDistance = 20;

      $(WaterfallView.TIME_SCALE_HEADER_ID).innerHTML = '';

      // Holder provides environment to prevent wrapping.
      var timeTickRow = addNode($(WaterfallView.TIME_SCALE_HEADER_ID), 'div');
      timeTickRow.classList.add('waterfall-view-time-scale-row');

      var availableWidth = $(WaterfallView.BAR_TBODY_ID).clientWidth;
      var tickDistance = scaleFactor * timePerTick;

      while (tickDistance < minTickDistance) {
        timePerTick = timePerTick * 10;
        tickDistance = scaleFactor * timePerTick;
      }

      var tickCount = availableWidth / tickDistance;
      for (var i = 0; i < tickCount; ++i) {
        var timeCell = addNode(timeTickRow, 'div');
        setNodeWidth(timeCell, tickDistance);
        timeCell.classList.add('waterfall-view-time-scale');
        timeCell.title = i * timePerTick + ' to ' +
           (i + 1) * timePerTick + ' ms';
        // Red marker for every 5th bar.
        if (i % 5 == 0) {
          timeCell.classList.add('waterfall-view-time-scale-special');
        }
      }
    },

    /**
     * Scales all existing rows by scaleFactor.
     */
    scaleAll_: function(scaleFactor) {
      this.scaleFactor_ = scaleFactor;
      for (var id in this.sourceIdToRowMap_) {
        var row = this.sourceIdToRowMap_[id];
        row.updateRow();
      }
      this.updateTimeScale_(scaleFactor);
    },

    scrollToZoom_: function(event) {
      // To use scrolling to control zoom, hold down the alt key and scroll.
      if ('wheelDelta' in event && event.altKey) {
        event.preventDefault();
        var zoomFactor = Math.pow(MOUSE_WHEEL_ZOOM_RATE,
             event.wheelDeltaY / MOUSE_WHEEL_UNITS_PER_CLICK);

        var waterfallLeft = $(WaterfallView.ID_HEADER_ID).offsetWidth +
            $(WaterfallView.URL_HEADER_ID).offsetWidth;
        var oldCursorPosition = event.pageX +
            $(WaterfallView.MAIN_BOX_ID).scrollLeft;
        var oldCursorPositionInTable = oldCursorPosition - waterfallLeft;

        this.scaleAll_(this.scaleFactor_ * zoomFactor);

        // Shifts the view when scrolling. newScroll could be less than 0 or
        // more than the maximum scroll position, but both cases are handled
        // by the inbuilt scrollLeft implementation.
        var newScroll =
            oldCursorPositionInTable * zoomFactor - event.pageX + waterfallLeft;
        $(WaterfallView.MAIN_BOX_ID).scrollLeft = newScroll;
      }
    },

    /**
     * Positions the bar table such that it is in line with the right edge of
     * the info table.
     */
    positionBarTable_: function() {
      var offsetLeft = $(WaterfallView.INFO_TABLE_ID).offsetWidth +
          $(WaterfallView.INFO_TABLE_ID).offsetLeft;
      $(WaterfallView.BAR_TABLE_ID).style.left = offsetLeft + 'px';
    },

    /**
     * Moves the info table when the page is scrolled vertically, ensuring that
     * the correct information is displayed on the page, and that no elements
     * are blocked unnecessarily.
     */
    scrollInfoTable_: function(event) {
      $(WaterfallView.INFO_TABLE_ID).style.top =
          $(WaterfallView.MAIN_BOX_ID).offsetTop +
          $(WaterfallView.BAR_TABLE_ID).offsetTop -
          $(WaterfallView.MAIN_BOX_ID).scrollTop + 'px';

      if ($(WaterfallView.INFO_TABLE_ID).offsetHeight >
          $(WaterfallView.MAIN_BOX_ID).clientHeight) {
        var scroll = $(WaterfallView.MAIN_BOX_ID).scrollTop;
        var bottomClip =
            $(WaterfallView.MAIN_BOX_ID).clientHeight -
            $(WaterfallView.BAR_TABLE_ID).offsetTop +
            $(WaterfallView.MAIN_BOX_ID).scrollTop;
        // Clips the information table such that it does not cover the scroll
        // bars or the controls bar.
        $(WaterfallView.INFO_TABLE_ID).style.clip = 'rect(' + scroll +
            'px auto ' + bottomClip + 'px auto)';
      }
    },

    /** Parses user input, then calls adjustToWindow to shift that into view. */
    setStartEndTimes_: function() {
      var windowStart = parseInt($(WaterfallView.START_TIME_ID).value);
      var windowEnd = parseInt($(WaterfallView.END_TIME_ID).value);
      if ($(WaterfallView.END_TIME_ID).value == '') {
        windowEnd = -1;
      }
      if ($(WaterfallView.START_TIME_ID).value == '') {
        windowStart = 0;
      }
      this.adjustToWindow_(windowStart, windowEnd);
    },


  };

  return WaterfallView;
})();