tracing/tracing_examples/trace_viewer.html

<!DOCTYPE html>
<html>
<!--
Copyright (c) 2011 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.
-->
<head>
<title>Simple Embedded Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="import" href="/tracing/base/timing.html">
<link rel="import" href="/tracing/base/xhr.html">
<link rel="import" href="/tracing/importer/import.html">
<link rel="import" href="/tracing/ui/extras/full_config.html">
<link rel="import" href="/tracing/ui/timeline_view.html">

<style>
  html,
  body {
    height: 100%;
  }

  body {
    -webkit-flex-direction: column;
    display: -webkit-flex;
    margin: 0;
    padding: 0;
  }

  body > tr-ui-timeline-view {
    -webkit-flex: 1 1 auto;
    min-height: 0;
  }
  body > tr-ui-timeline-view:focus {
    outline: none;
  }
</style>
</head>
<body>
  <tr-ui-timeline-view>
    <track-view-container id='track_view_container'></track-view-container>
  </tr-ui-timeline-view>

  <script>
  'use strict';

  var Timing = tr.b.Timing;
  var timelineViewEl;
  var selectEl;

  function loadTraces(filenames, onTracesLoaded) {
    var loadTracesMakedTimer = Timing.mark('TraceImport', 'loadTraces');
    var traces = [];
    for (var i = 0; i < filenames.length; i++) {
      traces.push(undefined);
    }
    var numTracesPending = filenames.length;

    filenames.forEach(function(filename, i) {
      getAsync(filename, function(trace) {
        traces[i] = trace;
        numTracesPending--;
        if (numTracesPending == 0) {
          loadTracesMakedTimer.end();
          onTracesLoaded(filenames, traces);
        }
      });
    });
  }


  function getAsync(url, cb) {
    return tr.b.getAsync(url).then(cb);
  }

  function createViewFromTraces(filenames, traces) {
    var createViewFromTracesTimer = Timing.mark(
        'TraceImport', 'createViewFromTraces');
    var m = new tr.Model();

    var trackDetailedModelStatsEl =
        tr.b.findDeepElementMatching(document.body,
                                     '#track-detailed-model-stats');
    var importOptions = new tr.importer.ImportOptions();
    importOptions.trackDetailedModelStats = trackDetailedModelStatsEl.checked;
    var i = new tr.importer.Import(m, importOptions);
    var p = i.importTracesWithProgressDialog(traces);

    p.then(
      function() {
        timelineViewEl.model = m;
        timelineViewEl.updateDocumentFavicon();
        timelineViewEl.globalMode = true;
        timelineViewEl.viewTitle = '';
        createViewFromTracesTimer.end();
      },
      function(err) {
        var overlay = new tr.ui.b.Overlay();
        overlay.textContent = tr.b.normalizeException(err).message;
        overlay.title = 'Import error';
        overlay.visible = true;
        createViewFromTracesTimer.end();
      });
  }

  function onSelectionChange() {
    window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
  }

  function onHashChange() {
    var file = window.location.hash.substr(1);
    if (selectEl[selectEl.selectedIndex].value != file) {
      for (var i = 0; i < selectEl.children.length; i++) {
        if (selectEl.children[i].value === file) {
          selectEl.selectedIndex = i;
          break;
        }
      }
    }
    reload();
  }

  function cleanFilename(file) {
    var m = /\/tracing\/test_data\/(.+)/.exec(file);
    var rest = m[1];

    function upcase(letter) {
      return ' ' + letter.toUpperCase();
    }

    return rest.replace(/_/g, ' ')
               .replace(/\.[^\.]*$/, '')
               .replace(/ ([a-z])/g, upcase)
               .replace(/^[a-z]/, upcase);
  }

  function reload() {
    loadTraces([window.location.hash.substr(1)], createViewFromTraces);
  }

  window.addEventListener('hashchange', onHashChange);

  function onLoad() {
    var onLoadTimer = Timing.mark('TraceImport', 'onLoad');
    timelineViewEl = document.querySelector('tr-ui-timeline-view');
    timelineViewEl.globalMode = true;


    selectEl = document.createElement('select');
    timelineViewEl.leftControls.appendChild(selectEl);

    getAsync('/tracing/test_data/__file_list__', function(data) {
      var files = JSON.parse(data);
      for (var i = 0; i < files.length; ++i) {
        var opt = document.createElement('option');
        opt.value = files[i];
        opt.textContent = cleanFilename(files[i]);
        selectEl.appendChild(opt);
      }
      selectEl.selectedIndex = 0;
      selectEl.onchange = onSelectionChange;

      if (!window.location.hash) {
        // This will trigger an onHashChange so no need to reload directly.
        window.location.hash = '#' + selectEl[selectEl.selectedIndex].value;
      } else {
        onHashChange();
      }
    }).then(onLoadTimer.end.call(this));

    var trackDetailedModelStatsEl = tr.ui.b.createCheckBox(
        this, 'trackDetailedModelStats',
        'traceViewer.trackDetailedModelStats', false,
        'Detailed file size stats',
        onHashChange);
    trackDetailedModelStatsEl.id = 'track-detailed-model-stats';
    timelineViewEl.leftControls.appendChild(trackDetailedModelStatsEl);
  }

  window.addEventListener('load', onLoad);
  </script>
</body>
</html>