catapult/perf_insights/perf_insights/ui/reports/startup_report.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE 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.
 -->
 <link rel="import" href="/perf_insights/mappers/slice_cost.html">
 <link rel="import" href="/perf_insights/ui/caching_column.html">
 <link rel="import" href="/perf_insights/ui/reports/pi_report.html">
 <link rel="import" href="/tracing/ui/base/dom_helpers.html">
 <link rel="import" href="/tracing/ui/base/grouping_table.html">
 <link rel="import" href="/tracing/ui/base/info_bar_group.html">
 <link rel="import" href="/tracing/ui/base/overlay.html">
 <link rel="import" href="/tracing/ui/base/table.html">
 <link rel="import" href="/tracing/value/ui/histogram_span.html">
 <link rel="import" href="/tracing/value/ui/scalar_span.html">
 <link rel="import" href="/tracing/value/unit.html">

 <polymer-element name="pi-ui-r-startup-report"
     extends="pi-ui-r-pi-report"
     map-function-href="/perf_insights/mappers/startup_map_function.html"
     map-function-name="startupMapFunction"
   <template>
     <style>
       :host {
         display: flex;
         flex-direction: column;
       }

       top-controls {
         display: flex;
         flex: 0 0 auto;
         flex-flow: wrap;
         background-color: rgb(236, 236, 236);
         border-bottom: 1px solid #8e8e8e;
         padding: 4px;
       }

       content-pane {
         min-height: 0;
         display: flex;
         flex-direction: row;
       }

       table-container {
         flex: 1 1 60%;
         display: flex;
         overflow: auto;
       }
       #tableLeft {
         flex: 1 1 60%;
       }
       #tableRight {
         flex: 1 1 60%;
       }

       pane {
         border-left: 1px solid black;
         display: flex;
         flex-direction: column;
         flex: 1 1 40%;
       }

       #links {
         min-height: 0;
         overflow: auto;
       }
     </style>
     <top-controls>
     Slow trace threshold :&nbsp<input id="threshold"></input>ms
     </top-controls>
     <content-pane>
       <pane>
         <div>Fast startup traces (<span id="numFast"></span> traces)</div>
         <table-container>
           <tr-ui-b-grouping-table id="tableFast"></tr-ui-b-grouping-table>
         </table-container>
       </pane>
       <pane>
         <div>Slow startup traces (<span id="numSlow"></span> traces)</div>
         <table-container>
           <tr-ui-b-grouping-table id="tableSlow"></tr-ui-b-grouping-table>
         </table-container>
       </pane>
     </content-pane>
   </template>
 </polymer-element>


 <script>
 'use strict';

 (function() {
   var DEFAULT_SLOW_THRESHOLD_MS = 3500;

   Polymer('pi-ui-r-startup-report', {
     created: function() {
       this.mapResults_ = undefined;
       this.slowThresholdMs_ = DEFAULT_SLOW_THRESHOLD_MS;
       this.copyingState_ = false;  // True when copying state between tables.
     },

     ready: function() {
       this.$.threshold.value = DEFAULT_SLOW_THRESHOLD_MS;

       this.$.tableFast.addEventListener('selection-changed',
           this.copySelectedRow_.bind(this, this.$.tableFast, this.$.tableSlow));
       this.$.tableSlow.addEventListener('selection-changed',
           this.copySelectedRow_.bind(this, this.$.tableSlow, this.$.tableFast));
       this.$.tableFast.addEventListener('sort-column-changed',
           this.copySortingState_.bind(this, this.$.tableSlow));
       this.$.tableSlow.addEventListener('sort-column-changed',
           this.copySortingState_.bind(this, this.$.tableFast));
       this.$.threshold.addEventListener(
           'change', this.onThresholdChanged_.bind(this));
     },

     get mapResults() {
       return this.mapResults_;
     },

     set mapResults(mapResults) {
       this.mapResults_ = mapResults;
       this.updateContents_();
     },


     // Looks at the selected row in |fromTable| and select the matching one in
     // |toTable|.
     copySelectedRow_: function(fromTable, toTable) {
       // Block reentrant calls.
       if (this.copyingState_)
         return;
       this.copyingState_ = true;
       var rowToSelect = undefined;
       var selectedRow = fromTable.selectedTableRow;
       if (selectedRow !== undefined) {
         toTable.tableRows.forEach(function(row) {
           if (row.title === selectedRow.title)
             rowToSelect = row;
         });
       }
       toTable.selectedTableRow = rowToSelect;
       this.copyingState_ = false;
     },

     // Apply the sorting state of |fromTable| to |toTable|.
     copySortingState_: function(toTable, event) {
       // Block reentrant calls.
       if (this.copyingState_)
         return;
       this.copyingState_ = true;
       if (toTable.tableColumns.length >= event.sortColumnIndex) {
         toTable.sortColumnIndex = event.sortColumnIndex;
         toTable.sortDescending = event.sortDescending;
       }
       this.copyingState_ = false;
     },

     onThresholdChanged_: function(event) {
       var value = parseInt(this.$.threshold.value);
       if (!Number.isInteger(value))
         value = DEFAULT_SLOW_THRESHOLD_MS;
       this.$.threshold.value = value;
       this.slowThresholdMs_ = value;
       this.updateContents_();
     },

     updateContents_: function() {
       this.updateTable_(this.$.tableFast, this.$.numFast, function(value) {
         return value.startupDuration < this.slowThresholdMs_;
       }.bind(this));
       this.updateTable_(this.$.tableSlow, this.$.numSlow, function(value) {
         return value.startupDuration >= this.slowThresholdMs_;
       }.bind(this));
     },

     updateTable_: function(table, numTracesSpan, filter) {
       var results = this.mapResults_;
       if (!results)
         results = [];

       var allSliceCosts = [];
       var numTraces = 0;
       var totalStartupDuration = 0;
       results.forEach(function(result) {
         var sr = result.pairs.sr;
         if (sr === undefined)
           return;
         numTraces++;
         totalStartupDuration += sr.startupDuration;
         sr.sliceCosts.forEach(function(item) {
           var sliceCostInfo = pi.m.SliceCostInfo.fromDict(item);
           allSliceCosts.push({
             canonicalUrl: result.pairs.canonical_url,
             sliceCostInfo: sliceCostInfo
           });
         });
       });
       numTracesSpan.innerText = numTraces;

       var columns = this.createColumns_(totalStartupDuration);
       table.tableColumns = columns;
       table.sortColumnIndex = 2;
       table.sortDescending = true;

       var groupBy = [];
       groupBy.push(function(datum) {
         return datum.sliceCostInfo.title;
       });
       table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
       table.groupBy = groupBy;
       table.dataToGroup = allSliceCosts;
       table.rebuild();
     },

     createColumns_: function(totalStartupDuration) {
       var columns = [
         {
           title: 'Title',
           value: function(row) {
             return row.title;
           },
           cmp: function(a, b) {
             return a.title.localeCompare(b.title);
           },
           width: '500px'
         },
         this.createCachingColumn_('Relative self time', totalStartupDuration,
             function(datum) {
               return datum.sliceCostInfo.selfTime;
             }),
         this.createCachingColumn_('Relative CPU time', totalStartupDuration,
             function(datum) {
               return datum.sliceCostInfo.cpuSelfTime;
             })
       ];
       return columns;
     },

     createCachingColumn_(title, totalStartupDuration, getDataFunction) {
       function computeStats(sliceCostInfo) {
         var mean = tr.b.Statistics.sum(sliceCostInfo, getDataFunction);
         if (mean == undefined || totalStartupDuration == 0)
           return undefined;
         mean /= totalStartupDuration;
         var span = tr.ui.units.createScalarSpan(mean);
         span.unit = tr.v.Unit.byName.normalizedPercentage;
         span.percentage = mean;
         return span;
       }

       var column = new pi.ui.CachingColumn(title, computeStats);
       column.textAlign = 'right';
       column.cmp = function(row0, row1) {
         var value0 = column.value(row0);
         var value1 = column.value(row1);
         return tr.b.comparePossiblyUndefinedValues(value0, value1,
             function(v0, v1) {
               return v0.value - v1.value;
             });
       };
       return column;
     }
   });
 })();
 </script>
	<!DOCTYPE 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.
	-->
	<link rel="import" href="/perf_insights/mappers/slice_cost.html">
	<link rel="import" href="/perf_insights/ui/caching_column.html">
	<link rel="import" href="/perf_insights/ui/reports/pi_report.html">
	<link rel="import" href="/tracing/ui/base/dom_helpers.html">
	<link rel="import" href="/tracing/ui/base/grouping_table.html">
	<link rel="import" href="/tracing/ui/base/info_bar_group.html">
	<link rel="import" href="/tracing/ui/base/overlay.html">
	<link rel="import" href="/tracing/ui/base/table.html">
	<link rel="import" href="/tracing/value/ui/histogram_span.html">
	<link rel="import" href="/tracing/value/ui/scalar_span.html">
	<link rel="import" href="/tracing/value/unit.html">

	<polymer-element name="pi-ui-r-startup-report"
	extends="pi-ui-r-pi-report"
	map-function-href="/perf_insights/mappers/startup_map_function.html"
	map-function-name="startupMapFunction"
	<template>
	<style>
	:host {
	display: flex;
	flex-direction: column;
	}

	top-controls {
	display: flex;
	flex: 0 0 auto;
	flex-flow: wrap;
	background-color: rgb(236, 236, 236);
	border-bottom: 1px solid #8e8e8e;
	padding: 4px;
	}

	content-pane {
	min-height: 0;
	display: flex;
	flex-direction: row;
	}

	table-container {
	flex: 1 1 60%;
	display: flex;
	overflow: auto;
	}
	#tableLeft {
	flex: 1 1 60%;
	}
	#tableRight {
	flex: 1 1 60%;
	}

	pane {
	border-left: 1px solid black;
	display: flex;
	flex-direction: column;
	flex: 1 1 40%;
	}

	#links {
	min-height: 0;
	overflow: auto;
	}
	</style>
	<top-controls>
	Slow trace threshold :&nbsp<input id="threshold"></input>ms
	</top-controls>
	<content-pane>
	<pane>
	<div>Fast startup traces (<span id="numFast"></span> traces)</div>
	<table-container>
	<tr-ui-b-grouping-table id="tableFast"></tr-ui-b-grouping-table>
	</table-container>
	</pane>
	<pane>
	<div>Slow startup traces (<span id="numSlow"></span> traces)</div>
	<table-container>
	<tr-ui-b-grouping-table id="tableSlow"></tr-ui-b-grouping-table>
	</table-container>
	</pane>
	</content-pane>
	</template>
	</polymer-element>


	<script>
	'use strict';

	(function() {
	var DEFAULT_SLOW_THRESHOLD_MS = 3500;

	Polymer('pi-ui-r-startup-report', {
	created: function() {
	this.mapResults_ = undefined;
	this.slowThresholdMs_ = DEFAULT_SLOW_THRESHOLD_MS;
	this.copyingState_ = false; // True when copying state between tables.
	},

	ready: function() {
	this.$.threshold.value = DEFAULT_SLOW_THRESHOLD_MS;

	this.$.tableFast.addEventListener('selection-changed',
	this.copySelectedRow_.bind(this, this.$.tableFast, this.$.tableSlow));
	this.$.tableSlow.addEventListener('selection-changed',
	this.copySelectedRow_.bind(this, this.$.tableSlow, this.$.tableFast));
	this.$.tableFast.addEventListener('sort-column-changed',
	this.copySortingState_.bind(this, this.$.tableSlow));
	this.$.tableSlow.addEventListener('sort-column-changed',
	this.copySortingState_.bind(this, this.$.tableFast));
	this.$.threshold.addEventListener(
	'change', this.onThresholdChanged_.bind(this));
	},

	get mapResults() {
	return this.mapResults_;
	},

	set mapResults(mapResults) {
	this.mapResults_ = mapResults;
	this.updateContents_();
	},


	// Looks at the selected row in \|fromTable\| and select the matching one in
	// \|toTable\|.
	copySelectedRow_: function(fromTable, toTable) {
	// Block reentrant calls.
	if (this.copyingState_)
	return;
	this.copyingState_ = true;
	var rowToSelect = undefined;
	var selectedRow = fromTable.selectedTableRow;
	if (selectedRow !== undefined) {
	toTable.tableRows.forEach(function(row) {
	if (row.title === selectedRow.title)
	rowToSelect = row;
	});
	}
	toTable.selectedTableRow = rowToSelect;
	this.copyingState_ = false;
	},

	// Apply the sorting state of \|fromTable\| to \|toTable\|.
	copySortingState_: function(toTable, event) {
	// Block reentrant calls.
	if (this.copyingState_)
	return;
	this.copyingState_ = true;
	if (toTable.tableColumns.length >= event.sortColumnIndex) {
	toTable.sortColumnIndex = event.sortColumnIndex;
	toTable.sortDescending = event.sortDescending;
	}
	this.copyingState_ = false;
	},

	onThresholdChanged_: function(event) {
	var value = parseInt(this.$.threshold.value);
	if (!Number.isInteger(value))
	value = DEFAULT_SLOW_THRESHOLD_MS;
	this.$.threshold.value = value;
	this.slowThresholdMs_ = value;
	this.updateContents_();
	},

	updateContents_: function() {
	this.updateTable_(this.$.tableFast, this.$.numFast, function(value) {
	return value.startupDuration < this.slowThresholdMs_;
	}.bind(this));
	this.updateTable_(this.$.tableSlow, this.$.numSlow, function(value) {
	return value.startupDuration >= this.slowThresholdMs_;
	}.bind(this));
	},

	updateTable_: function(table, numTracesSpan, filter) {
	var results = this.mapResults_;
	if (!results)
	results = [];

	var allSliceCosts = [];
	var numTraces = 0;
	var totalStartupDuration = 0;
	results.forEach(function(result) {
	var sr = result.pairs.sr;
	if (sr === undefined)
	return;
	numTraces++;
	totalStartupDuration += sr.startupDuration;
	sr.sliceCosts.forEach(function(item) {
	var sliceCostInfo = pi.m.SliceCostInfo.fromDict(item);
	allSliceCosts.push({
	canonicalUrl: result.pairs.canonical_url,
	sliceCostInfo: sliceCostInfo
	});
	});
	});
	numTracesSpan.innerText = numTraces;

	var columns = this.createColumns_(totalStartupDuration);
	table.tableColumns = columns;
	table.sortColumnIndex = 2;
	table.sortDescending = true;

	var groupBy = [];
	groupBy.push(function(datum) {
	return datum.sliceCostInfo.title;
	});
	table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
	table.groupBy = groupBy;
	table.dataToGroup = allSliceCosts;
	table.rebuild();
	},

	createColumns_: function(totalStartupDuration) {
	var columns = [
	{
	title: 'Title',
	value: function(row) {
	return row.title;
	},
	cmp: function(a, b) {
	return a.title.localeCompare(b.title);
	},
	width: '500px'
	},
	this.createCachingColumn_('Relative self time', totalStartupDuration,
	function(datum) {
	return datum.sliceCostInfo.selfTime;
	}),
	this.createCachingColumn_('Relative CPU time', totalStartupDuration,
	function(datum) {
	return datum.sliceCostInfo.cpuSelfTime;
	})
	];
	return columns;
	},

	createCachingColumn_(title, totalStartupDuration, getDataFunction) {
	function computeStats(sliceCostInfo) {
	var mean = tr.b.Statistics.sum(sliceCostInfo, getDataFunction);
	if (mean == undefined \|\| totalStartupDuration == 0)
	return undefined;
	mean /= totalStartupDuration;
	var span = tr.ui.units.createScalarSpan(mean);
	span.unit = tr.v.Unit.byName.normalizedPercentage;
	span.percentage = mean;
	return span;
	}

	var column = new pi.ui.CachingColumn(title, computeStats);
	column.textAlign = 'right';
	column.cmp = function(row0, row1) {
	var value0 = column.value(row0);
	var value1 = column.value(row1);
	return tr.b.comparePossiblyUndefinedValues(value0, value1,
	function(v0, v1) {
	return v0.value - v1.value;
	});
	};
	return column;
	}
	});
	})();
	</script>