forked from firefox-devtools/debugger
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathShortcutsModal.js
More file actions
126 lines (115 loc) · 3.29 KB
/
ShortcutsModal.js
File metadata and controls
126 lines (115 loc) · 3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// @flow
import React, { Component } from "react";
import Modal from "./shared/Modal";
import classnames from "classnames";
import { formatKeyShortcut } from "../utils/text";
import "./ShortcutsModal.css";
type Props = {
enabled: boolean,
additionalClass: string,
handleClose: () => void
};
export class ShortcutsModal extends Component<Props> {
renderPrettyCombos(combo: string) {
return combo
.split(" ")
.map(c => (
<span key={c} className="keystroke">
{c}
</span>
))
.reduce((prev, curr) => [prev, " + ", curr]);
}
renderShorcutItem(title: string, combo: string) {
return (
<li>
<span>{title}</span>
<span>{this.renderPrettyCombos(combo)}</span>
</li>
);
}
renderEditorShortcuts() {
return (
<ul className="shortcuts-list">
{this.renderShorcutItem(
L10N.getStr("shortcuts.toggleBreakpoint"),
formatKeyShortcut(L10N.getStr("toggleBreakpoint.key"))
)}
{this.renderShorcutItem(
L10N.getStr("shortcuts.toggleCondPanel"),
formatKeyShortcut(L10N.getStr("toggleCondPanel.key"))
)}
</ul>
);
}
renderSteppingShortcuts() {
return (
<ul className="shortcuts-list">
{this.renderShorcutItem(L10N.getStr("shortcuts.pauseOrResume"), "F8")}
{this.renderShorcutItem(L10N.getStr("shortcuts.stepOver"), "F10")}
{this.renderShorcutItem(L10N.getStr("shortcuts.stepIn"), "F11")}
{this.renderShorcutItem(
L10N.getStr("shortcuts.stepOut"),
formatKeyShortcut(L10N.getStr("stepOut.key"))
)}
</ul>
);
}
renderSearchShortcuts() {
return (
<ul className="shortcuts-list">
{this.renderShorcutItem(
L10N.getStr("shortcuts.fileSearch"),
formatKeyShortcut(L10N.getStr("sources.search.key2"))
)}
{this.renderShorcutItem(
L10N.getStr("shortcuts.searchAgain"),
formatKeyShortcut(L10N.getStr("sourceSearch.search.again.key2"))
)}
{this.renderShorcutItem(
L10N.getStr("shortcuts.projectSearch"),
formatKeyShortcut(L10N.getStr("projectTextSearch.key"))
)}
{this.renderShorcutItem(
L10N.getStr("shortcuts.functionSearch"),
formatKeyShortcut(L10N.getStr("functionSearch.key"))
)}
</ul>
);
}
renderShortcutsContent() {
return (
<div
className={classnames("shortcuts-content", this.props.additionalClass)}
>
<div className="shortcuts-section">
<h2>{L10N.getStr("shortcuts.header.editor")}</h2>
{this.renderEditorShortcuts()}
</div>
<div className="shortcuts-section">
<h2>{L10N.getStr("shortcuts.header.stepping")}</h2>
{this.renderSteppingShortcuts()}
</div>
<div className="shortcuts-section">
<h2>{L10N.getStr("shortcuts.header.search")}</h2>
{this.renderSearchShortcuts()}
</div>
</div>
);
}
render() {
const { enabled } = this.props;
if (!enabled) {
return null;
}
return (
<Modal
in={enabled}
additionalClass="shortcuts-modal"
handleClose={this.props.handleClose}
>
{this.renderShortcutsContent()}
</Modal>
);
}
}