diff --git a/libs/remix-debug/src/code/codeManager.ts b/libs/remix-debug/src/code/codeManager.ts index f0b38ea3d9..241698f0fb 100644 --- a/libs/remix-debug/src/code/codeManager.ts +++ b/libs/remix-debug/src/code/codeManager.ts @@ -147,13 +147,17 @@ export class CodeManager { private async retrieveIndexAndTrigger (codeMananger, address, step, code) { let result - let next + const next = [] const returnInstructionIndexes = [] const outOfGasInstructionIndexes = [] try { result = codeMananger.getInstructionIndex(address, step) - next = codeMananger.getInstructionIndex(address, step + 1) + for (let i = 1; i < 6; i++) { + if (this.traceManager.inRange(step + i)) { + next.push(codeMananger.getInstructionIndex(address, step + i)) + } + } let values = this.traceManager.getAllStopIndexes() if (values) { diff --git a/libs/remix-debug/src/debugger/VmDebugger.ts b/libs/remix-debug/src/debugger/VmDebugger.ts index 72a131cfd6..4304d2e933 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, nextIndex, returnInstructionIndexes, outOfGasInstructionIndexes) => { - this.event.trigger('codeManagerChanged', [code, address, index, nextIndex, returnInstructionIndexes, outOfGasInstructionIndexes]) + this._codeManager.event.register('changed', (code, address, index, nextIndexes, returnInstructionIndexes, outOfGasInstructionIndexes) => { + this.event.trigger('codeManagerChanged', [code, address, index, nextIndexes, returnInstructionIndexes, outOfGasInstructionIndexes]) }) } 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 1606ce8491..1a46bb1a7f 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 @@ -6,15 +6,15 @@ 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 [nextSelectedItems, setNextSelectedItems] = useState([1]) const [returnInstructionIndexes, setReturnInstructionIndexes] = useState([]) const [outOfGasInstructionIndexes, setOutOfGasInstructionIndexes] = useState([]) const refs = useRef({}) const asmItemsRef = useRef(null) useEffect(() => { - registerEvent && registerEvent('codeManagerChanged', (code, address, index, nextIndex, returnInstructionIndexes, outOfGasInstructionIndexes) => { - dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index, nextIndex, returnInstructionIndexes, outOfGasInstructionIndexes } }) + registerEvent && registerEvent('codeManagerChanged', (code, address, index, nextIndexes, returnInstructionIndexes, outOfGasInstructionIndexes) => { + dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index, nextIndexes, returnInstructionIndexes, outOfGasInstructionIndexes } }) }) }, []) @@ -22,7 +22,7 @@ export const AssemblyItems = ({ registerEvent }) => { if (absoluteSelectedIndex !== assemblyItems.index) { clearItems() indexChanged(assemblyItems.index) - nextIndexChanged(assemblyItems.nextIndex) + nextIndexesChanged(assemblyItems.nextIndexes) returnIndexes(assemblyItems.returnInstructionIndexes) outOfGasIndexes(assemblyItems.outOfGasInstructionIndexes) } @@ -40,7 +40,11 @@ export const AssemblyItems = ({ registerEvent }) => { const clearItems = () => { clearItem(refs.current[selectedItem] ? refs.current[selectedItem] : null) - clearItem(refs.current[nextSelectedItem] ? refs.current[nextSelectedItem] : null) + if (nextSelectedItems) { + nextSelectedItems.map((index) => { + clearItem(refs.current[index] ? refs.current[index] : null) + }) + } returnInstructionIndexes.map((index) => { if (index < 0) return @@ -70,18 +74,19 @@ export const AssemblyItems = ({ registerEvent }) => { setAbsoluteSelectedIndex(assemblyItems.opCodes.index) } - const nextIndexChanged = (index: number) => { - if (index < 0) return + const nextIndexesChanged = (indexes: Array) => { + indexes.map((index) => { + if (index < 0) return - const codeView = asmItemsRef.current + 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) + const currentItem = codeView.children[index] + if (currentItem) { + currentItem.style.setProperty('color', 'var(--primary)') + currentItem.setAttribute('selected', 'selected') + } + }) + setNextSelectedItems(indexes) } const returnIndexes = (indexes) => { 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 18622bfa68..a86554f297 100644 --- a/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts +++ b/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts @@ -13,7 +13,7 @@ export const initialState = { }, display: [], index: 0, - nextIndex: -1, + nextIndexes: [-1], returnInstructionIndexes: [], outOfGasInstructionIndexes: [], top: 0, @@ -30,7 +30,7 @@ const reducedOpcode = (opCodes, payload) => { const top = bottom + length return { index: opCodes.index - bottom, - nextIndex: opCodes.nextIndex - bottom, + nextIndexes: opCodes.nextIndexes.map(index => index - bottom), display: opCodes.code.slice(bottom, top), returnInstructionIndexes: payload.returnInstructionIndexes.map((index) => index.instructionIndex - bottom), outOfGasInstructionIndexes: payload.outOfGasInstructionIndexes.map((index) => index.instructionIndex - bottom) @@ -49,7 +49,7 @@ 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, nextIndex: action.payload.nextIndex + ...state.opCodes, index: action.payload.index, nextIndexes: action.payload.nextIndexes } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload const reduced = reducedOpcode(opCodes, action.payload) @@ -57,7 +57,7 @@ export const reducer = (state = initialState, action: Action) => { opCodes, display: reduced.display, index: reduced.index, - nextIndex: reduced.nextIndex, + nextIndexes: reduced.nextIndexes, isRequesting: false, isSuccessful: true, hasError: null,