| <!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> |