src/v8/tools/parse-processor.html - cobalt - Git at Google

 <!DOCTYPE html>
 <html>
 <!--
 Copyright 2016 the V8 project 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>
 <meta charset="utf-8">
 <title>V8 Parse Processor</title>
 <style>
   html {
     font-family: monospace;
   }

   .parse {
     background-color: red;
     border: 1px red solid;
   }

   .preparse {
     background-color: orange;
     border: 1px orange solid;
   }

   .resolution {
     background-color: green;
     border: 1px green solid;
   }

   .execution {
     background-color: black;
     border-left: 2px black solid;
     z-index: -1;
   }

   .script {
     margin-top: 1em;
     overflow: visible;
     clear: both;
       border-top: 2px black dotted;
   }
   .script h3 {
     height: 20px;
     margin-bottom: 0.5em;
     white-space: nowrap;
   }

   .script-details {
     float: left;
   }

   .chart {
     float: left;
     margin-right: 2em;
   }

   .funktion-list {
     float: left;
     height: 400px;
   }

   .funktion-list > ul {
     height: 80%;
     overflow-y: scroll;
   }

   .funktion {
   }

   .script-size {
     display: inline-flex;
     background-color: #505050;
     border-radius: 3px;
     padding: 3px;
     margin: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-decoration: none;
     color: white;
   }
   .script-size.eval {
     background-color: #ee6300fc;
   }
   .script-size.streaming {
     background-color: #008aff;
   }
   .script-size.deserialized {
     background-color: #1fad00fc;
   }

   .script-details {
     padding-right: 5px;
     margin-right: 4px;
   }
   /* all but the last need a border  */
   .script-details:nth-last-child(n+2) {
     border-right: 1px white solid;
   }

   .script-details.id {
     min-width: 2em;
     text-align: right;
   }
 </style>
 <script src="./splaytree.js"></script>
 <script src="./codemap.js"></script>
 <script src="./csvparser.js"></script>
 <script src="./consarray.js"></script>
 <script src="./profile.js"></script>
 <script src="./profile_view.js"></script>
 <script src="./logreader.js"></script>
 <script src="./arguments.js"></script>
 <script src="./parse-processor.js"></script>
 <script src="./SourceMap.js"></script>
 <script src="https://www.gstatic.com/charts/loader.js"></script>
 <script>
 "use strict";
 google.charts.load('current', {packages: ['corechart']});

 function $(query) {
   return document.querySelector(query);
 }

 function loadFile() {
   let files = $('#uploadInput').files;

   let file = files[0];
   let reader = new FileReader();

   reader.onload = function(evt) {
     const kTimerName = 'parse log file';
     console.time(kTimerName);
     let parseProcessor = new ParseProcessor();
     parseProcessor.processString(this.result);
     console.timeEnd(kTimerName);
     renderParseResults(parseProcessor);
     document.parseProcessor = parseProcessor;
   }
   reader.readAsText(file);
 }

 function handleOnLoad() {
   document.querySelector("#uploadInput").focus();
 }

 function createNode(tag, classNames) {
   let node = document.createElement(tag);
   if (classNames) {
     if (Array.isArray(classNames)) {
       node.classList.add(...classNames);
     } else {
       node.className = classNames;
     }
   }
   return node;
 }

 function div(...args) {
   return createNode('div', ...args);
 }

 function h1(string) {
   let node = createNode('h1');
   node.appendChild(text(string));
   return node;
 }

 function h3(string, ...args) {
   let node = createNode('h3', ...args);
   if (string) node.appendChild(text(string));
   return node;
 }

 function a(href, string, ...args) {
   let link = createNode('a', ...args);
   if (href.length) link.href = href;
   if (string) link.appendChild(text(string));
   return link;
 }

 function text(string) {
   return document.createTextNode(string);
 }

 function delay(t) {
   return new Promise(resolve => setTimeout(resolve, t));
 }

 function renderParseResults(parseProcessor) {
   let result = $('#result');
   // clear out all existing result pages;
   result.innerHTML = '';
   const start = parseProcessor.firstEventTimestamp;
   const end = parseProcessor.lastEventTimestamp;
   renderScript(result, parseProcessor.totalScript, start, end);
   // Build up the graphs lazily to keep the page responsive.
   parseProcessor.scripts.forEach(
       script => renderScript(result, script, start, end));
   renderScriptSizes(parseProcessor);
   // Install an intersection observer to lazily load the graphs when the script
   // div becomes visible for the first time.
   var io = new IntersectionObserver((entries, observer) => {
     entries.forEach(entry => {
       if (entry.intersectionRatio == 0) return;
       console.assert(!entry.target.querySelector('.graph'));
       let target = entry.target;
       appendGraph(target.script, target, start, end);
       observer.unobserve(entry.target);
     });
   }, {rootMargin: '400px'});
   document.querySelectorAll('.script').forEach(div => io.observe(div));
 }

 const kTimeFactor = 10;
 const kHeight = 20;
 const kFunktionTopOffset = 50;

 function renderScript(result, script, start, end) {
   // Filter out empty scripts.
   if (script.isEmpty() || script.lastParseEvent == 0) return;

   let scriptDiv = div('script');
   scriptDiv.script = script;

   let scriptTitle = h3();
   let anchor = a("", 'Script #' + script.id);
   anchor.name = "script"+script.id
   scriptTitle.appendChild(anchor);
   scriptDiv.appendChild(scriptTitle);
   if (script.file) scriptTitle.appendChild(a(script.file, script.file));
   let summary = createNode('pre', 'script-details');
   summary.appendChild(text(script.summary));
   scriptDiv.appendChild(summary);
   result.appendChild(scriptDiv);
 }

 function renderScriptSizes(parseProcessor) {
   let scriptsDiv = $('#scripts');
   parseProcessor.scripts.forEach(
     script => {
       let scriptDiv = a('#script'+script.id, '', 'script-size');
       let scriptId = div('script-details');
       scriptId.classList.add('id');
       scriptId.innerText = script.id;
       scriptDiv.appendChild(scriptId);
       let scriptSize = div('script-details');
       scriptSize.innerText = BYTES(script.bytesTotal);
       scriptDiv.appendChild(scriptSize);
       let scriptUrl = div('script-details');
       if (script.isEval) {
         scriptUrl.innerText = "eval";
         scriptDiv.classList.add('eval');
       } else {
         scriptUrl.innerText = script.file.split("/").pop();
       }
       if (script.isStreamingCompiled ) {
         scriptDiv.classList.add('streaming');
       } else if (script.deserializationTimestamp > 0) {
         scriptDiv.classList.add('deserialized');
       }
       scriptDiv.appendChild(scriptUrl);
       scriptDiv.style.width = script.bytesTotal * 0.001;
       scriptsDiv.appendChild(scriptDiv);
     });
 }

 const kMaxTime = 120 * kSecondsToMillis;
 // Resolution of the graphs
 const kTimeIncrement = 1;
 const kSelectionTimespan = 2;
 // TODO(cbruni): support compilation cache hit.
 const series = [
     ['firstParseEvent', 'Any Parse', 'area'],
     ['execution', '1st Exec', 'area'],
     ['firstCompileEvent', 'Any Compile', 'area'],
     ['compile', 'Eager Compile'],
     ['lazyCompile', 'Lazy Compile'],
     ['parse', 'Parsing'],
     ['preparse', 'Preparse'],
     ['resolution', 'Preparse with Var. Resolution'],
     ['deserialization', 'Deserialization'],
     ['optimization', 'Optimize'],
 ];
 const metricNames = series.map(each => each[0]);
 // Display cumulative values (useuful for bytes).
 const kCumulative = true;
 // Include durations in the graphs.
 const kUseDuration = false;


 function appendGraph(script, parentNode, start, end) {
   const timerLabel = 'graph script=' + script.id;
   // TODO(cbruni): add support for network events

   console.time(timerLabel);
   let data = new google.visualization.DataTable();
   data.addColumn('number', 'Duration');
   // The series are interleave bytes processed, time spent and thus have two
   // different vAxes.
   let seriesOptions = [];
   let colors = ['#4D4D4D', '#fff700', '#5DA5DA', '#FAA43A', '#60BD68',
       '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#F15854'];
   series.forEach(([metric, description, type]) => {
     let color = colors.shift();
     // Add the bytes column.
     data.addColumn('number', description);
     let options = {targetAxisIndex: 0, color: color};
     if (type == 'area') options.type = 'area';
     seriesOptions.push(options)
     // Add the time column.
     if (kUseDuration) {
       data.addColumn('number', description + ' Duration');
       seriesOptions.push(
           {targetAxisIndex: 1, color: color, lineDashStyle: [3, 2]});
     }
   });

   const maxTime = Math.min(kMaxTime, end);
   console.time('metrics');
   let metricValues =
     script.getAccumulatedTimeMetrics(metricNames , 0, maxTime, kTimeIncrement,
         kCumulative, kUseDuration);
   console.timeEnd('metrics');
   // Make sure that the series added to the graph matches the returned values.
   console.assert(metricValues[0].length == seriesOptions.length + 1);
   data.addRows(metricValues);

   let options = {
     explorer: {
       actions: ['dragToZoom', 'rightClickToReset'],
       maxZoomIn: 0.01
     },
     hAxis: {
       format: '#,###.##s'
     },
     vAxes: {
       0: {title: 'Bytes Touched', format: 'short'},
       1: {title: 'Duration', format: '#,###ms'}
     },
     height: 400,
     width: 1000,
     chartArea: {left: 70, top: 0, right: 160, height: "90%"},
     // The first series should be a area chart (total bytes touched),
     series: seriesOptions,
     // everthing else is a line.
     seriesType: 'line'
   };
   let graphNode = createNode('div', 'chart');
   let listNode = createNode('div', 'funktion-list');
   parentNode.appendChild(graphNode);
   parentNode.appendChild(listNode);
   let chart = new google.visualization.ComboChart(graphNode);
   google.visualization.events.addListener(chart, 'select',
       () => selectGraphPointHandler(chart, data, script, parentNode));
   chart.draw(data, options);
   // Add event listeners
   console.timeEnd(timerLabel);
 }

 function selectGraphPointHandler(chart, data, script, parentNode) {
   let selection = chart.getSelection();
   if (selection.length <= 0) return;
   // Display a list of funktions with events at the given time.
   let {row, column} = selection[0];
   if (row === null|| column === null) return;
   const kEntrySize = kUseDuration ? 2 : 1;
   let [metric, description] = series[((column-1)/ kEntrySize) | 0];
   let time = data.getValue(row, 0);
   let funktions = script.getFunktionsAtTime(
         time * kSecondsToMillis, kSelectionTimespan, metric);
   let oldList = parentNode.querySelector('.funktion-list');
   parentNode.replaceChild(
       createFunktionList(metric, description, time, funktions), oldList);
 }

 function createFunktionList(metric, description, time, funktions) {
   let container = createNode('div', 'funktion-list');
   container.appendChild(h3('Changes of "' + description + '" at ' +
         time + 's: ' + funktions.length));
   let listNode = createNode('ul');
   funktions.forEach(funktion => {
     let node = createNode('li', 'funktion');
     node.funktion = funktion;
     node.appendChild(text(funktion.toString(false) + " "));
     let script = funktion.script;
     if (script) {
       node.appendChild(a("#script" + script.id, "in script " + script.id));
     }
     listNode.appendChild(node);
   });
   container.appendChild(listNode);
   return container;
 }
 </script>
 </head>

 <body onload="handleOnLoad()">
   <h1>BEHOLD, THIS IS PARSEROR!</h1>

   <h2>Usage</h2>
   Run your script with <code>--log-function-events</code> and upload <code>v8.log</code> on this page:<br/>
   <code>/path/to/d8 --log-function-events your_script.js</code>

   <h2>Data</h2>
   <form name="fileForm">
     <p>
       <input id="uploadInput" type="file" name="files" onchange="loadFile();" accept=".log"> trace entries: <span id="count">0</span>
     </p>
   </form>


   <h2>Scripts</h2>
   <div id="scripts"></div>

   <h2>Result</h2>
   <div id="result"></div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>
	<!--
	Copyright 2016 the V8 project 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>
	<meta charset="utf-8">
	<title>V8 Parse Processor</title>
	<style>
	html {
	font-family: monospace;
	}

	.parse {
	background-color: red;
	border: 1px red solid;
	}

	.preparse {
	background-color: orange;
	border: 1px orange solid;
	}

	.resolution {
	background-color: green;
	border: 1px green solid;
	}

	.execution {
	background-color: black;
	border-left: 2px black solid;
	z-index: -1;
	}

	.script {
	margin-top: 1em;
	overflow: visible;
	clear: both;
	border-top: 2px black dotted;
	}
	.script h3 {
	height: 20px;
	margin-bottom: 0.5em;
	white-space: nowrap;
	}

	.script-details {
	float: left;
	}

	.chart {
	float: left;
	margin-right: 2em;
	}

	.funktion-list {
	float: left;
	height: 400px;
	}

	.funktion-list > ul {
	height: 80%;
	overflow-y: scroll;
	}

	.funktion {
	}

	.script-size {
	display: inline-flex;
	background-color: #505050;
	border-radius: 3px;
	padding: 3px;
	margin: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	color: white;
	}
	.script-size.eval {
	background-color: #ee6300fc;
	}
	.script-size.streaming {
	background-color: #008aff;
	}
	.script-size.deserialized {
	background-color: #1fad00fc;
	}

	.script-details {
	padding-right: 5px;
	margin-right: 4px;
	}
	/* all but the last need a border */
	.script-details:nth-last-child(n+2) {
	border-right: 1px white solid;
	}

	.script-details.id {
	min-width: 2em;
	text-align: right;
	}
	</style>
	<script src="./splaytree.js"></script>
	<script src="./codemap.js"></script>
	<script src="./csvparser.js"></script>
	<script src="./consarray.js"></script>
	<script src="./profile.js"></script>
	<script src="./profile_view.js"></script>
	<script src="./logreader.js"></script>
	<script src="./arguments.js"></script>
	<script src="./parse-processor.js"></script>
	<script src="./SourceMap.js"></script>
	<script src="https://www.gstatic.com/charts/loader.js"></script>
	<script>
	"use strict";
	google.charts.load('current', {packages: ['corechart']});

	function $(query) {
	return document.querySelector(query);
	}

	function loadFile() {
	let files = $('#uploadInput').files;

	let file = files[0];
	let reader = new FileReader();

	reader.onload = function(evt) {
	const kTimerName = 'parse log file';
	console.time(kTimerName);
	let parseProcessor = new ParseProcessor();
	parseProcessor.processString(this.result);
	console.timeEnd(kTimerName);
	renderParseResults(parseProcessor);
	document.parseProcessor = parseProcessor;
	}
	reader.readAsText(file);
	}

	function handleOnLoad() {
	document.querySelector("#uploadInput").focus();
	}

	function createNode(tag, classNames) {
	let node = document.createElement(tag);
	if (classNames) {
	if (Array.isArray(classNames)) {
	node.classList.add(...classNames);
	} else {
	node.className = classNames;
	}
	}
	return node;
	}

	function div(...args) {
	return createNode('div', ...args);
	}

	function h1(string) {
	let node = createNode('h1');
	node.appendChild(text(string));
	return node;
	}

	function h3(string, ...args) {
	let node = createNode('h3', ...args);
	if (string) node.appendChild(text(string));
	return node;
	}

	function a(href, string, ...args) {
	let link = createNode('a', ...args);
	if (href.length) link.href = href;
	if (string) link.appendChild(text(string));
	return link;
	}

	function text(string) {
	return document.createTextNode(string);
	}

	function delay(t) {
	return new Promise(resolve => setTimeout(resolve, t));
	}

	function renderParseResults(parseProcessor) {
	let result = $('#result');
	// clear out all existing result pages;
	result.innerHTML = '';
	const start = parseProcessor.firstEventTimestamp;
	const end = parseProcessor.lastEventTimestamp;
	renderScript(result, parseProcessor.totalScript, start, end);
	// Build up the graphs lazily to keep the page responsive.
	parseProcessor.scripts.forEach(
	script => renderScript(result, script, start, end));
	renderScriptSizes(parseProcessor);
	// Install an intersection observer to lazily load the graphs when the script
	// div becomes visible for the first time.
	var io = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
	if (entry.intersectionRatio == 0) return;
	console.assert(!entry.target.querySelector('.graph'));
	let target = entry.target;
	appendGraph(target.script, target, start, end);
	observer.unobserve(entry.target);
	});
	}, {rootMargin: '400px'});
	document.querySelectorAll('.script').forEach(div => io.observe(div));
	}

	const kTimeFactor = 10;
	const kHeight = 20;
	const kFunktionTopOffset = 50;

	function renderScript(result, script, start, end) {
	// Filter out empty scripts.
	if (script.isEmpty() \|\| script.lastParseEvent == 0) return;

	let scriptDiv = div('script');
	scriptDiv.script = script;

	let scriptTitle = h3();
	let anchor = a("", 'Script #' + script.id);
	anchor.name = "script"+script.id
	scriptTitle.appendChild(anchor);
	scriptDiv.appendChild(scriptTitle);
	if (script.file) scriptTitle.appendChild(a(script.file, script.file));
	let summary = createNode('pre', 'script-details');
	summary.appendChild(text(script.summary));
	scriptDiv.appendChild(summary);
	result.appendChild(scriptDiv);
	}

	function renderScriptSizes(parseProcessor) {
	let scriptsDiv = $('#scripts');
	parseProcessor.scripts.forEach(
	script => {
	let scriptDiv = a('#script'+script.id, '', 'script-size');
	let scriptId = div('script-details');
	scriptId.classList.add('id');
	scriptId.innerText = script.id;
	scriptDiv.appendChild(scriptId);
	let scriptSize = div('script-details');
	scriptSize.innerText = BYTES(script.bytesTotal);
	scriptDiv.appendChild(scriptSize);
	let scriptUrl = div('script-details');
	if (script.isEval) {
	scriptUrl.innerText = "eval";
	scriptDiv.classList.add('eval');
	} else {
	scriptUrl.innerText = script.file.split("/").pop();
	}
	if (script.isStreamingCompiled ) {
	scriptDiv.classList.add('streaming');
	} else if (script.deserializationTimestamp > 0) {
	scriptDiv.classList.add('deserialized');
	}
	scriptDiv.appendChild(scriptUrl);
	scriptDiv.style.width = script.bytesTotal * 0.001;
	scriptsDiv.appendChild(scriptDiv);
	});
	}

	const kMaxTime = 120 * kSecondsToMillis;
	// Resolution of the graphs
	const kTimeIncrement = 1;
	const kSelectionTimespan = 2;
	// TODO(cbruni): support compilation cache hit.
	const series = [
	['firstParseEvent', 'Any Parse', 'area'],
	['execution', '1st Exec', 'area'],
	['firstCompileEvent', 'Any Compile', 'area'],
	['compile', 'Eager Compile'],
	['lazyCompile', 'Lazy Compile'],
	['parse', 'Parsing'],
	['preparse', 'Preparse'],
	['resolution', 'Preparse with Var. Resolution'],
	['deserialization', 'Deserialization'],
	['optimization', 'Optimize'],
	];
	const metricNames = series.map(each => each[0]);
	// Display cumulative values (useuful for bytes).
	const kCumulative = true;
	// Include durations in the graphs.
	const kUseDuration = false;


	function appendGraph(script, parentNode, start, end) {
	const timerLabel = 'graph script=' + script.id;
	// TODO(cbruni): add support for network events

	console.time(timerLabel);
	let data = new google.visualization.DataTable();
	data.addColumn('number', 'Duration');
	// The series are interleave bytes processed, time spent and thus have two
	// different vAxes.
	let seriesOptions = [];
	let colors = ['#4D4D4D', '#fff700', '#5DA5DA', '#FAA43A', '#60BD68',
	'#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#F15854'];
	series.forEach(([metric, description, type]) => {
	let color = colors.shift();
	// Add the bytes column.
	data.addColumn('number', description);
	let options = {targetAxisIndex: 0, color: color};
	if (type == 'area') options.type = 'area';
	seriesOptions.push(options)
	// Add the time column.
	if (kUseDuration) {
	data.addColumn('number', description + ' Duration');
	seriesOptions.push(
	{targetAxisIndex: 1, color: color, lineDashStyle: [3, 2]});
	}
	});

	const maxTime = Math.min(kMaxTime, end);
	console.time('metrics');
	let metricValues =
	script.getAccumulatedTimeMetrics(metricNames , 0, maxTime, kTimeIncrement,
	kCumulative, kUseDuration);
	console.timeEnd('metrics');
	// Make sure that the series added to the graph matches the returned values.
	console.assert(metricValues[0].length == seriesOptions.length + 1);
	data.addRows(metricValues);

	let options = {
	explorer: {
	actions: ['dragToZoom', 'rightClickToReset'],
	maxZoomIn: 0.01
	},
	hAxis: {
	format: '#,###.##s'
	},
	vAxes: {
	0: {title: 'Bytes Touched', format: 'short'},
	1: {title: 'Duration', format: '#,###ms'}
	},
	height: 400,
	width: 1000,
	chartArea: {left: 70, top: 0, right: 160, height: "90%"},
	// The first series should be a area chart (total bytes touched),
	series: seriesOptions,
	// everthing else is a line.
	seriesType: 'line'
	};
	let graphNode = createNode('div', 'chart');
	let listNode = createNode('div', 'funktion-list');
	parentNode.appendChild(graphNode);
	parentNode.appendChild(listNode);
	let chart = new google.visualization.ComboChart(graphNode);
	google.visualization.events.addListener(chart, 'select',
	() => selectGraphPointHandler(chart, data, script, parentNode));
	chart.draw(data, options);
	// Add event listeners
	console.timeEnd(timerLabel);
	}

	function selectGraphPointHandler(chart, data, script, parentNode) {
	let selection = chart.getSelection();
	if (selection.length <= 0) return;
	// Display a list of funktions with events at the given time.
	let {row, column} = selection[0];
	if (row === null\|\| column === null) return;
	const kEntrySize = kUseDuration ? 2 : 1;
	let [metric, description] = series[((column-1)/ kEntrySize) \| 0];
	let time = data.getValue(row, 0);
	let funktions = script.getFunktionsAtTime(
	time * kSecondsToMillis, kSelectionTimespan, metric);
	let oldList = parentNode.querySelector('.funktion-list');
	parentNode.replaceChild(
	createFunktionList(metric, description, time, funktions), oldList);
	}

	function createFunktionList(metric, description, time, funktions) {
	let container = createNode('div', 'funktion-list');
	container.appendChild(h3('Changes of "' + description + '" at ' +
	time + 's: ' + funktions.length));
	let listNode = createNode('ul');
	funktions.forEach(funktion => {
	let node = createNode('li', 'funktion');
	node.funktion = funktion;
	node.appendChild(text(funktion.toString(false) + " "));
	let script = funktion.script;
	if (script) {
	node.appendChild(a("#script" + script.id, "in script " + script.id));
	}
	listNode.appendChild(node);
	});
	container.appendChild(listNode);
	return container;
	}
	</script>
	</head>

	<body onload="handleOnLoad()">
	<h1>BEHOLD, THIS IS PARSEROR!</h1>

	<h2>Usage</h2>
	Run your script with <code>--log-function-events</code> and upload <code>v8.log</code> on this page:<br/>
	<code>/path/to/d8 --log-function-events your_script.js</code>

	<h2>Data</h2>
	<form name="fileForm">
	<p>
	<input id="uploadInput" type="file" name="files" onchange="loadFile();" accept=".log"> trace entries: <span id="count">0</span>
	</p>
	</form>


	<h2>Scripts</h2>
	<div id="scripts"></div>

	<h2>Result</h2>
	<div id="result"></div>
	</body>

	</html>