1// Copyright (C) 2018 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import m from 'mithril'; 16import {raf} from './raf_scheduler'; 17import {PerfStats, PerfStatsContainer, runningStatStr} from './perf_stats'; 18 19export class PerfManager { 20 private _enabled = false; 21 readonly containers: PerfStatsContainer[] = []; 22 23 get enabled(): boolean { 24 return this._enabled; 25 } 26 27 set enabled(enabled: boolean) { 28 this._enabled = enabled; 29 raf.setPerfStatsEnabled(true); 30 this.containers.forEach((c) => c.setPerfStatsEnabled(enabled)); 31 } 32 33 addContainer(container: PerfStatsContainer): Disposable { 34 this.containers.push(container); 35 return { 36 [Symbol.dispose]: () => { 37 const i = this.containers.indexOf(container); 38 this.containers.splice(i, 1); 39 }, 40 }; 41 } 42 43 renderPerfStats(): m.Children { 44 if (!this._enabled) return; 45 // The rendering of the perf stats UI is atypical. The main issue is that we 46 // want to redraw the mithril component even if there is no full DOM redraw 47 // happening (and we don't want to force redraws as a side effect). So we 48 // return here just a container and handle its rendering ourselves. 49 const perfMgr = this; 50 let removed = false; 51 return m('.perf-stats', { 52 oncreate(vnode: m.VnodeDOM) { 53 const animationFrame = (dom: Element) => { 54 if (removed) return; 55 m.render(dom, m(PerfStatsUi, {perfMgr})); 56 requestAnimationFrame(() => animationFrame(dom)); 57 }; 58 animationFrame(vnode.dom); 59 }, 60 onremove() { 61 removed = true; 62 }, 63 }); 64 } 65} 66 67// The mithril component that draws the contents of the perf stats box. 68 69interface PerfStatsUiAttrs { 70 perfMgr: PerfManager; 71} 72 73class PerfStatsUi implements m.ClassComponent<PerfStatsUiAttrs> { 74 view({attrs}: m.Vnode<PerfStatsUiAttrs>) { 75 return m( 76 '.perf-stats', 77 {}, 78 m('section', this.renderRafSchedulerStats()), 79 m( 80 'button.close-button', 81 { 82 onclick: () => (attrs.perfMgr.enabled = false), 83 }, 84 m('i.material-icons', 'close'), 85 ), 86 attrs.perfMgr.containers.map((c, i) => 87 m('section', m('div', `Panel Container ${i + 1}`), c.renderPerfStats()), 88 ), 89 ); 90 } 91 92 renderRafSchedulerStats() { 93 return m( 94 'div', 95 m('div', [ 96 m( 97 'button', 98 {onclick: () => raf.scheduleCanvasRedraw()}, 99 'Do Canvas Redraw', 100 ), 101 ' | ', 102 m( 103 'button', 104 {onclick: () => raf.scheduleFullRedraw()}, 105 'Do Full Redraw', 106 ), 107 ]), 108 m('div', 'Raf Timing ' + '(Total may not add up due to imprecision)'), 109 m( 110 'table', 111 this.statTableHeader(), 112 this.statTableRow('Actions', raf.perfStats.rafActions), 113 this.statTableRow('Dom', raf.perfStats.rafDom), 114 this.statTableRow('Canvas', raf.perfStats.rafCanvas), 115 this.statTableRow('Total', raf.perfStats.rafTotal), 116 ), 117 m( 118 'div', 119 'Dom redraw: ' + 120 `Count: ${raf.perfStats.domRedraw.count} | ` + 121 runningStatStr(raf.perfStats.domRedraw), 122 ), 123 ); 124 } 125 126 statTableHeader() { 127 return m( 128 'tr', 129 m('th', ''), 130 m('th', 'Last (ms)'), 131 m('th', 'Avg (ms)'), 132 m('th', 'Avg-10 (ms)'), 133 ); 134 } 135 136 statTableRow(title: string, stat: PerfStats) { 137 return m( 138 'tr', 139 m('td', title), 140 m('td', stat.last.toFixed(2)), 141 m('td', stat.mean.toFixed(2)), 142 m('td', stat.bufferMean.toFixed(2)), 143 ); 144 } 145} 146