highlight the last 5 items instead of only one

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

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

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<number>) => {
+    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) => {

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,