fix tests

ci/browser_tests.sh

 #!/usr/bin/env bash
 
-
 SAUCECONNECT_URL="https://saucelabs.com/downloads/sc-4.3.16-linux.tar.gz"
 SAUCECONNECT_USERNAME="yanneth"
 SAUCECONNECT_ACCESSKEY="1f5a4560-b02b-41aa-b52b-f033aad30870"
@@ -18,10 +17,19 @@ while [ ! -f $SAUCECONNECT_READYFILE ]; do
   sleep .5
 done
 
-npm run nightwatch_remote_firefox || TEST_EXITCODE=1
-npm run nightwatch_remote_chrome || TEST_EXITCODE=1
-npm run nightwatch_remote_safari || TEST_EXITCODE=1
-npm run nightwatch_remote_ie || TEST_EXITCODE=1
+npm run nightwatch_remote_safari
+echo $?
+if [ $? -eq 1 ]
+then
+  TEST_EXITCODE = 1
+fi
+
+
+npm run nightwatch_remote_ie
+if [ $? -eq 1 ]
+then
+  TEST_EXITCODE = 1
+fi
 
 node ci/sauceDisconnect.js $SAUCECONNECT_USERNAME $SAUCECONNECT_ACCESSKEY $SAUCECONNECT_JOBIDENTIFIER
 

index.html

@@ -6,10 +6,10 @@
     <script type="text/javascript">
       function loadDebugger() {
         var container = document.getElementById('app')
-        container.vmdebugger = new window.remix.ui.Debugger()
-        container.vmdebugger.addProvider('INTERNAL')
-        container.vmdebugger.switchProvider('INTERNAL')
-        container.appendChild(container.vmdebugger.render())
+        container.debugger = new window.remix.ui.Debugger()
+        container.debugger.addProvider('INTERNAL')
+        container.debugger.switchProvider('INTERNAL')
+        container.appendChild(container.debugger.render())
       }
     </script>
     <div id="app"></div>

src/ui/CalldataPanel.js

@@ -21,12 +21,11 @@ CalldataPanel.prototype.init = function () {
 
     self.traceManager.getCallDataAt(index, function (error, calldata) {
       if (error) {
-        self.basicPanel.data = {}
+        self.basicPanel.update({})
         console.log(error)
       } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.data = calldata
+        self.basicPanel.update(calldata)
       }
-      self.basicPanel.update()
     })
   })
 }

src/ui/CallstackPanel.js

@@ -22,11 +22,10 @@ CallstackPanel.prototype.init = function () {
     self.traceManager.getCallStackAt(index, function (error, callstack) {
       if (error) {
         console.log(error)
-        self.basicPanel.data = {}
+        self.basicPanel.update({})
       } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.data = callstack
+        self.basicPanel.update(callstack)
       }
-      self.basicPanel.update()
     })
   })
 }

src/ui/ListView.js → src/ui/CodeListView.js

@@ -4,7 +4,7 @@ var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var DropdownPanel = require('./DropdownPanel')
 
-function ListView (_parent, _codeManager) {
+function CodeListView (_parent, _codeManager) {
   this.parent = _parent
   this.codeManager = _codeManager
   this.code
@@ -15,11 +15,11 @@ function ListView (_parent, _codeManager) {
   this.init()
 }
 
-ListView.prototype.render = function () {
+CodeListView.prototype.render = function () {
   return yo`<div id='asmcodes' >${this.basicPanel.render({height: style.instructionsList.height})}</div>`
 }
 
-ListView.prototype.init = function () {
+CodeListView.prototype.init = function () {
   var self = this
   this.codeManager.register('changed', this, this.changed)
   this.parent.register('traceUnloaded', this, function () {
@@ -27,20 +27,22 @@ ListView.prototype.init = function () {
   })
 }
 
-ListView.prototype.indexChanged = function (index) {
+CodeListView.prototype.indexChanged = function (index) {
   if (index >= 0) {
     if (this.itemSelected) {
+      this.itemSelected.removeAttribute('selected')
       this.itemSelected.removeAttribute('style')
       this.itemSelected.firstChild.removeAttribute('style')
     }
     this.itemSelected = this.codeView.children[index]
     this.itemSelected.setAttribute('style', ui.formatCss({'background-color': '#eeeeee'}))
+    this.itemSelected.setAttribute('selected', 'selected')
     this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'}))
-    this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.style.height.replace('px', ''))
+    this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetHeight)
   }
 }
 
-ListView.prototype.changed = function (code, address, index) {
+CodeListView.prototype.changed = function (code, address, index) {
   if (this.address !== address) {
     this.code = code
     this.address = address
@@ -51,7 +53,7 @@ ListView.prototype.changed = function (code, address, index) {
   this.indexChanged(index)
 }
 
-ListView.prototype.renderAssemblyItems = function () {
+CodeListView.prototype.renderAssemblyItems = function () {
   if (this.code) {
     var codeView = this.code.map(function (item, i) {
       return yo`<li key=${i} value=${i}><span>${item}</span></li>`
@@ -62,4 +64,4 @@ ListView.prototype.renderAssemblyItems = function () {
   }
 }
 
-module.exports = ListView
+module.exports = CodeListView

src/ui/DropdownPanel.js

@@ -18,7 +18,13 @@ function DropdownPanel (_name, _raw) {
   this.raw = _raw
 }
 
-DropdownPanel.prototype.update = function () {
+DropdownPanel.prototype.update = function (_data) {
+  if (!this.view) {
+    return
+  }
+  if (_data) {
+    this.data = _data
+  }
   this.view.querySelector('.dropdownpanel div').innerHTML = ''
   if (!this.raw) {
     var data = JSON.stringify(this.data, null, '\t')
@@ -28,11 +34,11 @@ DropdownPanel.prototype.update = function () {
     var div = document.createElement('div')
     if (Array.isArray(this.data)) {
       this.data.map(function (item, i) {
-        div.appendChild(yo`<div><span>${item}</span></div>`)
+        div.appendChild(yo`<div>${item}</div>`)
       })
     } else {
       for (var k in this.data) {
-        div.appendChild(yo`<div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '100px'})} >${k}</div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '355px'})} >${this.data[k]}</div></div>`)
+        div.appendChild(yo`<div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '10%'})} >${k}</div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '50%'})} >${this.data[k]}</div></div>`)
       }
     }
     this.view.querySelector('.dropdownpanel div').appendChild(div)
@@ -57,7 +63,7 @@ DropdownPanel.prototype.render = function (overridestyle) {
       <button style=${ui.formatCss(style.button, styleDropdown.copyBtn)} class="btn" type="button">
         Copy to clipboard
       </button>
-      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)}><span>Empty</span></div>
+      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><span>Empty</span></div>
     </div>
     </div>`
   if (!this.view) {

src/ui/Ethdebugger.js

@@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) {
 
 Ethdebugger.prototype.render = function () {
   var view = yo`<div style=${ui.formatCss(style.font)}>
-        <div style='margin: auto; width: 604px'>
+        <div style='margin: auto; width: 31%'>
           ${this.txBrowser.render()}
           ${this.stepManager.render()}
         </div>

src/ui/FullStoragesChanges.js

@@ -27,8 +27,7 @@ FullStoragesChanges.prototype.init = function () {
     self.traceManager.getAddresses(function (error, addresses) {
       if (!error) {
         self.addresses = addresses
-        self.basicPanel.data = {}
-        self.basicPanel.update()
+        self.basicPanel.update({})
       }
     })
 
@@ -49,8 +48,7 @@ FullStoragesChanges.prototype.init = function () {
         self.traceManager.getStorageAt(index, null, function (error, result) {
           if (!error) {
             storageJSON[self.addresses[k]] = result
-            self.basicPanel.data = storageJSON
-            self.basicPanel.update()
+            self.basicPanel.update(storageJSON)
           }
         }, self.addresses[k])
       }

src/ui/MemoryPanel.js

@@ -23,11 +23,10 @@ MemoryPanel.prototype.init = function () {
     self.traceManager.getMemoryAt(index, function (error, memory) {
       if (error) {
         console.log(error)
-        self.basicPanel.data = {}
+        self.basicPanel.update({})
       } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.data = util.formatMemory(memory, 16)
+        self.basicPanel.update(util.formatMemory(memory, 16))
       }
-      self.basicPanel.update()
     })
   })
 }

src/ui/StackPanel.js

@@ -22,22 +22,21 @@ StackPanel.prototype.init = function () {
 
     self.traceManager.getStackAt(index, function (error, stack) {
       if (error) {
-        self.basicPanel.data = {}
+        self.basicPanel.update({})
         console.log(error)
       } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.data = self.format(stack)
+        self.basicPanel.update(self.format(stack))
       }
-      self.basicPanel.update()
     })
   })
 }
 
 StackPanel.prototype.format = function (stack) {
   var ret = []
-  for (var key in stack) {
-    var hex = ui.normalizeHex(stack[key])
+  stack.map(function (item, i) {
+    var hex = ui.normalizeHex(item)
     ret.push(hex)
-  }
+  })
   return ret
 }
 

src/ui/StepDetail.js

@@ -14,19 +14,19 @@ function StepDetail (_parent, _traceManager) {
 }
 
 StepDetail.prototype.render = function () {
-  return yo`<div id='sticker' >${this.basicPanel.render()}</div>`
+  return yo`<div id='stepdetail' >${this.basicPanel.render()}</div>`
 }
 
 StepDetail.prototype.init = function () {
   var self = this
   this.parent.register('traceUnloaded', this, function () {
     self.detail = initDetail()
-    self.basicPanel.update()
+    self.basicPanel.update(self.detail)
   })
 
   this.parent.register('newTraceLoaded', this, function () {
     self.detail = initDetail()
-    self.basicPanel.update()
+    self.basicPanel.update(self.detail)
   })
 
   this.parent.register('indexChanged', this, function (index) {
@@ -41,8 +41,7 @@ StepDetail.prototype.init = function () {
       } else {
         self.detail.step = step
       }
-      self.basicPanel.data = self.detail
-      self.basicPanel.update()
+      self.basicPanel.update(self.detail)
     })
 
     self.traceManager.getMemExpand(index, function (error, addmem) {
@@ -52,8 +51,7 @@ StepDetail.prototype.init = function () {
       } else {
         self.detail.addmemory = addmem
       }
-      self.basicPanel.data = self.detail
-      self.basicPanel.update()
+      self.basicPanel.update(self.detail)
     })
 
     self.traceManager.getStepCost(index, function (error, gas) {
@@ -63,8 +61,7 @@ StepDetail.prototype.init = function () {
       } else {
         self.detail.gas = gas
       }
-      self.basicPanel.data = self.detail
-      self.basicPanel.update()
+      self.basicPanel.update(self.detail)
     })
 
     self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
@@ -74,8 +71,7 @@ StepDetail.prototype.init = function () {
       } else {
         self.detail.loadedAddress = address
       }
-      self.basicPanel.data = self.detail
-      self.basicPanel.update()
+      self.basicPanel.update(self.detail)
     })
 
     self.traceManager.getRemainingGas(index, function (error, remaingas) {
@@ -85,8 +81,7 @@ StepDetail.prototype.init = function () {
       } else {
         self.detail.remainingGas = remaingas
       }
-      self.basicPanel.data = self.detail
-      self.basicPanel.update()
+      self.basicPanel.update(self.detail)
     })
   })
 }

src/ui/StoragePanel.js

@@ -25,11 +25,10 @@ StoragePanel.prototype.init = function () {
     self.traceManager.getStorageAt(index, self.parent.tx, function (error, storage) {
       if (error) {
         console.log(error)
-        self.basicPanel.data = {}
+        self.basicPanel.update({})
       } else if (self.parent.currentStepIndex === index) {
-        self.basicPanel.data = storage
+        self.basicPanel.update(storage)
       }
-      self.basicPanel.update()
     }, self.address)
   })
 }

src/ui/TxBrowser.js

@@ -136,13 +136,13 @@ TxBrowser.prototype.render = function () {
   var self = this
   var view = yo`<div>
         ${this.connectionSetting()}
-        <input onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} style='width: 231px' />
-        <input id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} style='width: 266px' />
+        <input onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
+        <input id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
         <button id='load' onclick=${function () { self.submit() }} style=${ui.formatCss(style.button)}>
           Load
         </button>
         <button id='unload' onclick=${function () { self.unload() }} style=${ui.formatCss(style.button)}>Reset</button>
-        <div style=${ui.formatCss(style.transactionInfo)}>
+        <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
           ${this.basicPanel.render()}
         </div>
       </div>`

src/ui/VmDebugger.js

 'use strict'
-var ListView = require('./ListView')
+var CodeListView = require('./CodeListView')
 var CalldataPanel = require('./CalldataPanel')
 var MemoryPanel = require('./MemoryPanel')
 var CallstackPanel = require('./CallstackPanel')
@@ -11,7 +11,7 @@ var DropdownPanel = require('./DropdownPanel')
 var yo = require('yo-yo')
 
 function VmDebugger (_parent, _traceManager, _codeManager) {
-  this.asmCode = new ListView(_parent, _codeManager)
+  this.asmCode = new CodeListView(_parent, _codeManager)
   this.stackPanel = new StackPanel(_parent, _traceManager)
   this.storagePanel = new StoragePanel(_parent, _traceManager)
   this.memoryPanel = new MemoryPanel(_parent, _traceManager)
@@ -50,7 +50,6 @@ function VmDebugger (_parent, _traceManager, _codeManager) {
 VmDebugger.prototype.render = function () {
   var view = yo`<div id='vmdebugger' style='display:none'>
         <div>
-          <div>
             ${this.asmCode.render()}
             ${this.stepDetail.render()}
             ${this.stackPanel.render()}
@@ -61,7 +60,6 @@ VmDebugger.prototype.render = function () {
             ${this.returnValuesPanel.render()}
             ${this.fullStoragesChangesPanel.render()}
           </div>
-        </div>
       </div>`
   if (!this.view) {
     this.view = view

src/ui/styles/basicStyles.js

@@ -21,10 +21,10 @@ module.exports = {
   },
   instructionsList: {
     'width': '72%',
-    'height': '330px',
     'overflow-y': 'scroll',
     'list-style-type': 'none',
-    'margin': 'auto'
+    'margin': 'auto',
+    'max-height': '500px'
   },
   transactionInfo: {
     'margin-top': '5px'
@@ -32,10 +32,10 @@ module.exports = {
   panel: {
     container: {
       'border': '1px solid',
-      'width': '600px'
+      'width': '70%'
     },
     tableContainer: {
-      'height': '300px',
+      'height': '50%',
       'overflow-y': 'auto'
     },
     table: {
@@ -52,10 +52,6 @@ module.exports = {
   display: {
     'display': 'block'
   },
-  sticker: {
-    'vertical-align': 'top',
-    'margin': '5px'
-  },
   inline: {
     'display': 'inline-block'
   },

src/ui/styles/sliderStyles.js

 'use strict'
 module.exports = {
   rule: {
-    'width': '600px'
-  },
-  runner: {
-    'position': 'absolute',
-    'width': '16px',
-    'height': '16px',
-    'margin': '0',
-    'padding': '0',
-    'overflow': 'hidden',
-    'border': '1px solid #a4bed4',
-    'background-color': '#f1f7ff'
+    'width': '98%'
   }
 }

test-browser/init.js

-var init = require('../test/init')
 module.exports = function (browser, callback) {
   extendBrowser(browser)
   browser
     .url('http://127.0.0.1:8080')
-    .waitForElementPresent('#app div', 1000)
-  injectScript('./test/resources/testWeb3.json', browser, function () {
+    .injectScript('test/resources/insertTestWeb3.js', function () {
+      // wait for the script to load test web3...
+      setTimeout(function () {
         callback()
+      }, 5000)
     })
 }
 
-function injectScript (file, browser, callback) {
-  init.readFile(file, function (error, result) {
-    if (!error) {
-      browser.execute(function (data) {
-        var vmdebugger = document.getElementById('app').vmdebugger
-        data = JSON.parse(data)
-        var uiTestweb3 = {}
-        uiTestweb3.eth = {}
-        uiTestweb3.debug = {}
-        uiTestweb3.eth.getCode = function (address, callback) {
-          if (callback) {
-            callback(null, data.testCodes[address])
-          } else {
-            return data.testCodes[address]
-          }
-        }
-
-        uiTestweb3.debug.traceTransaction = function (txHash, options, callback) {
-          callback(null, data.testTraces[txHash])
-        }
-
-        uiTestweb3.debug.storageAt = function (blockNumber, txIndex, address, callback) {
-          callback(null, {})
-        }
-
-        uiTestweb3.eth.getTransaction = function (txHash, callback) {
-          if (callback) {
-            callback(null, data.testTxs[txHash])
-          } else {
-            return data.testTxs[txHash]
-          }
-        }
-
-        uiTestweb3.eth.getTransactionFromBlock = function (blockNumber, txIndex, callback) {
-          if (callback) {
-            callback(null, data.testTxsByBlock[blockNumber + '-' + txIndex])
-          } else {
-            return data.testTxsByBlock[blockNumber + '-' + txIndex]
-          }
-        }
-
-        uiTestweb3.eth.getBlockNumber = function (callback) { callback(null, 'web3 modified for testing purposes :)') }
-
-        uiTestweb3.eth.providers = { 'HttpProvider': function (url) {} }
-
-        uiTestweb3.eth.setProvider = function (provider) {}
-
-        uiTestweb3.currentProvider = {host: 'web3 modified for testing purposes :)'}
-
-        vmdebugger.addProvider('TEST', uiTestweb3)
-        vmdebugger.switchProvider('TEST')
-      }, [result], function () {
-        callback()
+function extendBrowser (browser) {
+  browser.assertCurrentSelectedItem = function (expected) {
+    browser.execute(function (id) {
+      var node = document.querySelector('#asmcodes ul li[selected="selected"] span')
+      return node.innerText
+    }, [''], function (returnValue) {
+      browser.assert.equal(returnValue.value, expected)
     })
+    return browser
   }
-  })
-}
 
-function extendBrowser (browser) {
-  browser.assertCurrentSelectedItem = function (expected) {
-    browser.getValue('#asmitems', function (result) {
-      browser.expect.element('#asmitems option[value="' + result.value + '"]').text.to.equal(expected)
+  browser.retrieveInnerText = function (selector, callback) {
+    browser.execute(function (selector) {
+      var node = document.querySelector(selector)
+      return node ? node.innerText : ''
+    }, [selector], function (returnValue) {
+      callback(returnValue.value)
     })
     return browser
   }
 
-  browser.assertSticker = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) {
-    browser.expect.element('#vmtracestepinfo').text.to.equal(vmtracestepinfo)
-    browser.expect.element('#stepinfo').text.to.equal(stepinfo)
-    browser.expect.element('#addmemoryinfo').text.to.equal(addmemoryinfo)
-    browser.expect.element('#gasinfo').text.to.equal(gasinfo)
-    browser.expect.element('#remaininggasinfo').text.to.equal(remaininggasinfo)
-    browser.expect.element('#loadedaddressinfo').text.to.equal(loadedaddressinfo)
+  browser.assertStepDetail = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) {
+    assertPanel('#stepdetail', browser, ['vmTraceStep' + vmtracestepinfo, 'step' + stepinfo, 'addmemory' + addmemoryinfo, 'gas' + gasinfo, 'remainingGas' + remaininggasinfo, 'loadedAddress' + loadedaddressinfo])
     return browser
   }
 
@@ -177,29 +128,31 @@ browser.fireEvent = function (el, key, times, callback) {
 }
 
 function assertPanel (id, browser, value) {
-  browser.expect.element(id + ' #basicpanel').text.to.equal(value)
+  var selector = id + ' .dropdownpanel div div'
+  browser.execute(function (id) {
+    var node = document.querySelector(id)
+    var ret = []
+    for (var k in node.children) {
+      if (node.children[k].innerText) {
+        ret.push(node.children[k].innerText)
+      }
+    }
+    return ret
+  }, [selector], function (returnValues) {
+    value.map(function (item, index) {
+      browser.assert.equal(returnValues.value[index], value[index])
+    })
+  })
   return browser
 }
 
 function assertPanelValue (id, browser, index, value) {
-  getInnerText(id + ' #basicpanel', browser, function (result) {
-    var values
-    if (result.value.indexOf('\r\n') !== -1) {
-      values = result.value.split('\r\n')
-    } else if (result.value.indexOf('\n') !== -1) {
-      values = result.value.split('\n')
-    } else if (result.value.indexOf('\r') !== -1) {
-      values = result.value.split('\r')
-    }
-    browser.assert.equal(values[index], value)
+  var selector = id + ' .dropdownpanel div div'
+  browser.execute(function (id, index) {
+    var node = document.querySelector(id)
+    return node.children[index].innerText
+  }, [selector, index], function (returnValues) {
+    browser.assert.equal(returnValues.value, value)
   })
   return browser
 }
-
-function getInnerText (id, browser, callback) {
-  browser.execute(function (data) {
-    return document.querySelector(data).innerText
-  }, [id], function (result) {
-    callback(result)
-  })
-}

test-browser/vmdebugger.js

@@ -5,7 +5,9 @@ var sauce = require('./sauce')
 module.exports = {
   beforeEach: function (browser, done) {
     try {
-      init(browser, done)
+      init(browser, function () {
+        done()
+      })
     } catch (e) {
       var mes = 'error ' + e.message
       console.log(mes)
@@ -14,42 +16,38 @@ module.exports = {
   },
 
   'vmdebugger': function (browser) {
-    loadTrace(browser)
-    browser.click('#unload')
     loadTraceNotFound(browser)
-    browser.click('#unload')
+    .click('#unload')
+    loadTrace(browser)
+    .click('#unload')
     panels(browser)
-    browser.click('#unload')
+    .click('#unload')
     slider(browser)
-    browser.click('#unload')
+    .click('#unload')
     stepping(browser)
-    browser.click('#unload')
-    sticker(browser)
-    browser.end()
+    .click('#unload')
+    stepdetail(browser)
+    .end()
   },
 
   tearDown: sauce
 }
 
-function loadTrace (browser) {
+function loadTraceNotFound (browser) {
   browser
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .assert.containsText('#txhash', '<not found>')
+    .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '<not found>')
   return browser
 }
 
-function loadTraceNotFound (browser) {
+function loadTrace (browser) {
   browser
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .waitForElementVisible('#vmdebugger', 1000)
-    .expect.element('#txhash').text.to.equal('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
-  browser.expect.element('#txfrom').text.to.equal('0x00101c5bfa3fc8bad02c9f5fd65b069306251915')
-  browser.expect.element('#txto').text.to.equal('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
-  browser.expect.element('#txto').text.to.equal('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
   browser.click('#unload')
     .waitForElementNotVisible('#vmdebugger', 1000)
   return browser
@@ -60,22 +58,21 @@ function panels (browser) {
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .waitForElementVisible('#vmdebugger', 1000)
     .click('#nextcall')
-    .assertStack('0x\n0x60\n0x65\n0x38\n0x55\n0x60fe47b1')
-    .assertStorageChanges('0x00  0x38')
-    .assertCallData('0x60fe47b10000000000000000000000000000000000000000000000000000000000000038')
-    .assertCallStack('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .assertStack(['0x', '0x60', '0x65', '0x38', '0x55', '0x60fe47b1'])
+    .assertStorageChanges(['0x000x38'])
+    .assertCallData(['0x60fe47b10000000000000000000000000000000000000000000000000000000000000038'])
+    .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5'])
     .assertStackValue(1, '0x60')
-    .assertMemoryValue(6, '0x60\t\t60606040526040516020806045833981\t????R??Q????E?9?')
-    .assertMemoryValue(7, '0x70\t\t01604052808051906020019091905050\t???R??Q???????PP')
-    .assertMemoryValue(8, '0x80\t\t5b806001016000600050819055505b50\t?????????P??UP?P')
+    .assertMemoryValue(6, '0x6060606040526040516020806045833981\t????R??Q????E?9?')
+    .assertMemoryValue(7, '0x7001604052808051906020019091905050\t???R??Q???????PP')
+    .assertMemoryValue(8, '0x805b806001016000600050819055505b50\t?????????P??UP?P')
     .click('#intoforward') // CREATE
-    .assertStack('')
-    .assertStorageChanges('')
-    .assertMemory('')
-    .assertCallData('0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055')
-    .assertCallStack('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5\n(Contract Creation - Step 63)')
+    .assertStack(['Empty'])
+    .assertStorageChanges(['Empty'])
+    .assertMemory(['Empty'])
+    .assertCallData(['0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055'])
+    .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5', '(Contract Creation - Step 63)'])
   return browser
 }
 
@@ -84,7 +81,6 @@ function slider (browser) {
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .waitForElementVisible('#vmdebugger', 1000)
     .click('#intoforward')
     .click('#intoforward')
     .click('#intoforward')
@@ -114,7 +110,6 @@ function stepping (browser) {
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .waitForElementVisible('#vmdebugger', 1000)
     .click('#intoforward')
     .click('#intoforward')
     .assertCurrentSelectedItem('004 MSTORE')
@@ -136,12 +131,11 @@ function stepping (browser) {
   return browser
 }
 
-function sticker (browser) {
+function stepdetail (browser) {
   browser
     .clearValue('#txinput')
     .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
     .click('#load')
-    .waitForElementVisible('#vmdebugger', 1000)
     .click('#intoforward')
     .click('#intoforward')
     .click('#intoforward')
@@ -161,13 +155,13 @@ function sticker (browser) {
         .end()
     })
     */
-    .assertSticker('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .assertStepDetail('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
     .click('#nextcall')
-    .assertSticker('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .assertStepDetail('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
     .click('#intoforward')
     .click('#overforward')
-    .assertSticker('108', '44', '', '0', '27145', '(Contract Creation - Step 63)')
+    .assertStepDetail('108', '44', '', '0', '27145', '(Contract Creation - Step 63)')
     .click('#intoforward')
-    .assertSticker('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .assertStepDetail('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
   return browser
 }

test/resources/insertTestWeb3.js

+function loadJSON (url, callback) {
+  var xobj = new XMLHttpRequest()
+  xobj.overrideMimeType('application/json')
+  xobj.open('GET', url, true)
+  xobj.onreadystatechange = function () {
+    if (xobj.readyState == 4 && xobj.status == '200') {
+      callback(xobj.responseText)
+    }
+  }
+  xobj.send(null)
+}
+
+function loadTestWeb3 (data) {
+  var container = document.getElementById('app')
+  var vmdebugger = container.debugger
+  var uiTestweb3 = {}
+  uiTestweb3.eth = {}
+  uiTestweb3.debug = {}
+  uiTestweb3.eth.getCode = function (address, callback) {
+    if (callback) {
+      callback(null, data.testCodes[address])
+    } else {
+      return data.testCodes[address]
+    }
+  }
+  
+  uiTestweb3.debug.traceTransaction = function (txHash, options, callback) {
+    callback(null, data.testTraces[txHash])
+  }
+
+  uiTestweb3.debug.storageAt = function (blockNumber, txIndex, address, callback) {
+    callback(null, {})
+  }
+
+  uiTestweb3.eth.getTransaction = function (txHash, callback) {
+    if (callback) {
+      callback(null, data.testTxs[txHash])
+    } else {
+      return data.testTxs[txHash]
+    }
+  }
+
+  uiTestweb3.eth.getTransactionFromBlock = function (blockNumber, txIndex, callback) {
+    if (callback) {
+      callback(null, data.testTxsByBlock[blockNumber + '-' + txIndex])
+    } else {
+      return data.testTxsByBlock[blockNumber + '-' + txIndex]
+    }
+  }
+
+  uiTestweb3.eth.getBlockNumber = function (callback) { callback(null, 'web3 modified for testing purposes :)') }
+
+  uiTestweb3.providers = { 'HttpProvider': function (url) {} }
+
+  uiTestweb3.setProvider = function (provider) {}
+
+  uiTestweb3.currentProvider = {host: 'web3 modified for testing purposes :)'} 
+  vmdebugger.addProvider('TEST', uiTestweb3)
+  vmdebugger.switchProvider('TEST')
+}
+
+function waitForRemix (data) {
+  setTimeout(function () {
+    if (!document.getElementById('app').debugger) {
+      waitForRemix(data)
+    } else {
+      loadTestWeb3(data)
+    }
+  }, 500)
+}
+
+loadJSON('/test/resources/testWeb3.json', function (result) {
+  var data = JSON.parse(result)
+  waitForRemix(data)
+})
+
+