use new tx browser; move code to upper class

src/app/debugger/debuggerUI.js

 var OldEthdebuggerUI = require('./remix-debugger/src/ui/EthdebuggerUI')
 var Debugger = require('../debugger/debugger')
 var SourceHighlighter = require('../editor/sourceHighlighter')
+var TxBrowser = require('./debuggerUI/TxBrowser')
+var remixLib = require('remix-lib')
+var executionContext = remixLib.execution.executionContext
 
 class DebuggerUI {
 
@@ -8,7 +11,12 @@ class DebuggerUI {
     this.transactionDebugger = new Debugger(new SourceHighlighter())
     this.isActive = false
 
-    this.debugger_ui = new OldEthdebuggerUI({debugger: this.transactionDebugger.debugger})
+    this.debugger_ui = new OldEthdebuggerUI({
+      debugger: this.transactionDebugger.debugger
+    })
+
+    this.startTxBrowser()
+
     container.appendChild(this.debugger_ui.render())
 
     this.listenToEvents()
@@ -29,6 +37,25 @@ class DebuggerUI {
     })
   }
 
+  startTxBrowser () {
+    const self = this
+
+    let txBrowser = new TxBrowser(this.debugger_ui, {displayConnectionSetting: false, web3: executionContext.web3()})
+    this.debugger_ui.txBrowser = txBrowser
+
+    txBrowser.event.register('newTxLoading', this, function () {
+      self.debugger_ui.unLoad()
+    })
+    txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) {
+      self.debugger_ui.startDebugging(blockNumber, txIndex, tx)
+    })
+    txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
+      self.debugger_ui.unLoad()
+    })
+
+    this.txBrowser = this.debugger_ui.txBrowser
+  }
+
   view () {
     return this.transactionDebugger
   }
@@ -43,7 +70,15 @@ class DebuggerUI {
       if (error) {
         return console.error("coudn't get txHash: " + error)
       }
-      self.debugger_ui.debug(tx)
+      self.transactionDebugger.debugger.solidityProxy.reset({})
+
+      if (tx instanceof Object) {
+        self.txBrowser.load(tx.hash, tx)
+      } else if (tx instanceof String) {
+        self.txBrowser.load(tx)
+      }
+
+      // self.debugger_ui.debug(tx)
     })
   }
 }

src/app/debugger/debuggerUI/TxBrowser.js

+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+var traceHelper = remixLib.helpers.trace
+var yo = require('yo-yo')
+var init = remixLib.init
+var csjs = require('csjs-inject')
+var styleGuide = require('../../ui/styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+  .txContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .txinputs {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .txinput {
+    ${styles.rightPanel.debuggerTab.input_Debugger}
+    margin: 3px;
+    width: inherit;
+  }
+  .txbuttons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .txbutton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    width: inherit;
+  }
+  .txbuttonstart {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+  }
+  .txbutton:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+  .vmargin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+`
+function TxBrowser (_parent, opts) {
+  this.event = new EventManager()
+
+  this.blockNumber
+  this.txNumber
+  this.view
+  this.displayConnectionSetting = opts.displayConnectionSetting
+  this.web3 = opts.web3
+  var self = this
+  _parent.event.register('providerChanged', this, function (provider) {
+    self.setDefaultValues()
+    if (self.view) {
+      yo.update(self.view, self.render())
+    }
+  })
+}
+
+// creation 0xa9619e1d0a35b2c1d686f5b661b3abd87f998d2844e8e9cc905edb57fc9ce349
+// invokation 0x71a6d583d16d142c5c3e8903060e8a4ee5a5016348a9448df6c3e63b68076ec4 0xcda2b2835add61af54cf83bd076664d98d7908c6cd98d86423b3b48d8b8e51ff
+// test:
+// creation: 0x72908de76f99fca476f9e3a3b5d352f350a98cd77d09cebfc59ffe32a6ecaa0b
+// invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51
+
+TxBrowser.prototype.setDefaultValues = function () {
+  this.connectInfo = ''
+  if (this.view) {
+    yo.update(this.view, this.render())
+  }
+}
+
+TxBrowser.prototype.submit = function (tx) {
+  var self = this
+  self.event.trigger('newTxLoading', [this.blockNumber, this.txNumber])
+  if (tx) {
+    return self.update(null, tx)
+  }
+  if (!this.txNumber) {
+    self.update('no tx index or tx hash to look for')
+    return
+  }
+  try {
+    if (this.txNumber.indexOf('0x') !== -1) {
+      self.web3.eth.getTransaction(this.txNumber, function (error, result) {
+        self.update(error, result)
+      })
+    } else {
+      self.web3.eth.getTransactionFromBlock(this.blockNumber, this.txNumber, function (error, result) {
+        self.update(error, result)
+      })
+    }
+  } catch (e) {
+    self.update(e.message)
+  }
+}
+
+TxBrowser.prototype.update = function (error, tx) {
+  var info = {}
+  if (error) {
+    this.view.querySelector('#error').innerHTML = error
+  } else {
+    if (tx) {
+      this.view.querySelector('#error').innerHTML = ''
+      if (!tx.to) {
+        tx.to = traceHelper.contractCreationToken('0')
+      }
+      info.from = tx.from
+      info.to = tx.to
+      info.hash = tx.hash
+      this.event.trigger('newTraceRequested', [this.blockNumber, this.txNumber, tx])
+    } else {
+      var mes = '<not found>'
+      info.from = mes
+      info.to = mes
+      info.hash = mes
+      this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber
+    }
+  }
+}
+
+TxBrowser.prototype.updateWeb3Url = function (newhost) {
+  init.setProvider(global.web3, newhost)
+  var self = this
+  this.checkWeb3(function (error, block) {
+    if (!error) {
+      self.connectInfo = 'Connected to ' + global.web3.currentProvider.host + '. Current block number: ' + block
+    } else {
+      self.connectInfo = 'Unable to connect to ' + global.web3.currentProvider.host + '. ' + error.message
+    }
+    yo.update(self.view, self.render())
+  })
+}
+
+TxBrowser.prototype.checkWeb3 = function (callback) {
+  try {
+    global.web3.eth.getBlockNumber(function (error, block) {
+      callback(error, block)
+    })
+  } catch (e) {
+    console.log(e)
+    callback(e.message, null)
+  }
+}
+
+TxBrowser.prototype.updateBlockN = function (ev) {
+  this.blockNumber = ev.target.value
+}
+
+TxBrowser.prototype.updateTxN = function (ev) {
+  this.txNumber = ev.target.value
+}
+
+TxBrowser.prototype.load = function (txHash, tx) {
+  this.txNumber = txHash
+  this.submit(tx)
+}
+
+TxBrowser.prototype.unload = function (txHash) {
+  this.event.trigger('unloadRequested')
+  this.init()
+}
+
+TxBrowser.prototype.init = function (ev) {
+  this.setDefaultValues()
+}
+
+TxBrowser.prototype.connectionSetting = function () {
+  if (this.displayConnectionSetting) {
+    var self = this
+    return yo`<div class="${css.vmargin}"><span>Node URL: </span><input onkeyup=${function () { self.updateWeb3Url(arguments[0].target.value) }} value=${global.web3.currentProvider ? global.web3.currentProvider.host : ' - none - '} type='text' />
+              <span>${this.connectInfo}</span></div>`
+  } else {
+    return ''
+  }
+}
+
+TxBrowser.prototype.render = function () {
+  var self = this
+  var view = yo`<div class="${css.container}">
+        ${this.connectionSetting()}
+        <div class="${css.txContainer}">
+          <div class="${css.txinputs}">
+            <input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
+            <input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
+          </div>
+          <div class="${css.txbuttons}">
+            <button id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
+            <button id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
+          </div>
+        </div>
+        <span id='error'></span>
+      </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+module.exports = TxBrowser

src/app/debugger/remix-debugger/index.js

 'use strict'
+// TODO: this file doesn't seem to be used any more and can be removed
 var VMDebugger = require('./src/ui/VmDebugger')
 var Debugger = require('./src/ui/EthdebuggerUI')
 var DebuggerBackend = require('remix-debug').EthDebugger

src/app/debugger/remix-debugger/src/ui/EthdebuggerUI.js

 'use strict'
-var TxBrowser = require('./TxBrowser')
+// var TxBrowser = require('./TxBrowser')
 var StepManager = require('./StepManager')
 var VmDebugger = require('./VmDebugger')
 
@@ -24,7 +24,7 @@ function EthdebuggerUI (opts) {
   this.opts = opts || {}
   this.debugger = opts.debugger
 
-  if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null }
+  // if (!this.opts.compilationResult) this.opts.compilationResult = () => { return null }
 
   var self = this
   this.event = new EventManager()
@@ -42,17 +42,6 @@ function EthdebuggerUI (opts) {
   executionContext.event.register('contextChanged', this, function () {
     self.updateWeb3Reference()
   })
-
-  this.txBrowser = new TxBrowser(this, {displayConnectionSetting: false, web3: executionContext.web3()})
-  this.txBrowser.event.register('newTxLoading', this, function () {
-    self.unLoad()
-  })
-  this.txBrowser.event.register('newTraceRequested', this, function (blockNumber, txIndex, tx) {
-    self.startDebugging(blockNumber, txIndex, tx)
-  })
-  this.txBrowser.event.register('unloadRequested', this, function (blockNumber, txIndex, tx) {
-    self.unLoad()
-  })
 }
 
 EthdebuggerUI.prototype.setBreakpointManager = function (breakpointManager) {
@@ -68,22 +57,24 @@ EthdebuggerUI.prototype.updateWeb3Reference = function (web3) {
   this.txBrowser.web3 = web3 || executionContext.web3()
 }
 
-EthdebuggerUI.prototype.setCompilationResult = function (compilationResult) {
-  if (compilationResult && compilationResult.sources && compilationResult.contracts) {
-    this.debugger.solidityProxy.reset(compilationResult)
-  } else {
-    this.debugger.solidityProxy.reset({})
-  }
-}
-
-EthdebuggerUI.prototype.debug = function (tx) {
-  this.setCompilationResult(this.opts.compilationResult())
-  if (tx instanceof Object) {
-    this.txBrowser.load(tx.hash, tx)
-  } else if (tx instanceof String) {
-    this.txBrowser.load(tx)
-  }
-}
+// EthdebuggerUI.prototype.setCompilationResult = function (compilationResult) {
+//   if (compilationResult && compilationResult.sources && compilationResult.contracts) {
+//     this.debugger.solidityProxy.reset(compilationResult)
+//   } else {
+//     this.debugger.solidityProxy.reset({})
+//   }
+// }
+
+// EthdebuggerUI.prototype.debug = function (tx) {
+//   // this.setCompilationResult(this.opts.compilationResult())
+//
+//   this.debugger.solidityProxy.reset({})
+//   if (tx instanceof Object) {
+//     this.txBrowser.load(tx.hash, tx)
+//   } else if (tx instanceof String) {
+//     this.txBrowser.load(tx)
+//   }
+// }
 
 EthdebuggerUI.prototype.render = function () {
   this.debuggerPanelsView = yo`<div class="${css.innerShift}"></div>`