src/third_party/trace-viewer/examples/trace_viewer.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 Copyright (c) 2011 The Chromium Authors. All rights reserved.
   5 Use of this source code is governed by a BSD-style license that can be
   6 found in the LICENSE file.
   7 -->
   8 <head>
   9 <title>Simple Embedded Viewer</title>
  10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  11
  12 <script src="/components/platform/platform.js"></script>
  13
  14 <link rel="import" href="/components/polymer/polymer.html">
  15 <link rel="import" href="/tracing/timeline_view.html">
  16 <link rel="import" href="/tracing/importer.html">
  17 <link rel="import" href="/cc.html">
  18 <link rel="import" href="/net.html">
  19 <link rel="import" href="/tcmalloc.html">
  20 <link rel="import" href="/system_stats.html">
  21 <link rel="import" href="/gpu.html">
  22 <style>
  23   body {
  24     margin: 0;
  25     padding: 0;
  26     width: 100%;
  27     height: 100%;
  28     display: -webkit-flex;
  29     -webkit-flex-direction: column;
  30   }
  31
  32   body > x-timeline-view {
  33     -webkit-flex: 1 1 auto;
  34     overflow: hidden;
  35     position: absolute;
  36     top: 40px;
  37     bottom: 0;
  38     left: 0;
  39     right: 0;
  40   }
  41
  42 </style>
  43 </head>
  44 <body>
  45   <div class="header">
  46   <select id="trace_file">
  47   </select>
  48   </div>
  49   <x-timeline-view>
  50   </x-timeline-view>
  51
  52   <script>
  53   'use strict';
  54
  55   var timelineViewEl;
  56
  57   function loadTraces(filenames, onTracesLoaded) {
  58     var traces = [];
  59     for (var i = 0; i < filenames.length; i++) {
  60       traces.push(undefined);
  61     }
  62     var numTracesPending = filenames.length;
  63
  64     filenames.forEach(function(filename, i) {
  65       getAsync(filename, function(trace) {
  66         traces[i] = trace;
  67         numTracesPending--;
  68         if (numTracesPending == 0)
  69           onTracesLoaded(filenames, traces);
  70       });
  71     });
  72   }
  73
  74   function getAsync(url, cb) {
  75     var req = new XMLHttpRequest();
  76     var is_binary = /[.]gz$/.test(url) || /[.]zip$/.test(url);
  77     req.overrideMimeType('text/plain; charset=x-user-defined');
  78     req.open('GET', url, true);
  79     if (is_binary)
  80       req.responseType = 'arraybuffer';
  81     req.onreadystatechange = function(aEvt) {
  82       if (req.readyState == 4) {
  83         window.setTimeout(function() {
  84           if (req.status == 200) {
  85             cb(is_binary ? req.response : req.responseText);
  86           } else {
  87             console.log('Failed to load ' + url);
  88           }
  89         }, 0);
  90       }
  91     };
  92     req.send(null);
  93   }
  94
  95   function createViewFromTraces(filenames, traces) {
  96     var m = new tracing.TraceModel();
  97     var p = m.importTracesWithProgressDialog(traces, true);
  98     p.then(
  99       function() {
 100         timelineViewEl.model = m;
 101         timelineViewEl.tabIndex = 1;
 102         if (timelineViewEl.timeline)
 103           timelineViewEl.timeline.focusElement = timelineViewEl;
 104         timelineViewEl.viewTitle = filenames;
 105       },
 106       function(err) {
 107         var overlay = new tv.ui.Overlay();
 108         overlay.textContent = tv.normalizeException(err).message;
 109         overlay.title = 'Import error';
 110         overlay.visible = true;
 111       });
 112   }
 113
 114   function onSelectionChange() {
 115     var select = document.querySelector('#trace_file');
 116     window.location.hash = '#' + select[select.selectedIndex].value;
 117   }
 118
 119   function onHashChange() {
 120     var file = window.location.hash.substr(1);
 121     var select = document.querySelector('#trace_file');
 122     if (select[select.selectedIndex].value != file) {
 123       for (var i = 0; i < select.children.length; i++) {
 124         if (select.children[i].value == file) {
 125           select.selectedIndex = i;
 126           break;
 127         }
 128       }
 129     }
 130     reload();
 131   }
 132
 133   function cleanFilename(file) {
 134     function upcase(letter) {
 135       return ' ' + letter.toUpperCase();
 136     }
 137
 138     return file.replace(/_/g, ' ')
 139                .replace(/\.[^\.]*$/, '')
 140                .replace(/ ([a-z])/g, upcase)
 141                .replace(/^[a-z]/, upcase);
 142   }
 143
 144   function reload() {
 145     var file = window.location.hash.substr(1);
 146     var filenames = ['../test_data/' + file];
 147     loadTraces(filenames, createViewFromTraces);
 148   }
 149
 150   window.addEventListener('hashchange', onHashChange);
 151
 152   function onLoad() {
 153     timelineViewEl = document.querySelector('x-timeline-view');
 154     tv.ui.decorate(timelineViewEl, tracing.TimelineView);
 155
 156     getAsync('/json/examples', function(data) {
 157       var select = document.querySelector('#trace_file');
 158       var files = JSON.parse(data);
 159
 160       for (var i = 0; i < files.length; ++i) {
 161         var opt = document.createElement('option');
 162         opt.value = files[i];
 163         opt.textContent = cleanFilename(files[i]);
 164         select.appendChild(opt);
 165       }
 166       select.selectedIndex = 0;
 167       select.onchange = onSelectionChange;
 168
 169       if (!window.location.hash) {
 170         // This will trigger an onHashChange so no need to reload directly.
 171         window.location.hash = '#' + select[select.selectedIndex].value;
 172       } else {
 173         onHashChange();
 174       }
 175     });
 176   }
 177   window.addEventListener('load', onLoad);
 178   </script>
 179 </body>
 180 </html>