Merge "ui: Improve controls help"
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index 74b8174..90e1ea1 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -167,3 +167,18 @@
.show-sidebar .sidebar-button {
left: 46px;
}
+
+.keycap {
+ background-color: #fafbfc;
+ border: 1px solid #d1d5da;
+ border-bottom-color: #c6cbd1;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 #c6cbd1;
+ color: #444d56;
+ display: inline-block;
+ font-family: var(--monospace-font);
+ vertical-align: middle;
+
+ line-height: 20px;
+ padding: 3px 7px;
+}
diff --git a/ui/src/frontend/help_modal.ts b/ui/src/frontend/help_modal.ts
index 988c201..74ae9e6 100644
--- a/ui/src/frontend/help_modal.ts
+++ b/ui/src/frontend/help_modal.ts
@@ -15,17 +15,42 @@
import * as m from 'mithril';
-import {showModal} from './modal';
+import {hideModel, showModal} from './modal';
-export function showHelp() {
+let helpModelOpen = false;
+
+export function toggleHelp() {
+ if (helpModelOpen) {
+ hideHelp();
+ } else {
+ showHelp();
+ }
+}
+
+function keycap(key: string) {
+ return m('.keycap', key);
+}
+
+function showHelp() {
+ helpModelOpen = true;
showModal({
title: 'Perfetto Help',
content:
m('.help',
m('h2', 'Navigation'),
- m('table',
- m('tr', m('td', 'W/S'), m('td', 'Zoom in/out')),
- m('tr', m('td', 'A/D'), m('td', 'Pan left/right'))),
+ m(
+ 'table',
+ m(
+ 'tr',
+ m('td', keycap('w'), '/', keycap('s')),
+ m('td', 'Zoom in/out'),
+ ),
+ m(
+ 'tr',
+ m('td', keycap('a'), '/', keycap('d')),
+ m('td', 'Pan left/right'),
+ ),
+ ),
m('h2', 'Mouse Controls'),
m('table',
m('tr', m('td', 'Click'), m('td', 'Select event')),
@@ -38,11 +63,18 @@
m(
'table',
m('tr',
- m('td', 'm (with event selected)'),
+ m('td', keycap('m'), ' (with event selected)'),
m('td', 'Select time span of event')),
- m('tr', m('td', '?'), m('td', 'Show help')),
+ m('tr', m('td', keycap('?')), m('td', 'Show help')),
)),
buttons: [],
+ }).finally(() => {
+ helpModelOpen = false;
});
- return;
-}
\ No newline at end of file
+}
+
+function hideHelp() {
+ if (helpModelOpen) {
+ hideModel();
+ }
+}
diff --git a/ui/src/frontend/keyboard_event_handler.ts b/ui/src/frontend/keyboard_event_handler.ts
index 9cbc3d7..c687d9e 100644
--- a/ui/src/frontend/keyboard_event_handler.ts
+++ b/ui/src/frontend/keyboard_event_handler.ts
@@ -15,7 +15,7 @@
import {Actions} from '../common/actions';
import {globals} from './globals';
-import {showHelp} from './help_modal';
+import {toggleHelp} from './help_modal';
// Handles all key events than are not handled by the
// pan and zoom handler.
@@ -38,7 +38,7 @@
}
}
if (down && '?' === key) {
- showHelp();
+ toggleHelp();
}
}
diff --git a/ui/src/frontend/modal.ts b/ui/src/frontend/modal.ts
index 8791e58..0778e4c 100644
--- a/ui/src/frontend/modal.ts
+++ b/ui/src/frontend/modal.ts
@@ -47,10 +47,14 @@
m('footer.modal-footer', ...makeButtons(attrs.buttons)))));
return new Promise(resolve => {
MicroModal.show(
- 'main-modal', {onClose: () => resolve, awaitCloseAnimation: true});
+ 'main-modal', {onClose: () => resolve(), awaitCloseAnimation: true});
});
}
+export function hideModel() {
+ MicroModal.close();
+}
+
function makeButtons(buttonDefinition: Button[]): Array<m.Vnode<Button>> {
const buttons: Array<m.Vnode<Button>> = [];
buttonDefinition.forEach(button => {
diff --git a/ui/src/frontend/sidebar.ts b/ui/src/frontend/sidebar.ts
index ff997e1..1cee13e 100644
--- a/ui/src/frontend/sidebar.ts
+++ b/ui/src/frontend/sidebar.ts
@@ -18,7 +18,7 @@
import {QueryResponse} from '../common/queries';
import {globals} from './globals';
-import {showHelp} from './help_modal';
+import {toggleHelp} from './help_modal';
import {
isLegacyTrace,
openFileWithLegacyTraceViewer,
@@ -185,7 +185,7 @@
items: [
{
t: 'Controls',
- a: showHelp,
+ a: toggleHelp,
i: 'help',
},
{