<!DOCTYPE html> <html> <!-- Copyright (c) 2015 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>Deep insights via Bulk Trace Analysis</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="import" href="/tracing/ui/base/base.html" data-suppress-import-order> <link rel="import" href="/tracing/ui/extras/deep_reports/html_results.html"> <link rel="import" href="/tracing/ui/extras/deep_reports/main.html"> <link rel="import" href="/tracing/ui/extras/full_config.html"> <link rel="import" href="/tracing/ui/timeline_view.html"> <style> body { font-family: sans-serif; } </style> </head> <body> <select id="trace-dir"></select> <tr-ui-e-deep-reports-html-results id="results"> </tr-ui-e-deep-reports-html-results> <script> 'use strict'; function onLoad() { tr.b.getAsync('/test_data/__file_list__').then(function(data) { var select = document.querySelector('#trace-file'); var all_files = JSON.parse(data); var filenames = all_files.filter(function(file) { if (!file.startsWith('measurmt-traces/')) return false; if (file === 'measurmt-traces/README.md') return false; return true; }); initUI(filenames); }); } window.addEventListener('load', onLoad); function initUI(files) { // Groups. var filesByDirName = {}; files.forEach(function(file) { var rest = /measurmt-traces\/(.+)/.exec(file)[1]; // Find subdirectories. var m = /(.+?)\/(.*)/.exec(rest); var dirName = m[1]; var baseName = m[2]; if (baseName == 'rail_expectations.json') { // TODO(nduca): Stash this somewhere else. return; } if (baseName.endsWith('.mp4')) { // TODO(nduca): Stash this somewhere else. return; } if (filesByDirName[dirName] === undefined) filesByDirName[dirName] = []; filesByDirName[dirName].push(file); }); var selectEl = document.body.querySelector('#trace-dir'); selectEl.filesByDirName = filesByDirName; tr.b.iterItems(filesByDirName, function(dirName, filesInDir) { var runEl = document.createElement('option'); runEl.textContent = dirName + ': ' + filesInDir.length + ' traces'; runEl.value = dirName; selectEl.appendChild(runEl); }); selectEl.selectedIndex = 0; selectEl.addEventListener('change', 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(); } } function onSelectionChange() { var selectEl = document.body.querySelector('#trace-dir'); window.location.hash = '#' + selectEl[selectEl.selectedIndex].value; } function onHashChange() { var file = window.location.hash.substr(1); var selectEl = document.querySelector('#trace-dir'); 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(); } window.addEventListener('hashchange', onHashChange); function reload() { var dirName = window.location.hash.substr(1); var selectEl = document.body.querySelector('#trace-dir'); var filesInDir = selectEl.filesByDirName[dirName]; var results = document.querySelector('#results'); results.clear(); tr.ui.e.deep_reports.main(results, filesInDir).then( function success() { }, function error(err) { tr.showPanic('Error', err); }); } </script> </body> </html>