Resolved bugs in step manager

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

@@ -44,8 +44,8 @@ export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpO
         jumpPreviousBreakpointDisabled: stepState === 'initial',
         intoForwardDisabled: stepState === 'end',
         overForwardDisabled: stepState === 'end',
-        jumpNextBreakpointDisabled: jumpOutDisabled,
-        jumpOutDisabled
+        jumpNextBreakpointDisabled: jumpOutDisabled ? jumpOutDisabled : stepState === 'end',
+        jumpOutDisabled: jumpOutDisabled ? jumpOutDisabled : true
       }
     })
   }

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

@@ -27,7 +27,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
       to: null
     },
     blockNumber: null,
-    txNumber: null,
+    txNumber: '',
     visibility: {
       vmDebugger: false,
       stepManager: false,
@@ -74,7 +74,9 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
 
     debuggerInstance.event.register('debuggerStatus', async (isActive) => {
       await debuggerModule.call('editor', 'discardHighlight')
-      setState({ ...state, isActive })
+      setState( prevState => {
+        return { ...prevState, isActive }
+      })
     })
 
     debuggerInstance.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => {
@@ -192,7 +194,9 @@ const getTrace = (hash) => {
     const web3 = await getDebugWeb3()
     const currentReceipt = await web3.eth.getTransactionReceipt(hash)
 
-    setState({ ...state, currentReceipt })
+    setState(prevState => {
+      return { ...prevState, currentReceipt }
+    })
 
     const debug = new Debugger({
       web3,
@@ -224,7 +228,7 @@ const deleteHighlights = async () => {
   return (
       <div>
         <div className="px-2">
-          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} transactionNumber={state.txNumber} />
+          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} transactionNumber={state.txNumber} debugging={state.debugging} />
           <StepManager stepManager={state.debugger ? state.debugger.step_manager : null} />
           {/*<VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
         </div>

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

 import React, { useState, useEffect } from 'react'
 
-export const Slider = ({ stepManager, sliderLength, sliderValue }) => {
+export const Slider = ({ stepManager, sliderValue }) => {
   const [state, setState] = useState({
-    max: null,
-    disabled: true,
-    previousValue: null,
-    currentValue: null
+    currentValue: ''
   })
 
   useEffect(() => {
-    setState(prevState => {
-      return {
-        ...prevState,
-        max: sliderLength - 1,
-        disabled: (sliderLength === 0)
-      }
-    })
-
-    setValue(0)
-  }, [sliderLength])
-
-  useEffect(() => {
     setValue(sliderValue)
   }, [sliderValue])
 
   const setValue = (value) => {
-    setState({ ...state, currentValue: value })
+    if (value === state.currentValue) return
+    setState(prevState => {
+      return { ...prevState, currentValue: value }
+    })
+    stepManager && stepManager.jumpTo(value)
   }
 
   const handleChange = (e) => {
-    console.log('e.target: ', e.target)
     const value = parseInt(e.target.value)
 
-    if (value === state.previousValue) return
-    setState(prevState => {
-      return {
-        ...prevState,
-        previousValue: value,
-        currentValue: value
-      }
-    })
-    stepManager.jumpTo(value)
+    setValue(value)
   }
 
   return (
@@ -50,10 +30,10 @@ export const Slider = ({ stepManager, sliderLength, sliderValue }) => {
             className='w-100 my-0'
             type='range'
             min={0}
-            max={state.max}
-            defaultValue={state.currentValue}
+            max={stepManager ? stepManager.traceLength - 1 : 0}
+            value={state.currentValue}
             onChange={handleChange}
-            disabled={state.disabled}
+            disabled={stepManager ? stepManager.traceLength === 0 : true}
         />
     </div>
   )

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

@@ -4,7 +4,6 @@ import ButtonNavigator from '../button-navigator/button-navigator'
 
 export const StepManager = ({ stepManager }) => {
   const [state, setState] = useState({
-    sliderLength: null,
     sliderValue: 0,
     revertWarning: '',
     stepState: '',
@@ -12,45 +11,27 @@ export const StepManager = ({ stepManager }) => {
   })
 
   useEffect(() => {
-    stepManager.event.register('traceLengthChanged', setSliderLength)
-    stepManager.event.register('revertWarning', setRevertWarning)
-    stepManager.event.register('stepChanged', updateStep)
-  }, [])
-
-  const setSliderLength = (length) => {
-    setState(prevState => {
-      return {
-        ...prevState,
-        sliderLength: length
-      }
-    })
-  }
+    stepManager && stepManager.event.register('revertWarning', setRevertWarning)
+    stepManager && stepManager.event.register('stepChanged', updateStep)
+  }, [stepManager])
 
   const setRevertWarning = (warning) => {
     setState(prevState => {
-      return {
-        ...prevState,
-        revertWarning: warning
-      }
+      return { ...prevState, revertWarning: warning }
     })
   }
 
   const updateStep = (step, stepState, jumpOutDisabled) => {
     setState(prevState => {
-      return {
-        ...prevState,
-        sliderValue: step,
-        stepState,
-        jumpOutDisabled
-      }
+      return { ...prevState, sliderValue: step, stepState, jumpOutDisabled }
     })
   }
 
-  const { sliderLength, sliderValue, revertWarning, stepState, jumpOutDisabled } = state
+  const { sliderValue, revertWarning, stepState, jumpOutDisabled } = state
 
   return (
     <div className="py-1">
-      <Slider stepManager={stepManager} sliderLength={sliderLength} sliderValue={sliderValue} />
+      <Slider stepManager={stepManager} sliderValue={sliderValue} />
       <ButtonNavigator stepManager={stepManager} revertedReason={revertWarning} stepState={stepState} jumpOutDisabled={jumpOutDisabled} />
     </div>
   )

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

 import React, { useState, useEffect } from 'react'
 import './tx-browser.css'
 
-export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber }) => {
+export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, debugging }) => {
   const [state, setState] = useState({
-    txNumber: undefined,
-    debugging: false
+    txNumber: ''
   })
 
   useEffect(() => {
@@ -17,7 +16,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber })
   }, [transactionNumber])
 
   const handleSubmit = () => {
-    if (state.debugging) {
+    if (debugging) {
       unload()
     } else {
       requestDebug(undefined, state.txNumber)
@@ -44,30 +43,30 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber })
   }
 
   return (
-    <div className="container">
+    <div className="container px-0">
       <div className="txContainer">
         <div className="py-1 d-flex justify-content-center w-100 input-group">
           <input
-            defaultValue={state.txNumber || ''}
-            className="form-control m-0 css.txinput"
+            value={state.txNumber}
+            className="form-control m-0 txinput"
             id='txinput'
             type='text'
             onChange={txInputChanged}
             placeholder={'Transaction hash, should start with 0x'}
             data-id="debuggerTransactionInput"
-            disabled={state.debugging}
+            disabled={debugging}
           />
         </div>
         <div className="d-flex justify-content-center w-100 btn-group py-1">
         <button
           className="btn btn-primary btn-sm txbutton"
           id="load"
-          title={state.debugging ? 'Stop debugging' : 'Start debugging'}
+          title={debugging ? 'Stop debugging' : 'Start debugging'}
           onClick={handleSubmit}
           data-id="debuggerTransactionStartButton"
-          disabled={!state.txNumber ? true : !state.debugging ? false : true }
+          disabled={!state.txNumber ? true : !debugging ? true : false }
         >
-          { state.debugging ? 'Stop' : 'Start' } debugging
+          { debugging ? 'Stop' : 'Start' } debugging
         </button>
         </div>
       </div>