module split

remix-debugger/ci/browser_tests.sh

+#!/usr/bin/env bash
+
+set -e
+
+SC_VERSION="4.4.0"
+SAUCECONNECT_URL="https://saucelabs.com/downloads/sc-$SC_VERSION-linux.tar.gz"
+SAUCECONNECT_USERNAME="yanneth"
+SAUCECONNECT_ACCESSKEY="1f5a4560-b02b-41aa-b52b-f033aad30870"
+SAUCECONNECT_JOBIDENTIFIER="remix_tests_${TRAVIS_JOB_NUMBER}"
+SAUCECONNECT_READYFILE="sc.ready"
+TEST_EXITCODE=0
+
+npm run build
+npm run serve &
+
+wget $SAUCECONNECT_URL
+tar -zxvf sc-"$SC_VERSION"-linux.tar.gz
+./sc-"$SC_VERSION"-linux/bin/sc -u $SAUCECONNECT_USERNAME -k $SAUCECONNECT_ACCESSKEY -i $SAUCECONNECT_JOBIDENTIFIER --readyfile $SAUCECONNECT_READYFILE &
+while [ ! -f $SAUCECONNECT_READYFILE ]; do
+  sleep .5
+done
+
+npm run nightwatch_remote_parallel || TEST_EXITCODE=1
+
+node ci/sauceDisconnect.js $SAUCECONNECT_USERNAME $SAUCECONNECT_ACCESSKEY $SAUCECONNECT_JOBIDENTIFIER
+
+echo $TEST_EXITCODE
+if [ $TEST_EXITCODE -eq 1 ]
+then
+  exit 1
+fi

remix-debugger/ci/deploy_from_travis.sh

+#!/bin/bash
+
+set -e
+
+SHA=`git rev-parse --verify HEAD`
+
+git config user.name "Travis CI"
+git config user.email "builds@ethereum.org"
+git checkout --orphan gh-pages
+git rm --cached -r .
+echo "# Automatic build" > README.md
+echo "Built website from {$SHA}. See https://github.com/ethereum/remix/ for details." >> README.md
+# -f is needed because "build" is part of .gitignore
+git add -f README.md index.html build/app.js assets
+git commit -m "Built website from {$SHA}."
+
+ENCRYPTION_LABEL=fade88419824
+ENCRYPTED_KEY_VAR="encrypted_${ENCRYPTION_LABEL}_key"
+ENCRYPTED_IV_VAR="encrypted_${ENCRYPTION_LABEL}_iv"
+ENCRYPTED_KEY=${!ENCRYPTED_KEY_VAR}
+ENCRYPTED_IV=${!ENCRYPTED_IV_VAR}
+openssl aes-256-cbc -K $ENCRYPTED_KEY -iv $ENCRYPTED_IV -in ci/deploy_key.enc -out deploy_key -d
+chmod 600 deploy_key
+eval `ssh-agent -s`
+ssh-add deploy_key
+
+git push -f git@github.com:ethereum/remix.git gh-pages

remix-debugger/ci/sauceDisconnect.js

+const https = require('https')
+
+var userName = process.argv[2]
+var accessKey = process.argv[3]
+var tunnelName = process.argv[4]
+
+function removeTunnel () {
+  const requestPath = `/rest/v1/${userName}/tunnels`
+  console.log(requestPath)
+  callSauce(requestPath, 'GET', function (error, result) {
+    if (error) {
+      console.log(error)
+    } else {
+      var data = JSON.parse(result)
+      for (var k in data) {
+        retrieveTunnel(data[k], function (error, result) {
+          if (error) {
+            console.log(error)
+          } else if (result.identtifier === tunnelName) {
+            deleteTunnel(result.id, function () {
+              console.log('tunnel deleted ' + data[k] + ' ' + tunnelName)
+            })
+          }
+        })
+      }
+    }
+  })
+}
+
+function retrieveTunnel (tunnelid, callback) {
+  const requestPath = `/rest/v1/${userName}/tunnels/${tunnelid}`
+  callSauce(requestPath, 'GET', function (error, result) {
+    if (error) {
+      callback(error)
+    } else {
+      callback(null, {'identtifier': JSON.parse(result).tunnel_identifier, 'id': tunnelid})
+    }
+  })
+}
+
+function deleteTunnel (tunnelid, callback) {
+  const requestPath = `/rest/v1/${userName}/tunnels/${tunnelid}`
+  callSauce(requestPath, 'DELETE', callback)
+}
+
+function callSauce (requestPath, type, callback) {
+  function responseCallback (res) {
+    res.setEncoding('utf8')
+    console.log('Response: ', res.statusCode, JSON.stringify(res.headers))
+    res.on('data', function onData (chunk) {
+      console.log('BODY: ' + chunk)
+      callback(null, chunk)
+    })
+    res.on('end', function onEnd () {})
+  }
+
+  var req = https.request({
+    hostname: 'saucelabs.com',
+    path: requestPath,
+    method: type,
+    auth: userName + ':' + accessKey
+  }, responseCallback)
+
+  req.on('error', function onError (e) {
+    console.log('problem with request: ' + e.message)
+    callback(e.message)
+  })
+  req.write('')
+  req.end()
+}
+
+removeTunnel()

remix-debugger/findClient.js

+var which = require('which')
+
+var geth = null
+var eth = null
+
+try {
+  geth = which.sync('geth')
+} catch (e) {
+}
+
+try {
+  eth = which.sync('eth')
+} catch (e) {
+}
+if (process.argv.length > 2) {
+  if (geth && process.argv[2] === 'geth') {
+    runGeth()
+  } else if (eth && process.argv[2] === 'eth') {
+    runEth()
+  }
+} else if (geth && eth) {
+  console.log('both eth and geth has been found in your system')
+  console.log('restart the command with the desired client:')
+  console.log('npm run start_eth')
+  console.log('or')
+  console.log('npm run start_geth')
+} else if (geth) {
+  runGeth()
+} else if (eth) {
+  runEth()
+} else {
+  console.log('neither eth or geth has been found in your system')
+}
+
+function runEth () {
+  console.log('starting eth...')
+  process.exit(20)
+}
+
+function runGeth () {
+  console.log('starting geth...')
+  process.exit(21)
+}

remix-debugger/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
+  </head>
+  <body onload="loadDebugger()" >
+    <script type="text/javascript">
+      function loadDebugger() {
+        var container = document.getElementById('app')
+        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>
+    <script src="build/app.js"></script>
+  </body>
+</html>

remix-debugger/index.js

+'use strict'
+var VMDebugger = require('./src/ui/VmDebugger')
+var Debugger = require('./src/ui/Ethdebugger')
+var BasicPanel = require('./src/ui/BasicPanel')
+var TreeView = require('./src/ui/TreeView')
+var styleGuide = require('./src/ui/styles/style-guide')
+
+if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') {
+  module.exports = modules()
+}
+
+if (typeof (window) !== 'undefined') {
+  window.remix = modules()
+}
+
+function modules () {
+  return {
+    ui: {
+      Debugger: Debugger,
+      VMdebugger: VMDebugger,
+      BasicPanel: BasicPanel,
+      TreeView: TreeView,
+      styleGuide: styleGuide
+    }
+  }
+}

remix-debugger/nightwatch.js

+'use strict'
+var TRAVIS_JOB_NUMBER = process.env.TRAVIS_JOB_NUMBER
+
+module.exports = {
+  'src_folders': ['./test-browser/test'],
+  'output_folder': './test-browser/test/reports',
+  'custom_commands_path': '',
+  'custom_assertions_path': '',
+  'globals_path': '',
+  'page_objects_path': '',
+
+  'selenium': {
+    'start_process': false,
+    'server_path': '',
+    'log_path': '',
+    'host': '127.0.0.1',
+    'port': 4444,
+    'cli_args': {
+      'webdriver.chrome.driver': '',
+      'webdriver.ie.driver': '',
+      'webdriver.firefox.profile': ''
+    }
+  },
+
+  'test_settings': {
+    'default': {
+      'launch_url': 'http://ondemand.saucelabs.com:80',
+      'selenium_host': 'ondemand.saucelabs.com',
+      'selenium_port': 80,
+      'silent': true,
+      'username': 'yanneth',
+      'access_key': '1f5a4560-b02b-41aa-b52b-f033aad30870',
+      'use_ssl': false,
+      'globals': {
+        'waitForConditionTimeout': 10000,
+        'asyncHookTimeout': 100000
+      },
+      'screenshots': {
+        'enabled': false,
+        'path': ''
+      },
+      'desiredCapabilities': {
+        'browserName': 'firefox',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+        'build': 'build-' + TRAVIS_JOB_NUMBER,
+        'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER
+      }
+    },
+
+    'chrome': {
+      'desiredCapabilities': {
+        'browserName': 'chrome',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+        'build': 'build-' + TRAVIS_JOB_NUMBER,
+        'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER
+      }
+    },
+
+    'safari': {
+      'desiredCapabilities': {
+        'browserName': 'safari',
+        'javascriptEnabled': true,
+        'platform': 'OS X 10.10',
+        'version': '8.0',
+        'acceptSslCerts': true,
+        'build': 'build-' + TRAVIS_JOB_NUMBER,
+        'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER
+      }
+    },
+
+    'ie': {
+      'desiredCapabilities': {
+        'browserName': 'internet explorer',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+        'platform': 'WIN8.1',
+        'version': '11',
+        'build': 'build-' + TRAVIS_JOB_NUMBER,
+        'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER
+      }
+    },
+
+    'local': {
+      'launch_url': 'http://localhost',
+      'selenium_host': '127.0.0.1',
+      'selenium_port': 4444,
+      'silent': true,
+      'screenshots': {
+        'enabled': false,
+        'path': ''
+      },
+      'desiredCapabilities': {
+        'browserName': 'firefox',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true
+      }
+    }
+  }
+}

remix-debugger/package.json

+{
+  "name": "remix-debugger",
+  "version": "0.0.2",
+  "description": "Ethereum IDE and tools for the web",
+  "contributors": [
+    {
+      "name": "Yann Levreau",
+      "email": "yann@ethdev.com"
+    },
+    {
+      "name": "Liana Husikyan",
+      "email": "liana@ethdev.com"
+    }
+  ],
+  "main": "./index.js",
+  "devDependencies": {
+    "csjs-inject": "^1.0.1",
+    "yo-yo": "^1.2.1",
+    "yo-yoify": "^3.1.0",
+    "remix-lib": "^0.0.1",
+    "remix-core": "^0.0.1",
+    "remix-solidity": "^0.0.1",
+    "babel-eslint": "^7.1.1",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.0.1",
+    "ethereum-common": "0.0.18",
+    "ethereumjs-block": "^1.2.2",
+    "ethereumjs-tx": "^1.1.1",
+    "ethereumjs-util": "^4.5.0",
+    "ethereumjs-vm": "2.3.1",
+    "fast-async": "^6.1.2",
+    "http-server": "^0.9.0",
+    "nightwatch": "^0.9.5",
+    "npm-link-local": "^1.1.0",
+    "selenium-standalone": "^6.0.1",
+    "solc": "^0.4.13",
+    "standard": "^7.0.1",
+    "standard-reporter": "^1.0.5",
+    "tape": "^4.6.0",
+    "web3": "^0.15.3"
+  },
+  "scripts": {
+    "postinstall": "npm-link-local ../remix-lib && npm-link-local ../remix-core && npm-link-local ../remix-solidity",
+    "build": "mkdirp build; browserify index.js > build/app.js",
+    "lint": "standard | notify-error",
+    "nightwatch_local": "nightwatch --config nightwatch.js --env local",
+    "nightwatch_remote_chrome": "nightwatch --config nightwatch.js --env chrome",
+    "nightwatch_remote_firefox": "nightwatch --config nightwatch.js --env default",
+    "nightwatch_remote_ie": "nightwatch --config nightwatch.js --env ie",
+    "nightwatch_remote_parallel": "nightwatch --config nightwatch.js --env ie,safari,chrome,default",
+    "nightwatch_remote_safari": "nightwatch --config nightwatch.js --env safari",
+    "onchange": "onchange build/app.js -- npm run lint",
+    "selenium": "selenium-standalone start",
+    "selenium-install": "selenium-standalone install",
+    "serve": "http-server .",
+    "start": "./runNode.sh",
+    "start_dev": "npm-run-all -lpr serve watch onchange",
+    "start_eth": "npm run warning_message; eth -j --rpccorsdomain '*'",
+    "start_geth": "npm run warning_message; geth --rpc --rpcapi 'web3,eth,debug' --rpcport 8545 --rpccorsdomain '*'",
+    "test": "standard && tape ./test/tests.js && ./ci/browser_tests.sh",
+    "test-browser": "npm-run-all -lpr selenium serve waittest",
+    "waittest": "sleep 5 && npm run nightwatch_local",
+    "warning_message": "echo 'DO NOT DO THIS IF eth/geth STORES PRIVATE KEYS!! External system might be able to access your node through the RPC server.\n\n';",
+    "watch": "mkdirp build; watchify src/index.js -p [ browserify-livereload --host 127.0.0.1 --port 1337 ] -dv -o build/app.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ethereum/remix.git"
+  },
+  "author": "cpp-ethereum team",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ethereum/remix/issues"
+  },
+  "homepage": "https://github.com/ethereum/remix#readme",
+  "standard": {
+    "ignore": [
+      "node_modules/*",
+      "build/*",
+      "test/resources/*"
+    ]
+  },
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "plugins": [
+            [
+              "fast-async",
+              {
+                "runtimePatten": null,
+                "compiler": {
+                  "promises": true,
+                  "es7": true,
+                  "noRuntime": true,
+                  "wrapAwait": true
+                }
+              }
+            ],
+            "transform-object-assign"
+          ]
+        }
+      ],
+      [
+        "yo-yoify"
+      ],
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015"
+          ]
+        }
+      ]
+    ]
+  }
+}
+

remix-debugger/runNode.sh

+#!/usr/bin/env bash
+
+node findClient.js $1
+RUNCLIENT=$? 
+if [ $RUNCLIENT -eq '20' ] 
+then 
+    npm run start_eth 
+fi
+
+if [ $RUNCLIENT -eq '21' ] 
+then 
+    echo $?
+    npm run start_geth 
+fi
\ No newline at end of file

remix-debugger/src/ui/BasicPanel.js

+'use strict'
+var style = require('./styles/basicStyles')
+var yo = require('yo-yo')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .container {
+    width: 70%;
+  }
+`
+
+function BasicPanel (_name, _width, _height) {
+  this.data
+  this.name = _name
+  this.width = _width
+  this.height = _height
+  this.view
+}
+
+BasicPanel.prototype.update = function () {
+  yo.update(this.view, this.render())
+}
+
+BasicPanel.prototype.hide = function () {
+  this.view.style.display = 'none'
+}
+
+BasicPanel.prototype.show = function () {
+  this.view.style.display = 'block'
+}
+
+BasicPanel.prototype.render = function () {
+  var view = yo`
+    <div css=${css.container} id='container' style=${ui.formatCss({'width': this.width})}>
+    <div style=${ui.formatCss(style.panel.title)}>
+      ${this.name}
+    </div>
+      <div style=${ui.formatCss({'height': this.height}, style.panel.tableContainer)}>
+      <pre style=${ui.formatCss({'width': this.width}, style.panel.table, style.font)} id='basicpanel' >${this.data}</pre>
+    </div>
+  </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+module.exports = BasicPanel

remix-debugger/src/ui/ButtonNavigator.js

+'use strict'
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+var yo = require('yo-yo')
+
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .stepButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .stepButton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+  }
+  .jumpButtons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .jumpButton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+  }
+  .navigator {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+  }
+  .navigator:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+`
+
+function ButtonNavigator (_parent, _traceManager) {
+  this.event = new EventManager()
+  this.intoBackDisabled = true
+  this.overBackDisabled = true
+  this.intoForwardDisabled = true
+  this.overForwardDisabled = true
+  this.jumpOutDisabled = true
+  this.jumpNextBreakpointDisabled = true
+  this.jumpPreviousBreakpointDisabled = true
+
+  this.traceManager = _traceManager
+  this.currentCall = null
+  this.revertionPoint = null
+
+  _parent.event.register('indexChanged', this, (index) => {
+    if (index < 0) return
+    if (_parent.currentStepIndex !== index) return
+
+    this.traceManager.buildCallPath(index, (error, callsPath) => {
+      if (error) {
+        console.log(error)
+        resetWarning(this)
+      } else {
+        this.currentCall = callsPath[callsPath.length - 1]
+        if (this.currentCall.reverted) {
+          this.revertionPoint = this.currentCall.return
+          this.view.querySelector('#reverted').style.display = 'block'
+          this.view.querySelector('#reverted #outofgas').style.display = this.currentCall.outOfGas ? 'inline' : 'none'
+          this.view.querySelector('#reverted #parenthasthrown').style.display = 'none'
+        } else {
+          var k = callsPath.length - 2
+          while (k >= 0) {
+            var parent = callsPath[k]
+            if (parent.reverted) {
+              this.revertionPoint = parent.return
+              this.view.querySelector('#reverted').style.display = 'block'
+              this.view.querySelector('#reverted #parenthasthrown').style.display = parent ? 'inline' : 'none'
+              this.view.querySelector('#reverted #outofgas').style.display = 'none'
+              return
+            }
+            k--
+          }
+          resetWarning(this)
+        }
+      }
+    })
+  })
+
+  this.view
+}
+
+module.exports = ButtonNavigator
+
+ButtonNavigator.prototype.render = function () {
+  var self = this
+  var view = yo`<div class="${css.buttons}">
+    <div class="${css.stepButtons}">
+      <button id='overback' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
+      <button id='intoback' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
+      <button id='intoforward' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
+      <button id='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
+    </div>
+
+    <div class="${css.jumpButtons}">
+      <button id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
+      <button id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
+      <button id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
+    </div>
+    <div id='reverted' style="display:none">
+      <button id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException', [self.revertionPoint]) }} disabled=${this.jumpOutDisabled} >
+      </button>
+      <span>State changes made during this call will be reverted.</span>
+      <span id='outofgas' style="display:none">This call will run out of gas.</span>
+      <span id='parenthasthrown' style="display:none">The parent call will throw an exception</span>
+    </div>
+  </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+ButtonNavigator.prototype.reset = function () {
+  this.intoBackDisabled = true
+  this.overBackDisabled = true
+  this.intoForwardDisabled = true
+  this.overForwardDisabled = true
+  this.jumpOutDisabled = true
+  this.jumpNextBreakpointDisabled = true
+  this.jumpPreviousBreakpointDisabled = true
+  resetWarning(this)
+}
+
+ButtonNavigator.prototype.stepChanged = function (step) {
+  this.intoBackDisabled = step <= 0
+  this.overBackDisabled = step <= 0
+  if (!this.traceManager) {
+    this.intoForwardDisabled = true
+    this.overForwardDisabled = true
+  } else {
+    var self = this
+    this.traceManager.getLength(function (error, length) {
+      if (error) {
+        self.reset()
+        console.log(error)
+      } else {
+        self.jumpNextBreakpointDisabled = step >= length - 1
+        self.jumpPreviousBreakpointDisabled = step <= 0
+        self.intoForwardDisabled = step >= length - 1
+        self.overForwardDisabled = step >= length - 1
+        var stepOut = self.traceManager.findStepOut(step)
+        self.jumpOutDisabled = stepOut === step
+      }
+      self.updateAll()
+    })
+  }
+  this.updateAll()
+}
+
+ButtonNavigator.prototype.updateAll = function () {
+  this.updateDisabled('intoback', this.intoBackDisabled)
+  this.updateDisabled('overback', this.overBackDisabled)
+  this.updateDisabled('overforward', this.overForwardDisabled)
+  this.updateDisabled('intoforward', this.intoForwardDisabled)
+  this.updateDisabled('jumpout', this.jumpOutDisabled)
+  this.updateDisabled('jumptoexception', this.jumpOutDisabled)
+  this.updateDisabled('jumpnextbreakpoint', this.jumpNextBreakpointDisabled)
+  this.updateDisabled('jumppreviousbreakpoint', this.jumpPreviousBreakpointDisabled)
+}
+
+ButtonNavigator.prototype.updateDisabled = function (id, disabled) {
+  if (disabled) {
+    document.getElementById(id).setAttribute('disabled', true)
+  } else {
+    document.getElementById(id).removeAttribute('disabled')
+  }
+}
+
+function resetWarning (self) {
+  self.view.querySelector('#reverted #outofgas').style.display = 'none'
+  self.view.querySelector('#reverted #parenthasthrown').style.display = 'none'
+  self.view.querySelector('#reverted').style.display = 'none'
+}
+
+module.exports = ButtonNavigator

remix-debugger/src/ui/CalldataPanel.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var yo = require('yo-yo')
+
+function CalldataPanel (_parent, _traceManager) {
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.basicPanel = new DropdownPanel('Call Data', {json: true})
+  this.init()
+}
+
+CalldataPanel.prototype.render = function () {
+  return yo`<div id='calldatapanel' >${this.basicPanel.render()}</div>`
+}
+
+CalldataPanel.prototype.init = function () {
+  var self = this
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+
+    self.traceManager.getCallDataAt(index, function (error, calldata) {
+      if (error) {
+        self.basicPanel.update({})
+        console.log(error)
+      } else if (self.parent.currentStepIndex === index) {
+        self.basicPanel.update(calldata)
+      }
+    })
+  })
+}
+
+module.exports = CalldataPanel

remix-debugger/src/ui/CallstackPanel.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var yo = require('yo-yo')
+
+function CallstackPanel (_parent, _traceManager) {
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.basicPanel = new DropdownPanel('Call Stack', {json: true})
+  this.init()
+}
+
+CallstackPanel.prototype.render = function () {
+  return yo`<div id='callstackpanel' >${this.basicPanel.render()}</div>`
+}
+
+CallstackPanel.prototype.init = function () {
+  var self = this
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+
+    self.traceManager.getCallStackAt(index, function (error, callstack) {
+      if (error) {
+        console.log(error)
+        self.basicPanel.update({})
+      } else if (self.parent.currentStepIndex === index) {
+        self.basicPanel.update(callstack)
+      }
+    })
+  })
+}
+
+module.exports = CallstackPanel

remix-debugger/src/ui/CodeListView.js

+'use strict'
+var style = require('./styles/basicStyles')
+var yo = require('yo-yo')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+var DropdownPanel = require('./DropdownPanel')
+var EventManager = remixLib.EventManager
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .instructions {
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+    width: 75%;
+    overflow-y: scroll;
+    max-height: 250px;
+  }
+`
+function CodeListView (_parent, _codeManager) {
+  this.event = new EventManager()
+  this.parent = _parent
+  this.codeManager = _codeManager
+  this.code
+  this.address
+  this.codeView
+  this.itemSelected
+  this.basicPanel = new DropdownPanel('Instructions', {json: false})
+  this.basicPanel.event.register('hide', () => {
+    this.event.trigger('hide', [])
+  })
+  this.basicPanel.event.register('show', () => {
+    this.event.trigger('show', [])
+  })
+  this.init()
+}
+
+CodeListView.prototype.render = function () {
+  return yo`<div id='asmcodes' >${this.basicPanel.render({height: style.instructionsList.height})}</div>`
+}
+
+CodeListView.prototype.init = function () {
+  var self = this
+  this.codeManager.event.register('changed', this, this.changed)
+  this.parent.event.register('traceUnloaded', this, function () {
+    self.changed([], '', -1)
+  })
+}
+
+CodeListView.prototype.indexChanged = function (index) {
+  if (index >= 0) {
+    if (this.itemSelected) {
+      this.itemSelected.removeAttribute('selected')
+      this.itemSelected.removeAttribute('style')
+      if (this.itemSelected.firstChild) {
+        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')
+    if (this.itemSelected.firstChild) {
+      this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'}))
+    }
+    this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetTop)
+  }
+}
+
+CodeListView.prototype.changed = function (code, address, index) {
+  if (this.address !== address) {
+    this.code = code
+    this.address = address
+    this.codeView = this.renderAssemblyItems()
+    this.basicPanel.setContent(this.codeView)
+  }
+  this.indexChanged(index)
+}
+
+CodeListView.prototype.renderAssemblyItems = function () {
+  if (this.code) {
+    var codeView = this.code.map(function (item, i) {
+      return yo`<div key=${i} value=${i}><span>${item}</span></div>`
+    })
+    return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
+      ${codeView}
+    </div>`
+  }
+}
+
+module.exports = CodeListView

remix-debugger/src/ui/DropdownPanel.js

+'use strict'
+var yo = require('yo-yo')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+var styleDropdown = require('./styles/dropdownPanel')
+var TreeView = require('./TreeView')
+var EventManager = remixLib.EventManager
+
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .title {
+    margin-top: 10px;
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    display: flex;
+    align-items: center;
+  }
+  .name {
+    font-weight: bold;
+  }
+  .icon {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin-right: 5%;
+  }
+  .eyeButton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin: 3px;
+    float: right;
+  }
+  .eyeButton:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+`
+
+function DropdownPanel (_name, _opts) {
+  this.event = new EventManager()
+  if (!_opts) {
+    _opts = {}
+  }
+  this.name = _name
+  this.header = ''
+  this.json = _opts.json
+  if (this.json) {
+    this.treeView = new TreeView(_opts)
+  }
+  this.view
+}
+
+DropdownPanel.prototype.setMessage = function (message) {
+  if (this.view) {
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+    this.message(message)
+  }
+}
+
+DropdownPanel.prototype.setLoading = function () {
+  if (this.view) {
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'inline-block'
+    this.message('')
+  }
+}
+
+DropdownPanel.prototype.update = function (_data, _header) {
+  if (this.view) {
+    this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
+    this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
+    this.view.querySelector('.dropdownpanel button.btn').style.display = 'block'
+    this.view.querySelector('.title span').innerText = _header || ' '
+    this.message('')
+    if (this.json) {
+      this.treeView.update(_data)
+    }
+  }
+}
+
+DropdownPanel.prototype.setContent = function (node) {
+  if (this.view) {
+    var parent = this.view.querySelector('.dropdownpanel div.dropdowncontent')
+    parent.replaceChild(node, parent.firstElementChild)
+  }
+}
+
+DropdownPanel.prototype.render = function (overridestyle) {
+  var content = yo`<div>Empty</div>`
+  if (this.json) {
+    content = this.treeView.render({})
+  }
+  overridestyle === undefined ? {} : overridestyle
+  var self = this
+  var view = yo`
+    <div>
+    <style>
+      @-moz-keyframes spin {
+        to { -moz-transform: rotate(359deg); }
+      }
+      @-webkit-keyframes spin {
+        to { -webkit-transform: rotate(359deg); }
+      }
+      @keyframes spin {
+        to {transform:rotate(359deg);}
+      }
+    </style>
+    <div class='${css.title} title' onclick=${function () { self.toggle() }}>
+      <div class='${css.icon} fa fa-caret-right'></div>
+      <div class=${css.name}>${this.name}</div><span></span>
+    </div>
+    <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
+      <button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
+      </button>
+      <i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
+      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
+      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div>
+      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='message' style='display:none'></div>
+    </div>
+    </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+DropdownPanel.prototype.toggleRaw = function () {
+  var raw = this.view.querySelector('.dropdownpanel .dropdownrawcontent')
+  var formatted = this.view.querySelector('.dropdownpanel .dropdowncontent')
+  raw.style.display = raw.style.display === 'none' ? 'block' : 'none'
+  formatted.style.display = formatted.style.display === 'none' ? 'block' : 'none'
+}
+
+DropdownPanel.prototype.toggle = function () {
+  var el = this.view.querySelector('.dropdownpanel')
+  var caret = this.view.querySelector('.title').firstElementChild
+  if (el.style.display === '') {
+    el.style.display = 'none'
+    caret.className = `${css.icon} fa fa-caret-right`
+    this.event.trigger('hide', [])
+  } else {
+    el.style.display = ''
+    caret.className = `${css.icon} fa fa-caret-down`
+    this.event.trigger('show', [])
+  }
+}
+
+DropdownPanel.prototype.hide = function () {
+  if (this.view) {
+    var caret = this.view.querySelector('.title').firstElementChild
+    var el = this.view.querySelector('.dropdownpanel')
+    el.style.display = 'none'
+    caret.className = `${css.icon} fa fa-caret-right`
+    this.event.trigger('hide', [])
+  }
+}
+
+DropdownPanel.prototype.show = function () {
+  if (this.view) {
+    var caret = this.view.querySelector('.title').firstElementChild
+    var el = this.view.querySelector('.dropdownpanel')
+    el.style.display = ''
+    caret.className = `${css.icon} fa fa-caret-down`
+    this.event.trigger('show', [])
+  }
+}
+
+DropdownPanel.prototype.message = function (message) {
+  if (this.view) {
+    var mes = this.view.querySelector('.dropdownpanel .message')
+    mes.innerText = message
+    mes.style.display = (message === '') ? 'none' : 'block'
+  }
+}
+
+module.exports = DropdownPanel

remix-debugger/src/ui/Ethdebugger.js

+'use strict'
+var TxBrowser = require('./TxBrowser')
+var StepManager = require('./StepManager')
+var remixCore = require('remix-core')
+var TraceManager = remixCore.trace.TraceManager
+var VmDebugger = require('./VmDebugger')
+var style = require('./styles/basicStyles')
+var remixLib = require('remix-lib')
+var global = remixLib.global
+var EventManager = remixLib.EventManager
+var yo = require('yo-yo')
+var ui = remixLib.helpers.ui
+var Web3Providers = remixLib.vm.Web3Providers
+var DummyProvider = remixLib.vm.DummyProvider
+var CodeManager = remixCore.code.CodeManager
+var remixSolidity = require('remix-solidity')
+var SolidityProxy = remixSolidity.SolidityProxy
+var InternalCallTree = remixSolidity.InternalCallTree
+
+function Ethdebugger () {
+  var self = this
+  this.event = new EventManager()
+
+  this.currentStepIndex = -1
+  this.tx
+  this.statusMessage = ''
+
+  this.view
+  this.web3Providers = new Web3Providers()
+  this.addProvider('DUMMYWEB3', new DummyProvider())
+  this.switchProvider('DUMMYWEB3')
+  this.traceManager = new TraceManager()
+  this.codeManager = new CodeManager(this.traceManager)
+  this.solidityProxy = new SolidityProxy(this.traceManager, this.codeManager)
+
+  var callTree = new InternalCallTree(this.event, this.traceManager, this.solidityProxy, this.codeManager, { includeLocalVariables: true })
+  this.callTree = callTree // TODO: currently used by browser solidity, we should improve the API
+
+  this.event.register('indexChanged', this, function (index) {
+    self.codeManager.resolveStep(index, self.tx)
+  })
+
+  this.txBrowser = new TxBrowser(this)
+  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()
+  })
+  this.stepManager = new StepManager(this, this.traceManager)
+  this.stepManager.event.register('stepChanged', this, function (stepIndex) {
+    self.stepChanged(stepIndex)
+  })
+  this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager, this.solidityProxy, callTree)
+
+  this.codeManager.event.register('changed', this, (code, address, instIndex) => {
+    this.callTree.sourceLocationTracker.getSourceLocationFromVMTraceIndex(address, this.currentStepIndex, this.solidityProxy.contracts, (error, sourceLocation) => {
+      if (!error) {
+        this.event.trigger('sourceLocationChanged', [sourceLocation])
+      }
+    })
+  })
+}
+
+Ethdebugger.prototype.setBreakpointManager = function (breakpointManager) {
+  this.breakpointManager = breakpointManager
+}
+
+Ethdebugger.prototype.web3 = function () {
+  return global.web3
+}
+
+Ethdebugger.prototype.addProvider = function (type, obj) {
+  this.web3Providers.addProvider(type, obj)
+  this.event.trigger('providerAdded', [type])
+}
+
+Ethdebugger.prototype.switchProvider = function (type) {
+  var self = this
+  this.web3Providers.get(type, function (error, obj) {
+    if (error) {
+      console.log('provider ' + type + ' not defined')
+    } else {
+      global.web3 = obj
+      self.event.trigger('providerChanged', [type])
+    }
+  })
+}
+
+Ethdebugger.prototype.setCompilationResult = function (compilationResult) {
+  if (compilationResult && compilationResult.sources && compilationResult.contracts) {
+    this.solidityProxy.reset(compilationResult)
+  } else {
+    this.solidityProxy.reset({})
+  }
+}
+
+Ethdebugger.prototype.debug = function (tx) {
+  if (tx instanceof Object) {
+    this.txBrowser.load(tx.hash)
+  } else if (tx instanceof String) {
+    this.txBrowser.load(tx)
+  }
+}
+
+Ethdebugger.prototype.render = function () {
+  var view = yo`<div style=${ui.formatCss(style.font)}>
+        <div style=${ui.formatCss(style.innerShift)}>
+          ${this.txBrowser.render()}
+          ${this.stepManager.render()}
+        </div>
+        <div style=${ui.formatCss(style.statusMessage)} >${this.statusMessage}</div>
+        ${this.vmDebugger.render()}
+     </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+Ethdebugger.prototype.unLoad = function () {
+  this.traceManager.init()
+  this.codeManager.clear()
+  this.stepManager.reset()
+  this.event.trigger('traceUnloaded')
+}
+
+Ethdebugger.prototype.stepChanged = function (stepIndex) {
+  this.currentStepIndex = stepIndex
+  this.event.trigger('indexChanged', [stepIndex])
+}
+
+Ethdebugger.prototype.startDebugging = function (blockNumber, txIndex, tx) {
+  if (this.traceManager.isLoading) {
+    return
+  }
+  this.statusMessage = 'Loading trace...'
+  yo.update(this.view, this.render())
+  console.log('loading trace...')
+  this.tx = tx
+  var self = this
+  this.traceManager.resolveTrace(tx, function (error, result) {
+    console.log('trace loaded ' + result)
+    if (result) {
+      self.statusMessage = ''
+      yo.update(self.view, self.render())
+      self.event.trigger('newTraceLoaded', [self.traceManager.trace])
+      if (self.breakpointManager && self.breakpointManager.hasBreakpoint()) {
+        self.breakpointManager.jumpNextBreakpoint(false)
+      }
+    } else {
+      self.statusMessage = error ? error.message : 'Trace not loaded'
+      yo.update(self.view, self.render())
+    }
+  })
+}
+
+module.exports = Ethdebugger

remix-debugger/src/ui/FullStoragesChanges.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixCore = require('remix-core')
+var StorageViewer = remixCore.storage.StorageViewer
+var yo = require('yo-yo')
+
+function FullStoragesChanges (_parent, _traceManager) {
+  this.storageResolver = null
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.addresses = []
+  this.view
+  this.traceLength
+  this.basicPanel = new DropdownPanel('Full Storages Changes', {json: true})
+  this.init()
+}
+
+FullStoragesChanges.prototype.render = function () {
+  var view = yo`<div id='fullstorageschangespanel' >${this.basicPanel.render()}</div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+FullStoragesChanges.prototype.init = function () {
+  var self = this
+  this.parent.event.register('newTraceLoaded', this, function (length) {
+    self.panels = []
+    self.traceManager.getAddresses(function (error, addresses) {
+      if (!error) {
+        self.addresses = addresses
+        self.basicPanel.update({})
+      }
+    })
+
+    self.traceManager.getLength(function (error, length) {
+      if (!error) {
+        self.traceLength = length
+      }
+    })
+  })
+
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+    if (!self.storageResolver) return
+
+    if (index === self.traceLength - 1) {
+      var storageJSON = {}
+      for (var k in self.addresses) {
+        var address = self.addresses[k]
+        var storageViewer = new StorageViewer({
+          stepIndex: self.parent.currentStepIndex,
+          tx: self.parent.tx,
+          address: address
+        }, self.storageResolver, self.traceManager)
+        storageViewer.storageRange(function (error, result) {
+          if (!error) {
+            storageJSON[address] = result
+            self.basicPanel.update(storageJSON)
+          }
+        })
+      }
+    } else {
+      self.basicPanel.update({})
+    }
+  })
+}
+
+module.exports = FullStoragesChanges

remix-debugger/src/ui/MemoryPanel.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+var yo = require('yo-yo')
+
+function MemoryPanel (_parent, _traceManager) {
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.basicPanel = new DropdownPanel('Memory', {
+    json: true,
+    css: {
+      'font-family': 'monospace'
+    }})
+  this.init()
+}
+
+MemoryPanel.prototype.render = function () {
+  return yo`<div id='memorypanel' >${this.basicPanel.render()}</div>`
+}
+
+MemoryPanel.prototype.init = function () {
+  var self = this
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+
+    self.traceManager.getMemoryAt(index, function (error, memory) {
+      if (error) {
+        console.log(error)
+        self.basicPanel.update({})
+      } else if (self.parent.currentStepIndex === index) {
+        self.basicPanel.update(ui.formatMemory(memory, 16))
+      }
+    })
+  })
+}
+
+module.exports = MemoryPanel

remix-debugger/src/ui/Slider.js

+'use strict'
+var style = require('./styles/sliderStyles')
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+var yo = require('yo-yo')
+var ui = remixLib.helpers.ui
+
+class Slider {
+  constructor (_traceManager, _stepOverride) {
+    this.event = new EventManager()
+    this.traceManager = _traceManager
+    this.max
+    this.disabled = true
+    this.view
+    this.solidityMode = false
+    this.stepOverride = _stepOverride
+
+    this.previousValue = null
+  }
+
+  render () {
+    var self = this
+    var view = yo`<div>
+        <input
+          id='slider'
+          style=${ui.formatCss(style.rule)}
+          type='range'
+          min=0
+          max=${this.max}
+          value=0
+          onchange=${function () { self.onChange() }}
+          oninput=${function () { self.onChange() }}
+          disabled=${this.disabled} />
+      </div>`
+    if (!this.view) {
+      this.view = view
+    }
+    return view
+  }
+
+  init (length) {
+    var slider = this.view.querySelector('#slider')
+    slider.setAttribute('max', length - 1)
+    this.max = length - 1
+    this.updateDisabled(length === 0)
+    this.disabled = length === 0
+    this.setValue(0)
+  }
+
+  onChange (event) {
+    var value = parseInt(this.view.querySelector('#slider').value)
+    if (this.stepOverride) {
+      var correctedValue = this.stepOverride(value)
+      if (correctedValue !== value) {
+        this.setValue(correctedValue)
+        value = correctedValue
+      }
+    }
+    if (value === this.previousValue) return
+    this.previousValue = value
+    this.event.trigger('moved', [value])
+  }
+
+  setValue (value) {
+    this.view.querySelector('#slider').value = value
+  }
+
+  updateDisabled (disabled) {
+    if (disabled) {
+      this.view.querySelector('#slider').setAttribute('disabled', true)
+    } else {
+      this.view.querySelector('#slider').removeAttribute('disabled')
+    }
+  }
+}
+
+module.exports = Slider

remix-debugger/src/ui/SolidityLocals.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixSolidity = require('remix-solidity')
+var localDecoder = remixSolidity.localDecoder
+var solidityTypeFormatter = require('./SolidityTypeFormatter')
+var remixCore = require('remix-core')
+var StorageViewer = remixCore.storage.StorageViewer
+var yo = require('yo-yo')
+
+class SolidityLocals {
+
+  constructor (_parent, _traceManager, _internalTreeCall) {
+    this.parent = _parent
+    this.internalTreeCall = _internalTreeCall
+    this.storageResolver = null
+    this.traceManager = _traceManager
+    this.basicPanel = new DropdownPanel('Solidity Locals', {
+      json: true,
+      formatSelf: solidityTypeFormatter.formatSelf,
+      extractData: solidityTypeFormatter.extractData
+    })
+    this.init()
+    this.view
+  }
+
+  render () {
+    this.view = yo`<div id='soliditylocals' >
+    ${this.basicPanel.render()}
+    </div>`
+    return this.view
+  }
+
+  init () {
+    var decodeTimeout = null
+    this.parent.event.register('sourceLocationChanged', this, (sourceLocation) => {
+      this.basicPanel.setMessage('')
+      if (!this.storageResolver) {
+        this.basicPanel.setMessage('storage not ready')
+        return
+      }
+      if (decodeTimeout) {
+        window.clearTimeout(decodeTimeout)
+      }
+      this.basicPanel.setLoading()
+      decodeTimeout = setTimeout(() => {
+        decode(this, sourceLocation)
+      }, 500)
+    })
+  }
+}
+
+function decode (self, sourceLocation) {
+  self.traceManager.waterfall([
+    self.traceManager.getStackAt,
+    self.traceManager.getMemoryAt,
+    self.traceManager.getCurrentCalledAddressAt],
+    self.parent.currentStepIndex,
+    (error, result) => {
+      if (!error) {
+        var stack = result[0].value
+        var memory = result[1].value
+        try {
+          var storageViewer = new StorageViewer({
+            stepIndex: self.parent.currentStepIndex,
+            tx: self.parent.tx,
+            address: result[2].value
+          }, self.storageResolver, self.traceManager)
+          localDecoder.solidityLocals(self.parent.currentStepIndex, self.internalTreeCall, stack, memory, storageViewer, sourceLocation).then((locals) => {
+            if (!locals.error) {
+              self.basicPanel.update(locals)
+            }
+          })
+        } catch (e) {
+          self.basicPanel.setMessage(e.message)
+        }
+      } else {
+        console.log(error)
+      }
+    })
+}
+module.exports = SolidityLocals

remix-debugger/src/ui/SolidityState.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixSolidity = require('remix-solidity')
+var stateDecoder = remixSolidity.stateDecoder
+var solidityTypeFormatter = require('./SolidityTypeFormatter')
+var remixCore = require('remix-core')
+var StorageViewer = remixCore.storage.StorageViewer
+var yo = require('yo-yo')
+
+function SolidityState (_parent, _traceManager, _codeManager, _solidityProxy) {
+  this.storageResolver = null
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.codeManager = _codeManager
+  this.solidityProxy = _solidityProxy
+  this.basicPanel = new DropdownPanel('Solidity State', {
+    json: true,
+    formatSelf: solidityTypeFormatter.formatSelf,
+    extractData: solidityTypeFormatter.extractData
+  })
+  this.init()
+  this.view
+  this.stateVariablesByAddresses = {}
+  _parent.event.register('traceUnloaded', () => { this.stateVariablesByAddresses = {} })
+  _parent.event.register('newTraceLoaded', () => { this.stateVariablesByAddresses = {} })
+}
+
+SolidityState.prototype.render = function () {
+  if (!this.view) {
+    this.view = yo`<div id='soliditystate' >
+      ${this.basicPanel.render()}
+    </div>`
+  }
+  return this.view
+}
+
+SolidityState.prototype.init = function () {
+  var self = this
+  var decodeTimeout = null
+  this.parent.event.register('indexChanged', this, function (index) {
+    self.basicPanel.setMessage('')
+    if (index < 0) {
+      self.basicPanel.setMessage('invalid step index')
+      return
+    }
+
+    if (self.parent.currentStepIndex !== index) return
+    if (!self.solidityProxy.loaded()) {
+      self.basicPanel.setMessage('no source has been specified')
+      return
+    }
+
+    if (!self.storageResolver) {
+      return
+    }
+    if (decodeTimeout) {
+      window.clearTimeout(decodeTimeout)
+    }
+    self.basicPanel.setLoading()
+    decodeTimeout = setTimeout(() => {
+      decode(self, index)
+    }, 500)
+  })
+}
+
+function decode (self, index) {
+  self.traceManager.getCurrentCalledAddressAt(self.parent.currentStepIndex, (error, address) => {
+    if (error) {
+      self.basicPanel.update({})
+      console.log(error)
+    } else {
+      if (self.stateVariablesByAddresses[address]) {
+        extractStateVariables(self, self.stateVariablesByAddresses[address], address)
+      } else {
+        self.solidityProxy.extractStateVariablesAt(index, function (error, stateVars) {
+          if (error) {
+            self.basicPanel.update({})
+            console.log(error)
+          } else {
+            self.stateVariablesByAddresses[address] = stateVars
+            extractStateVariables(self, stateVars, address)
+          }
+        })
+      }
+    }
+  })
+}
+
+function extractStateVariables (self, stateVars, address) {
+  var storageViewer = new StorageViewer({
+    stepIndex: self.parent.currentStepIndex,
+    tx: self.parent.tx,
+    address: address
+  }, self.storageResolver, self.traceManager)
+  stateDecoder.decodeState(stateVars, storageViewer).then((result) => {
+    self.basicPanel.setMessage('')
+    if (!result.error) {
+      self.basicPanel.update(result)
+    } else {
+      self.basicPanel.setMessage(result.error)
+    }
+  })
+}
+
+module.exports = SolidityState

remix-debugger/src/ui/SolidityTypeFormatter.js

+'use strict'
+var yo = require('yo-yo')
+var BN = require('ethereumjs-util').BN
+
+module.exports = {
+  formatSelf: formatSelf,
+  extractData: extractData
+}
+
+function formatSelf (key, data) {
+  var style = fontColor(data)
+  var keyStyle = data.isProperty ? 'color:#847979' : ''
+  if (data.type === 'string') {
+    data.self = JSON.stringify(data.self)
+  }
+  return yo`<label style=${keyStyle}>${key}: <label style=${style}>${data.self}</label><label style='font-style:italic'> ${data.isProperty || !data.type ? '' : ' ' + data.type}</label></label>`
+}
+
+function extractData (item, parent, key) {
+  var ret = {}
+  if (item.isProperty) {
+    return item
+  }
+  if (item.type.lastIndexOf(']') === item.type.length - 1) {
+    ret.children = (item.value || []).map(function (item, index) {
+      return {key: index, value: item}
+    })
+    ret.children.unshift({
+      key: 'length',
+      value: {
+        self: (new BN(item.length.replace('0x', ''), 16)).toString(10),
+        type: 'uint',
+        isProperty: true
+      }
+    })
+    ret.isArray = true
+    ret.self = parent.isArray ? '' : item.type
+  } else if (item.type.indexOf('struct') === 0) {
+    ret.children = Object.keys((item.value || {})).map(function (key) {
+      return {key: key, value: item.value[key]}
+    })
+    ret.self = item.type
+    ret.isStruct = true
+  } else if (item.type.indexOf('mapping') === 0) {
+    ret.children = Object.keys((item.value || {})).map(function (key) {
+      return {key: key, value: item.value[key]}
+    })
+    ret.isMapping = true
+    ret.self = item.type
+  } else {
+    ret.children = []
+    ret.self = item.value
+    ret.type = item.type
+  }
+  return ret
+}
+
+function fontColor (data) {
+  var color = '#124B46'
+  if (data.isArray || data.isStruct || data.isMapping) {
+    color = '#847979'
+  } else if (data.type.indexOf('uint') === 0 ||
+              data.type.indexOf('int') === 0 ||
+              data.type.indexOf('bool') === 0 ||
+              data.type.indexOf('enum') === 0) {
+    color = '#0F0CE9'
+  } else if (data.type === 'string') {
+    color = '#E91E0C'
+  }
+  return 'color:' + color
+}

remix-debugger/src/ui/StackPanel.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+var yo = require('yo-yo')
+
+function StackPanel (_parent, _traceManager) {
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.basicPanel = new DropdownPanel('Stack', {json: true})
+  this.init()
+}
+
+StackPanel.prototype.render = function () {
+  return yo`<div id='stackpanel' >${this.basicPanel.render()}</div>`
+}
+
+StackPanel.prototype.init = function () {
+  var self = this
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+
+    self.traceManager.getStackAt(index, function (error, stack) {
+      if (error) {
+        self.basicPanel.update({})
+        console.log(error)
+      } else if (self.parent.currentStepIndex === index) {
+        self.basicPanel.update(self.format(stack))
+      }
+    })
+  })
+}
+
+StackPanel.prototype.format = function (stack) {
+  var ret = []
+  stack.map(function (item, i) {
+    var hex = ui.normalizeHex(item)
+    ret.push(hex)
+  })
+  return ret
+}
+
+module.exports = StackPanel

remix-debugger/src/ui/StepDetail.js

+'use strict'
+var yo = require('yo-yo')
+var DropdownPanel = require('./DropdownPanel')
+
+function StepDetail (_parent, _traceManager) {
+  this.parent = _parent
+  this.traceManager = _traceManager
+
+  this.basicPanel = new DropdownPanel('Step detail', {json: true})
+
+  this.detail = initDetail()
+  this.view
+  this.init()
+}
+
+StepDetail.prototype.render = function () {
+  return yo`<div id='stepdetail' >${this.basicPanel.render()}</div>`
+}
+
+StepDetail.prototype.init = function () {
+  var self = this
+  this.parent.event.register('traceUnloaded', this, function () {
+    self.detail = initDetail()
+    self.basicPanel.update(self.detail)
+  })
+
+  this.parent.event.register('newTraceLoaded', this, function () {
+    self.detail = initDetail()
+    self.basicPanel.update(self.detail)
+  })
+
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (index < 0) return
+
+    self.detail['vm trace step'] = index
+
+    self.traceManager.getCurrentStep(index, function (error, step) {
+      if (error) {
+        console.log(error)
+        self.detail['execution step'] = '-'
+      } else {
+        self.detail['execution step'] = step
+      }
+      self.basicPanel.update(self.detail)
+    })
+
+    self.traceManager.getMemExpand(index, function (error, addmem) {
+      if (error) {
+        console.log(error)
+        self.detail['add memory'] = '-'
+      } else {
+        self.detail['add memory'] = addmem
+      }
+      self.basicPanel.update(self.detail)
+    })
+
+    self.traceManager.getStepCost(index, function (error, gas) {
+      if (error) {
+        console.log(error)
+        self.detail.gas = '-'
+      } else {
+        self.detail.gas = gas
+      }
+      self.basicPanel.update(self.detail)
+    })
+
+    self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
+      if (error) {
+        console.log(error)
+        self.detail['loaded address'] = '-'
+      } else {
+        self.detail['loaded address'] = address
+      }
+      self.basicPanel.update(self.detail)
+    })
+
+    self.traceManager.getRemainingGas(index, function (error, remaingas) {
+      if (error) {
+        console.log(error)
+        self.detail['remaining gas'] = '-'
+      } else {
+        self.detail['remaining gas'] = remaingas
+      }
+      self.basicPanel.update(self.detail)
+    })
+  })
+}
+
+module.exports = StepDetail
+
+function initDetail () {
+  return {
+    'vm trace step': '-',
+    'execution step': '-',
+    'add memory': '',
+    'gas': '',
+    'remaining gas': '-',
+    'loaded address': '-'
+  }
+}

remix-debugger/src/ui/StepManager.js

+'use strict'
+var ButtonNavigator = require('./ButtonNavigator')
+var Slider = require('./Slider')
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+var yo = require('yo-yo')
+var util = remixLib.util
+
+function StepManager (_parent, _traceManager) {
+  this.event = new EventManager()
+  this.parent = _parent
+  this.traceManager = _traceManager
+  this.sourceMapByAddress = {}
+  this.solidityMode = false
+
+  var self = this
+  this.parent.event.register('newTraceLoaded', this, function () {
+    self.traceManager.getLength(function (error, length) {
+      if (error) {
+        console.log(error)
+      } else {
+        self.slider.init(length)
+        self.init()
+      }
+    })
+  })
+
+  this.slider = new Slider(this.traceManager, (step) => {
+    return this.solidityMode ? this.resolveToReducedTrace(step, 0) : step
+  })
+  this.slider.event.register('moved', this, function (step) {
+    self.sliderMoved(step)
+  })
+
+  this.parent.callTree.event.register('callTreeReady', () => {
+    this.solidityMode = true
+    this.parent.vmDebugger.asmCode.event.register('hide', () => {
+      this.solidityMode = this.parent.callTree.reducedTrace.length !== 0
+    })
+    this.parent.vmDebugger.asmCode.event.register('show', () => {
+      this.solidityMode = false
+    })
+    if (this.parent.callTree.functionCallStack.length) {
+      this.jumpTo(this.parent.callTree.functionCallStack[0])
+    }
+  })
+
+  this.buttonNavigator = new ButtonNavigator(_parent, this.traceManager)
+  this.buttonNavigator.event.register('stepIntoBack', this, function () {
+    self.stepIntoBack()
+  })
+  this.buttonNavigator.event.register('stepIntoForward', this, function () {
+    self.stepIntoForward()
+  })
+  this.buttonNavigator.event.register('stepOverBack', this, function () {
+    self.stepOverBack()
+  })
+  this.buttonNavigator.event.register('stepOverForward', this, function () {
+    self.stepOverForward()
+  })
+  this.buttonNavigator.event.register('jumpOut', this, function () {
+    self.jumpOut()
+  })
+  this.buttonNavigator.event.register('jumpToException', this, function (exceptionIndex) {
+    self.jumpTo(exceptionIndex)
+  })
+  this.buttonNavigator.event.register('jumpNextBreakpoint', (exceptionIndex) => {
+    self.parent.breakpointManager.jumpNextBreakpoint(true)
+  })
+  this.buttonNavigator.event.register('jumpPreviousBreakpoint', (exceptionIndex) => {
+    self.parent.breakpointManager.jumpPreviousBreakpoint(true)
+  })
+}
+
+StepManager.prototype.resolveToReducedTrace = function (value, incr) {
+  if (this.parent.callTree.reducedTrace.length) {
+    var nextSource = util.findClosestIndex(value, this.parent.callTree.reducedTrace)
+    nextSource = nextSource + incr
+    if (nextSource <= 0) {
+      nextSource = 0
+    } else if (nextSource > this.parent.callTree.reducedTrace.length) {
+      nextSource = this.parent.callTree.reducedTrace.length - 1
+    }
+    return this.parent.callTree.reducedTrace[nextSource]
+  }
+  return value
+}
+
+StepManager.prototype.render = function () {
+  return (
+  yo`<div>
+        ${this.slider.render()}
+        ${this.buttonNavigator.render()}
+      </div>`
+  )
+}
+
+StepManager.prototype.reset = function () {
+  this.slider.setValue(0)
+  this.currentStepIndex = 0
+  this.buttonNavigator.reset()
+}
+
+StepManager.prototype.init = function () {
+  this.slider.setValue(0)
+  this.changeState(0)
+}
+
+StepManager.prototype.newTraceAvailable = function () {
+  this.init()
+}
+
+StepManager.prototype.jumpTo = function (step) {
+  if (!this.traceManager.inRange(step)) {
+    return
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.sliderMoved = function (step) {
+  if (!this.traceManager.inRange(step)) {
+    return
+  }
+  this.changeState(step)
+}
+
+StepManager.prototype.stepIntoForward = function () {
+  if (!this.traceManager.isLoaded()) {
+    return
+  }
+  var step = this.currentStepIndex
+  if (this.solidityMode) {
+    step = this.resolveToReducedTrace(step, 1)
+  } else {
+    step += 1
+  }
+  if (!this.traceManager.inRange(step)) {
+    return
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.stepIntoBack = function () {
+  if (!this.traceManager.isLoaded()) {
+    return
+  }
+  var step = this.currentStepIndex
+  if (this.solidityMode) {
+    step = this.resolveToReducedTrace(step, -1)
+  } else {
+    step -= 1
+  }
+  if (!this.traceManager.inRange(step)) {
+    return
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.stepOverForward = function () {
+  if (!this.traceManager.isLoaded()) {
+    return
+  }
+  var step = this.traceManager.findStepOverForward(this.currentStepIndex)
+  if (this.solidityMode) {
+    step = this.resolveToReducedTrace(step, 1)
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.stepOverBack = function () {
+  if (!this.traceManager.isLoaded()) {
+    return
+  }
+  var step = this.traceManager.findStepOverBack(this.currentStepIndex)
+  if (this.solidityMode) {
+    step = this.resolveToReducedTrace(step, -1)
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.jumpOut = function () {
+  if (!this.traceManager.isLoaded()) {
+    return
+  }
+  var step = this.traceManager.findStepOut(this.currentStepIndex)
+  if (this.solidityMode) {
+    step = this.resolveToReducedTrace(step, 0)
+  }
+  this.slider.setValue(step)
+  this.changeState(step)
+}
+
+StepManager.prototype.changeState = function (step) {
+  this.currentStepIndex = step
+  this.buttonNavigator.stepChanged(step)
+  this.event.trigger('stepChanged', [step])
+}
+
+module.exports = StepManager

remix-debugger/src/ui/StoragePanel.js

+'use strict'
+var DropdownPanel = require('./DropdownPanel')
+var remixCore = require('remix-core')
+var StorageViewer = remixCore.storage.StorageViewer
+var yo = require('yo-yo')
+
+function StoragePanel (_parent, _traceManager) {
+  this.parent = _parent
+  this.storageResolver = null
+  this.traceManager = _traceManager
+  this.basicPanel = new DropdownPanel('Storage', {json: true})
+  this.init()
+  this.disabled = false
+}
+
+StoragePanel.prototype.render = function () {
+  return yo`<div id='storagepanel' >${this.basicPanel.render()}</div>`
+}
+
+StoragePanel.prototype.init = function () {
+  var self = this
+  this.parent.event.register('indexChanged', this, function (index) {
+    if (self.disabled) return
+    if (index < 0) return
+    if (self.parent.currentStepIndex !== index) return
+    if (!self.storageResolver) return
+
+    this.traceManager.getCurrentCalledAddressAt(index, (error, address) => {
+      if (!error) {
+        var storageViewer = new StorageViewer({
+          stepIndex: self.parent.currentStepIndex,
+          tx: self.parent.tx,
+          address: address
+        }, self.storageResolver, self.traceManager)
+
+        storageViewer.storageRange((error, storage) => {
+          if (error) {
+            console.log(error)
+            self.basicPanel.update({})
+          } else if (self.parent.currentStepIndex === index) {
+            var header = storageViewer.isComplete(address) ? 'completely loaded' : 'partially loaded...'
+            self.basicPanel.update(storage, header)
+          }
+        })
+      }
+    })
+  })
+}
+
+module.exports = StoragePanel

remix-debugger/src/ui/TreeView.js

+'use strict'
+var yo = require('yo-yo')
+var style = require('./styles/treeView')
+var remixLib = require('remix-lib')
+var ui = remixLib.helpers.ui
+
+class TreeView {
+
+  constructor (opts) {
+    this.extractData = opts.extractData || this.extractDataDefault
+    this.formatSelf = opts.formatSelf || this.formatSelfDefault
+    this.view = null
+    this.cssLabel = ui.formatCss(opts.css || {}, style.label)
+    this.cssUl = ui.formatCss(opts.css || {}, style.cssUl)
+    this.cssLi = ui.formatCss(opts.css || {}, style.cssLi)
+    this.nodeIsExpanded = {}
+  }
+
+  render (json) {
+    var view = this.renderProperties(json, false)
+    if (!this.view) {
+      this.view = view
+    }
+    return view
+  }
+
+  update (json) {
+    if (this.view) {
+      yo.update(this.view, this.render(json))
+    }
+  }
+
+  renderObject (item, parent, key, expand, keyPath) {
+    var data = this.extractData(item, parent, key)
+    var children = (data.children || []).map((child, index) => {
+      return this.renderObject(child.value, data, child.key, expand, keyPath + ',' + child.key)
+    })
+    return this.formatData(key, data, children, expand, keyPath)
+  }
+
+  renderProperties (json, expand) {
+    var children = Object.keys(json).map((innerkey) => {
+      return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
+    })
+    return yo`<ul style=${this.cssUl}>${children}</ul>`
+  }
+
+  formatData (key, data, children, expand, keyPath) {
+    var label = yo`<div style=${this.cssLabel}><div class="fa fa-caret-right" style=${ui.formatCss(style.caret)}></div><span style=${ui.formatCss(style.data)}>${this.formatSelf(key, data)}</span></div>`
+    var renderedChildren = ''
+    if (children.length) {
+      renderedChildren = yo`<ul style=${this.cssUl}>${children}</ul>`
+      renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
+      label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
+      var self = this
+      label.onclick = function () {
+        this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
+        var list = this.parentElement.querySelector('ul')
+        list.style.display = list.style.display === 'none' ? 'block' : 'none'
+        self.nodeIsExpanded[keyPath] = list.style.display === 'block'
+      }
+    } else {
+      label.firstElementChild.style.visibility = 'hidden'
+    }
+    return yo`<li style=${this.cssLi}>${label}${renderedChildren}</li>`
+  }
+
+  formatSelfDefault (key, data) {
+    return yo`<label>${key}: ${data.self}</label>`
+  }
+
+  extractDataDefault (item, parent, key) {
+    var ret = {}
+    if (item instanceof Array) {
+      ret.children = item.map((item, index) => {
+        return {key: index, value: item}
+      })
+      ret.self = 'Array'
+    } else if (item instanceof Object) {
+      ret.children = Object.keys(item).map((key) => {
+        return {key: key, value: item[key]}
+      })
+      ret.self = 'Object'
+    } else {
+      ret.self = item
+      ret.children = []
+    }
+    return ret
+  }
+}
+
+module.exports = TreeView

remix-debugger/src/ui/TxBrowser.js

+var remixLib = require('remix-lib')
+var global = remixLib.global
+var EventManager = remixLib.EventManager
+var traceHelper = remixLib.helpers.trace
+var yo = require('yo-yo')
+var ui = remixLib.helpers.ui
+var init = remixLib.init
+var DropdownPanel = require('./DropdownPanel')
+var style = require('./styles/basicStyles')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+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}
+    min-width: 30px;
+    margin: 3px;
+  }
+  .txbuttons {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .txbutton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+  }
+  .txbutton:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+  .txinfo {
+    margin-top: 5px;
+  }
+`
+function TxBrowser (_parent) {
+  this.event = new EventManager()
+
+  this.blockNumber
+  this.txNumber
+  this.view
+  this.displayConnectionSetting = true
+  this.basicPanel = new DropdownPanel('Transaction', {json: true})
+  this.basicPanel.data = {}
+  var self = this
+  _parent.event.register('providerChanged', this, function (provider) {
+    self.displayConnectionSetting = provider === 'INTERNAL'
+    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 = ''
+  this.basicPanel.update({})
+  this.basicPanel.hide()
+  if (this.view) {
+    yo.update(this.view, this.render())
+  }
+}
+
+TxBrowser.prototype.submit = function () {
+  if (!this.txNumber) {
+    return
+  }
+  this.event.trigger('newTxLoading', [this.blockNumber, this.txNumber])
+  try {
+    var self = this
+    if (this.txNumber.indexOf('0x') !== -1) {
+      global.web3.eth.getTransaction(this.txNumber, function (error, result) {
+        self.update(error, result)
+      })
+    } else {
+      global.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
+    }
+  }
+  this.basicPanel.update(info)
+}
+
+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) {
+  this.txNumber = txHash
+  this.submit()
+}
+
+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 style=${ui.formatCss(style.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='fa fa-play ${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}></button>
+            <button id='unload' class='fa fa-stop ${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}></button>
+          </div>
+        </div>
+        <span id='error'></span>
+        <div style=${css.txinfo} id='txinfo'>
+          ${this.basicPanel.render()}
+        </div>
+      </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+module.exports = TxBrowser

remix-debugger/src/ui/VmDebugger.js

+'use strict'
+var CodeListView = require('./CodeListView')
+var CalldataPanel = require('./CalldataPanel')
+var MemoryPanel = require('./MemoryPanel')
+var CallstackPanel = require('./CallstackPanel')
+var StackPanel = require('./StackPanel')
+var StoragePanel = require('./StoragePanel')
+var FullStoragesChangesPanel = require('./FullStoragesChanges')
+var StepDetail = require('./StepDetail')
+var DropdownPanel = require('./DropdownPanel')
+var SolidityState = require('./SolidityState')
+var SolidityLocals = require('./SolidityLocals')
+var remixCore = require('remix-core')
+var StorageResolver = remixCore.storage.StorageResolver
+var yo = require('yo-yo')
+
+function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _callTree) {
+  this.asmCode = new CodeListView(_parent, _codeManager)
+  this.stackPanel = new StackPanel(_parent, _traceManager)
+  this.storagePanel = new StoragePanel(_parent, _traceManager)
+  this.memoryPanel = new MemoryPanel(_parent, _traceManager)
+  this.calldataPanel = new CalldataPanel(_parent, _traceManager)
+  this.callstackPanel = new CallstackPanel(_parent, _traceManager)
+  this.stepDetail = new StepDetail(_parent, _traceManager)
+  this.solidityState = new SolidityState(_parent, _traceManager, _codeManager, _solidityProxy)
+  this.solidityLocals = new SolidityLocals(_parent, _traceManager, _callTree)
+
+  /* Return values - */
+  this.returnValuesPanel = new DropdownPanel('Return Value', {json: true})
+  this.returnValuesPanel.data = {}
+  _parent.event.register('indexChanged', this.returnValuesPanel, function (index) {
+    var self = this
+    _traceManager.getReturnValue(index, function (error, returnValue) {
+      if (error) {
+        self.update([error])
+      } else if (_parent.currentStepIndex === index) {
+        self.update([returnValue])
+      }
+    })
+  })
+  /* Return values - */
+
+  this.fullStoragesChangesPanel = new FullStoragesChangesPanel(_parent, _traceManager)
+
+  this.view
+  var self = this
+  _parent.event.register('newTraceLoaded', this, function () {
+    var storageResolver = new StorageResolver()
+    self.storagePanel.storageResolver = storageResolver
+    self.solidityState.storageResolver = storageResolver
+    self.solidityLocals.storageResolver = storageResolver
+    self.fullStoragesChangesPanel.storageResolver = storageResolver
+    self.view.style.display = 'block'
+  })
+  _parent.event.register('traceUnloaded', this, function () {
+    self.view.style.display = 'none'
+  })
+  _parent.callTree.event.register('callTreeReady', () => {
+    if (_parent.callTree.reducedTrace.length) {
+      self.solidityLocals.basicPanel.show()
+      self.solidityState.basicPanel.show()
+    } else {
+      self.asmCode.basicPanel.show()
+    }
+  })
+}
+
+VmDebugger.prototype.render = function () {
+  var view = yo`<div id='vmdebugger' style='display:none'>
+        <div>
+            ${this.asmCode.render()}
+            ${this.solidityLocals.render()}
+            ${this.solidityState.render()}
+            ${this.stepDetail.render()}
+            ${this.stackPanel.render()}
+            ${this.storagePanel.render()}
+            ${this.memoryPanel.render()}
+            ${this.calldataPanel.render()}
+            ${this.callstackPanel.render()}
+            ${this.returnValuesPanel.render()}
+            ${this.fullStoragesChangesPanel.render()}
+          </div>
+      </div>`
+  if (!this.view) {
+    this.view = view
+  }
+  return view
+}
+
+module.exports = VmDebugger

remix-debugger/src/ui/styles/basicStyles.js

+'use strict'
+module.exports = {
+  truncate: {
+    'white-space': 'nowrap',
+    'overflow': 'hidden',
+    'text-overflow': 'ellipsis',
+    'margin-right': '5px'
+  },
+  font: {
+    'font-family': 'arial,sans-serif'
+  },
+  innerShift: {
+    'padding': '2px',
+    'margin-left': '10px'
+  },
+  container: {
+    'margin': '10px',
+    'padding': '5px'
+  },
+  statusMessage: {
+    'margin-left': '15px'
+  },
+  address: {
+    'font-style': 'italic'
+  },
+  instructionsList: {
+    'width': '52%',
+    'overflow-y': 'scroll',
+    'max-height': '250px',
+    'margin': '0',
+    'margin-left': '10px',
+    'padding': '2px'
+  },
+  transactionInfo: {
+    'margin-top': '5px'
+  },
+  panel: {
+    container: {
+      'border': '1px solid',
+      'width': '70%'
+    },
+    tableContainer: {
+      'height': '50%',
+      'overflow-y': 'auto'
+    },
+    table: {
+      'padding': '5px'
+    },
+    title: {
+      'padding': '5px',
+      'font-style': 'italic'
+    }
+  },
+  hidden: {
+    'display': 'none'
+  },
+  display: {
+    'display': 'block'
+  },
+  inline: {
+    'display': 'inline-block'
+  },
+  vmargin: {
+    'margin-top': '10px',
+    'margin-bottom': '10px'
+  },
+  button: {
+    'border-color': 'transparent',
+    'border-radius': '3px',
+    'border': '.3px solid ${colors.veryLightGrey}',
+    'cursor': 'pointer',
+    'min-height': '25px',
+    'max-height': '25px',
+    'padding': '3px',
+    'min-width': '100px',
+    'font-size': '12px',
+    'overflow': 'hidden',
+    'word-break': 'normal',
+    'background-color': 'hsla(0, 0%, 40%, .2)',
+    'color': 'hsla(0, 0%, 40%, 1)',
+    'margin': '3px',
+    'text-decoration': 'none'
+  }
+}

remix-debugger/src/ui/styles/dropdownPanel.js

+'use strict'
+module.exports = {
+  title: {
+    'border': '1px solid #dadada',
+    'background-color': 'white',
+    'width': '100%',
+    'color': '#363f47',
+    'margin-top': '5px',
+    'cursor': 'pointer'
+  },
+  titleInner: {
+    'display': 'inline-block'
+  },
+  content: {
+    'color': '#111111',
+    'width': '100%',
+    'min-height': '20px'
+  },
+  inner: {
+    'padding': '2px',
+    'word-break': 'break-all'
+  },
+  copyBtn: {
+    'float': 'right',
+    'margin-top': '3px'
+  },
+  caret: {
+    'margin-left': '10px',
+    'margin-right': '10px'
+  }
+}

remix-debugger/src/ui/styles/sliderStyles.js

+'use strict'
+module.exports = {
+  rule: {
+    'width': '100%'
+  }
+}

remix-debugger/src/ui/styles/treeView.js

+'use strict'
+module.exports = {
+  cssUl: {
+    'list-style-type': 'none',
+    '-webkit-margin-before': '0px',
+    '-webkit-margin-after': '0px',
+    '-webkit-margin-start': '0px',
+    '-webkit-margin-end': '0px',
+    '-webkit-padding-start': '0px'
+  },
+  cssLi: {
+    'list-style-type': 'none',
+    '-webkit-margin-before': '0px',
+    '-webkit-margin-after': '0px',
+    '-webkit-margin-start': '0px',
+    '-webkit-margin-end': '0px',
+    '-webkit-padding-start': '0px',
+    'margin-left': '10px'
+  },
+  label: {
+    'vertical-align': 'top',
+    'font-family': 'arial,sans-serif'
+  },
+  caret: {
+    'margin-top': '3px',
+    'width': '10px'
+  },
+  data: {
+  }
+}

remix-debugger/test-browser/resources/insertTestWeb3.js

+/* global XMLHttpRequest */
+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.storageRangeAt = function (blockNumber, txIndex, address, start, size, callback) {
+    callback(null, { storage: {}, complete: true })
+  }
+
+  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-browser/resources/testWeb3.json', function (result) {
+  var data = JSON.parse(result)
+  waitForRemix(data)
+})
+

remix-debugger/test-browser/test/init.js

+module.exports = function (browser, callback) {
+  extendBrowser(browser)
+  browser
+    .url('http://127.0.0.1:8080')
+    .injectScript('test-browser/resources/insertTestWeb3.js', function () {
+      // wait for the script to load test web3...
+      setTimeout(function () {
+        callback()
+      }, 5000)
+    })
+}
+
+function extendBrowser (browser) {
+  browser.multipleClick = function (id, time) {
+    for (var k = 0; k < time; k++) {
+      browser.click(id)
+    }
+    return browser
+  }
+
+  browser.assertCurrentSelectedItem = function (expected) {
+    browser.execute(function (id) {
+      var node = document.querySelector('#asmcodes div div[selected="selected"] span')
+      return node.innerText
+    }, [''], function (returnValue) {
+      browser.assert.equal(returnValue.value, expected)
+    })
+    return browser
+  }
+
+  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.assertStepDetail = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) {
+    assertPanel('#stepdetail', browser, ['vmtracestep:' + vmtracestepinfo, 'executionstep:' + stepinfo, 'addmemory:' + addmemoryinfo, 'gas:' + gasinfo, 'remaininggas:' + remaininggasinfo, 'loadedaddress:' + loadedaddressinfo])
+    return browser
+  }
+
+  browser.assertStack = function (value) {
+    return assertPanel('#stackpanel', browser, value)
+  }
+
+  browser.assertStorageChanges = function (value) {
+    return assertPanel('#storagepanel', browser, value)
+  }
+
+  browser.assertMemory = function (value) {
+    return assertPanel('#memorypanel', browser, value)
+  }
+
+  browser.assertCallData = function (value) {
+    return assertPanel('#calldatapanel', browser, value)
+  }
+
+  browser.assertCallStack = function (value) {
+    return assertPanel('#callstackpanel', browser, value)
+  }
+
+  browser.assertStackValue = function (index, value) {
+    return assertPanelValue('#stackpanel', browser, index, value)
+  }
+
+  browser.assertStorageChangesValue = function (index, value) {
+    return assertPanelValue('#storagepanel', browser, index, value)
+  }
+
+  browser.assertMemoryValue = function (index, value) {
+    return assertPanelValue('#memorypanel', browser, index, value)
+  }
+
+  browser.assertCallStackValue = function (index, value) {
+    return assertPanelValue('#callstackpanel', browser, index, value)
+  }
+
+  browser.debugerKeyCode = {
+    'Enter': 13,
+    'Up': 38,
+    'Down': 40,
+    'Right': '39',
+    'Left': 37,
+    'Esc': 27,
+    'SpaceBar': 32,
+    'Ctrl': 17,
+    'Alt': 18,
+    'Shift': 16
+  }
+
+/* browser.sendKeys is not working for safari */
+/* still not working properly
+browser.fireEvent = function (el, key, times, callback) {
+  var data = {
+    'id': el.substring(1),
+    'key': key,
+    'times': times
+  }
+  browser.execute(function (data) {
+    data = JSON.parse(data)
+    var el = document.getElementById(data.id)
+    var eventObj
+    console.log(el)
+    console.log(data)
+    var k = 0
+    if (document.createEventObject) {
+      eventObj = document.createEventObject()
+      eventObj.keyCode = data.key
+      while (k < data.times) {
+        console.log('firing brfore createEventObject')
+        el.fireEvent('onkeypress', eventObj)
+        console.log('firing')
+        k++
+      }
+    } else if (typeof (KeyboardEvent) === 'function') {
+      eventObj = new KeyboardEvent('keyup')
+      eventObj.key = data.key
+      eventObj.which = data.key
+      while (k < data.times) {
+        console.log('firing brfore createEvent')
+        el.dispatchEvent(eventObj)
+        console.log('firing')
+        k++
+      }
+    }
+  }, [JSON.stringify(data)], function () {
+    callback()
+  })
+}
+*/
+}
+
+function assertPanel (id, browser, value) {
+  var selector = '.dropdownpanel div.dropdowncontent ul'
+  browser.execute(function (id, selector) {
+    var el = document.getElementById(id.replace('#', '').replace('.', ''))
+    var node = el.querySelector(selector)
+    var ret = []
+    for (var k = 0; k < node.children.length; k++) {
+      if (node.children[k].innerText) {
+        ret.push(node.children[k].innerText)
+      }
+    }
+    return ret
+  }, [id, selector], function (returnValues) {
+    value.map(function (item, index) {
+      if (returnValues.value.length) {
+        var testValue = returnValues.value[index].replace(/\r\n/g, '').replace(/\t/g, '').replace(/\s/g, '')
+        browser.assert.equal(testValue, value[index])
+      } else {
+        browser.assert.equal(item, '')
+      }
+    })
+  })
+  return browser
+}
+
+function assertPanelValue (id, browser, index, value) {
+  var selector = id + ' .dropdownpanel .dropdowncontent ul'
+  browser.execute(function (id, index) {
+    var node = document.querySelector(id)
+    return node.children[index].innerText
+  }, [selector, index], function (returnValues) {
+    var testValue = returnValues.value.replace(/\r\n/g, '').replace(/\t/g, '').replace(/\s/g, '')
+    browser.assert.equal(testValue, value)
+  })
+  return browser
+}

remix-debugger/test-browser/test/sauce.js

+const https = require('https')
+
+module.exports = function sauce (callback) {
+  const currentTest = this.client.currentTest
+  const username = this.client.options.username
+  const sessionId = this.client.capabilities['webdriver.remote.sessionid']
+  const accessKey = this.client.options.accessKey
+
+  if (!this.client.launch_url.match(/saucelabs/)) {
+    console.log('Not saucelabs ...')
+    return callback()
+  }
+
+  if (!username || !accessKey || !sessionId) {
+    console.log(this.client)
+    console.log('No username, accessKey or sessionId')
+    return callback()
+  }
+
+  const passed = currentTest.results.passed === currentTest.results.tests
+
+  const data = JSON.stringify({passed})
+
+  const requestPath = `/rest/v1/${username}/jobs/${sessionId}`
+
+  function responseCallback (res) {
+    res.setEncoding('utf8')
+    console.log('Response: ', res.statusCode, JSON.stringify(res.headers))
+    res.on('data', function onData (chunk) {
+      console.log('BODY: ' + chunk)
+    })
+    res.on('end', function onEnd () {
+      console.info('Finished updating saucelabs')
+      callback()
+    })
+  }
+
+  try {
+    console.log('Updating saucelabs', requestPath)
+
+    const req = https.request({
+      hostname: 'saucelabs.com',
+      path: requestPath,
+      method: 'PUT',
+      auth: `${username}:${accessKey}`,
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': data.length
+      }
+    }, responseCallback)
+
+    req.on('error', function onError (e) {
+      console.log('problem with request: ' + e.message)
+    })
+    req.write(data)
+    req.end()
+  } catch (error) {
+    console.log('Error', error)
+    callback()
+  }
+}

remix-debugger/test-browser/test/vmdebugger.js

+'use strict'
+var init = require('./init')
+var sauce = require('./sauce')
+
+module.exports = {
+  beforeEach: function (browser, done) {
+    try {
+      init(browser, function () {
+        done()
+      })
+    } catch (e) {
+      var mes = 'error ' + e.message
+      console.log(mes)
+      done(mes)
+    }
+  },
+
+  'vmdebugger': function (browser) {
+    loadTraceNotFound(browser)
+    .click('#unload')
+    loadTrace(browser)
+    .click('#unload')
+    panels(browser)
+    .click('#unload')
+    slider(browser)
+    .click('#unload')
+    stepping(browser)
+    .click('#unload')
+    stepdetail(browser)
+    .end()
+  },
+
+  tearDown: sauce
+}
+
+function loadTraceNotFound (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .click('#txinfo .title')
+    .click('#txinfo .dropdownpanel .btn')
+    .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('<not found>')
+  return browser
+}
+
+function loadTrace (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .click('#txinfo .title')
+    .click('#txinfo .dropdownpanel .btn')
+    .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+  browser.click('#unload')
+    .waitForElementNotVisible('#vmdebugger', 1000)
+  return browser
+}
+
+function panels (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .multipleClick('#intoforward', 63)
+    .assertStack(['0:0x', '1:0x60', '2:0x65', '3:0x38', '4:0x55', '5:0x60fe47b1'])
+    .assertStorageChanges(['0x290decd9548b62a8d60345a988386fc84ba6bc95484008f6362f93160ef3e563:Objectkey:0x00value:0x38'])
+    .assertCallData(['0:0x60fe47b10000000000000000000000000000000000000000000000000000000000000038'])
+    .assertCallStack(['0:0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5'])
+    .assertStackValue(1, '1:0x60')
+    .assertMemoryValue(6, '0x60:60606040526040516020806045833981????R??Q????E?9?')
+    .assertMemoryValue(7, '0x70:01604052808051906020019091905050???R??Q???????PP')
+    .assertMemoryValue(8, '0x80:5b806001016000600050819055505b50?????????P??UP?P')
+    .click('#intoforward') // CREATE
+    .assertStack([''])
+    .assertStorageChanges([])
+    .assertMemory([''])
+    .assertCallData(['0:0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055'])
+    .assertCallStack(['0:0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5', '1:(ContractCreation-Step63)'])
+  return browser
+}
+
+function slider (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    /*
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.RIGHT_ARROW)
+    .sendKeys('#slider', browser.Keys.LEFT_ARROW)
+    */
+    .assertCurrentSelectedItem('041 PUSH4 60fe47b1')
+  return browser
+}
+
+function stepping (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .click('#intoforward')
+    .click('#intoforward')
+    .assertCurrentSelectedItem('004 MSTORE')
+    .click('#intoforward')
+    .click('#intoback')
+    .click('#intoback')
+    .assertCurrentSelectedItem('002 PUSH1 40')
+    .multipleClick('#intoforward', 62)
+    .assertCurrentSelectedItem('181 CREATE')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#overforward')
+    .assertCurrentSelectedItem('007 MLOAD')
+    .click('#intoback')
+    .click('#intoback')
+    .click('#intoback')
+    .click('#intoback')
+    .click('#intoback')
+    .click('#overforward')
+    .assertCurrentSelectedItem('182 PUSH1 01')
+    .click('#overforward')
+    .assertCurrentSelectedItem('184 PUSH1 00')
+    .click('#intoback')
+    .click('#intoback')
+    .click('#overback')
+    .assertCurrentSelectedItem('181 CREATE')
+  return browser
+}
+
+function stepdetail (browser) {
+  browser
+    .clearValue('#txinput')
+    .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
+    .click('#load')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    .click('#intoforward')
+    /*
+    .fireEvent('#slider', browser.debugerKeyCode.Right, 4, function () {
+      browser.assertSticker('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+        .click('#nextcall')
+        .assertSticker('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+        .click('#intoforward')
+        .click('#overforward')
+        .assertSticker('108', '44', '', '0', '27145', '(Contract Creation - Step 63)')
+        .click('#intoforward')
+        .assertSticker('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+        .end()
+    })
+    */
+    .assertStepDetail('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .multipleClick('#intoforward', 57)
+    .assertStepDetail('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+    .click('#overforward')
+    .click('#intoback')
+    .assertStepDetail('108', '44', '', '0', '27145', '(ContractCreation-Step63)')
+    .click('#intoforward')
+    .assertStepDetail('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5')
+  return browser
+}