1 2// Copyright (C) 2019 The Android Open Source Project 3// 4// Licensed under the Apache License, Version 2.0 (the "License"); 5// you may not use this file except in compliance with the License. 6// You may obtain a copy of the License at 7// 8// http://www.apache.org/licenses/LICENSE-2.0 9// 10// Unless required by applicable law or agreed to in writing, software 11// distributed under the License is distributed on an "AS IS" BASIS, 12// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13// See the License for the specific language governing permissions and 14// limitations under the License. 15 16import * as m from 'mithril'; 17 18import {globals} from './globals'; 19import {hideModel, showModal} from './modal'; 20 21let helpModelOpen = false; 22 23export function toggleHelp() { 24 if (helpModelOpen) { 25 hideHelp(); 26 } else { 27 globals.logging.logEvent('User Actions', 'Show help'); 28 showHelp(); 29 } 30} 31 32function keycap(key: string) { 33 return m('.keycap', key); 34} 35 36function showHelp() { 37 helpModelOpen = true; 38 showModal({ 39 title: 'Perfetto Help', 40 content: m( 41 '.help', 42 m('h2', 'Navigation'), 43 m( 44 'table', 45 m( 46 'tr', 47 m('td', keycap('w'), '/', keycap('s')), 48 m('td', 'Zoom in/out'), 49 ), 50 m( 51 'tr', 52 m('td', keycap('a'), '/', keycap('d')), 53 m('td', 'Pan left/right'), 54 ), 55 ), 56 m('h2', 'Mouse Controls'), 57 m('table', 58 m('tr', m('td', 'Click'), m('td', 'Select event')), 59 m('tr', m('td', 'Ctrl + Scroll wheel'), m('td', 'Zoom in/out')), 60 m('tr', m('td', 'Click + Drag'), m('td', 'Select area')), 61 m('tr', m('td', 'Shift + Click + Drag'), m('td', 'Pan left/right'))), 62 m('h2', 'Other'), 63 m( 64 'table', 65 m('tr', 66 m('td', keycap('f'), ' (with event selected)'), 67 m('td', 'Scroll + zoom to current selection')), 68 m('tr', 69 m('td', keycap('['), '/', keycap(']'), ' (with event selected)'), 70 m('td', 71 'Select next/previous slice that is connected by a flow.', 72 m('br'), 73 'If there are multiple flows,' + 74 'the one that is in focus (bold) is selected')), 75 m('tr', 76 m('td', 77 keycap('Ctrl'), 78 ' + ', 79 keycap('['), 80 '/', 81 keycap(']'), 82 ' (with event selected)'), 83 m('td', 'Switch focus to another flow')), 84 m('tr', 85 m('td', keycap('m'), ' (with event or area selected)'), 86 m('td', 'Mark the area (temporarily)')), 87 m('tr', 88 m('td', 89 keycap('Shift'), 90 ' + ', 91 keycap('m'), 92 ' (with event or area selected)'), 93 m('td', 'Mark the area (persistently)')), 94 m('tr', m('td', keycap('?')), m('td', 'Show help')), 95 )), 96 buttons: [], 97 }).finally(() => { 98 helpModelOpen = false; 99 }); 100} 101 102function hideHelp() { 103 if (helpModelOpen) { 104 hideModel(); 105 } 106} 107