Debugger UI Refactor (React Library)

apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts

@@ -2,7 +2,7 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from "events"
 class GoToVmTraceStep extends EventEmitter {
   command (this: NightwatchBrowser, step: number, incr?: number): NightwatchBrowser {
-    goToVMtraceStep(this.api, step, incr, () => {        
+    goToVMtraceStep(this.api, step, incr, () => {      
       this.emit('complete')
     })
     return this

apps/remix-ide-e2e/src/commands/selectContract.ts

@@ -16,6 +16,7 @@ class SelectContract extends EventEmitter {
 function selectContract (browser: NightwatchBrowser, contractName: string, callback: VoidFunction) {
   browser.clickLaunchIcon('settings').clickLaunchIcon('udapp')
   .setValue('#runTabView select[class^="contractNames"]', contractName).perform(() => {
+    console.log('Done!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
     callback()
   })
 }

apps/remix-ide-e2e/src/commands/testContracts.ts

@@ -17,7 +17,7 @@ function testContracts (browser: NightwatchBrowser, fileName: string, contractCo
   browser
     .clickLaunchIcon('solidity')
     .addFile(fileName, contractCode)
-    .pause(1000)
+    .pause(25000)
     .verifyContracts(compiledContractNames)
     .perform(() => {
       callback()

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

@@ -42,6 +42,8 @@ module.exports = {
     .waitForElementVisible('*[data-id="slider"]')
     .click('*[data-id="slider"]')
     .setValue('*[data-id="slider"]', '50')
+    .pause(2000)
+    .click('*[data-id="dropdownPanelSolidityLocals"]')
     .assert.containsText('*[data-id="solidityLocals"]', 'no locals')
     .assert.containsText('*[data-id="stepdetail"]', 'vm trace step:\n92')
   },
@@ -188,7 +190,7 @@ const sources = [
     'browser/blah.sol': {
       content: `
     pragma solidity >=0.7.0 <0.8.0;
-
+ 
     contract Kickstarter {
 
         enum State { Started, Completed }

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

@@ -65,7 +65,6 @@ module.exports = {
   'Call web3.eth.getAccounts() using JavaScript VM': function (browser: NightwatchBrowser) {
     browser
     .executeScript(`web3.eth.getAccounts()`)
-    .pause(2000)
     .journalLastChildIncludes(`[ "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", "0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2", "0x4B20993Bc481177ec7E8f571ceCaE8A9e22C02db", "0x78731D3Ca6b7E34aC0F824c42a7cC18A495cabaB", "0x617F2E2fD72FD9D5503197092aC168c91465E7f2", "0x17F6AD8Ef982297579C203069C1DbfFE4348c372", "0x5c6B0f7Bf3E7ce046039Bd8FABdfD3f9F5021678", "0x03C6FcED478cBbC9a4FAB34eF9f40767739D1Ff7", "0x1aE0EA34a72D944a8C7603FfB3eC30a6669E454C", "0x0A098Eda01Ce92ff4A4CCb7A4fFFb5A43EBC70DC", "0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c", "0x14723A09ACff6D2A60DcdF7aA4AFf308FDDC160C", "0x4B0897b0513fdC7C541B6d9D7E929C4e5364D2dB", "0x583031D1113aD414F02576BD6afaBfb302140225", "0xdD870fA1b7C4700F2BD7f44238821C26f7392148" ]`)
     .end()
   },

apps/remix-ide/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

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

@@ -1,10 +1,12 @@
 const yo = require('yo-yo')
-const remixDebug = require('@remix-project/remix-debug')
 const css = require('./styles/debugger-tab-styles')
 import toaster from '../ui/tooltip'
-const DebuggerUI = require('./debugger/debuggerUI')
+import { DebuggerUI } from '@remix-ui/debugger-ui'
+// const DebuggerUI = require('./debugger/debuggerUI')
 import { ViewPlugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 const profile = {
   name: 'debugger',
@@ -25,6 +27,9 @@ class DebuggerTab extends ViewPlugin {
     super(profile)
     this.el = null
     this.blockchain = blockchain
+    this.debugHash = null
+    this.getTraceHash = null
+    this.removeHighlights = false
   }
 
   render () {
@@ -55,37 +60,39 @@ class DebuggerTab extends ViewPlugin {
       toaster(yo`<div><b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging.</div>`)
     })
 
-    this.debuggerUI = new DebuggerUI(
-      this,
-      this.el.querySelector('#debugger'),
-      (address, receipt) => {
-        const target = (address && remixDebug.traceHelper.isContractCreation(address)) ? receipt.contractAddress : address
-        return this.call('fetchAndCompile', 'resolve', target || receipt.contractAddress || receipt.to, '.debug', this.blockchain.web3())
-      }
-    )
+    this.renderComponent()
 
     this.call('manager', 'activatePlugin', 'source-verification').catch(e => console.log(e.message))
     // this.call('manager', 'activatePlugin', 'udapp')
 
     return this.el
   }
 
+  renderComponent () {
+    ReactDOM.render(
+      <DebuggerUI debuggerModule={this} />
+    , this.el)
+  }
+
   deactivate () {
-    this.debuggerUI.deleteHighlights()
+    this.removeHighlights = true
+    this.renderComponent()
     super.deactivate()
   }
 
   debug (hash) {
-    if (this.debuggerUI) this.debuggerUI.debug(hash)
+    this.debugHash = hash
+    this.renderComponent()
   }
 
   getTrace (hash) {
-    return this.debuggerUI.getTrace(hash)
+    this.getTraceHash = hash
+    this.renderComponent()
   }
 
-  debugger () {
-    return this.debuggerUI
-  }
+  // debugger () {
+  //   return this.debuggerUI
+  // }
 }
 
 module.exports = DebuggerTab

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+    "presets": ["@babel/preset-react", "@babel/preset-typescript"],
     "plugins": ["@babel/plugin-transform-modules-commonjs"]
 }

libs/remix-debug/src/debugger/stepManager.js

@@ -118,6 +118,7 @@ class DebuggerStepManager {
 
   stepOverForward (solidityMode) {
     if (!this.traceManager.isLoaded()) return
+    if (this.currentStepIndex >= this.traceLength - 1) return
     let step = this.currentStepIndex + 1
     let scope = this.debugger.callTree.findScope(step)
     if (scope && scope.firstStep === step) {

libs/remix-debug/src/solidity-decoder/internalCallTree.js

@@ -163,11 +163,11 @@ async function buildTree (tree, step, scopeId, isExternalCall, isCreation) {
 
   function includedSource (source, included) {
     return (included.start !== -1 &&
-        included.length !== -1 &&
-        included.file !== -1 &&
-        included.start >= source.start &&
-        included.start + included.length <= source.start + source.length &&
-        included.file === source.file)
+      included.length !== -1 &&
+      included.file !== -1 &&
+      included.start >= source.start &&
+      included.start + included.length <= source.start + source.length &&
+      included.file === source.file)
   }
 
   let currentSourceLocation = { start: -1, length: -1, file: -1 }

libs/remix-debug/src/solidity-decoder/types/ArrayType.js

@@ -83,13 +83,13 @@ class ArrayType extends RefType {
     if (isNaN(length)) {
       return {
         value: '<decoding failed - length is NaN>',
-        type: this.typeName
+        type: 'Error'
       }
     }
     if (!skip) skip = 0
     if (skip) offset = offset + (32 * skip)
     let limit = length - skip
-    if (limit > 100) limit = 100
+    if (limit > 10) limit = 10
     for (var k = 0; k < limit; k++) {
       var contentOffset = offset
       ret.push(this.underlyingType.decodeFromMemory(contentOffset, memory))

libs/remix-debug/src/source/sourceLocationTracker.js

@@ -69,7 +69,6 @@ SourceLocationTracker.prototype.getValidSourceLocationFromVMTraceIndex = async f
     map = await this.getSourceLocationFromVMTraceIndex(address, vmtraceStepIndex, contracts)
     vmtraceStepIndex = vmtraceStepIndex - 1    
   }
-  console.log(map, vmtraceStepIndex)
   return map
 }
 

libs/remix-ui/clipboard/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}