Fix failing debugger tests

apps/remix-ide-e2e/src/tests/debugger.test.ts

@@ -42,8 +42,10 @@ module.exports = {
     .waitForElementVisible('*[data-id="slider"]')
     .click('*[data-id="slider"]')
     .setValue('*[data-id="slider"]', '50')
-    .assert.containsText('*[data-id="solidityLocals"]', 'no locals')
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
+    .pause(2000)
+    .click('*[data-id="dropdownPanelSolidityLocals"]')
+    .assert.containsText('*[data-id="solidityLocals"]', 'No data available')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
   },
 
   'Should step back and forward transaction': function (browser: NightwatchBrowser) {
@@ -51,12 +53,12 @@ module.exports = {
     .waitForElementPresent('*[data-id="buttonNavigatorIntoBack"]')
     .scrollAndClick('*[data-id="buttonNavigatorIntoBack"]')
     .pause(2000)
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
-    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n90')
+    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n90')
     .click('*[data-id="buttonNavigatorIntoForward"]')
     .pause(2000)
-    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
-    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n92')
+    .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n91')
+    .assert.containsText('*[data-id="stepdetail"]', 'execution step:\n91')
   },
 
   'Should jump through breakpoints': function (browser: NightwatchBrowser) {

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -141,7 +141,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         <div className="border rounded px-1 mt-1 bg-light">
             <div className="py-0 px-1 title">
                 <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
-                <div className="name" onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
+                <div className="name" data-id={`dropdownPanel${dropdownName.split(' ').join('')}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
                 <CopyToClipboard content={state.copiableContent} />
             </div>
             <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx

@@ -1,56 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import DropdownPanel from './dropdown-panel'
 
-export interface StepDetailProps {
-    stepDetail: {
-        key: string,
-        value: string,
-        reset: boolean
-    }
-} 
-
-export const StepDetail = (props: StepDetailProps) => {
-    const { stepDetail } = props
-    const [detail, setDetail] = useState({
-        'vm trace step': '-',
-        'execution step': '-',
-        'add memory': '',
-        'gas': '',
-        'remaining gas': '-',
-        'loaded address': '-'
-    })
-
-    useEffect(() => {
-        updateField(stepDetail.key, stepDetail.value, stepDetail.reset)
-    }, [stepDetail])
-
-    const updateField = (key, value, reset) => {
-        if (!key) return
-
-        if (reset) {
-            setDetail(() => {
-                return {
-                    'vm trace step': '-',
-                    'execution step': '-',
-                    'add memory': '',
-                    'gas': '',
-                    'remaining gas': '-',
-                    'loaded address': '-'
-                }
-            })
-        } else {
-            setDetail(prevDetail => {
-                return {
-                    ...prevDetail,
-                    [key]: value
-                }
-            })
-        }
-    }
-
+export const StepDetail = ({ stepDetail }) => {
     return (
         <div id='stepdetail' data-id="stepdetail">
-            <DropdownPanel dropdownName='Step details' calldata={detail || {}} />
+            <DropdownPanel dropdownName='Step details' calldata={stepDetail || {}} />
         </div>
     )
 }

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

@@ -13,9 +13,12 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
   })
   const [functionPanel, setFunctionPanel] = useState(null)
   const [stepDetail, setStepDetail] = useState({
-    key: null,
-    value: null,
-    reset: false
+    'vm trace step': '-',
+    'execution step': '-',
+    'add memory': '',
+    'gas': '',
+    'remaining gas': '-',
+    'loaded address': '-'
   })
   const [solidityState, setSolidityState] = useState({
     calldata: null,
@@ -29,10 +32,14 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
   useEffect(() => {
     if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
-        setAsm({ code, address, index })
+        setAsm(() => {
+          return { code, address, index }
+        })
       })
       vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setAsm({ code: [], address: '', index: -1 })
+        setAsm(() => {
+          return { code: [], address: '', index: -1 }
+        })
       })
       vmDebuggerLogic.event.register('functionsStackUpdate', (stack) => {
         if (stack === null) return
@@ -43,43 +50,67 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
 
           functions.push(functionDefinitionName + '(' + func.inputs.join(', ') + ')')
         }
-        setFunctionPanel(functions)
+        setFunctionPanel(() => functions)
       })
       vmDebuggerLogic.event.register('traceUnloaded', () => {
-        setStepDetail({ key: null, value: null, reset: true })
+        setStepDetail(() => {
+          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        })
       })
       vmDebuggerLogic.event.register('newTraceLoaded', () => {
-        setStepDetail({ key: null, value: null, reset: true })
+        setStepDetail(() => {
+          return { 'vm trace step': '-', 'execution step': '-', 'add memory': '', 'gas': '', 'remaining gas': '-', 'loaded address': '-' }
+        })
       })
       vmDebuggerLogic.event.register('traceCurrentStepUpdate', (error, step) => {
-        setStepDetail({ key: 'execution step', value: (error ? '-' : step), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'execution step': (error ? '-' : step) }
+        })
       })
       vmDebuggerLogic.event.register('traceMemExpandUpdate', (error, addmem) => {
-        setStepDetail({ key: 'add memory', value: (error ? '-' : addmem), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'add memory': (error ? '-' : addmem) }
+        })
       })
       vmDebuggerLogic.event.register('traceStepCostUpdate', (error, gas) => {
-        setStepDetail({ key: 'gas', value: (error ? '-' : gas), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'gas': (error ? '-' : gas) }
+        })
       })
       vmDebuggerLogic.event.register('traceCurrentCalledAddressAtUpdate', (error, address) => {
-        setStepDetail({ key: 'loaded address', value: (error ? '-' : address), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'loaded address': (error ? '-' : address) }
+        })
       })
       vmDebuggerLogic.event.register('traceRemainingGasUpdate', (error, remainingGas) => {
-        setStepDetail({ key: 'remaining gas', value: (error ? '-' : remainingGas), reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'remaining gas': (error ? '-' : remainingGas) }
+        })
       })
       vmDebuggerLogic.event.register('indexUpdate', (index) => {
-        setStepDetail({ key: 'vm trace step', value: index, reset: false })
+        setStepDetail(prevState => {
+          return { ...prevState, 'vm trace step': index }
+        })
       })
       vmDebuggerLogic.event.register('solidityState', (calldata) => {
-        setSolidityState({ ...solidityState, calldata })
+        setSolidityState(() => {
+          return { ...solidityState, calldata }
+        })
       })
       vmDebuggerLogic.event.register('solidityStateMessage', (message) => {
-        setSolidityState({ ...solidityState, message })
+        setSolidityState(() => {
+          return { ...solidityState, message }
+        })
       })
       vmDebuggerLogic.event.register('solidityLocals', (calldata) => {
-        setSolidityLocals({ ...solidityLocals, calldata })
+        setSolidityLocals(() => {
+          return { ...solidityLocals, calldata }
+        })
       })
       vmDebuggerLogic.event.register('solidityLocalsMessage', (message) => {
-        setSolidityLocals({ ...solidityLocals, message })
+        setSolidityLocals(() => {
+          return { ...solidityLocals, message }
+        })
       })
       ready()
     }

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

@@ -22,28 +22,32 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
   useEffect(() => {
     if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('traceManagerCallDataUpdate', (calldata) => {
-        setCalldataPanel(calldata)
+        setCalldataPanel(() => calldata)
       })
       vmDebuggerLogic.event.register('traceManagerMemoryUpdate', (calldata) => {
-        setMemoryPanel(calldata)
+        setMemoryPanel(() => calldata)
       })
       vmDebuggerLogic.event.register('traceManagerCallStackUpdate', (calldata) => {
-        setCallStackPanel(calldata)
+        setCallStackPanel(() => calldata)
       })
       vmDebuggerLogic.event.register('traceManagerStackUpdate', (calldata) => {
-        setStackPanel(calldata)
+        setStackPanel(() => calldata)
       })
       vmDebuggerLogic.event.register('traceManagerStorageUpdate', (calldata, header) => {
-        setStoragePanel({ calldata, header })
+        setStoragePanel(() => {
+          return { calldata, header }
+        })
       })
       vmDebuggerLogic.event.register('traceReturnValueUpdate', (calldata) => {
-        setReturnValuesPanel(calldata)
+        setReturnValuesPanel(() => calldata)
       })
       vmDebuggerLogic.event.register('traceAddressesUpdate', (calldata) => {
-        setFullStoragesChangesPanel({})
+        setFullStoragesChangesPanel(() => {
+          return {}
+        })
       })
       vmDebuggerLogic.event.register('traceStorageUpdate', (calldata) => {
-        setFullStoragesChangesPanel(calldata)
+        setFullStoragesChangesPanel(() => calldata)
       })
       ready()
     }