highlight the next opcode to be executed

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)
     }

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])
     })
   }
 

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 (

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