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 15 import * as m from 'mithril'; 16 17 import {Actions} from '../common/actions'; 18 import {globals} from './globals'; 19 import {Sidebar} from './sidebar'; 20 import {Topbar} from './topbar'; 21 22 function renderPermalink(): m.Children { 23 const permalink = globals.state.permalink; 24 if (!permalink.requestId || !permalink.hash) return null; 25 const url = `${self.location.origin}/#!/?s=${permalink.hash}`; 26 return m('.alert-permalink', [ 27 m('div', 'Permalink: ', m(`a[href=${url}]`, url)), 28 m('button', 29 { 30 onclick: () => globals.dispatch(Actions.clearPermalink({})), 31 }, 32 m('i.material-icons', 'close')), 33 ]); 34 } 35 36 class Alerts implements m.ClassComponent { 37 view() { 38 return m('.alerts', renderPermalink()); 39 } 40 } 41 42 const TogglePerfDebugButton = { 43 view() { 44 return m( 45 '.perf-monitor-button', 46 m('button', 47 { 48 onclick: () => globals.frontendLocalState.togglePerfDebug(), 49 }, 50 m('i.material-icons', 51 { 52 title: 'Toggle Perf Debug Mode', 53 }, 54 'assessment'))); 55 } 56 }; 57 58 const PerfStats: m.Component = { 59 view() { 60 const perfDebug = globals.frontendLocalState.perfDebug; 61 const children = [m(TogglePerfDebugButton)]; 62 if (perfDebug) { 63 children.unshift(m('.perf-stats-content')); 64 } 65 return m(`.perf-stats[expanded=${perfDebug}]`, children); 66 } 67 }; 68 69 /** 70 * Wrap component with common UI elements (nav bar etc). 71 */ 72 export function createPage(component: m.Component): m.Component { 73 const pageComponent = { 74 view() { 75 return [ 76 m(Sidebar), 77 m(Topbar), 78 m(Alerts), 79 m(component), 80 m(PerfStats), 81 ]; 82 }, 83 }; 84 85 return pageComponent; 86 } 87
