fix stepinto when showing opcode

Author: Aniket-Engg

apps/remix-ide/src/app/components/bottom-bar.tsx

@@ -115,10 +115,18 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
       setStepState('initial')
     }
 
+    const onShowOpcodesChanged = (showOpcodes: boolean) => {
+      setStepManager((prevStepManager: any) => {
+        if (!prevStepManager) return null
+        return { ...prevStepManager, showOpcodes }
+      })
+    }
+
     plugin.on('sidePanel', 'pluginDisabled', onPluginActivated)
     plugin.on('sidePanel', 'focusChanged', onPluginActivated)
     plugin.on('debugger', 'debuggingStarted', onDebuggingStarted)
     plugin.on('debugger', 'debuggingStopped', onDebuggingStopped)
+    plugin.on('debugger', 'showOpcodesChanged', onShowOpcodesChanged)
 
     return () => {
       plugin.off('tabs', 'extChanged')
@@ -128,6 +136,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
       plugin.off('sidePanel', 'focusChanged')
       plugin.off('debugger', 'debuggingStarted')
       plugin.off('debugger', 'debuggingStopped')
+      plugin.off('debugger', 'showOpcodesChanged')
     }
   }, [plugin])
 
@@ -185,7 +194,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
           </button>
           <button
             className="btn btn-sm btn-secondary debug-btn"
-            onClick={() => stepManager?.stepOverBack && stepManager.stepOverBack(true)}
+            onClick={() => stepManager?.stepOverBack && stepManager.stepOverBack(!(stepManager.showOpcodes ?? false))}
             disabled={stepState === 'initial'}
             data-id="btnStepBackward"
           >
@@ -194,7 +203,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
           </button>
           <button
             className="btn btn-sm btn-primary debug-btn"
-            onClick={() => stepManager?.stepIntoBack && stepManager.stepIntoBack(true)}
+            onClick={() => stepManager?.stepIntoBack && stepManager.stepIntoBack(!(stepManager.showOpcodes ?? false))}
             disabled={stepState === 'initial'}
             data-id="btnStepBack"
           >
@@ -203,7 +212,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
           </button>
           <button
             className="btn btn-sm btn-primary debug-btn"
-            onClick={() => stepManager?.stepIntoForward && stepManager.stepIntoForward(true)}
+            onClick={() => stepManager?.stepIntoForward && stepManager.stepIntoForward(!(stepManager.showOpcodes ?? false))}
             disabled={stepState === 'end'}
             data-id="btnStepInto"
           >
@@ -212,7 +221,7 @@ export const BottomBar = ({ plugin }: BottomBarProps) => {
           </button>
           <button
             className="btn btn-sm btn-secondary debug-btn"
-            onClick={() => stepManager?.stepOverForward && stepManager.stepOverForward()}
+            onClick={() => stepManager?.stepOverForward && stepManager.stepOverForward(!(stepManager.showOpcodes ?? false))}
             disabled={stepState === 'end'}
             data-id="btnStepForward"
           >

libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.tsx

@@ -24,6 +24,8 @@ interface DebugLayoutProps {
   callTree?: any
   debugWithGeneratedSources?: boolean
   onDebugWithGeneratedSourcesChange?: (checked: boolean) => void
+  onShowOpcodesChange?: (checked: boolean) => void
+  showOpcodes?: boolean
   registerEvent?: any
 }
 
@@ -47,6 +49,8 @@ export const DebugLayout = ({
   callTree,
   debugWithGeneratedSources,
   onDebugWithGeneratedSourcesChange,
+  onShowOpcodesChange,
+  showOpcodes = false,
   registerEvent
 }: DebugLayoutProps) => {
   const [activeObjectTab, setActiveObjectTab] = useState<'stateLocals' | 'stackMemory'>('stateLocals')
@@ -69,6 +73,12 @@ export const DebugLayout = ({
   const opcodeRefs = React.useRef<{ [key: number]: HTMLDivElement | null }>({})
   const opcodeContainerRef = React.useRef<HTMLDivElement | null>(null)
 
+  const handleShowOpcodesChange = (checked: boolean) => {
+    if (onShowOpcodesChange) {
+      onShowOpcodesChange(checked)
+    }
+  }
+
   // Auto-expand sender node when nestedScopes are loaded
   React.useEffect(() => {
     if (nestedScopes && nestedScopes.length > 0 && nestedScopes[0].isSenderNode) {
@@ -297,15 +307,25 @@ export const DebugLayout = ({
   const toggleObjectPath = (path: string) => {
     setExpandedObjectPaths(prev => {
       const newSet = new Set(prev)
+
       if (newSet.has(path)) {
         newSet.delete(path)
       } else {
         newSet.add(path)
       }
+
       return newSet
     })
   }
 
+  // Watch for opcode expansion/collapse and update showOpcodes accordingly
+  React.useEffect(() => {
+    const isOpcodeExpanded = expandedObjectPaths.has('root.opcode')
+    if (handleShowOpcodesChange && isOpcodeExpanded !== showOpcodes) {
+      handleShowOpcodesChange(isOpcodeExpanded)
+    }
+  }, [expandedObjectPaths, handleShowOpcodesChange, showOpcodes])
+
   const isObject = (value: any): boolean => {
     return value !== null && typeof value === 'object'
   }

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -12,7 +12,7 @@ import {Toaster} from '@remix-ui/toaster' // eslint-disable-line
 import { CustomTooltip, isValidHash } from '@remix-ui/helper'
 import { DebuggerEvent, MatomoEvent } from '@remix-api';
 import { TrackingContext } from '@remix-ide/tracking'
-import { ContractDeployment, ContractInteraction } from './transaction-recorder/types'
+import { ContractDeployment } from './transaction-recorder/types'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 import type { CompilerAbstract } from '@remix-project/remix-solidity'
@@ -45,11 +45,10 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     txNumberIsEmpty: true,
     isLocalNodeUsed: false,
     sourceLocationStatus: '',
-    showOpcodes: true
+    showOpcodes: false
   })
 
-  const [deployments, setDeployments] = useState<ContractDeployment[]>([])
-  const [transactions, setTransactions] = useState<Map<string, ContractInteraction[]>>(new Map())
+  const [deployments] = useState<ContractDeployment[]>([])
   const [traceData, setTraceData] = useState<{ currentStep: number; traceLength: number } | null>(null)
   const [currentFunction, setCurrentFunction] = useState<string>('')
   const [functionStack, setFunctionStack] = useState<any[]>([])
@@ -344,7 +343,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       })
     }
   }
-
   const requestDebug = (blockNumber, txNumber, tx) => {
     startDebugging(blockNumber, txNumber, tx)
   }
@@ -508,7 +506,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
               jumpNextBreakpoint: debuggerInstance.step_manager?.jumpNextBreakpoint.bind(debuggerInstance.step_manager),
               traceLength: debuggerInstance.step_manager?.traceLength,
               currentStepIndex: debuggerInstance.step_manager?.currentStepIndex,
-              registerEvent: debuggerInstance.step_manager?.event.register.bind(debuggerInstance.step_manager?.event)
+              registerEvent: debuggerInstance.step_manager?.event.register.bind(debuggerInstance.step_manager?.event),
+              showOpcodes: state.showOpcodes
             }
           })
         })
@@ -547,6 +546,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     setState((prevState) => {
       return { ...prevState, showOpcodes }
     })
+    // Emit event to update external listeners (like bottom-bar)
+    debuggerModule.emit('showOpcodesChanged', showOpcodes)
   }
 
   const stepManager = {
@@ -698,6 +699,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
                 }
               })
             }}
+            onShowOpcodesChange={handleShowOpcodesChange}
+            showOpcodes={state.showOpcodes}
             registerEvent={vmDebugger.registerEvent}
           />
         </div>