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