| <!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> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| |
| <script src="/components/webcomponentsjs/webcomponents.js"></script> |
| <script> |
| 'use strict'; |
| |
| // Force Polymer into native shadowDom mode |
| window.Polymer = window.Polymer || {}; |
| window.Polymer.dom = 'shadow'; |
| </script> |
| |
| <link rel="import" href="/components/polymer/polymer.html"> |
| <link rel="import" href="/tracing/base/timing.html"> |
| <link rel="import" href="/tracing/base/xhr.html"> |
| <link rel="import" href="/tracing/importer/import.html"> |
| <link rel="import" href="/tracing/ui/extras/full_config.html"> |
| <link rel="import" href="/tracing/ui/timeline_view.html"> |
| |
| <style> |
| html, |
| body { |
| height: 100%; |
| } |
| |
| body { |
| -webkit-flex-direction: column; |
| display: -webkit-flex; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body > tr-ui-timeline-view { |
| -webkit-flex: 1 1 auto; |
| min-height: 0; |
| } |
| body > tr-ui-timeline-view:focus { |
| outline: none; |
| } |
| </style> |
| </head> |
| <body> |
| <tr-ui-timeline-view> |
| <track-view-container id='track_view_container'></track-view-container> |
| </tr-ui-timeline-view> |
| |
| <script> |
| 'use strict'; |
| |
| var Timing = tr.b.Timing; |
| var timelineViewEl; |
| var selectEl; |
| |
| function loadTraces(filenames, onTracesLoaded) { |
| var loadTracesMakedTimer = Timing.mark('TraceImport', 'loadTraces'); |
| 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) { |
| loadTracesMakedTimer.end(); |
| onTracesLoaded(filenames, traces); |
| } |
| }); |
| }); |
| } |
| |
| |
| function getAsync(url, cb) { |
| return tr.b.getAsync(url).then(cb); |
| } |
| |
| function createViewFromTraces(filenames, traces) { |
| var createViewFromTracesTimer = Timing.mark( |
| 'TraceImport', 'createViewFromTraces'); |
| var m = new tr.Model(); |
| |
| var trackDetailedModelStatsEl = |
| tr.b.findDeepElementMatching(document.body, |
| '#track-detailed-model-stats'); |
| var importOptions = new tr.importer.ImportOptions(); |
| importOptions.trackDetailedModelStats = trackDetailedModelStatsEl.checked; |
| var i = new tr.importer.Import(m, importOptions); |
| var p = i.importTracesWithProgressDialog(traces); |
| |
| p.then( |
| function() { |
| timelineViewEl.model = m; |
| timelineViewEl.updateDocumentFavicon(); |
| timelineViewEl.globalMode = true; |
| timelineViewEl.viewTitle = ''; |
| createViewFromTracesTimer.end(); |
| }, |
| function(err) { |
| var overlay = new tr.ui.b.Overlay(); |
| overlay.textContent = tr.b.normalizeException(err).message; |
| overlay.title = 'Import error'; |
| overlay.visible = true; |
| createViewFromTracesTimer.end(); |
| }); |
| } |
| |
| function onSelectionChange() { |
| window.location.hash = '#' + selectEl[selectEl.selectedIndex].value; |
| } |
| |
| function onHashChange() { |
| var file = window.location.hash.substr(1); |
| if (selectEl[selectEl.selectedIndex].value != file) { |
| for (var i = 0; i < selectEl.children.length; i++) { |
| if (selectEl.children[i].value === file) { |
| selectEl.selectedIndex = i; |
| break; |
| } |
| } |
| } |
| reload(); |
| } |
| |
| function cleanFilename(file) { |
| var m = /\/tracing\/test_data\/(.+)/.exec(file); |
| var rest = m[1]; |
| |
| function upcase(letter) { |
| return ' ' + letter.toUpperCase(); |
| } |
| |
| return rest.replace(/_/g, ' ') |
| .replace(/\.[^\.]*$/, '') |
| .replace(/ ([a-z])/g, upcase) |
| .replace(/^[a-z]/, upcase); |
| } |
| |
| function reload() { |
| loadTraces([window.location.hash.substr(1)], createViewFromTraces); |
| } |
| |
| window.addEventListener('hashchange', onHashChange); |
| |
| function onLoad() { |
| var onLoadTimer = Timing.mark('TraceImport', 'onLoad'); |
| timelineViewEl = document.querySelector('tr-ui-timeline-view'); |
| timelineViewEl.globalMode = true; |
| |
| |
| selectEl = document.createElement('select'); |
| timelineViewEl.leftControls.appendChild(selectEl); |
| |
| getAsync('/tracing/test_data/__file_list__', function(data) { |
| 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]); |
| selectEl.appendChild(opt); |
| } |
| selectEl.selectedIndex = 0; |
| selectEl.onchange = onSelectionChange; |
| |
| if (!window.location.hash) { |
| // This will trigger an onHashChange so no need to reload directly. |
| window.location.hash = '#' + selectEl[selectEl.selectedIndex].value; |
| } else { |
| onHashChange(); |
| } |
| }).then(onLoadTimer.end.call(this)); |
| |
| var trackDetailedModelStatsEl = tr.ui.b.createCheckBox( |
| this, 'trackDetailedModelStats', |
| 'traceViewer.trackDetailedModelStats', false, |
| 'Detailed file size stats', |
| onHashChange); |
| trackDetailedModelStatsEl.id = 'track-detailed-model-stats'; |
| timelineViewEl.leftControls.appendChild(trackDetailedModelStatsEl); |
| } |
| |
| window.addEventListener('load', onLoad); |
| </script> |
| </body> |
| </html> |