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