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