<!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>
<script src="/src/base.js"></script>
<style>
.view {
overflow: hidden;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="header">
<select id="trace_file">
</select>
</div>
<div class="main">
<div class="view">
</div>
</div>
<script>
base.require('tracing.timeline_view');
base.require('tracing.importer');
base.require('cc');
base.require('tcmalloc');
</script>
<script>
'use strict';
var timelineViewEl;
function loadTraces(filenames, onTracesLoaded) {
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)
onTracesLoaded(filenames, traces);
});
});
}
function getAsync(url, cb) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function(aEvt) {
if (req.readyState == 4) {
window.setTimeout(function() {
if (req.status == 200) {
cb(req.responseText);
} else {
console.log('Failed to load ' + url);
}
}, 0);
}
};
req.send(null);
}
function createViewFromTraces(filenames, traces) {
var m = new tracing.TraceModel();
m.importTraces(traces, true);
timelineViewEl.model = m;
timelineViewEl.tabIndex = 1;
if (timelineViewEl.timeline)
timelineViewEl.timeline.focusElement = timelineViewEl;
timelineViewEl.viewTitle = filenames;
}
function onSelectionChange() {
var select = document.querySelector('#trace_file');
window.location.hash = '#' + select[select.selectedIndex].value;
}
function onHashChange() {
var file = window.location.hash.substr(1);
var select = document.querySelector('#trace_file');
if (select[select.selectedIndex].value != file) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].value == file) {
select.selectedIndex = i;
break;
}
}
}
reload();
}
function cleanFilename(file) {
function upcase(letter) {
return ' ' + letter.toUpperCase();
}
return file.replace(/_/g, ' ')
.replace(/\.[^\.]*$/, '')
.replace(/ ([a-z])/g, upcase)
.replace(/^[a-z]/, upcase);
}
function reload() {
var file = window.location.hash.substr(1);
var filenames = ['../test_data/' + file];
loadTraces(filenames, createViewFromTraces);
}
window.addEventListener('hashchange', onHashChange);
function onLoad() {
timelineViewEl = document.querySelector('.view');
ui.decorate(timelineViewEl, tracing.TimelineView);
getAsync('/json/examples', function(data) {
var select = document.querySelector('#trace_file');
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]);
select.appendChild(opt);
}
select.selectedIndex = 0;
select.onchange = onSelectionChange;
if (!window.location.hash) {
// This will trigger an onHashChange so no need to reload directly.
window.location.hash = '#' + select[select.selectedIndex].value;
} else {
onHashChange();
}
});
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>