catapult/tracing/tracing/ui/extras/side_panel/frame_data_side_panel.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright 2016 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="/tracing/base/unit.html">
 <link rel="import" href="/tracing/extras/chrome/blame_context/frame_tree_node.html">
 <link rel="import" href="/tracing/extras/chrome/blame_context/render_frame.html">
 <link rel="import" href="/tracing/extras/chrome/blame_context/top_level.html">
 <link rel="import" href="/tracing/model/helpers/chrome_model_helper.html">
 <link rel="import" href="/tracing/ui/base/table.html">
 <link rel="import" href="/tracing/ui/side_panel/side_panel.html">
 <link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">
 <link rel="import" href="/tracing/value/ui/scalar_span.html">

 <dom-module id='tr-ui-e-s-frame-data-side-panel'>
   <template>
     <style>
     :host {
       display: flex;
       width: 600px;
       flex-direction: column;
     }
     table-container {
       display: flex;
       overflow: auto;
     }
     </style>
     <div>
       Organize by:
       <select id="select">
         <option value="none">None</option>
         <option value="tree">Frame Tree</option>
       </select>
     </div>
     <table-container>
       <tr-ui-b-table id="table"></tr-ui-b-table>
     </table-container>
   </template>
 </dom-module>

 <script>
 'use strict';
 tr.exportTo('tr.ui.e.s', function() {
   var BlameContextSnapshot = tr.e.chrome.BlameContextSnapshot;
   var FrameTreeNodeSnapshot = tr.e.chrome.FrameTreeNodeSnapshot;
   var RenderFrameSnapshot = tr.e.chrome.RenderFrameSnapshot;
   var TopLevelSnapshot = tr.e.chrome.TopLevelSnapshot;

   var BlameContextInstance = tr.e.chrome.BlameContextInstance;
   var FrameTreeNodeInstance = tr.e.chrome.FrameTreeNodeInstance;
   var RenderFrameInstance = tr.e.chrome.RenderFrameInstance;
   var TopLevelInstance = tr.e.chrome.TopLevelInstance;

   /**
    * @constructor
    * If |context| is provided, creates a row for the given context.
    * Otherwise, creates an empty Row template which can be used for aggregating
    * data from a group of subrows.
    */
   function Row(context) {
     this.subRows = undefined;
     this.contexts = [];
     this.type = undefined;
     this.renderer = 'N/A';
     this.url = undefined;
     this.time = 0;
     this.eventsOfInterest = new tr.model.EventSet();

     if (context === undefined)
       return;

     this.type = context.objectInstance.blameContextType;
     this.contexts.push(context);
     if (context instanceof FrameTreeNodeSnapshot) {
       if (context.renderFrame) {
         this.contexts.push(context.renderFrame);
         this.renderer = context.renderFrame.objectInstance.parent.pid;
       }
     } else if (context instanceof RenderFrameSnapshot) {
       if (context.frameTreeNode)
         this.contexts.push(context.frameTreeNode);
       this.renderer = context.objectInstance.parent.pid;
     } else if (context instanceof TopLevelSnapshot) {
       this.renderer = context.objectInstance.parent.pid;
     } else {
       throw new Error('Unknown context type');
     }
     this.eventsOfInterest.addEventSet(this.contexts);

     // TODO(xiaochengh): Handle the case where a subframe has a trivial url
     // (e.g., about:blank), but inherits the origin of its parent. This is not
     // needed now, but will be required if we want to group rows by origin.
     this.url = context.url;
   }

   var groupFunctions = {
     none: rows => rows,

     // Group the rows according to the frame tree structure.
     // Example: consider frame tree a(b, c(d)), where each frame has 1ms time
     // attributed to it. The resulting table should look like:
     //      Type     | Time | URL
     // --------------+------+-----
     // Frame Tree    |   4  |  a
     // +- Frame      |   1  |  a
     // +- Subframe   |   1  |  b
     // +- Frame Tree |   2  |  c
     //  +- Frame     |   1  |  c
     //  +- Subframe  |   1  |  d
     tree: function(rows, rowMap) {
       // Finds the parent of a specific row. When there is conflict between the
       // browser's dump of the frame tree and the renderers', use the browser's.
       var getParentRow = function(row) {
         var pivot;
         row.contexts.forEach(function(context) {
           if (context instanceof tr.e.chrome.FrameTreeNodeSnapshot)
             pivot = context;
         });
         if (pivot && pivot.parentContext)
           return rowMap[pivot.parentContext.guid];
         return undefined;
       };

       var rootRows = [];
       rows.forEach(function(row) {
         var parentRow = getParentRow(row);
         if (parentRow === undefined) {
           rootRows.push(row);
           return;
         }
         if (parentRow.subRows === undefined)
           parentRow.subRows = [];
         parentRow.subRows.push(row);
       });

       var aggregateAllDescendants = function(row) {
         if (!row.subRows) {
           if (getParentRow(row))
             row.type = 'Subframe';
           return row;
         }
         var result = new Row();
         result.type = 'Frame Tree';
         result.renderer = row.renderer;
         result.url = row.url;
         result.subRows = [row];
         row.subRows.forEach(
             subRow => result.subRows.push(aggregateAllDescendants(subRow)));
         result.subRows.forEach(function(subRow) {
           result.time += subRow.time;
           result.eventsOfInterest.addEventSet(subRow.eventsOfInterest);
         });
         row.subRows = undefined;
         return result;
       };

       return rootRows.map(rootRow => aggregateAllDescendants(rootRow));
     }

     // TODO(xiaochengh): Add grouping by site and probably more...
   };

   Polymer({
     is: 'tr-ui-e-s-frame-data-side-panel',
     behaviors: [tr.ui.behaviors.SidePanel],

     ready: function() {
       this.model_ = undefined;
       this.rangeOfInterest_ = new tr.b.Range();

       this.$.table.showHeader = true;
       this.$.table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
       this.$.table.tableColumns = this.createFrameDataTableColumns_();

       this.$.table.addEventListener('selection-changed', function(e) {
         this.selectEventSet_(this.$.table.selectedTableRow.eventsOfInterest);
       }.bind(this));

       this.$.select.addEventListener('change', function(e) {
         this.updateContents_();
       }.bind(this));
     },

     selectEventSet_: function(eventSet) {
       var event = new tr.model.RequestSelectionChangeEvent();
       event.selection = eventSet;
       this.dispatchEvent(event);
     },

     createFrameDataTableColumns_: function() {
       return [
         {
           title: 'Renderer',
           value: row => row.renderer,
           cmp: (a, b) => a.renderer - b.renderer
         },
         {
           title: 'Type',
           value: row => row.type
         },
         // TODO(xiaochengh): Decide what details to show in the table:
         // - URL seems necessary, but we may also want origin instead/both.
         // - Distinguish between browser time and renderer time?
         // - Distinguish between CPU time and wall clock time?
         // - Memory? Network? ...
         {
           title: 'Time',
           value: row => tr.v.ui.createScalarSpan(row.time, {
             unit: tr.b.Unit.byName.timeStampInMs,
             ownerDocument: this.ownerDocument
           }),
           cmp: (a, b) => a.time - b.time
         },
         {
           title: 'URL',
           value: row => row.url,
           cmp: (a, b) => (a.url || '').localeCompare(b.url || '')
         }
       ];
     },

     createFrameDataTableRows_: function() {
       if (!this.model_)
         return [];

       // Gather contexts into skeletons of rows.
       var rows = [];
       var rowMap = {};
       tr.b.iterItems(this.model_.processes, function(pid, process) {
         process.objects.iterObjectInstances(function(objectInstance) {
           if (!(objectInstance instanceof BlameContextInstance))
             return;
           objectInstance.snapshots.forEach(function(snapshot) {
             if (rowMap[snapshot.guid])
               return;
             var row = new Row(snapshot);
             row.contexts.forEach(context => rowMap[context.guid] = row);
             rows.push(row);
           }, this);
         }, this);
       }, this);

       // Find slices attributed to each row.
       // TODO(xiaochengh): We should implement a getter
       // BlameContextSnapshot.attributedEvents, instead of process the model in
       // a UI component.
       tr.b.iterItems(this.model_.processes, function(pid, process) {
         tr.b.iterItems(process.threads, function(tid, thread) {
           thread.sliceGroup.iterSlicesInTimeRange(function(topLevelSlice) {
             topLevelSlice.contexts.forEach(function(context) {
               if (!context.snapshot.guid || !rowMap[context.snapshot.guid])
                 return;
               var row = rowMap[context.snapshot.guid];
               row.eventsOfInterest.push(topLevelSlice);
               row.time += topLevelSlice.selfTime || 0;
             });
           }, this.currentRangeOfInterest.min, this.currentRangeOfInterest.max);
         }, this);
       }, this);

       // Apply grouping to rows.
       var select = this.$.select;
       var groupOption = select.options[select.selectedIndex].value;
       var groupFunction = groupFunctions[groupOption];
       return groupFunction(rows, rowMap);
     },

     updateContents_: function() {
       this.$.table.tableRows = this.createFrameDataTableRows_();
       this.$.table.rebuild();
     },

     supportsModel: function(m) {
       if (!m) {
         return {
           supported: false,
           reason: 'No model available.'
         };
       }

       var ans = {supported: false};
       tr.b.iterItems(m.processes, function(pid, process) {
         process.objects.iterObjectInstances(function(instance) {
           if (instance instanceof BlameContextInstance)
             ans.supported = true;
         });
       }, this);

       if (!ans.supported)
         ans.reason = 'No frame data available';
       return ans;
     },

     get currentRangeOfInterest() {
       if (this.rangeOfInterest_.isEmpty)
         return this.model_.bounds;
       else
         return this.rangeOfInterest_;
     },

     get rangeOfInterest() {
       return this.rangeOfInterest_;
     },

     set rangeOfInterest(rangeOfInterest) {
       this.rangeOfInterest_ = rangeOfInterest;
       this.updateContents_();
     },

     get selection() {
       // Not applicable.
     },

     set selection(_) {
       // Not applicable.
     },

     get textLabel() {
       return 'Frame Data';
     },

     get model() {
       return this.model_;
     },

     set model(model) {
       this.model_ = model;
       this.updateContents_();
     }
   });

   tr.ui.side_panel.SidePanelRegistry.register(function() {
      return document.createElement('tr-ui-e-s-frame-data-side-panel');
   });
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright 2016 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="/tracing/base/unit.html">
	<link rel="import" href="/tracing/extras/chrome/blame_context/frame_tree_node.html">
	<link rel="import" href="/tracing/extras/chrome/blame_context/render_frame.html">
	<link rel="import" href="/tracing/extras/chrome/blame_context/top_level.html">
	<link rel="import" href="/tracing/model/helpers/chrome_model_helper.html">
	<link rel="import" href="/tracing/ui/base/table.html">
	<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
	<link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">
	<link rel="import" href="/tracing/value/ui/scalar_span.html">

	<dom-module id='tr-ui-e-s-frame-data-side-panel'>
	<template>
	<style>
	:host {
	display: flex;
	width: 600px;
	flex-direction: column;
	}
	table-container {
	display: flex;
	overflow: auto;
	}
	</style>
	<div>
	Organize by:
	<select id="select">
	<option value="none">None</option>
	<option value="tree">Frame Tree</option>
	</select>
	</div>
	<table-container>
	<tr-ui-b-table id="table"></tr-ui-b-table>
	</table-container>
	</template>
	</dom-module>

	<script>
	'use strict';
	tr.exportTo('tr.ui.e.s', function() {
	var BlameContextSnapshot = tr.e.chrome.BlameContextSnapshot;
	var FrameTreeNodeSnapshot = tr.e.chrome.FrameTreeNodeSnapshot;
	var RenderFrameSnapshot = tr.e.chrome.RenderFrameSnapshot;
	var TopLevelSnapshot = tr.e.chrome.TopLevelSnapshot;

	var BlameContextInstance = tr.e.chrome.BlameContextInstance;
	var FrameTreeNodeInstance = tr.e.chrome.FrameTreeNodeInstance;
	var RenderFrameInstance = tr.e.chrome.RenderFrameInstance;
	var TopLevelInstance = tr.e.chrome.TopLevelInstance;

	/**
	* @constructor
	* If \|context\| is provided, creates a row for the given context.
	* Otherwise, creates an empty Row template which can be used for aggregating
	* data from a group of subrows.
	*/
	function Row(context) {
	this.subRows = undefined;
	this.contexts = [];
	this.type = undefined;
	this.renderer = 'N/A';
	this.url = undefined;
	this.time = 0;
	this.eventsOfInterest = new tr.model.EventSet();

	if (context === undefined)
	return;

	this.type = context.objectInstance.blameContextType;
	this.contexts.push(context);
	if (context instanceof FrameTreeNodeSnapshot) {
	if (context.renderFrame) {
	this.contexts.push(context.renderFrame);
	this.renderer = context.renderFrame.objectInstance.parent.pid;
	}
	} else if (context instanceof RenderFrameSnapshot) {
	if (context.frameTreeNode)
	this.contexts.push(context.frameTreeNode);
	this.renderer = context.objectInstance.parent.pid;
	} else if (context instanceof TopLevelSnapshot) {
	this.renderer = context.objectInstance.parent.pid;
	} else {
	throw new Error('Unknown context type');
	}
	this.eventsOfInterest.addEventSet(this.contexts);

	// TODO(xiaochengh): Handle the case where a subframe has a trivial url
	// (e.g., about:blank), but inherits the origin of its parent. This is not
	// needed now, but will be required if we want to group rows by origin.
	this.url = context.url;
	}

	var groupFunctions = {
	none: rows => rows,

	// Group the rows according to the frame tree structure.
	// Example: consider frame tree a(b, c(d)), where each frame has 1ms time
	// attributed to it. The resulting table should look like:
	// Type \| Time \| URL
	// --------------+------+-----
	// Frame Tree \| 4 \| a
	// +- Frame \| 1 \| a
	// +- Subframe \| 1 \| b
	// +- Frame Tree \| 2 \| c
	// +- Frame \| 1 \| c
	// +- Subframe \| 1 \| d
	tree: function(rows, rowMap) {
	// Finds the parent of a specific row. When there is conflict between the
	// browser's dump of the frame tree and the renderers', use the browser's.
	var getParentRow = function(row) {
	var pivot;
	row.contexts.forEach(function(context) {
	if (context instanceof tr.e.chrome.FrameTreeNodeSnapshot)
	pivot = context;
	});
	if (pivot && pivot.parentContext)
	return rowMap[pivot.parentContext.guid];
	return undefined;
	};

	var rootRows = [];
	rows.forEach(function(row) {
	var parentRow = getParentRow(row);
	if (parentRow === undefined) {
	rootRows.push(row);
	return;
	}
	if (parentRow.subRows === undefined)
	parentRow.subRows = [];
	parentRow.subRows.push(row);
	});

	var aggregateAllDescendants = function(row) {
	if (!row.subRows) {
	if (getParentRow(row))
	row.type = 'Subframe';
	return row;
	}
	var result = new Row();
	result.type = 'Frame Tree';
	result.renderer = row.renderer;
	result.url = row.url;
	result.subRows = [row];
	row.subRows.forEach(
	subRow => result.subRows.push(aggregateAllDescendants(subRow)));
	result.subRows.forEach(function(subRow) {
	result.time += subRow.time;
	result.eventsOfInterest.addEventSet(subRow.eventsOfInterest);
	});
	row.subRows = undefined;
	return result;
	};

	return rootRows.map(rootRow => aggregateAllDescendants(rootRow));
	}

	// TODO(xiaochengh): Add grouping by site and probably more...
	};

	Polymer({
	is: 'tr-ui-e-s-frame-data-side-panel',
	behaviors: [tr.ui.behaviors.SidePanel],

	ready: function() {
	this.model_ = undefined;
	this.rangeOfInterest_ = new tr.b.Range();

	this.$.table.showHeader = true;
	this.$.table.selectionMode = tr.ui.b.TableFormat.SelectionMode.ROW;
	this.$.table.tableColumns = this.createFrameDataTableColumns_();

	this.$.table.addEventListener('selection-changed', function(e) {
	this.selectEventSet_(this.$.table.selectedTableRow.eventsOfInterest);
	}.bind(this));

	this.$.select.addEventListener('change', function(e) {
	this.updateContents_();
	}.bind(this));
	},

	selectEventSet_: function(eventSet) {
	var event = new tr.model.RequestSelectionChangeEvent();
	event.selection = eventSet;
	this.dispatchEvent(event);
	},

	createFrameDataTableColumns_: function() {
	return [
	{
	title: 'Renderer',
	value: row => row.renderer,
	cmp: (a, b) => a.renderer - b.renderer
	},
	{
	title: 'Type',
	value: row => row.type
	},
	// TODO(xiaochengh): Decide what details to show in the table:
	// - URL seems necessary, but we may also want origin instead/both.
	// - Distinguish between browser time and renderer time?
	// - Distinguish between CPU time and wall clock time?
	// - Memory? Network? ...
	{
	title: 'Time',
	value: row => tr.v.ui.createScalarSpan(row.time, {
	unit: tr.b.Unit.byName.timeStampInMs,
	ownerDocument: this.ownerDocument
	}),
	cmp: (a, b) => a.time - b.time
	},
	{
	title: 'URL',
	value: row => row.url,
	cmp: (a, b) => (a.url \|\| '').localeCompare(b.url \|\| '')
	}
	];
	},

	createFrameDataTableRows_: function() {
	if (!this.model_)
	return [];

	// Gather contexts into skeletons of rows.
	var rows = [];
	var rowMap = {};
	tr.b.iterItems(this.model_.processes, function(pid, process) {
	process.objects.iterObjectInstances(function(objectInstance) {
	if (!(objectInstance instanceof BlameContextInstance))
	return;
	objectInstance.snapshots.forEach(function(snapshot) {
	if (rowMap[snapshot.guid])
	return;
	var row = new Row(snapshot);
	row.contexts.forEach(context => rowMap[context.guid] = row);
	rows.push(row);
	}, this);
	}, this);
	}, this);

	// Find slices attributed to each row.
	// TODO(xiaochengh): We should implement a getter
	// BlameContextSnapshot.attributedEvents, instead of process the model in
	// a UI component.
	tr.b.iterItems(this.model_.processes, function(pid, process) {
	tr.b.iterItems(process.threads, function(tid, thread) {
	thread.sliceGroup.iterSlicesInTimeRange(function(topLevelSlice) {
	topLevelSlice.contexts.forEach(function(context) {
	if (!context.snapshot.guid \|\| !rowMap[context.snapshot.guid])
	return;
	var row = rowMap[context.snapshot.guid];
	row.eventsOfInterest.push(topLevelSlice);
	row.time += topLevelSlice.selfTime \|\| 0;
	});
	}, this.currentRangeOfInterest.min, this.currentRangeOfInterest.max);
	}, this);
	}, this);

	// Apply grouping to rows.
	var select = this.$.select;
	var groupOption = select.options[select.selectedIndex].value;
	var groupFunction = groupFunctions[groupOption];
	return groupFunction(rows, rowMap);
	},

	updateContents_: function() {
	this.$.table.tableRows = this.createFrameDataTableRows_();
	this.$.table.rebuild();
	},

	supportsModel: function(m) {
	if (!m) {
	return {
	supported: false,
	reason: 'No model available.'
	};
	}

	var ans = {supported: false};
	tr.b.iterItems(m.processes, function(pid, process) {
	process.objects.iterObjectInstances(function(instance) {
	if (instance instanceof BlameContextInstance)
	ans.supported = true;
	});
	}, this);

	if (!ans.supported)
	ans.reason = 'No frame data available';
	return ans;
	},

	get currentRangeOfInterest() {
	if (this.rangeOfInterest_.isEmpty)
	return this.model_.bounds;
	else
	return this.rangeOfInterest_;
	},

	get rangeOfInterest() {
	return this.rangeOfInterest_;
	},

	set rangeOfInterest(rangeOfInterest) {
	this.rangeOfInterest_ = rangeOfInterest;
	this.updateContents_();
	},

	get selection() {
	// Not applicable.
	},

	set selection(_) {
	// Not applicable.
	},

	get textLabel() {
	return 'Frame Data';
	},

	get model() {
	return this.model_;
	},

	set model(model) {
	this.model_ = model;
	this.updateContents_();
	}
	});

	tr.ui.side_panel.SidePanelRegistry.register(function() {
	return document.createElement('tr-ui-e-s-frame-data-side-panel');
	});
	});
	</script>