extras/about_tracing/profiling_view.html

<!DOCTYPE html>
<!--
Copyright (c) 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.
-->

<link rel="import" href="/tracing/base/base64.html">
<link rel="import"
      href="/tracing/ui/extras/about_tracing/record_and_capture_controller.html">
<link rel="import"
      href="/tracing/ui/extras/about_tracing/inspector_tracing_controller_client.html">
<link rel="import"
      href="/tracing/ui/extras/about_tracing/xhr_based_tracing_controller_client.html">
<link rel="import" href="/tracing/importer/import.html">
<link rel="import" href="/tracing/ui/base/info_bar_group.html">
<link rel="import" href="/tracing/ui/base/hotkey_controller.html">
<link rel="import" href="/tracing/ui/base/overlay.html">
<link rel="import" href="/tracing/ui/base/utils.html">
<link rel="import" href="/tracing/ui/timeline_view.html">

<style>
x-profiling-view {
  -webkit-flex-direction: column;
  display: -webkit-flex;
  padding: 0;
}

x-profiling-view .controls #save-button {
  margin-left: 64px !important;
}

x-profiling-view .controls #upload-button {
  display: none;
}

x-profiling-view > tr-ui-timeline-view {
  -webkit-flex: 1 1 auto;
  min-height: 0;
}

.report-id-message {
  -webkit-user-select: text;
}

x-timeline-view-buttons,
x-timeline-view-buttons > #monitoring-elements {
  display: flex;
  align-items: center;
}
</style>

<template id="profiling-view-template">
  <tr-ui-b-info-bar-group></tr-ui-b-info-bar-group>
  <x-timeline-view-buttons>
    <button id="record-button">Record</button>
    <span id="monitoring-elements">
      <input id="monitor-checkbox" type="checkbox">
      <label for="monitor-checkbox">Monitoring</label></input>
      <button id="capture-button">Capture Monitoring Snapshot</button>
    </span>
    <button id="save-button">Save</button>
    <button id="upload-button">Upload</button>
    <button id="load-button">Load</button>
  </x-timeline-view-buttons>
  <tr-ui-timeline-view>
    <track-view-container id='track_view_container'></track-view-container>
  </tr-ui-timeline-view>
</template>

<script>
'use strict';

/**
 * @fileoverview ProfilingView glues the View control to
 * TracingController.
 */
tr.exportTo('tr.ui.e.about_tracing', function() {
  function readFile(file) {
    return new Promise(function(resolve, reject) {
      var reader = new FileReader();
      var filename = file.name;
      reader.onload = function(data) {
        resolve(data.target.result);
      };
      reader.onerror = function(err) {
        reject(err);
      }

      var is_binary = /[.]gz$/.test(filename) || /[.]zip$/.test(filename);
      if (is_binary)
        reader.readAsArrayBuffer(file);
      else
        reader.readAsText(file);
    });
  }

  /**
   * ProfilingView
   * @constructor
   * @extends {HTMLUnknownElement}
   */
  var ProfilingView = tr.ui.b.define('x-profiling-view');
  var THIS_DOC = document.currentScript.ownerDocument;
  var REPORT_UPLOAD_URL = 'http://crash-staging/';

  ProfilingView.prototype = {
    __proto__: HTMLUnknownElement.prototype,

    decorate: function(tracingControllerClient) {
      this.appendChild(tr.ui.b.instantiateTemplate('#profiling-view-template',
          THIS_DOC));

      this.timelineView_ = this.querySelector('tr-ui-timeline-view');
      this.infoBarGroup_ = this.querySelector('tr-ui-b-info-bar-group');

      // Detach the buttons. We will reattach them to the timeline view.
      // TODO(nduca): Make timeline-view have a content select="x-buttons"
      // that pulls in any buttons.
      this.monitoringElements_ = this.querySelector('#monitoring-elements');
      this.monitorCheckbox_ = this.querySelector('#monitor-checkbox');
      this.captureButton_ = this.querySelector('#capture-button');
      this.recordButton_ = this.querySelector('#record-button');
      this.loadButton_ = this.querySelector('#load-button');
      this.saveButton_ = this.querySelector('#save-button');
      this.uploadButton_ = this.querySelector('#upload-button');

      var buttons = this.querySelector('x-timeline-view-buttons');
      buttons.parentElement.removeChild(buttons);
      this.timelineView_.leftControls.appendChild(buttons);
      this.initButtons_();

      this.timelineView_.hotkeyController.addHotKey(new tr.ui.b.HotKey({
        eventType: 'keypress',
        keyCode: 'r'.charCodeAt(0),
        callback: function(e) {
          this.beginRecording();
          event.stopPropagation();
        },
        thisArg: this
      }));

      this.initDragAndDrop_();

      if (tracingControllerClient) {
        this.tracingControllerClient_ = tracingControllerClient;
      } else if (window.DevToolsHost !== undefined) {
        this.tracingControllerClient_ =
            new tr.ui.e.about_tracing.InspectorTracingControllerClient();
      } else {
        this.tracingControllerClient_ =
            new tr.ui.e.about_tracing.XhrBasedTracingControllerClient();
      }

      this.isRecording_ = false;
      this.isMonitoring_ = false;
      this.activeTrace_ = undefined;

      window.onMonitoringStateChanged = function(is_monitoring) {
        this.onMonitoringStateChanged_(is_monitoring);
      }.bind(this);

      window.onUploadError = function(error_message) {
        this.setUploadOverlayText_(['Trace upload failed: ' + error_message]);
      }.bind(this);
      window.onUploadProgress = function(percent, currentAsString,
                                         totalAsString) {
        this.setUploadOverlayText_(
            ['Upload progress: ' + percent + '% (' + currentAsString + ' of ' +
            currentAsString + ' bytes)']);
      }.bind(this);
      window.onUploadComplete = function(reportId) {
        var messageDiv = document.createElement('div');
        var textNode = document.createTextNode(
            'Trace uploaded successfully. Report id: ');
        messageDiv.appendChild(textNode);
        var reportLink = document.createElement('a');
        messageDiv.appendChild(reportLink);
        reportLink.href = REPORT_UPLOAD_URL + reportId;
        reportLink.text = reportId;
        reportLink.className = 'report-id-message';
        reportLink.target = '_blank';
        this.setUploadOverlayContent_(messageDiv);
      }.bind(this);

      this.getMonitoringStatus();
      this.updateTracingControllerSpecificState_();
    },

    // Detach all document event listeners. Without this the tests can get
    // confused as the element may still be listening when the next test runs.
    detach_: function() {
      this.detachDragAndDrop_();
    },

    get isRecording() {
      return this.isRecording_;
    },

    get isMonitoring() {
      return this.isMonitoring_;
    },

    set tracingControllerClient(tracingControllerClient) {
      this.tracingControllerClient_ = tracingControllerClient;
      this.updateTracingControllerSpecificState_();
    },

    updateTracingControllerSpecificState_: function() {
      var isInspector = this.tracingControllerClient_ instanceof
          tr.ui.e.about_tracing.InspectorTracingControllerClient;

      if (isInspector) {
        this.infoBarGroup_.addMessage(
            'This about:tracing is connected to a remote device...',
            [{buttonText: 'Wow!', onClick: function() {}}]);
      }

      this.monitoringElements_.style.display = isInspector ? 'none' : '';
    },

    beginRecording: function() {
      if (this.isRecording_)
        throw new Error('Already recording');
      if (this.isMonitoring_)
        throw new Error('Already monitoring');
      this.isRecording_ = true;
      this.monitorCheckbox_.disabled = true;
      this.monitorCheckbox_.checked = false;
      var resultPromise = tr.ui.e.about_tracing.beginRecording(
          this.tracingControllerClient_);
      resultPromise.then(
          function(data) {
            this.isRecording_ = false;
            this.monitorCheckbox_.disabled = false;
            var traceName = tr.ui.e.about_tracing.defaultTraceName(
                this.tracingControllerClient_);
            this.setActiveTrace(traceName, data, false);
          }.bind(this),
          function(err) {
            this.isRecording_ = false;
            this.monitorCheckbox_.disabled = false;
            if (err instanceof tr.ui.e.about_tracing.UserCancelledError)
              return;
            tr.ui.b.Overlay.showError('Error while recording', err);
          }.bind(this));
      return resultPromise;
    },

    beginMonitoring: function() {
      if (this.isRecording_)
        throw new Error('Already recording');
      if (this.isMonitoring_)
        throw new Error('Already monitoring');
      var resultPromise =
          tr.ui.e.about_tracing.beginMonitoring(this.tracingControllerClient_);
      resultPromise.then(
          function() {
          }.bind(this),
          function(err) {
            if (err instanceof tr.ui.e.about_tracing.UserCancelledError)
              return;
            tr.ui.b.Overlay.showError('Error while monitoring', err);
          }.bind(this));
      return resultPromise;
    },

    endMonitoring: function() {
      if (this.isRecording_)
        throw new Error('Already recording');
      if (!this.isMonitoring_)
        throw new Error('Monitoring is disabled');
      var resultPromise =
          tr.ui.e.about_tracing.endMonitoring(this.tracingControllerClient_);
      resultPromise.then(
          function() {
          }.bind(this),
          function(err) {
            if (err instanceof tr.ui.e.about_tracing.UserCancelledError)
              return;
            tr.ui.b.Overlay.showError('Error while monitoring', err);
          }.bind(this));
      return resultPromise;
    },

    captureMonitoring: function() {
      if (!this.isMonitoring_)
        throw new Error('Monitoring is disabled');
      var resultPromise =
          tr.ui.e.about_tracing.captureMonitoring(
              this.tracingControllerClient_);
      resultPromise.then(
          function(data) {
            var traceName = tr.ui.e.about_tracing.defaultTraceName(
                this.tracingControllerClient_);
            this.setActiveTrace(traceName, data, true);
          }.bind(this),
          function(err) {
            if (err instanceof tr.ui.e.about_tracing.UserCancelledError)
              return;
            tr.ui.b.Overlay.showError('Error while monitoring', err);
          }.bind(this));
      return resultPromise;
    },

    getMonitoringStatus: function() {
      var resultPromise =
          tr.ui.e.about_tracing.getMonitoringStatus(
              this.tracingControllerClient_);
      resultPromise.then(
          function(status) {
            this.onMonitoringStateChanged_(status.isMonitoring);
          }.bind(this),
          function(err) {
            if (err instanceof tr.ui.e.about_tracing.UserCancelledError)
              return;
            tr.ui.b.Overlay.showError('Error while updating tracing states',
                                      err);
          }.bind(this));
      return resultPromise;
    },

    onMonitoringStateChanged_: function(is_monitoring) {
      this.isMonitoring_ = is_monitoring;
      this.recordButton_.disabled = is_monitoring;
      this.captureButton_.disabled = !is_monitoring;
      this.monitorCheckbox_.checked = is_monitoring;
    },

    get timelineView() {
      return this.timelineView_;
    },

    ///////////////////////////////////////////////////////////////////////////

    clearActiveTrace: function() {
      this.saveButton_.disabled = true;
      this.uploadButton_.disabled = true;
      this.activeTrace_ = undefined;
    },

    setActiveTrace: function(filename, data) {
      this.activeTrace_ = {
        filename: filename,
        data: data
      };

      this.infoBarGroup_.clearMessages();
      this.updateTracingControllerSpecificState_();
      this.saveButton_.disabled = false;
      this.uploadButton_.disabled = false;
      this.timelineView_.viewTitle = filename;

      var m = new tr.Model();
      var i = new tr.importer.Import(m);
      var p = i.importTracesWithProgressDialog([data]);
      p.then(
          function() {
            this.timelineView_.model = m;
            this.timelineView_.updateDocumentFavicon();
          }.bind(this),
          function(err) {
            tr.ui.b.Overlay.showError('While importing: ', err);
          }.bind(this));
    },

    ///////////////////////////////////////////////////////////////////////////

    initButtons_: function() {
      this.recordButton_.addEventListener(
          'click', function(event) {
            event.stopPropagation();
            this.beginRecording();
          }.bind(this));

      this.monitorCheckbox_.addEventListener(
          'click', function(event) {
            event.stopPropagation();
            if (this.isMonitoring_)
              this.endMonitoring();
            else
              this.beginMonitoring();
          }.bind(this));

      this.captureButton_.addEventListener(
          'click', function(event) {
            event.stopPropagation();
            this.captureMonitoring();
          }.bind(this));
      this.captureButton_.disabled = true;

      this.loadButton_.addEventListener(
          'click', function(event) {
            event.stopPropagation();
            this.onLoadClicked_();
          }.bind(this));

      this.saveButton_.addEventListener('click',
                                        this.onSaveClicked_.bind(this));
      this.saveButton_.disabled = true;

      this.uploadButton_.addEventListener('click',
                                          this.onUploadClicked_.bind(this));
      if (typeof(chrome.send) === 'function') {
        this.uploadButton_.style.display = 'inline-block';
      }
      this.uploadButton_.disabled = true;
      this.uploadOverlay_ = null;
    },

    requestFilename_: function() {

      // unsafe filename patterns:
      var illegalRe = /[\/\?<>\\:\*\|":]/g;
      var controlRe = /[\x00-\x1f\x80-\x9f]/g;
      var reservedRe = /^\.+$/;

      var filename;
      var defaultName = this.activeTrace_.filename;
      var fileExtension = '.json';
      var fileRegex = /\.json$/;
      if (/[.]gz$/.test(defaultName)) {
        fileExtension += '.gz';
        fileRegex = /\.json\.gz$/;
      } else if (/[.]zip$/.test(defaultName)) {
        fileExtension = '.zip';
        fileRegex = /\.zip$/;
      }

      var custom = prompt('Filename? (' + fileExtension +
                          ' appended) Or leave blank:');
      if (custom === null)
        return undefined;

      var name;
      if (custom) {
        name = ' ' + custom;
      } else {
        var date = new Date();
        var dateText = ' ' + date.toDateString() +
                       ' ' + date.toLocaleTimeString();
        name = dateText;
      }

      filename = defaultName.replace(fileRegex, name) + fileExtension;

      return filename
              .replace(illegalRe, '.')
              .replace(controlRe, '\u2022')
              .replace(reservedRe, '')
              .replace(/\s+/g, '_');
    },

    onSaveClicked_: function() {
      // Create a blob URL from the binary array.
      var blob = new Blob([this.activeTrace_.data],
                          {type: 'application/octet-binary'});
      var blobUrl = window.webkitURL.createObjectURL(blob);

      // Create a link and click on it. BEST API EVAR!
      var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      link.href = blobUrl;
      var filename = this.requestFilename_();
      if (filename) {
        link.download = filename;
        link.click();
      }
    },

    onUploadClicked_: function() {
      if (this.uploadOverlay_) {
        throw new Error('Already uploading');
      }
      this.initUploadStatusOverlay_();
    },

    initUploadStatusOverlay_: function() {
      this.uploadOverlay_ = tr.ui.b.Overlay();
      this.uploadOverlay_.title = 'Uploading trace...';
      this.uploadOverlay_.userCanClose = false;
      this.uploadOverlay_.visible = true;

      this.setUploadOverlayText_([
        'You are about to upload trace data to Google server.',
        'Would you like to proceed?'
      ]);
      var okButton = document.createElement('button');
      okButton.textContent = 'Ok';
      okButton.addEventListener('click', this.doTraceUpload_.bind(this));
      this.uploadOverlay_.buttons.appendChild(okButton);

      var cancelButton = document.createElement('button');
      cancelButton.textContent = 'Cancel';
      cancelButton.addEventListener('click',
                                    this.hideUploadOverlay_.bind(this));
      this.uploadOverlay_.buttons.appendChild(cancelButton);
    },

    setUploadOverlayContent_: function(content) {
      if (!this.uploadOverlay_)
        throw new Error('Not uploading');

      this.uploadOverlay_.textContent = '';
      this.uploadOverlay_.appendChild(content);
    },

    setUploadOverlayText_: function(messages) {
      var contentDiv = document.createElement('div');

      for (var i = 0; i < messages.length; ++i) {
        var messageDiv = document.createElement('div');
        messageDiv.textContent = messages[i];
        contentDiv.appendChild(messageDiv);
      }
      this.setUploadOverlayContent_(contentDiv);
    },

    doTraceUpload_: function() {
      this.setUploadOverlayText_(['Uploading trace data...']);
      this.uploadOverlay_.buttons.removeChild(
          this.uploadOverlay_.buttons.firstChild);
      this.uploadOverlay_.buttons.firstChild.textContent = 'Close';

      var filename = this.activeTrace_.filename;
      var isBinary = /[.]gz$/.test(filename) || /[.]zip$/.test(filename);
      if (isBinary) {
        var data_base64 = tr.b.Base64.EncodeArrayBufferToString(
            this.activeTrace_.data);
        chrome.send('doUploadBase64', [data_base64]);
      } else {
        chrome.send('doUpload', [this.activeTrace_.data]);
      }
    },

    hideUploadOverlay_: function() {
      if (!this.uploadOverlay_)
        throw new Error('Not uploading');

      this.uploadOverlay_.visible = false;
      this.uploadOverlay_ = null;
    },

    onLoadClicked_: function() {
      var inputElement = document.createElement('input');
      inputElement.type = 'file';
      inputElement.multiple = false;

      var changeFired = false;
      inputElement.addEventListener(
          'change',
          function(e) {
            if (changeFired)
              return;
            changeFired = true;

            var file = inputElement.files[0];
            readFile(file).then(
                function(data) {
                  this.setActiveTrace(file.name, data);
                }.bind(this),
                function(err) {
                  tr.ui.b.Overlay.showError('Error while loading file: ' + err);
                });
          }.bind(this), false);
      inputElement.click();
    },

    ///////////////////////////////////////////////////////////////////////////

    initDragAndDrop_: function() {
      this.dropHandler_ = this.dropHandler_.bind(this);
      this.ignoreDragEvent_ = this.ignoreDragEvent_.bind(this);
      document.addEventListener('dragstart', this.ignoreDragEvent_, false);
      document.addEventListener('dragend', this.ignoreDragEvent_, false);
      document.addEventListener('dragenter', this.ignoreDragEvent_, false);
      document.addEventListener('dragleave', this.ignoreDragEvent_, false);
      document.addEventListener('dragover', this.ignoreDragEvent_, false);
      document.addEventListener('drop', this.dropHandler_, false);
    },

    detachDragAndDrop_: function() {
      document.removeEventListener('dragstart', this.ignoreDragEvent_);
      document.removeEventListener('dragend', this.ignoreDragEvent_);
      document.removeEventListener('dragenter', this.ignoreDragEvent_);
      document.removeEventListener('dragleave', this.ignoreDragEvent_);
      document.removeEventListener('dragover', this.ignoreDragEvent_);
      document.removeEventListener('drop', this.dropHandler_);
    },

    ignoreDragEvent_: function(e) {
      e.preventDefault();
      return false;
    },

    dropHandler_: function(e) {
      if (this.isAnyDialogUp_)
        return;

      e.stopPropagation();
      e.preventDefault();

      var files = e.dataTransfer.files;
      if (files.length !== 1) {
        tr.ui.b.Overlay.showError('1 file supported at a time.');
        return;
      }

      readFile(files[0]).then(
          function(data) {
            this.setActiveTrace(files[0].name, data);
          }.bind(this),
          function(err) {
            tr.ui.b.Overlay.showError('Error while loading file: ' + err);
          });
      return false;
    }
  };

  return {
    ProfilingView: ProfilingView
  };
});
</script>