Refactored slider, button-navigator, step-manager into react components.

apps/remix-ide/src/app/tabs/debugger/debuggerUI.js

 import React from 'react';
 import ReactDOM from 'react-dom'
-import { Slider } from '@remix-project/debugger-ui'
+import { StepManager } from '@remix-project/debugger-ui'
 var TxBrowser = require('./debuggerUI/TxBrowser')
 var StepManagerUI = require('./debuggerUI/StepManager')
 var VmDebugger = require('./debuggerUI/VmDebugger')
@@ -229,7 +229,7 @@ class DebuggerUI {
   render () {
     this.debuggerPanelsView = yo`<div class="px-2"></div>`
     this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
-    this.stepManagerView = yo`<div class="px-2"></div>`
+    this.stepManagerView = yo`<div id="stepManager-ui" class="px-2"></div>`
 
     var view = yo`
       <div>
@@ -274,8 +274,7 @@ class DebuggerUI {
   renderDebugger () {
     yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
     yo.update(this.debuggerPanelsView, this.vmDebugger.render())
-    yo.update(this.stepManagerView, this.stepManager.render())
-    ReactDOM.render(<Slider event={this.event} />, document.getElementById('slider-ui'))  
+    ReactDOM.render(<StepManager stepManager={this.debugger.step_manager} />, document.getElementById('stepManager-ui'))
   }
 
 }

apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js

@@ -2,7 +2,7 @@ var EventManager = require('../../../../lib/events')
 var yo = require('yo-yo')
 
 var ButtonNavigator = require('./ButtonNavigator')
-// var Slider = require('./Slider')
+var Slider = require('./Slider')
 
 function StepManager (stepManager) {
   this.event = new EventManager()
@@ -13,8 +13,9 @@ function StepManager (stepManager) {
 }
 
 StepManager.prototype.startSlider = function () {
-  this.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager))
-  // this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider))
+  this.slider = new Slider()
+  this.slider.event.register('sliderMoved', this.stepManager.jumpTo.bind(this.stepManager))
+  this.stepManager.event.register('traceLengthChanged', this.slider.setSliderLength.bind(this.slider))
 }
 
 StepManager.prototype.startButtonNavigator = function () {
@@ -33,16 +34,16 @@ StepManager.prototype.startButtonNavigator = function () {
 }
 
 StepManager.prototype.updateStep = function (step, stepState, jumpOutDisabled) {
-  // if (!this.slider) return
-  // this.slider.setValue(step)
+  if (!this.slider) return
+  this.slider.setValue(step)
   this.buttonNavigator.stepChanged(stepState, jumpOutDisabled)
   this.event.trigger('stepChanged', [step])
 }
 
 StepManager.prototype.remove = function () {
   // used to stop listenning on event. bad and should be "refactored"
-  // this.slider.view = null
-  // this.slider = null
+  this.slider.view = null
+  this.slider = null
   this.buttonNavigator.view = null
   this.buttonNavigator = null
 }
@@ -50,7 +51,7 @@ StepManager.prototype.remove = function () {
 StepManager.prototype.render = function () {
   return yo`
     <div class="py-1">
-      <div id="slider-ui"></div>
+      ${this.slider.render()}
       ${this.buttonNavigator.render()}
     </div>`
 }

libs/debugger-ui/src/index.ts

-import Slider from './lib/slider'
-import * as debuggerUI from './lib/debugger-ui'
+import StepManager from './lib/step-manager/step-manager'
 
-export { Slider, debuggerUI }
+export { StepManager }

libs/debugger-ui/src/lib/button-navigator/button-navigator.css

+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+.stepButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.stepButton {
+}
+.jumpButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.jumpButton {
+}
+.navigator {
+}
+.navigator:hover {
+}
\ No newline at end of file

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

+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ButtonNavigation from './button-navigator';
+
+describe(' ButtonNavigation', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<ButtonNavigation />);
+    expect(baseElement).toBeTruthy();
+  });
+});

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

+import React, { useState, useEffect } from 'react'
+import './button-navigator.css'
+
+export const ButtonNavigation = ({ stepManager, revertedReason, stepState, jumpOutDisabled }) => {
+  const [state, setState] = useState({
+    intoBackDisabled: true,
+    overBackDisabled: true,
+    intoForwardDisabled: true,
+    overForwardDisabled: true,
+    jumpOutDisabled: true,
+    jumpNextBreakpointDisabled: true,
+    jumpPreviousBreakpointDisabled: true
+  })
+
+  useEffect(() => {
+    stepChanged(stepState, jumpOutDisabled)
+  }, [stepState, jumpOutDisabled])
+
+  const reset = () => {
+    setState(() => {
+      return {
+        intoBackDisabled: true,
+        overBackDisabled: true,
+        intoForwardDisabled: true,
+        overForwardDisabled: true,
+        jumpOutDisabled: true,
+        jumpNextBreakpointDisabled: true,
+        jumpPreviousBreakpointDisabled: true
+      }
+    })
+  }
+
+  const stepChanged = (stepState, jumpOutDisabled) => {
+    if (stepState === 'invalid') {
+      // TODO: probably not necessary, already implicit done in the next steps
+      reset()
+      return
+    }
+
+    setState(() => {
+      return {
+        intoBackDisabled: stepState === 'initial',
+        overBackDisabled: stepState === 'initial',
+        jumpPreviousBreakpointDisabled: stepState === 'initial',
+        intoForwardDisabled: stepState === 'end',
+        overForwardDisabled: stepState === 'end',
+        jumpNextBreakpointDisabled: jumpOutDisabled,
+        jumpOutDisabled
+      }
+    })
+  }
+
+  return (
+    <div className="buttons">
+      <div className="stepButtons btn-group py-1">
+        <button id='overback' className='btn btn-primary btn-sm navigator stepButton fas fa-reply' title='Step over back' onClick={() => { stepManager.stepOverBack() }} disabled={state.overBackDisabled} ></button>
+        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepManager.stepIntoBack() }} disabled={state.intoBackDisabled}></button>
+        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepManager.stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
+        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepManager.stepOverForward() }} disabled={state.overForwardDisabled}></button>
+      </div>
+
+      <div className="jumpButtons btn-group py-1">
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward'  id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { stepManager.jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { stepManager.jumpOut() }} disabled={state.jumpOutDisabled}></button>
+        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { stepManager.jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
+      </div>
+      <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
+        <button id='jumptoexception' title='Jump to exception' className='btn btn-danger btn-sm navigator button fas fa-exclamation-triangle' onClick={() => { stepManager.jumpToException() }} disabled={state.jumpOutDisabled}>
+        </button>
+        <span>State changes made during this call will be reverted.</span>
+        <span id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>
+        <span id='parenthasthrown' style={{ display: revertedReason === 'parenthasthrown' ? 'inline' : 'none' }}>The parent call will throw an exception</span>
+      </div>
+    </div>
+  )
+}
+
+export default ButtonNavigation

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

+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Slider from './slider';
+
+describe(' Slider', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Slider />);
+    expect(baseElement).toBeTruthy();
+  });
+});

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

-import React, { useState, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 
-const Slider = ({ event }) => {
-    const [state, setState] = useState({
-        max: null,
-        disabled: true,
-        previousValue: null,
-        currentValue: null
+export const Slider = ({ stepManager, sliderLength, sliderValue }) => {
+  const [state, setState] = useState({
+    max: null,
+    disabled: true,
+    previousValue: null,
+    currentValue: null
+  })
+
+  useEffect(() => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        max: sliderLength - 1,
+        disabled: (sliderLength === 0)
+      }
     })
-    const sliderRef = useRef(null)
 
-    const setSliderLength = (length) => {
-        sliderRef.current.setAttribute('max', length - 1)
-        setState({
-            ...state,
-            max: length - 1,
-            disabled: (length === 0)
-        })
-    
-        if (state.disabled) {
-            sliderRef.current.setAttribute('disabled', true)
-        } else {
-            sliderRef.current.removeAttribute('disabled')
-        }
-    
-        setValue(0)
-    }
+    setValue(0)
+  }, [sliderLength])
+
+  useEffect(() => {
+    setValue(sliderValue)
+  }, [sliderValue])
 
-    const setValue = (value) => {
-        setState({
-            ...state,
-            currentValue: value
-        })
-    }
+  const setValue = (value) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        currentValue: value
+      }
+    })
+  }
 
-    const handleChange = (e) => {
-        const value = parseInt(e.target.value)
+  const handleChange = (e) => {
+    console.log('e.target: ', e.target)
+    const value = parseInt(e.target.value)
 
-        if (value === state.previousValue) return
-        setState({
-            ...state,
-            previousValue: value,
-            currentValue: value
-        })
-        event.trigger('sliderMoved', [value])
-    }
+    if (value === state.previousValue) return
+    setState(prevState => {
+      return {
+        ...prevState,
+        previousValue: value,
+        currentValue: value
+      }
+    })
+    stepManager.jumpTo(value)
+  }
 
-    return (
-        <div>
-            <input id='slider'
-                data-id="slider"
-                className='w-100 my-0'
-                type='range'
-                min={0}
-                max={state.max}
-                value={state.currentValue}
-                onChange={handleChange}
-                disabled={state.disabled}
-                ref={sliderRef}
-            />
-        </div>
-    )
+  return (
+    <div>
+        <input id='slider'
+            data-id="slider"
+            className='w-100 my-0'
+            type='range'
+            min={0}
+            max={state.max}
+            value={state.currentValue}
+            onChange={handleChange}
+            disabled={state.disabled}
+        />
+    </div>
+  )
 }
 
 export default Slider

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

+import React from 'react';
+import { render } from '@testing-library/react';
+
+import StepManager from './step-manager';
+
+describe(' StepManager', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<StepManager />);
+    expect(baseElement).toBeTruthy();
+  });
+});

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

+import React, { useState, useEffect } from 'react'
+import './step-manager.css'
+import Slider from '../slider/slider'
+import ButtonNavigator from '../button-navigator/button-navigator'
+
+export const StepManager = ({ stepManager }) => {
+  const [state, setState] = useState({
+    sliderLength: null,
+    sliderValue: 0,
+    revertWarning: '',
+    stepState: '',
+    jumpOutDisabled: true
+  })
+
+  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
+      }
+    })
+  }
+
+  const setRevertWarning = (warning) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        revertWarning: warning
+      }
+    })
+  }
+
+  const updateStep = (step, stepState, jumpOutDisabled) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        sliderValue: step,
+        stepState,
+        jumpOutDisabled
+      }
+    })
+  }
+
+  const { sliderLength, sliderValue, revertWarning, stepState, jumpOutDisabled } = state
+
+  return (
+    <div className="py-1">
+      <Slider stepManager={stepManager} sliderLength={sliderLength} sliderValue={sliderValue} />
+      <ButtonNavigator stepManager={stepManager} revertedReason={revertWarning} stepState={stepState} jumpOutDisabled={jumpOutDisabled} />
+    </div>
+  )
+}
+
+export default StepManager