catapult/tracing/tracing_examples/trace_viewer.html - platform/external/chromium-trace - Git at Google

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

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

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