From cde15462a835fa5dfd1bd0cb506253c39020a452 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 23 Jun 2021 11:05:37 +0200 Subject: [PATCH] highlight the next opcode to be executed --- libs/remix-debug/src/code/codeManager.ts | 4 +- libs/remix-debug/src/debugger/VmDebugger.ts | 4 +- .../src/lib/vm-debugger/assembly-items.tsx | 56 ++++++++++++++++--- .../src/reducers/assembly-items.ts | 14 +++-- 4 files changed, 62 insertions(+), 16 deletions(-) diff --git a/libs/remix-debug/src/code/codeManager.ts b/libs/remix-debug/src/code/codeManager.ts index fff30cba15..b0f61a0a24 100644 --- a/libs/remix-debug/src/code/codeManager.ts +++ b/libs/remix-debug/src/code/codeManager.ts @@ -147,13 +147,15 @@ export class CodeManager { private retrieveIndexAndTrigger (codeMananger, address, step, code) { let result + let next try { result = codeMananger.getInstructionIndex(address, step) + next = codeMananger.getInstructionIndex(address, step + 1) } catch (error) { return console.log(error) } try { - codeMananger.event.trigger('changed', [code, address, result]) + codeMananger.event.trigger('changed', [code, address, result, next]) } catch (e) { console.log('dispatching event failed', e) } diff --git a/libs/remix-debug/src/debugger/VmDebugger.ts b/libs/remix-debug/src/debugger/VmDebugger.ts index 2a90d0ed2c..47ea75ea4b 100644 --- a/libs/remix-debug/src/debugger/VmDebugger.ts +++ b/libs/remix-debug/src/debugger/VmDebugger.ts @@ -59,8 +59,8 @@ export class VmDebuggerLogic { } listenToCodeManagerEvents () { - this._codeManager.event.register('changed', (code, address, index) => { - this.event.trigger('codeManagerChanged', [code, address, index]) + this._codeManager.event.register('changed', (code, address, index, nextIndex) => { + this.event.trigger('codeManagerChanged', [code, address, index, nextIndex]) }) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index 67f9821960..debabf4ce1 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -4,24 +4,28 @@ import './styles/assembly-items.css' export const AssemblyItems = ({ registerEvent }) => { const [assemblyItems, dispatch] = useReducer(reducer, initialState) + const [absoluteSelectedIndex, setAbsoluteSelectedIndex] = useState(0) const [selectedItem, setSelectedItem] = useState(0) + const [nextSelectedItem, setNextSelectedItem] = useState(1) const refs = useRef({}) const asmItemsRef = useRef(null) useEffect(() => { - registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { - dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) + registerEvent && registerEvent('codeManagerChanged', (code, address, index, nextIndex) => { + dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index, nextIndex } }) }) }, []) useEffect(() => { - if (selectedItem !== assemblyItems.index) { + console.log('useEffect', assemblyItems.index) + if (absoluteSelectedIndex !== assemblyItems.index) { + clearItems() indexChanged(assemblyItems.index) + nextIndexChanged(assemblyItems.nextIndex) } - }, [assemblyItems.index]) + }, [assemblyItems.opCodes.index]) - const indexChanged = (index: number) => { - if (index < 0) return + const clearItems = () => { let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null if (currentItem) { @@ -30,15 +34,49 @@ export const AssemblyItems = ({ registerEvent }) => { if (currentItem.firstChild) { currentItem.firstChild.removeAttribute('style') } - const codeView = asmItemsRef.current + } - currentItem = codeView.children[index] + currentItem = refs.current[nextSelectedItem] ? refs.current[nextSelectedItem] : null + + if (currentItem) { + currentItem.removeAttribute('selected') + currentItem.removeAttribute('style') + if (currentItem.firstChild) { + currentItem.firstChild.removeAttribute('style') + } + } + } + + const indexChanged = (index: number) => { + console.log("index " + index) + if (index < 0) return + + const codeView = asmItemsRef.current + + const currentItem = codeView.children[index] + if (currentItem) { currentItem.style.setProperty('border-color', 'var(--primary)') currentItem.style.setProperty('border-style', 'solid') currentItem.setAttribute('selected', 'selected') codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) - setSelectedItem(index) } + + setSelectedItem(index) + setAbsoluteSelectedIndex(assemblyItems.opCodes.index) + } + + const nextIndexChanged = (index: number) => { + if (index < 0) return + + const codeView = asmItemsRef.current + + const currentItem = codeView.children[index] + if (currentItem) { + currentItem.style.setProperty('border-color', 'var(--secondary)') + currentItem.style.setProperty('border-style', 'dotted') + currentItem.setAttribute('selected', 'selected') + } + setNextSelectedItem(index) } return ( diff --git a/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts b/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts index 35d428c667..ff6fe23b40 100644 --- a/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts +++ b/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts @@ -13,6 +13,7 @@ export const initialState = { }, display: [], index: 0, + nextIndex: -1, top: 0, bottom: 0, isRequesting: false, @@ -21,11 +22,15 @@ export const initialState = { } const reducedOpcode = (opCodes) => { - const length = 50 + const length = 100 let bottom = opCodes.index - 10 bottom = bottom < 0 ? 0 : bottom const top = bottom + length - return { top, bottom, display: opCodes.code.slice(bottom, top) } + return { + index: opCodes.index - bottom, + nextIndex:opCodes.nextIndex - bottom, + display: opCodes.code.slice(bottom, top) + } } export const reducer = (state = initialState, action: Action) => { @@ -40,14 +45,15 @@ export const reducer = (state = initialState, action: Action) => { } case 'FETCH_OPCODES_SUCCESS': { const opCodes = action.payload.address === state.opCodes.address ? { - ...state.opCodes, index: action.payload.index + ...state.opCodes, index: action.payload.index, nextIndex: action.payload.nextIndex } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload const reduced = reducedOpcode(opCodes) return { opCodes, display: reduced.display, - index: reduced.display.findIndex(code => code === opCodes.code[opCodes.index]), + index: reduced.index, + nextIndex: reduced.nextIndex, isRequesting: false, isSuccessful: true, hasError: null