l.address === this.state.cursor)} />
87 |
88 | {this.renderContextMenu()}
89 |
108 | Waiting for a game to start...
109 |
110 | );
111 | }
112 |
113 | renderContextMenu() {
114 | return
27 |
28 | Nav
29 |
31 |
32 |
33 | {stepping || !started ? 'Go' : 'Break'}
34 |
35 |
37 |
38 | Step Into
39 | Step Over
40 | Step Out
41 |
43 |
44 | Next HLE
45 |
47 |
48 | Breakpoint
49 |
51 |
52 |
53 | Thread: {this.renderThreadList()}
54 |
55 |
56 |
57 |
61 |
71 | {this.state.threads.map(thread => this.renderThread(thread))}
72 |
73 | );
74 | }
75 |
76 | renderThread(thread) {
77 | const classes = 'DisasmButtons__thread' + (thread.isCurrent ? ' DisasmButtons__thread--current' : '');
78 | return (
79 |
80 | {thread.name}{thread.isCurrent ? ' (current)' : ''}
81 |
82 | );
83 | }
84 |
85 | componentDidMount() {
86 | this.listeners_ = listeners.listen({
87 | 'connection.change': (connected) => this.setState({ connected }),
88 | 'cpu.stepping': () => this.updateThreadList(true),
89 | });
90 | }
91 |
92 | componentWillUnmount() {
93 | listeners.forget(this.listeners_);
94 | }
95 |
96 | componentDidUpdate(prevProps, prevState) {
97 | if (!prevState.connected && this.state.connected) {
98 | this.updateThreadList(this.context.gameStatus.currentThread === undefined);
99 | }
100 | }
101 |
102 | updateThreadList(resetCurrentThread) {
103 | if (!this.state.connected) {
104 | // This avoids a duplicate update during initial connect.
105 | return;
106 | }
107 |
108 | this.context.ppsspp.send({
109 | event: 'hle.thread.list',
110 | }).then(({ threads }) => {
111 | this.setState({ threads });
112 | if (resetCurrentThread) {
113 | const currentThread = threads.find(th => th.isCurrent);
114 | if (currentThread && currentThread.id !== this.context.gameStatus.currentThread) {
115 | this.props.updateCurrentThread(currentThread.id);
116 | }
117 | }
118 | }, () => {
119 | this.setState({ threads: [] });
120 | });
121 | }
122 |
123 | handleGoBreak = () => {
124 | if (this.context.gameStatus.stepping) {
125 | this.props.updateCurrentThread(undefined);
126 | }
127 | this.context.ppsspp.send({
128 | event: this.context.gameStatus.stepping ? 'cpu.resume' : 'cpu.stepping',
129 | }).catch(() => {
130 | // Already logged, let's assume the parent will have marked it disconnected/not started by now.
131 | });
132 | };
133 |
134 | handleStepInto = () => {
135 | this.props.updateCurrentThread(undefined);
136 | this.context.ppsspp.send({
137 | event: 'cpu.stepInto',
138 | thread: this.context.gameStatus.currentThread,
139 | }).catch(() => {
140 | // Already logged, let's assume the parent will have marked it disconnected/not started by now.
141 | });
142 | };
143 |
144 | handleStepOver = () => {
145 | this.props.updateCurrentThread(undefined);
146 | this.context.ppsspp.send({
147 | event: 'cpu.stepOver',
148 | thread: this.context.gameStatus.currentThread,
149 | }).catch(() => {
150 | // Already logged, let's assume the parent will have marked it disconnected/not started by now.
151 | });
152 | };
153 |
154 | handleStepOut = () => {
155 | const threadID = this.context.gameStatus.currentThread;
156 | this.props.updateCurrentThread(undefined);
157 | this.context.ppsspp.send({
158 | event: 'cpu.stepOut',
159 | thread: this.context.gameStatus.currentThread,
160 | }).catch(() => {
161 | // This might fail if they aren't inside a function call on this thread, so restore the thread.
162 | this.props.updateCurrentThread(threadID);
163 | });
164 | };
165 |
166 | handleNextHLE = () => {
167 | this.props.updateCurrentThread(undefined);
168 | this.context.ppsspp.send({
169 | event: 'cpu.nextHLE',
170 | }).catch(() => {
171 | // Already logged, let's assume the parent will have marked it disconnected/not started by now.
172 | });
173 | };
174 |
175 | handleThreadSelect = (ev) => {
176 | const currentThread = this.state.threads.find(th => th.id === Number(ev.target.value));
177 | if (currentThread) {
178 | this.props.updateCurrentThread(currentThread.id, currentThread.pc);
179 | }
180 | };
181 |
182 | handleBreakpointOpen = () => {
183 | this.setState({ breakpointModalOpen: true });
184 | };
185 |
186 | handleBreakpointClose = () => {
187 | this.setState({ breakpointModalOpen: false });
188 | };
189 |
190 | static getDerivedStateFromProps(nextProps, prevState) {
191 | let update = null;
192 | if (nextProps.currentThread && nextProps.currentThread !== prevState.lastThread) {
193 | update = { ...update, lastThread: nextProps.currentThread || '' };
194 | }
195 | if (nextProps.stepping || nextProps.started) {
196 | update = { ...update, connected: true };
197 | }
198 | if (!nextProps.started && prevState.threads.length) {
199 | update = { ...update, threads: [] };
200 | }
201 | return update;
202 | }
203 | }
204 |
205 | DisasmButtons.propTypes = {
206 | started: PropTypes.bool.isRequired,
207 | stepping: PropTypes.bool.isRequired,
208 | currentThread: PropTypes.number,
209 | showNavTray: PropTypes.func.isRequired,
210 |
211 | updateCurrentThread: PropTypes.func.isRequired,
212 | };
213 |
214 | DisasmButtons.contextType = DebuggerContext;
215 |
216 | export default DisasmButtons;
217 |
--------------------------------------------------------------------------------
/src/components/CPU/DisasmContextMenu.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import DebuggerContext, { DebuggerContextValues } from '../DebuggerContext';
3 | import PropTypes from 'prop-types';
4 | import { ContextMenu, MenuItem, connectMenu } from 'react-contextmenu';
5 | import { copyText } from '../../utils/clipboard';
6 | import { toString08X } from '../../utils/format';
7 |
8 | class DisasmContextMenu extends PureComponent {
9 | /**
10 | * @type {DebuggerContextValues}
11 | */
12 | context;
13 |
14 | render() {
15 | const { id, trigger } = this.props;
16 | const disabled = !this.context.gameStatus.stepping || this.context.gameStatus.paused;
17 | const line = trigger && trigger.line;
18 |
19 | const followBranch = line && (line.branch !== null || line.relevantData !== null || line.type === 'data');
20 |
21 | return (
22 |
23 |
24 | Copy Address
25 |
26 |
27 | Copy Instruction (Hex)
28 |
29 |
30 | Copy Instruction (Disasm)
31 |
32 |
34 | Assemble Opcode...
35 |
36 |
38 | Run to Cursor
39 |
40 |
41 | Jump to Cursor
42 |
43 |
44 | Toggle Breakpoint
45 |
46 |
48 | Follow Branch
49 |
50 |
51 | Go to in Memory View
52 |
53 |
54 | Go to in Jit Compare
55 |
56 |
58 | Rename Function...
59 |
60 |
61 | Remove Function
62 |
63 |
64 | Add Function Here
65 |
66 |
67 | );
68 | }
69 |
70 | handleCopyAddress = (ev, data) => {
71 | copyText(toString08X(data.line.address));
72 | data.node.focus();
73 | };
74 |
75 | handleCopyHex = (ev, data) => {
76 | const hexLines = this.props.getSelectedLines().map(line => {
77 | // Include each opcode of a macro if it's a macro.
78 | return line.macroEncoding ? line.macroEncoding.map(toString08X).join('\n') : toString08X(line.encoding);
79 | });
80 | copyText(hexLines.join('\n'));
81 | data.node.focus();
82 | };
83 |
84 | handleCopyDisasm = (ev, data) => {
85 | const lines = this.props.getSelectedDisasm();
86 | copyText(lines);
87 | data.node.focus();
88 | };
89 |
90 | handleAssemble = (ev, data) => {
91 | // Delay so the context menu can close before the prompt.
92 | setTimeout(() => {
93 | this.props.assembleInstruction(data.line, '').catch(() => {
94 | // Exception logged.
95 | });
96 | }, 0);
97 | };
98 |
99 | handleRunUntil = (ev, data) => {
100 | this.context.ppsspp.send({
101 | event: 'cpu.runUntil',
102 | address: data.line.address,
103 | }).catch(() => {
104 | // Already logged, let's assume the parent will have marked it disconnected/not started by now.
105 | });
106 | data.node.focus();
107 | };
108 |
109 | handleJumpPC = (ev, data) => {
110 | this.context.ppsspp.send({
111 | event: 'cpu.setReg',
112 | thread: this.context.gameStatus.currentThread,
113 | name: 'pc',
114 | value: data.line.address,
115 | }).catch((err) => {
116 | this.context.log('Failed to update PC: ' + err);
117 | });
118 | };
119 |
120 | handleToggleBreakpoint = (ev, data) => {
121 | this.props.toggleBreakpoint(data.line);
122 | };
123 |
124 | handleFollowBranch = (ev, data) => {
125 | this.props.followBranch(true, data.line);
126 | };
127 |
128 | handleTodo = (ev, data) => {
129 | // TODO
130 | console.log(data);
131 | data.node.focus();
132 | };
133 | }
134 |
135 | DisasmContextMenu.propTypes = {
136 | id: PropTypes.string.isRequired,
137 | trigger: PropTypes.shape({
138 | line: PropTypes.shape({
139 | type: PropTypes.string,
140 | branch: PropTypes.object,
141 | relevantData: PropTypes.object,
142 | }),
143 | }),
144 |
145 | getSelectedLines: PropTypes.func.isRequired,
146 | getSelectedDisasm: PropTypes.func.isRequired,
147 | followBranch: PropTypes.func.isRequired,
148 | assembleInstruction: PropTypes.func.isRequired,
149 | toggleBreakpoint: PropTypes.func.isRequired,
150 | };
151 |
152 | DisasmContextMenu.contextType = DebuggerContext;
153 |
154 | export default connectMenu('disasm')(DisasmContextMenu);
155 |
--------------------------------------------------------------------------------
/src/components/CPU/DisasmLine.js:
--------------------------------------------------------------------------------
1 | import { createRef, PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ContextMenuTrigger } from 'react-contextmenu';
4 | import { toString08X } from '../../utils/format';
5 | import { ensureInView } from '../../utils/dom';
6 | import classNames from 'clsx';
7 | import BreakpointIcon from './BreakpointIcon';
8 |
9 | class DisasmLine extends PureComponent {
10 | ref;
11 |
12 | constructor(props) {
13 | super(props);
14 |
15 | this.ref = createRef();
16 | }
17 |
18 | render() {
19 | const { line, selected, focused, cursor } = this.props;
20 |
21 | const className = classNames({
22 | 'DisasmLine': true,
23 | 'DisasmLine--selected': selected && !focused,
24 | 'DisasmLine--focused': focused,
25 | 'DisasmLine--cursor': cursor,
26 | 'DisasmLine--breakpoint': line.breakpoint && line.breakpoint.enabled,
27 | 'DisasmLine--disabled-breakpoint': line.breakpoint && !line.breakpoint.enabled,
28 | 'DisasmLine--current': line.isCurrentPC,
29 | });
30 |
31 | const mapData = (props) => {
32 | return { line, node: this.ref.current.parentNode };
33 | };
34 | const attributes = {
35 | onDoubleClick: (ev) => this.onDoubleClick(ev, mapData()),
36 | tabIndex: 0,
37 | };
38 |
39 | return (
40 |
48 | );
49 | }
50 |
51 | renderAddress(line) {
52 | const { symbol, address, encoding } = line;
53 | const addressHex = toString08X(address);
54 |
55 | if (this.props.displaySymbols) {
56 | if (symbol !== null) {
57 | return {this.highlight(symbol + ':')};
58 | }
59 | return {this.highlight(addressHex)};
60 | }
61 | return (
62 |
63 | {this.highlight(addressHex)} {toString08X(encoding)}
64 |
65 | );
66 | }
67 |
68 | renderConditional(line) {
69 | if (line.isCurrentPC && line.conditionMet !== null) {
70 | return line.conditionMet ? ' ; true' : ' ; false';
71 | }
72 | return '';
73 | }
74 |
75 | highlight(text, before = '', after = '') {
76 | const { highlight } = this.props;
77 | if (highlight !== null) {
78 | const fullText = (before ? before + ' ' : '') + text + ' ' + after;
79 | let pos = fullText.toLowerCase().indexOf(highlight);
80 | let matchLength = highlight.length;
81 | if (pos !== -1) {
82 | const beforeLength = before ? before.length + 1 : 0;
83 | if (pos < beforeLength) {
84 | matchLength -= beforeLength - pos;
85 | pos = matchLength > 0 ? 0 : -1;
86 | } else {
87 | pos -= beforeLength;
88 | }
89 | }
90 |
91 | if (pos >= 0 && pos < text.length) {
92 | const className = classNames({
93 | 'DisasmLine__highlight': true,
94 | 'DisasmLine__highlight--end': pos + matchLength > text.length + 1,
95 | });
96 | return (
97 | <>
98 | {text.substr(0, pos)}
99 | {text.substr(pos, matchLength)}
100 | {text.substr(pos + matchLength)}
101 |
102 | );
103 | }
104 | }
105 | return text;
106 | }
107 |
108 | highlightParams(text, before = '', after = '') {
109 | const { highlight, highlightParams } = this.props;
110 | if (highlight === null) {
111 | const params = text.split(/([,()])/);
112 | const toHighlight = highlightParams || [];
113 | return params.map((param, key) => {
114 | let className = 'DisasmLine__param';
115 | if (toHighlight.includes(param)) {
116 | className += ' DisasmLine__param--highlighted';
117 | }
118 | return {param} ;
119 | });
120 | }
121 | return this.highlight(text, before, after);
122 | }
123 |
124 | onDoubleClick(ev, data) {
125 | if (ev.button === 0) {
126 | this.props.onDoubleClick(ev, data);
127 | }
128 | }
129 |
130 | ensureInView(needsScroll) {
131 | const triggerNode = this.ref.current.parentNode;
132 | if (needsScroll !== false) {
133 | ensureInView(triggerNode, { block: needsScroll });
134 | }
135 | triggerNode.focus();
136 | }
137 |
138 | static addressBoundingTop(parentNode, address) {
139 | const lineNode = parentNode.querySelector('.DisasmLine[data-address="' + address + '"]');
140 | if (lineNode) {
141 | const triggerNode = lineNode.parentNode;
142 | return triggerNode.getBoundingClientRect().top;
143 | }
144 | return null;
145 | }
146 | }
147 |
148 | DisasmLine.propTypes = {
149 | line: PropTypes.shape({
150 | address: PropTypes.number.isRequired,
151 | }).isRequired,
152 | selected: PropTypes.bool,
153 | focused: PropTypes.bool,
154 | cursor: PropTypes.bool,
155 | displaySymbols: PropTypes.bool,
156 | highlight: PropTypes.string,
157 | highlightParams: PropTypes.arrayOf(PropTypes.string),
158 | contextmenu: PropTypes.string.isRequired,
159 | onDoubleClick: PropTypes.func.isRequired,
160 | };
161 |
162 | export default DisasmLine;
163 |
--------------------------------------------------------------------------------
/src/components/CPU/DisasmList.js:
--------------------------------------------------------------------------------
1 | import { createRef, PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import DisasmBranchGuide from './DisasmBranchGuide';
4 | import DisasmLine from './DisasmLine';
5 | import { hasContextMenu } from '../../utils/dom';
6 | import { listenCopy, forgetCopy } from '../../utils/clipboard';
7 | import { toString08X } from '../../utils/format';
8 | import { Timeout } from '../../utils/timeouts';
9 |
10 | class DisasmList extends PureComponent {
11 | state = {
12 | mouseDown: false,
13 | focused: false,
14 | lineOffsets: {},
15 | pendingLineParams: [],
16 | selectedLineParams: [],
17 | prevLines: null,
18 | prevSelectionTop: null,
19 | prevSelectionBottom: null,
20 | };
21 | focusTimeout;
22 | paramsTimeout;
23 | ref;
24 | cursorRef;
25 |
26 | constructor(props) {
27 | super(props);
28 |
29 | this.ref = createRef();
30 | this.cursorRef = createRef();
31 | this.focusTimeout = new Timeout(() => null, 20);
32 | this.paramsTimeout = new Timeout(() => {
33 | this.setState(prevState => ({ selectedLineParams: prevState.pendingLineParams }));
34 | }, 20);
35 | }
36 |
37 | render() {
38 | const events = {
39 | onMouseDownCapture: ev => this.onMouseDown(ev),
40 | onMouseUpCapture: this.state.mouseDown ? (ev => this.onMouseUp(ev)) : undefined,
41 | onMouseMove: this.state.mouseDown ? (ev => this.onMouseMove(ev)) : undefined,
42 | onKeyDown: ev => this.onKeyDown(ev),
43 | onBlur: ev => this.onFocusChange(ev, false),
44 | onFocus: ev => this.onFocusChange(ev, true),
45 | };
46 |
47 | return (
48 |
49 | {this.props.lines.map((line) => this.renderLine(line))}
50 | {this.props.branchGuides.map((guide) => this.renderBranchGuide(guide))}
51 |
52 | );
53 | }
54 |
55 | renderLine(line) {
56 | const { displaySymbols, cursor } = this.props;
57 | let props = {
58 | displaySymbols,
59 | line,
60 | selected: this.isLineSelected(line),
61 | cursor: line.address === cursor,
62 | onDoubleClick: this.props.onDoubleClick,
63 | ref: line.address === cursor ? this.cursorRef : undefined,
64 | // Avoid re-rendering lines unnecessarily.
65 | highlight: this.shouldHighlight(line, this.props.highlightText) ? this.props.highlightText : null,
66 | highlightParams: this.shouldHighlightParams(line) ? this.state.selectedLineParams : null,
67 | };
68 | props.focused = props.selected && this.state.focused;
69 |
70 | return
29 |
32 | );
33 | }
34 |
35 | renderList() {
36 | const { filter, loading, rowHeight } = this.state;
37 | if (loading || !rowHeight) {
38 | return Loading...
;
39 | }
40 |
41 | return (
42 |
43 |
{this.renderSizedList}
44 |
59 | );
60 | };
61 |
62 | renderFunc = ({ index, key, style }) => {
63 | const func = this.state.filteredFunctions[index];
64 | return (
65 |
66 | {func.name}
67 |
68 | );
69 | };
70 |
71 | componentDidMount() {
72 | this.listeners_ = listeners.listen({
73 | 'connection.change': (connected) => this.setState({ connected }),
74 | 'game.start': () => this.updateList(),
75 | });
76 | if (this.state.connected) {
77 | this.updateList();
78 | }
79 | if (!this.state.rowHeight) {
80 | setTimeout(() => this.measureHeight(), 0);
81 | }
82 | }
83 |
84 | componentWillUnmount() {
85 | listeners.forget(this.listeners_);
86 | }
87 |
88 | componentDidUpdate(prevProps, prevState) {
89 | if (!prevState.connected && this.state.connected) {
90 | this.updateList();
91 | }
92 | if (!this.state.rowHeight) {
93 | setTimeout(() => this.measureHeight(), 0);
94 | }
95 | }
96 |
97 | measureHeight() {
98 | const node = document.querySelector('.FuncList__loading');
99 | if (node) {
100 | const rowHeight = node.getBoundingClientRect().height;
101 | this.setState({ rowHeight });
102 | }
103 | }
104 |
105 | updateList() {
106 | if (!this.state.connected) {
107 | // This avoids a duplicate update during initial connect.
108 | return;
109 | }
110 |
111 | if (!this.state.loading && this.state.functions.length === 0) {
112 | this.setState({ loading: true });
113 | }
114 |
115 | this.context.ppsspp.send({
116 | event: 'hle.func.list',
117 | }).then(({ functions }) => {
118 | functions.sort((a, b) => a.name.localeCompare(b.name));
119 | this.setState(prevState => ({
120 | functions,
121 | filteredFunctions: this.applyFilter(functions, prevState.filter),
122 | loading: false,
123 | }));
124 | }, () => {
125 | this.setState({ functions: [], filteredFunctions: [], loading: false });
126 | });
127 | }
128 |
129 | applyFilter(functions, filter) {
130 | if (filter === '') {
131 | return functions;
132 | }
133 | const match = filter.toLowerCase();
134 | return functions.filter(func => func.name.toLowerCase().indexOf(match) !== -1);
135 | }
136 |
137 | handleFilter = (ev) => {
138 | const filter = ev.target.value;
139 | this.setState(prevState => ({
140 | filter,
141 | filteredFunctions: this.applyFilter(prevState.functions, filter),
142 | }));
143 | };
144 |
145 | handleClick = (ev) => {
146 | const { address } = ev.target.dataset;
147 | this.props.gotoDisasm(Number(address));
148 | ev.preventDefault();
149 | };
150 |
151 | static getDerivedStateFromProps(nextProps, prevState) {
152 | let update = null;
153 | if (nextProps.started) {
154 | update = { ...update, connected: true };
155 | }
156 | if (!nextProps.started && prevState.functions.length) {
157 | update = { ...update, functions: [], filteredFunctions: [] };
158 | }
159 | return update;
160 | }
161 | }
162 |
163 | FuncList.propTypes = {
164 | started: PropTypes.bool,
165 | gotoDisasm: PropTypes.func.isRequired,
166 | };
167 |
168 | FuncList.contextType = DebuggerContext;
169 |
170 | export default FuncList;
171 |
--------------------------------------------------------------------------------
/src/components/CPU/LeftPanel.css:
--------------------------------------------------------------------------------
1 | .LeftPanel {
2 | display: flex;
3 | flex: 1;
4 | flex-direction: column;
5 | width: 22ex;
6 | }
7 |
8 | .LeftPanel .react-tabs {
9 | display: flex;
10 | flex: 1;
11 | flex-direction: column;
12 | }
13 |
14 | .LeftPanel .react-tabs__tab-panel--selected {
15 | display: flex;
16 | flex: 1;
17 | flex-direction: column;
18 | }
19 |
20 | .LeftPanel__tools {
21 | padding: 1ex 0;
22 | }
23 |
24 | .LeftPanel__tools button {
25 | background: transparent;
26 | border: 0;
27 | font-size: inherit;
28 | padding: 0 3px;
29 | text-align: inherit;
30 | }
31 |
32 | .LeftPanel__tools button:enabled {
33 | cursor: pointer;
34 | }
35 |
36 | .LeftPanel__tools button:enabled:active,
37 | .LeftPanel__tools button:enabled:hover,
38 | .LeftPanel__tools button:enabled:focus {
39 | color: #279;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/CPU/LeftPanel.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import DebuggerContext, { DebuggerContextValues } from '../DebuggerContext';
3 | import PropTypes from 'prop-types';
4 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
5 | import FuncList from './FuncList';
6 | import RegPanel from './RegPanel';
7 | import VisualizeVFPU from './VisualizeVFPU';
8 | import SaveBreakpoints from './SaveBreakpoints';
9 | import './LeftPanel.css';
10 | import '../ext/react-tabs.css';
11 |
12 | class LeftPanel extends PureComponent {
13 | state = {
14 | vfpuModalOpen: false,
15 | breakpointModalOpen: false,
16 | // These can be slow, so we want to prevent render until it's selected.
17 | everShownFuncs: false,
18 | };
19 | /**
20 | * @type {DebuggerContextValues}
21 | */
22 | context;
23 |
24 | render() {
25 | return (
26 |
27 |
28 |
29 | Regs
30 | Funcs
31 | Tools
32 |
33 |
34 |
36 |
37 |
39 |
40 | Visualize VFPU
41 | Save Breakpoints
42 |
43 |
44 |
45 |
48 | );
49 | }
50 |
51 | handleSelect = (index) => {
52 | if (index === 1 && !this.state.everShownFuncs) {
53 | this.setState({ everShownFuncs: true });
54 | }
55 | };
56 |
57 | handleVFPUOpen = () => {
58 | this.setState({ vfpuModalOpen: true });
59 | };
60 |
61 | handleVFPUClose = () => {
62 | this.setState({ vfpuModalOpen: false });
63 | };
64 |
65 | handleBreakpointOpen = () => {
66 | this.setState({ breakpointModalOpen: true });
67 | };
68 |
69 | handleBreakpointClose = () => {
70 | this.setState({ breakpointModalOpen: false });
71 | };
72 | }
73 |
74 | LeftPanel.propTypes = {
75 | gotoDisasm: PropTypes.func.isRequired,
76 | };
77 |
78 | LeftPanel.contextType = DebuggerContext;
79 |
80 | export default LeftPanel;
81 |
--------------------------------------------------------------------------------
/src/components/CPU/RegList.js:
--------------------------------------------------------------------------------
1 | import { createRef, PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ContextMenuTrigger } from 'react-contextmenu';
4 | import { toString08X } from '../../utils/format';
5 | import { ensureInView, hasContextMenu } from '../../utils/dom';
6 | import classNames from 'clsx';
7 |
8 | class RegList extends PureComponent {
9 | state = {
10 | cursor: 0,
11 | };
12 | cursorRef;
13 | needsScroll = false;
14 |
15 | constructor(props) {
16 | super(props);
17 |
18 | this.cursorRef = createRef();
19 | }
20 |
21 | render() {
22 | return (
23 |
24 | {this.props.registerNames.map((name, reg) => {
25 | return this.renderReg(name, reg);
26 | })}
27 |
28 | );
29 | }
30 |
31 | renderReg(name, reg) {
32 | const mapData = (props) => {
33 | return { cat: this.props.id, reg, value: this.format(reg) };
34 | };
35 | const attributes = {
36 | onDoubleClick: (ev) => this.onDoubleClick(ev, mapData()),
37 | onMouseDown: (ev) => this.setState({ cursor: reg }),
38 | onKeyDown: (ev) => this.onKeyDown(ev),
39 | tabIndex: 0,
40 | };
41 | const ddClasses = {
42 | 'RegPanel__item--changed': this.changed(reg),
43 | 'RegPanel__item--selected': this.state.cursor === reg,
44 | };
45 | const ref = this.state.cursor === reg ? this.cursorRef : undefined;
46 |
47 | return (
48 |
54 | );
55 | }
56 |
57 | format(reg) {
58 | if (this.props.id === 0) {
59 | return toString08X(this.props.uintValues[reg]);
60 | } else {
61 | return this.props.floatValues[reg];
62 | }
63 | }
64 |
65 | changed(reg) {
66 | return this.props.uintValues[reg] !== this.props.uintValuesLast[reg];
67 | }
68 |
69 | componentDidUpdate(prevProps, prevState) {
70 | // Always associated with a state update.
71 | if (this.needsScroll && this.cursorRef.current) {
72 | const triggerNode = this.cursorRef.current.parentNode;
73 | ensureInView(triggerNode, { block: 'nearest' });
74 | triggerNode.focus();
75 | this.needsScroll = false;
76 | }
77 | }
78 |
79 | onDoubleClick = (ev, data) => {
80 | if (ev.button === 0) {
81 | this.props.onDoubleClick(ev, data);
82 | }
83 | };
84 |
85 | onKeyDown(ev) {
86 | if (hasContextMenu()) {
87 | return;
88 | }
89 | if (ev.key === 'ArrowUp' && this.state.cursor > 0) {
90 | this.needsScroll = true;
91 | this.setState(prevState => ({ cursor: prevState.cursor - 1 }));
92 | ev.preventDefault();
93 | }
94 | if (ev.key === 'ArrowDown' && this.state.cursor < this.props.registerNames.length - 1) {
95 | this.needsScroll = true;
96 | this.setState(prevState => ({ cursor: prevState.cursor + 1 }));
97 | ev.preventDefault();
98 | }
99 | }
100 | }
101 |
102 | RegList.propTypes = {
103 | id: PropTypes.number.isRequired,
104 | contextmenu: PropTypes.string.isRequired,
105 | onDoubleClick: PropTypes.func.isRequired,
106 | registerNames: PropTypes.arrayOf(PropTypes.string).isRequired,
107 | uintValues: PropTypes.arrayOf(PropTypes.number).isRequired,
108 | floatValues: PropTypes.arrayOf(PropTypes.string).isRequired,
109 | uintValuesLast: PropTypes.arrayOf(PropTypes.number).isRequired,
110 | floatValuesLast: PropTypes.arrayOf(PropTypes.string).isRequired,
111 | };
112 |
113 | export default RegList;
114 |
--------------------------------------------------------------------------------
/src/components/CPU/RegPanel.css:
--------------------------------------------------------------------------------
1 | #RegPanel {
2 | display: flex;
3 | flex: 1;
4 | flex-direction: column;
5 | width: 22ex;
6 | }
7 |
8 | #RegPanel dl {
9 | flex: 1 1 auto;
10 | font-family: Consolas, monospace;
11 | line-height: 0.8em;
12 | margin: 0;
13 | margin-top: 1px;
14 | height: 0;
15 | overflow-y: auto;
16 | text-align: start;
17 | }
18 |
19 | #RegPanel dt {
20 | clear: both;
21 | cursor: default;
22 | float: left;
23 | margin: 0;
24 | margin-top: 1px;
25 | margin-bottom: 1px;
26 | padding: 0;
27 | width: 8ex;
28 | }
29 |
30 | #RegPanel dt::before {
31 | background: #e8efff;
32 | content: "\00A0";
33 | display: block;
34 | float: left;
35 | margin-left: 1px;
36 | margin-right: 2px;
37 | width: 14px;
38 | }
39 |
40 | #RegPanel dd {
41 | border: 1px solid transparent;
42 | cursor: default;
43 | margin: 0;
44 | margin-left: 16px;
45 | padding: 0;
46 | padding-left: 8ex;
47 | }
48 |
49 | #RegPanel dd:active {
50 | border-color: #666;
51 | }
52 |
53 | .RegPanel__item--selected {
54 | background: #e0e8ff;
55 | background-clip: padding-box;
56 | }
57 |
58 | .RegPanel__item--changed {
59 | color: red;
60 | }
61 |
62 | #RegPanel .react-contextmenu-wrapper:focus {
63 | /* Already shown on selection. */
64 | outline: none;
65 | }
66 |
67 | #RegPanel .react-tabs {
68 | display: flex;
69 | flex-direction: column;
70 | flex-grow: 1;
71 | }
72 |
73 | #RegPanel .react-tabs__tab-panel--selected {
74 | display: flex;
75 | flex: 1 1 auto;
76 | flex-direction: column;
77 | }
78 |
79 | /* These fix a bug in IE11. */
80 | .LeftPanel .react-tabs__tab-list {
81 | flex: 0 0 auto;
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/CPU/RegPanel.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import DebuggerContext, { DebuggerContextValues } from '../DebuggerContext';
3 | import PropTypes from 'prop-types';
4 | import { ContextMenu, MenuItem } from 'react-contextmenu';
5 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
6 | import RegList from './RegList';
7 | import listeners from '../../utils/listeners.js';
8 | import { copyText } from '../../utils/clipboard';
9 | import './RegPanel.css';
10 | import '../ext/react-contextmenu.css';
11 | import '../ext/react-tabs.css';
12 |
13 | class RegPanel extends PureComponent {
14 | state = {
15 | categories: [],
16 | };
17 | /**
18 | * @type {DebuggerContextValues}
19 | */
20 | context;
21 |
22 | render() {
23 | return (
24 |
25 | {this.renderTabs()}
26 | {this.renderContextMenu()}
27 |
28 | );
29 | }
30 |
31 | renderTabs() {
32 | const { categories } = this.state;
33 | // Seems react-tabs is buggy when tabs are initially empty.
34 | if (categories.length === 0) {
35 | return '';
36 | }
37 |
38 | return (
39 |
40 |
41 | {categories.map(c => {c.name} )}
42 |
43 | {categories.map(c => (
44 |
45 |
47 | ))}
48 |
49 | );
50 | }
51 |
52 | renderContextMenu() {
53 | const disabled = !this.context.gameStatus.stepping;
54 | return (
55 |
56 |
57 | Go to in Memory View
58 |
59 |
60 | Go to in Disassembly
61 |
62 |
64 | Copy Value
65 |
66 |
67 | Change...
68 |
69 |
70 | );
71 | }
72 |
73 | componentDidMount() {
74 | this.listeners_ = listeners.listen({
75 | 'connection': () => this.updateRegs(false),
76 | 'cpu.stepping': () => this.updateRegs(false),
77 | 'cpu.setReg': (result) => this.updateReg(result),
78 | });
79 | }
80 |
81 | componentWillUnmount() {
82 | listeners.forget(this.listeners_);
83 | }
84 |
85 | componentDidUpdate(prevProps, prevState) {
86 | if (this.props.currentThread && this.props.currentThread !== prevProps.currentThread) {
87 | this.updateRegs(true);
88 | }
89 | }
90 |
91 | handleViewMemory = (ev, data) => {
92 | // TODO
93 | console.log(data);
94 | };
95 |
96 | handleViewDisassembly = (ev, data) => {
97 | const uintValue = this.state.categories[data.cat].uintValues[data.reg];
98 | this.props.gotoDisasm(uintValue);
99 | };
100 |
101 | handleCopyReg = (ev, data, regNode) => {
102 | copyText(data.value);
103 | };
104 |
105 | handleChangeReg = (ev, data, regNode) => {
106 | const prevValue = (data.cat === 0 ? '0x' : '') + data.value;
107 | const registerName = this.state.categories[data.cat].registerNames[data.reg];
108 |
109 | const newValue = window.prompt('New value for ' + registerName, prevValue);
110 | if (newValue === null) {
111 | return;
112 | }
113 |
114 | const packet = {
115 | event: 'cpu.setReg',
116 | thread: this.context.gameStatus.currentThread,
117 | category: data.cat,
118 | register: data.reg,
119 | value: newValue,
120 | };
121 |
122 | // The result is automatically listened for.
123 | this.context.ppsspp.send(packet).catch((err) => {
124 | window.alert(err);
125 | });
126 | };
127 |
128 | updateRegs(keepLast) {
129 | this.context.ppsspp.send({
130 | event: 'cpu.getAllRegs',
131 | thread: this.context.gameStatus.currentThread,
132 | }).then((result) => {
133 | let { categories } = result;
134 | // Add values for change tracking.
135 | const hasPrev = this.state.categories.length !== 0;
136 | for (let cat of categories) {
137 | const prevCat = hasPrev ? this.state.categories[cat.id] : null;
138 | cat.uintValuesLast = hasPrev ? (keepLast ? prevCat.uintValuesLast : prevCat.uintValues) : cat.uintValues;
139 | cat.floatValuesLast = hasPrev ? (keepLast ? prevCat.floatValuesLast : prevCat.floatValues) : cat.floatValues;
140 | }
141 | this.setState({ categories });
142 | }, (err) => {
143 | // Leave regs alone.
144 | console.error(err);
145 | });
146 | }
147 |
148 | updateReg(result) {
149 | const replaceCopy = (arr, index, item) => {
150 | return arr.slice(0, index).concat([item]).concat(arr.slice(index + 1));
151 | };
152 |
153 | this.setState(prevState => ({
154 | categories: prevState.categories.map((cat) => {
155 | if (cat.id === result.category) {
156 | return {
157 | ...cat,
158 | // Keep values from last time, until next stepping.
159 | uintValuesLast: cat.uintValuesLast,
160 | floatValuesLast: cat.floatValuesLast,
161 | uintValues: replaceCopy(cat.uintValues, result.register, result.uintValue),
162 | floatValues: replaceCopy(cat.floatValues, result.register, result.floatValue),
163 | };
164 | }
165 | return cat;
166 | }),
167 | }));
168 | }
169 | }
170 |
171 | RegPanel.propTypes = {
172 | gotoDisasm: PropTypes.func.isRequired,
173 | currentThread: PropTypes.number,
174 | };
175 |
176 | RegPanel.contextType = DebuggerContext;
177 |
178 | export default RegPanel;
179 |
--------------------------------------------------------------------------------
/src/components/CPU/SaveBreakpoints.css:
--------------------------------------------------------------------------------
1 | .SaveBreakpoints__file-buttons {
2 | display: flex;
3 | gap: 2ex;
4 | margin-bottom: 2ex;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/CPU/SaveBreakpoints.js:
--------------------------------------------------------------------------------
1 | import FitModal from '../common/FitModal';
2 | import PropTypes from 'prop-types';
3 | import { useState } from 'react';
4 | import { useDebuggerContext } from '../DebuggerContext';
5 | import { setAutoPersistBreakpoints, isAutoPersistingBreakpoints, cleanBreakpointForPersist } from '../../utils/persist';
6 | import './SaveBreakpoints.css';
7 |
8 | function downloadBreakpoints(context) {
9 | let promises = [
10 | context.ppsspp.send({ event: 'game.status' }).then(({ game }) => game.id).catch(() => null),
11 | context.ppsspp.send({ event: 'cpu.breakpoint.list' }).then(({ breakpoints }) => breakpoints, () => []),
12 | context.ppsspp.send({ event: 'memory.breakpoint.list' }).then(({ breakpoints }) => breakpoints, () => []),
13 | ];
14 | Promise.all(promises).then(([id, cpu, memory]) => {
15 | const data = {
16 | version: '1.0',
17 | id,
18 | cpu: cpu.map(cleanBreakpointForPersist),
19 | memory: memory.map(cleanBreakpointForPersist),
20 | };
21 |
22 | let a = document.createElement('a');
23 | a.setAttribute('download', id + '.breakpoints.json');
24 | a.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
25 | a.hidden = true;
26 | document.body.appendChild(a);
27 | a.click();
28 | document.body.removeChild(a);
29 | });
30 | }
31 |
32 | function restoreBreakpoints(context, data) {
33 | let completion = [];
34 | for (let bp of data.cpu) {
35 | completion.push(context.ppsspp.send({
36 | event: 'cpu.breakpoint.add',
37 | ...bp,
38 | }).then(() => true, (err) => {
39 | console.error('Unable to import breakpoint', err);
40 | return false;
41 | }));
42 | }
43 | for (let bp of data.memory) {
44 | completion.push(context.ppsspp.send({
45 | event: 'memory.breakpoint.add',
46 | ...bp,
47 | }).then(() => true, (err) => {
48 | console.error('Unable to import breakpoint', err);
49 | return false;
50 | }));
51 | }
52 |
53 | Promise.all(completion).then((results) => {
54 | const succeeded = results.filter(v => v === true).length;
55 | const failed = results.filter(v => v === false).length;
56 |
57 | if (failed === 0 && succeeded === 0) {
58 | window.alert('No breakpoints were found to import.');
59 | } else if (failed === 0) {
60 | window.alert('Breakpoints imported successfully.');
61 | } else if (succeeded === 0) {
62 | window.alert('Failed to import breakpoints (see log.)');
63 | } else {
64 | window.alert('Some breakpoints failed to import (see log.)');
65 | }
66 | });
67 | }
68 |
69 | function promptRestoreBreakpoints(context) {
70 | // Could have canceled before, cleanup old inputs.
71 | if (document.getElementById('save-breakpoints-file')) {
72 | document.body.removeChild(document.getElementById('save-breakpoints-file'));
73 | }
74 |
75 | let input = document.createElement('input');
76 | input.id = 'save-breakpoints-file';
77 | input.setAttribute('type', 'file');
78 | input.setAttribute('accept', 'application/json');
79 | input.style.position = 'absolute';
80 | input.style.top = '0';
81 | input.style.left = '0';
82 | input.style.width = '1px';
83 | input.style.height = '1px';
84 | input.style.visibility = 'hidden';
85 |
86 | document.body.appendChild(input);
87 | input.addEventListener('change', (event) => {
88 | const fileList = event.target.files;
89 | const reader = new FileReader();
90 | reader.addEventListener('load', (event) => {
91 | const data = JSON.parse(reader.result);
92 | if (Array.isArray(data.cpu) && Array.isArray(data.memory) && data.version) {
93 | restoreBreakpoints(context, data);
94 | } else {
95 | window.alert('Format unrecogized, unable to import breakpoints.');
96 | }
97 | document.body.removeChild(input);
98 | });
99 | reader.readAsText(fileList[0]);
100 | });
101 | input.click();
102 | }
103 |
104 | export default function SaveBreakpoints(props) {
105 | const context = useDebuggerContext();
106 | const [persisting, setPersisting] = useState(isAutoPersistingBreakpoints());
107 | const updatePersisting = (ev) => {
108 | setAutoPersistBreakpoints(ev.target.checked);
109 | setPersisting(ev.target.checked);
110 | };
111 |
112 | return (
113 |
114 | Breakpoints
115 |
116 |
117 | downloadBreakpoints(context)}>Export to file
118 | promptRestoreBreakpoints(context)}>Import from file
119 |
120 |
121 |
122 |
125 |
126 | );
127 | }
128 |
129 | SaveBreakpoints.propTypes = {
130 | isOpen: PropTypes.bool.isRequired,
131 | onClose: PropTypes.func.isRequired,
132 | };
133 |
--------------------------------------------------------------------------------
/src/components/CPU/StatusBar.css:
--------------------------------------------------------------------------------
1 | .StatusBar {
2 | background: #eee;
3 | border-top: 1px solid #ccc;
4 | border-bottom-left-radius: 1ex;
5 | border-bottom-right-radius: 1ex;
6 | display: flex;
7 | line-height: 1.5em;
8 | height: 1.5em;
9 | overflow: hidden;
10 | padding: 1px 1ex;
11 | text-overflow: ellipsis;
12 | white-space: nowrap;
13 | }
14 |
15 | .StatusBar__left {
16 | flex: 1 1 auto;
17 | }
18 |
19 | .StatusBar__right {
20 | text-align: right;
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/CPU/StatusBar.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { toString02X, toString04X, toString08X } from '../../utils/format';
4 | import './StatusBar.css';
5 |
6 | class StatusBar extends PureComponent {
7 | render() {
8 | const { line } = this.props;
9 | if (!line) {
10 | return
;
11 | }
12 |
13 | return (
14 |
15 |
{this.renderLeftStatus(line)}
16 |
{line.function || line.symbol || ''}
17 |
32 | VFPU Registers
33 |
34 | {matrices}
35 |
36 |
46 |
47 | );
48 | }
49 |
50 | renderMatrix(m) {
51 | return (
52 |
53 |
54 | {this.renderTopHeaders(m)}
55 |
56 |
57 | {this.renderTableRow(m, 0)}
58 | {this.renderTableRow(m, 1)}
59 | {this.renderTableRow(m, 2)}
60 | {this.renderTableRow(m, 3)}
61 |
62 |
63 | );
64 | }
65 |
66 | renderTopHeaders(m) {
67 | const { transposed } = this.state;
68 | if (!transposed) {
69 | return (
70 |
71 | M{m}00
72 | C{m}00
73 | C{m}10
74 | C{m}20
75 | C{m}30
76 |
77 | );
78 | }
79 |
80 | return (
81 |
82 | M{m}00
83 | R{m}00
84 | R{m}01
85 | R{m}02
86 | R{m}03
87 |
88 | );
89 | }
90 |
91 | renderTableRow(m, c) {
92 | const { transposed } = this.state;
93 | if (!transposed) {
94 | return (
95 |
96 | R{m}0{c}
97 | {this.renderValue(m, 0, c)}
98 | {this.renderValue(m, 1, c)}
99 | {this.renderValue(m, 2, c)}
100 | {this.renderValue(m, 3, c)}
101 |
102 | );
103 | }
104 |
105 | return (
106 |
107 | C{m}{c}0
108 | {this.renderValue(m, c, 0)}
109 | {this.renderValue(m, c, 1)}
110 | {this.renderValue(m, c, 2)}
111 | {this.renderValue(m, c, 3)}
112 |
113 | );
114 | }
115 |
116 | renderValue(m, c, r) {
117 | const reg = m * 4 + r * 32 + c;
118 | const cat = this.state.categories[2];
119 | if (this.state.format === 'uint') {
120 | return toString08X(cat.uintValues[reg]);
121 | }
122 | return cat.floatValues[reg];
123 | }
124 |
125 | componentDidMount() {
126 | this.listeners_ = listeners.listen({
127 | 'cpu.getAllRegs': ({ categories }) => this.setState({ categories }),
128 | 'cpu.setReg': ({ category, register, uintValue, floatValue }) => {
129 | const spliceCopy = (arr, index, value) => [...arr.slice(0, index), value, ...arr.slice(index + 1)];
130 |
131 | if (category !== 2) {
132 | return;
133 | }
134 | this.setState(prevState => {
135 | const newCategory = {
136 | ...prevState.categories[2],
137 | uintValues: spliceCopy(prevState.categories[2].uintValues, register, uintValue),
138 | floatValues: spliceCopy(prevState.categories[2].floatValues, register, floatValue),
139 | };
140 | const categories = spliceCopy(prevState.categories, 2, newCategory);
141 | return { categories };
142 | });
143 | },
144 | });
145 | }
146 |
147 | componentWillUnmount() {
148 | listeners.forget(this.listeners_);
149 | }
150 |
151 | handleFormat = (ev) => {
152 | const format = ev.target.value;
153 | this.setState({ format });
154 | };
155 |
156 | handleOrientation = (ev) => {
157 | const transposed = ev.target.checked;
158 | this.setState({ transposed });
159 | };
160 | }
161 |
162 | VisualizeVFPU.propTypes = {
163 | isOpen: PropTypes.bool.isRequired,
164 | onClose: PropTypes.func.isRequired,
165 | };
166 |
167 | export default VisualizeVFPU;
168 |
--------------------------------------------------------------------------------
/src/components/DebuggerContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 | import PPSSPP from '../sdk/ppsspp.js';
3 | import { GameStatusValues } from '../utils/game.js';
4 |
5 | /**
6 | * @callback LogCallback
7 | * @param {string} message Message to log.
8 | */
9 |
10 | /**
11 | * @typedef {object} DebuggerContextValues
12 | * @property {PPSSPP|null} ppsspp PPSSPP SDK instance.
13 | * @property {GameStatusValues|null} gameStatus Basic thread/stepping information.
14 | * @property {LogCallback} log Function to display a log message.
15 | */
16 |
17 | /**
18 | * @type {DebuggerContextValues}
19 | */
20 | const defaultContext = {
21 | ppsspp: null,
22 | gameStatus: null,
23 | log: (message) => console.error(message),
24 | };
25 |
26 | const DebuggerContext = createContext(defaultContext);
27 | DebuggerContext.displayName = 'DebuggerContext';
28 | export default DebuggerContext;
29 |
30 | export function useDebuggerContext() {
31 | return useContext(DebuggerContext);
32 | }
33 |
34 | export function DebuggerProvider({ children, gameStatus, log, ppsspp }) {
35 | return (
36 |
37 | {children}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/GPU.css:
--------------------------------------------------------------------------------
1 | #GPU {
2 | display: flex;
3 | flex: 1;
4 | flex-direction: column;
5 | }
6 |
7 | .GPU__main {
8 | align-items: center;
9 | display: flex;
10 | flex: 1;
11 | flex-direction: column;
12 | font-size: larger;
13 | justify-content: center;
14 | max-height: calc(75vh - 24px);
15 | min-height: 20em;
16 | }
17 |
18 | .GPU__info {
19 | font-size: 14px;
20 | margin-top: 2ex;
21 | }
22 |
23 | .GPU__form {
24 | display: block;
25 | margin-top: 2ex;
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/GPU.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import DebuggerContext, { DebuggerContextValues } from './DebuggerContext';
3 | import listeners from '../utils/listeners.js';
4 | import Log from './Log';
5 | import './GPU.css';
6 |
7 | class GPU extends PureComponent {
8 | state = {
9 | connected: false,
10 | started: false,
11 | paused: true,
12 | recording: false,
13 | };
14 | /**
15 | * @type {DebuggerContextValues}
16 | */
17 | context;
18 |
19 | render() {
20 | return (
21 |
22 | {this.renderMain()}
23 | {this.renderUtilityPanel()}
24 |
25 | );
26 | }
27 |
28 | renderMain() {
29 | return (
30 |
31 |
32 | {this.state.started && !this.state.paused ? 'Click below to generate a GE dump. It will download as a file.' : 'Waiting for a game to start...'}
33 |
34 | {this.state.started && !this.state.paused ? (
35 |
38 | ) : null}
39 |
46 |
48 | );
49 | }
50 |
51 | componentDidMount() {
52 | this.listeners_ = listeners.listen({
53 | 'connection': () => this.onConnection(),
54 | 'connection.change': (connected) => this.onConnectionChange(connected),
55 | 'game.start': () => this.setState({ started: true, paused: false }),
56 | 'game.quit': () => this.setState({ started: false, paused: true }),
57 | 'game.pause': () => this.setState({ paused: true }),
58 | 'game.resume': () => this.setState({ paused: false }),
59 | });
60 | }
61 |
62 | componentWillUnmount() {
63 | listeners.forget(this.listeners_);
64 | }
65 |
66 | onConnectionChange(connected) {
67 | // On any reconnect, assume paused until proven otherwise.
68 | this.setState({ connected, started: false, paused: true });
69 | }
70 |
71 | onConnection() {
72 | // Update the status of this connection immediately too.
73 | this.context.ppsspp.send({ event: 'cpu.status' }).then((result) => {
74 | const { stepping, paused, pc } = result;
75 | const started = pc !== 0 || stepping;
76 |
77 | this.setState({ connected: true, started, paused });
78 | }, (err) => {
79 | this.setState({ paused: true });
80 | });
81 | }
82 |
83 | beginRecord = (ev) => {
84 | this.setState({ recording: true });
85 | this.context.ppsspp.send({ event: 'gpu.record.dump' }).then(result => {
86 | const { id } = this.context.gameStatus;
87 |
88 | let a = document.createElement('a');
89 | a.setAttribute('download', id ? id + '.ppdmp' : 'recording.ppdmp');
90 | a.href = result.uri;
91 | a.hidden = true;
92 | document.body.appendChild(a);
93 | a.click();
94 | document.body.removeChild(a);
95 |
96 | this.setState({ recording: false });
97 | });
98 | ev.preventDefault();
99 | };
100 | }
101 |
102 | GPU.contextType = DebuggerContext;
103 |
104 | export default GPU;
105 |
--------------------------------------------------------------------------------
/src/components/Log.css:
--------------------------------------------------------------------------------
1 | #Log {
2 | background: black;
3 | border-radius: 1ex;
4 | color: #ccc;
5 | flex: 1 1;
6 | font: 12px Consolas, monospace;
7 | max-width: 100%;
8 | min-height: 2em;
9 | overflow: auto;
10 | margin: 1ex;
11 | margin-top: 2px;
12 | padding: 1ex;
13 | white-space: pre-wrap;
14 | text-align: start;
15 | }
16 |
17 | .Log__message--internal::before {
18 | content: "\00BB\00A0";
19 | }
20 |
21 | .Log__message__timestamp {
22 | color: #fff;
23 | }
24 |
25 | .Log__message--level-1 {
26 | color: #0f0;
27 | }
28 |
29 | .Log__message--level-2 {
30 | color: #f00;
31 | }
32 |
33 | .Log__message--level-3 {
34 | color: #ff0;
35 | }
36 |
37 | .Log__message--level-4 {
38 | color: #0ff;
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/Log.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import LogItem from './LogItem';
3 | import { useLogItems } from '../utils/logger';
4 | import './Log.css';
5 |
6 | export default function Log(props) {
7 | const logItems = useLogItems();
8 |
9 | const divRef = useRef();
10 |
11 | useEffect(() => {
12 | const div = divRef.current;
13 | div.scrollTop = div.scrollHeight - div.clientHeight;
14 | }, [divRef, logItems]);
15 |
16 | return (
17 |
18 | {logItems.map(item =>
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/LogItem.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'clsx';
4 |
5 | class LogItem extends PureComponent {
6 | render() {
7 | if (this.props.item.event === 'log') {
8 | return this.formatLogEvent();
9 | }
10 |
11 | return this.renderInternal();
12 | }
13 |
14 | renderInternal() {
15 | return (
16 |
17 | {this.props.item.message}
18 |
19 | );
20 | }
21 |
22 | formatLogEvent() {
23 | const { item } = this.props;
24 | return (
25 |
26 |
27 | {item.timestamp}
28 | {' ' + item.header + ' '}
29 |
30 | {item.message}
31 |
32 | );
33 | }
34 |
35 | makeClassName() {
36 | const { item } = this.props;
37 |
38 | return classNames('Log__message', {
39 | 'Log__message--internal': item.event !== 'log',
40 | ['Log__message--channel-' + item.channel]: item.event === 'log',
41 | ['Log__message--level-' + item.level]: true,
42 | });
43 | }
44 | }
45 |
46 | LogItem.propTypes = {
47 | item: PropTypes.shape({
48 | event: PropTypes.string,
49 | channel: PropTypes.string,
50 | level: PropTypes.number,
51 | timestamp: PropTypes.string,
52 | header: PropTypes.string,
53 | message: PropTypes.string.isRequired,
54 | }).isRequired,
55 | };
56 |
57 | export default LogItem;
58 |
--------------------------------------------------------------------------------
/src/components/NotConnected.css:
--------------------------------------------------------------------------------
1 | #NotConnected {
2 | display: flex;
3 | flex: 1;
4 | flex-direction: column;
5 | }
6 |
7 | .NotConnected__main {
8 | align-items: center;
9 | display: flex;
10 | flex: 1;
11 | flex-direction: column;
12 | font-size: larger;
13 | justify-content: center;
14 | max-height: calc(75vh - 24px);
15 | min-height: 20em;
16 | }
17 |
18 | .NotConnected__info {
19 | font-size: 14px;
20 | margin-top: 2ex;
21 | }
22 |
23 | .NotConnected__form {
24 | display: block;
25 | margin-top: 2ex;
26 | }
27 |
28 | .NotConnected__uri {
29 | margin-right: 1ex;
30 | width: 30ex;
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/NotConnected.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import Log from './Log';
3 | import './NotConnected.css';
4 |
5 | export default function NotConnected(props) {
6 | const connectManually = (ev) => {
7 | const uri = ev.target.elements['debugger-uri'].value;
8 | props.connect(uri);
9 | ev.preventDefault();
10 | };
11 | const connectAutomatically = (ev) => {
12 | props.connect(null);
13 | ev.preventDefault();
14 | };
15 |
16 | const mainDiv = (
17 |
18 | {props.connecting ? 'Connecting to PPSSPP...' : 'Not connected to PPSSPP'}
19 |
20 |
21 | Make sure "Allow remote debugger" is enabled in Developer tools.
22 |
23 |
27 |
30 |
35 |
37 | );
38 |
39 | return (
40 |
41 | {mainDiv}
42 | {utilityPanelDiv}
43 |
44 | );
45 | }
46 |
47 | NotConnected.propTypes = {
48 | connect: PropTypes.func.isRequired,
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/common/Field.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class Field extends Component {
5 | render() {
6 | const { label, children } = this.props;
7 | return (
8 |
9 | {label}
10 | {this.renderInput()}
11 | {children}
12 |
13 | );
14 | }
15 |
16 | renderInput() {
17 | if (this.props.type === 'text') {
18 | return this.renderText();
19 | } else if (this.props.type === 'hex') {
20 | return this.renderHex();
21 | } else if (this.props.type === 'radio') {
22 | return this.renderRadio();
23 | } else if (this.props.type === 'checkboxes') {
24 | return this.renderCheckboxes();
25 | } else {
26 | return null;
27 | }
28 | }
29 |
30 | renderText(other = {}) {
31 | let { label, type, children, onChange, component, prop, ...primary } = this.props;
32 | primary.value = this.fieldValue();
33 | return
52 |
55 | );
56 | });
57 | }
58 |
59 | renderCheckboxes() {
60 | return this.props.options.map(option => {
61 | const props = {
62 | 'data-prop': option.value,
63 | checked: this.props.component.state[option.value],
64 | onChange: this.handleChange,
65 | disabled: this.props.disabled,
66 | };
67 | return (
68 |
69 |
72 | );
73 | });
74 | }
75 |
76 | fieldID() {
77 | const { id, component, prop } = this.props;
78 | if (!id && component && prop) {
79 | return (component.displayName || component.constructor.name) + '__' + prop;
80 | }
81 | return id;
82 | }
83 |
84 | fieldValue() {
85 | const { value, component, prop } = this.props;
86 | if (value === undefined && component && prop) {
87 | return component.state[prop];
88 | }
89 | return value;
90 | }
91 |
92 | handleChange = (ev) => {
93 | if (this.props.onChange) {
94 | this.props.onChange(ev);
95 | } else if (this.props.component) {
96 | const { target } = ev;
97 | const prop = target.dataset.prop || this.props.prop;
98 | const value = target.type === 'checkbox' ? target.checked : target.value;
99 | this.props.component.setState({ [prop]: value });
100 | }
101 | };
102 | }
103 |
104 | Field.propTypes = {
105 | id: PropTypes.string,
106 | label: PropTypes.node.isRequired,
107 | type: PropTypes.oneOf(['text', 'hex', 'radio', 'checkboxes']),
108 | component: PropTypes.object,
109 | value: PropTypes.string,
110 | prop: PropTypes.string,
111 | options: PropTypes.arrayOf(PropTypes.shape({
112 | label: PropTypes.string.isRequired,
113 | value: PropTypes.string.isRequired,
114 | })),
115 | disabled: PropTypes.bool,
116 | onChange: PropTypes.func,
117 | children: PropTypes.node,
118 | };
119 |
120 | export default Field;
121 |
--------------------------------------------------------------------------------
/src/components/common/FitModal.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Modal from 'react-modal';
4 | import '../ext/react-modal.css';
5 |
6 | class FitModal extends PureComponent {
7 | render() {
8 | return (
9 | Save : null;
24 | const cancelButton = props.onCancel ? Cancel : null;
25 |
26 | return (
27 |
28 | {props.children}
29 | {saveButton}
30 | {cancelButton}
31 |
32 | );
33 | };
34 |
35 | Form.Buttons.propTypes = {
36 | onSave: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
37 | onCancel: PropTypes.func,
38 | children: PropTypes.node,
39 | };
40 |
41 | export default Form;
42 |
--------------------------------------------------------------------------------
/src/components/common/GotoBox.css:
--------------------------------------------------------------------------------
1 | .GotoBox {
2 | flex: 0 0 auto;
3 | padding: 5px;
4 | padding-top: 2px;
5 | }
6 |
7 | .GotoBox__label {
8 | display: block;
9 | padding-bottom: 3px;
10 | }
11 |
12 | .GotoBox__address {
13 | width: 11ex;
14 | margin-right: 4px;
15 | }
16 |
17 | .GotoBox__button {
18 | background: transparent;
19 | border: 0;
20 | font-size: inherit;
21 | padding: 0 3px;
22 | }
23 |
24 | .GotoBox__button:enabled {
25 | cursor: pointer;
26 | }
27 |
28 | .GotoBox__button:enabled:active,
29 | .GotoBox__button:enabled:hover,
30 | .GotoBox__button:enabled:focus {
31 | color: #279;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/common/GotoBox.js:
--------------------------------------------------------------------------------
1 | import { createRef, PureComponent } from 'react';
2 | import DebuggerContext, { DebuggerContextValues } from '../DebuggerContext';
3 | import PropTypes from 'prop-types';
4 | import './GotoBox.css';
5 |
6 | class GotoBox extends PureComponent {
7 | state = {
8 | address: '',
9 | };
10 | /**
11 | * @type {DebuggerContextValues}
12 | */
13 | context;
14 | ref;
15 | id;
16 |
17 | constructor(props) {
18 | super(props);
19 | this.ref = createRef();
20 | this.id = 'GotoBox__address--' + Math.random().toString(36).substr(2, 9);
21 | }
22 |
23 | render() {
24 | return (
25 |
36 | );
37 | }
38 |
39 | renderPCButtons() {
40 | if (!this.props.includePC) {
41 | return null;
42 | }
43 | const disabled = !this.context.gameStatus.started;
44 | return (
45 | <>
46 | PC
47 | RA
48 |
49 | );
50 | }
51 |
52 | componentDidUpdate(prevProps, prevState) {
53 | if (this.props.promptGotoMarker !== prevProps.promptGotoMarker) {
54 | this.ref.current.focus();
55 | this.ref.current.select();
56 | }
57 | }
58 |
59 | jumpToReg(name) {
60 | this.context.ppsspp.send({
61 | event: 'cpu.getReg',
62 | name,
63 | }).then((result) => {
64 | if (this.context.gameStatus.started) {
65 | this.props.gotoAddress(result.uintValue);
66 | }
67 | });
68 | }
69 |
70 | handleChange = (ev) => {
71 | this.setState({ address: ev.target.value });
72 | };
73 |
74 | handleSubmit = (ev) => {
75 | if (this.context.gameStatus.started) {
76 | this.context.ppsspp.send({
77 | event: 'cpu.evaluate',
78 | thread: this.context.gameStatus.currentThread,
79 | expression: this.state.address,
80 | }).then(({ uintValue }) => {
81 | if (this.context.gameStatus.started) {
82 | this.props.gotoAddress(uintValue);
83 | }
84 | }, err => {
85 | // Probably a bad reference.
86 | this.ref.current.focus();
87 | this.ref.current.select();
88 | });
89 | }
90 | ev.preventDefault();
91 | };
92 |
93 | handlePC = (ev) => {
94 | this.jumpToReg('pc');
95 | };
96 |
97 | handleRA = (ev) => {
98 | this.jumpToReg('ra');
99 | };
100 | }
101 |
102 | GotoBox.propTypes = {
103 | includePC: PropTypes.bool.isRequired,
104 | promptGotoMarker: PropTypes.any,
105 | gotoAddress: PropTypes.func.isRequired,
106 | };
107 |
108 | GotoBox.contextType = DebuggerContext;
109 |
110 | export default GotoBox;
111 |
--------------------------------------------------------------------------------
/src/components/ext/react-contextmenu.css:
--------------------------------------------------------------------------------
1 | .react-contextmenu {
2 | background-color: #fff;
3 | background-clip: padding-box;
4 | border: 1px solid rgba(0, 0, 0, 0.15);
5 | border-radius: .25rem;
6 | color: #373a3c;
7 | font-size: 13px;
8 | margin: 2px 0 0;
9 | min-width: 160px;
10 | outline: none;
11 | opacity: 0;
12 | padding: 3px 0;
13 | text-align: left;
14 | transition: opacity 0.1s ease-out;
15 | }
16 |
17 | .react-contextmenu.react-contextmenu--visible {
18 | opacity: 1;
19 | pointer-events: auto;
20 | z-index: 9999;
21 | }
22 |
23 | .react-contextmenu-item {
24 | background: 0 0;
25 | border: 0;
26 | color: #373a3c;
27 | cursor: pointer;
28 | font-weight: 400;
29 | line-height: 1.4;
30 | padding: 3px 16px;
31 | text-align: inherit;
32 | white-space: nowrap;
33 | }
34 |
35 | .react-contextmenu-item--active,
36 | .react-contextmenu-item--selected {
37 | color: #fff;
38 | background-color: #28f;
39 | text-decoration: none;
40 | }
41 |
42 | .react-contextmenu-item--disabled,
43 | .react-contextmenu-item--disabled:hover {
44 | background-color: transparent;
45 | color: #888;
46 | }
47 |
48 | .react-contextmenu-item--divider {
49 | border-bottom: 1px solid rgba(0, 0, 0, 0.15);
50 | cursor: inherit;
51 | margin-bottom: 3px;
52 | padding: 2px 0;
53 | }
54 |
55 | .react-contextmenu-submenu {
56 | padding: 0;
57 | }
58 |
59 | .react-contextmenu-submenu > .react-contextmenu-item:after {
60 | content: "\25B6";
61 | display: inline-block;
62 | position: absolute;
63 | right: 7px;
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/ext/react-modal.css:
--------------------------------------------------------------------------------
1 | .ReactModal__FitOverlay {
2 | align-items: flex-start;
3 | background: rgba(0, 0, 0, 0.6);
4 | display: flex;
5 | justify-content: center;
6 | opacity: 0;
7 | padding-top: 50px;
8 | position: fixed;
9 | top: 0;
10 | left: 0;
11 | right: 0;
12 | bottom: 0;
13 | transition: 0.10s opacity;
14 | }
15 |
16 | .ReactModal__FitContent {
17 | background: #fff;
18 | border: 1px solid #ccc;
19 | border-radius: 4px;
20 | max-height: 90vh;
21 | max-width: 90vw;
22 | opacity: 0;
23 | outline: none;
24 | overflow: auto;
25 | -webkit-overflow-scrolling: touch;
26 | padding: 16px;
27 | position: static;
28 | transform: translateY(-10px) perspective(600px) rotateX(12deg) scale(0.95);
29 | transition: 0.15s transform, 0.10s opacity;
30 | }
31 |
32 | .ReactModal__Overlay--after-open {
33 | opacity: 1;
34 | transition: 0.15s opacity;
35 | }
36 |
37 | .ReactModal__Overlay--before-close {
38 | opacity: 0;
39 | }
40 |
41 | .ReactModal__Content--after-open {
42 | opacity: 1;
43 | transform: translateY(0) perspective(600px) rotateX(0) scale(1);
44 | transition: 0.15s transform, 0.15s opacity;
45 | }
46 |
47 | .ReactModal__Content--before-close {
48 | opacity: 0;
49 | transform: translateY(10px) perspective(600px) rotateX(0) scale(1);
50 | }
51 |
52 | .ReactModal__FitContent > :first-child,
53 | .ReactModal__FitContent > :first-child > :first-child {
54 | margin-top: 0;
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/ext/react-tabs.css:
--------------------------------------------------------------------------------
1 | .react-tabs__tab-list {
2 | border-bottom: 2px solid #3999bd;
3 | margin: 0;
4 | padding: 0;
5 | text-align: start;
6 | }
7 |
8 | .react-tabs__tab {
9 | display: inline-block;
10 | border: 1px solid transparent;
11 | border-bottom: none;
12 | bottom: -1px;
13 | position: relative;
14 | list-style: none;
15 | padding: 3px 6px;
16 | cursor: pointer;
17 | }
18 |
19 | .react-tabs__tab--selected {
20 | background: #3999bd;
21 | color: #fff;
22 | }
23 |
24 | .react-tabs__tab--disabled {
25 | color: GrayText;
26 | cursor: default;
27 | }
28 |
29 | .react-tabs__tab:focus {
30 | background-color: #4cc2ed;
31 | outline: none;
32 | }
33 |
34 | .react-tabs__tab-panel {
35 | display: none;
36 | }
37 |
38 | .react-tabs__tab-panel--selected {
39 | display: block;
40 | }
41 |
42 | /* Nested tabs... */
43 | .react-tabs__tab-panel .react-tabs__tab-list {
44 | background: #3999bd;
45 | border-bottom: 2px solid #fff;
46 | color: #fff;
47 | }
48 |
49 | .react-tabs__tab-panel .react-tabs__tab--selected {
50 | background: #fff;
51 | color: #3999bd;
52 | }
53 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto');
2 |
3 | html {
4 | background: #fff;
5 | color: #000;
6 | min-height: 100%;
7 | }
8 |
9 | html, body, #root {
10 | display: flex;
11 | flex-direction: column;
12 | flex-grow: 1;
13 | font-family: Roboto, sans-serif;
14 | font-size: 13px;
15 | margin: 0;
16 | padding: 0;
17 | }
18 |
19 | body {
20 | min-height: 100vh;
21 | }
22 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import Modal from 'react-modal';
4 | import './index.css';
5 | import App from './components/App';
6 | import registerServiceWorker from './registerServiceWorker';
7 | import 'core-js/stable';
8 | import 'regenerator-runtime/runtime';
9 | import 'react-app-polyfill/ie11';
10 | import 'react-app-polyfill/stable';
11 |
12 | const root = createRoot(document.getElementById('root'));
13 | root.render( 
62 |