1ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen// Copyright (c) 2011 The Chromium Authors. All rights reserved. 2ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen// Use of this source code is governed by a BSD-style license that can be 3ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen// found in the LICENSE file. 4ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 5ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 6ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen/** 7ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen * @fileoverview TimelineView visualizes GPU_TRACE events using the 8ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen * gpu.Timeline component. 9ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen */ 10ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsencr.define('gpu', function() { 11ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function tsRound(ts) { 12ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return Math.round(ts * 1000.0) / 1000.0; 13ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 14ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function getPadding(text, width) { 15ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen width = width || 0; 16ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 17ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (typeof text != 'string') 18ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text = String(text); 19ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 20ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (text.length >= width) 21ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return ''; 22ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 23ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var pad = ''; 24ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (var i = 0; i < width - text.length; i++) 25ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen pad += ' '; 26ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return pad; 27ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 28ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 29ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function leftAlign(text, width) { 30ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return text + getPadding(text, width); 31ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 32ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 33ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function rightAlign(text, width) { 34ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return getPadding(text, width) + text; 35ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 36ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 37ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen /** 38ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen * TimelineView 39ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen * @constructor 40ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen * @extends {HTMLDivElement} 41ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen */ 42ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen TimelineView = cr.ui.define('div'); 43ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 44ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen TimelineView.prototype = { 45ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen __proto__: HTMLDivElement.prototype, 46ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 47ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen decorate: function() { 48ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.className = 'timeline-view'; 49ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 50ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timelineContainer_ = document.createElement('div'); 51ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timelineContainer_.className = 'timeline-container'; 52ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 53ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var summaryContainer_ = document.createElement('div'); 54ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen summaryContainer_.className = 'summary-container'; 55ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 56ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.summary_ = document.createElement('pre'); 57ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.summary_.className = 'summary'; 58ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 59ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen summaryContainer_.appendChild(this.summary_); 60ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.appendChild(this.timelineContainer_); 61ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.appendChild(summaryContainer_); 62ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 63ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.onSelectionChangedBoundToThis_ = this.onSelectionChanged_.bind(this); 64ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen }, 65ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 66ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen set traceEvents(traceEvents) { 67ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen console.log('TimelineView.refresh'); 68ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timelineModel_ = new gpu.TimelineModel(traceEvents); 69ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 70ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen // remove old timeline 71ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timelineContainer_.textContent = ''; 72ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 73ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen // create new timeline if needed 74ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (traceEvents.length) { 75ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timeline_ = new gpu.Timeline(); 76ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timeline_.model = this.timelineModel_; 77ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timelineContainer_.appendChild(this.timeline_); 78ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timeline_.onResize(); 79ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timeline_.addEventListener('selectionChange', 80ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.onSelectionChangedBoundToThis_); 81ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.onSelectionChanged_(); 82ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } else { 83ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen this.timeline_ = null; 84ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 85ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen }, 86ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 87ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen onSelectionChanged_: function(e) { 88ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen console.log('selection changed'); 89ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var timeline = this.timeline_; 90ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var selection = timeline.selection; 91ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var outputDiv = this.summary_; 92ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (!selection.length) { 93ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen outputDiv.textContent = timeline.keyHelp; 94ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return; 95ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 96ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 97ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var text = ''; 98ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (selection.length == 1) { 99ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var c0Width = 10; 100ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var slice = selection[0].slice; 101ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text = 'Selected item:\n'; 102ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Title', c0Width) + ': ' + slice.title + '\n'; 103ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Start', c0Width) + ': ' + 104ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen tsRound(slice.start) + ' ms\n'; 105ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Duration', c0Width) + ': ' + 106ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen tsRound(slice.duration) + ' ms\n'; 107ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 108ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var n = 0; 109ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (var argName in slice.args) { 110ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen n += 1; 111ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 112ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (n > 0) { 113ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Args', c0Width) + ':\n'; 114ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (var argName in slice.args) { 115ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var argVal = slice.args[argName]; 116ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign(' ' + argName, c0Width) + ': ' + argVal + '\n'; 117ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 118ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 119ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } else { 120ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var c0Width = 55; 121ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var c1Width = 12; 122ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var c2Width = 5; 123ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text = 'Selection summary:\n'; 124ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var tsLo = Math.min.apply(Math, selection.map( 125ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function(s) {return s.slice.start;})); 126ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var tsHi = Math.max.apply(Math, selection.map( 127ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen function(s) {return s.slice.end;})); 128ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 129ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen // compute total selection duration 130ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var titles = selection.map(function(i) { return i.slice.title; }); 131ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 132ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var slicesByTitle = {}; 133ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (var i = 0; i < selection.length; i++) { 134ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var slice = selection[i].slice; 135ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen if (!slicesByTitle[slice.title]) 136ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen slicesByTitle[slice.title] = { 137ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen slices: [] 138ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen }; 139ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen slicesByTitle[slice.title].slices.push(slice); 140ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 141ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var totalDuration = 0; 142ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (var sliceGroupTitle in slicesByTitle) { 143ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var sliceGroup = slicesByTitle[sliceGroupTitle]; 144ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen var duration = 0; 145ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen for (i = 0; i < sliceGroup.slices.length; i++) 146ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen duration += sliceGroup.slices[i].duration; 147ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen totalDuration += duration; 148ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 149ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += ' ' + 150ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen leftAlign(sliceGroupTitle, c0Width) + ': ' + 151ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(tsRound(duration) + 'ms', c1Width) + ' ' + 152ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(String(sliceGroup.slices.length), c2Width) + 153ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen ' occurrences' + '\n'; 154ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 155ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 156ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('*Totals', c0Width) + ' : ' + 157ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(tsRound(totalDuration) + 'ms', c1Width) + ' ' + 158ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(String(selection.length), c2Width) + ' occurrences' + 159ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen '\n'; 160ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 161ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += '\n'; 162ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 163ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Selection start', c0Width) + ' : ' + 164ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(tsRound(tsLo) + 'ms', c1Width) + 165ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen '\n'; 166ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen text += leftAlign('Selection extent', c0Width) + ' : ' + 167ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen rightAlign(tsRound(tsHi - tsLo) + 'ms', c1Width) + 168ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen '\n'; 169ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 170ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 171ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen // done 172ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen outputDiv.textContent = text; 173ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen } 174ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen }; 175ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen 176ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen return { 177ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen TimelineView: TimelineView 178ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen }; 179ddb351dbec246cf1fab5ec20d2d5520909041de1Kristian Monsen}); 180