Merge pull request #687 from ethereum/terminalSerapath

package.json

@@ -15,6 +15,7 @@
     "brace": "^0.8.0",
     "browserify-reload": "^1.0.3",
     "clipboard-copy": "^1.2.0",
+    "component-type": "^1.2.1",
     "csjs-inject": "^1.0.1",
     "csslint": "^1.0.2",
     "ethereum-remix": "https://github.com/ethereum/remix",
@@ -26,9 +27,12 @@
     "execr": "^1.0.1",
     "exorcist": "^0.4.0",
     "fast-async": "^6.1.2",
+    "fast-levenshtein": "^2.0.6",
     "http-server": "0.9.0",
+    "javascript-serialize": "^1.6.1",
     "jquery": "^2.2.0",
     "js-base64": "^2.1.9",
+    "js-beautify": "^1.6.14",
     "minixhr": "^3.2.2",
     "mkdirp": "^0.5.1",
     "nightwatch": "^0.9.3",
@@ -45,8 +49,7 @@
     "watchify": "^3.9.0",
     "web3": "^0.18.0",
     "webworkify": "^1.2.1",
-    "yo-yo": "^1.2.2",
-    "fast-levenshtein": "^2.0.6"
+    "yo-yo": "^1.2.2"
   },
   "repository": {
     "type": "git",

src/app.js

@@ -32,7 +32,7 @@ var RighthandPanel = require('./app/panels/righthand-panel')
 var examples = require('./app/editor/example-contracts')
 var modalDialogCustom = require('./app/ui/modal-dialog-custom')
 var Txlistener = require('./app/execution/txListener')
-var txLogger = require('./app/execution/txLogger')
+var TxLogger = require('./app/execution/txLogger')
 var EventsDecoder = require('./app/execution/eventsDecoder')
 var Web3VMProvider = remix.web3.web3VMProvider
 
@@ -107,7 +107,7 @@ class App {
     self._components.editor = new Editor({}) // @TODO: put into editorpanel
     // ----------------- editor panel ----------------------
     self._components.editorpanel = new EditorPanel({
-      api: { editor: self._components.editor }
+      api: { editor: self._components.editor, config: self._api.config }
     })
     self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
   }
@@ -813,16 +813,9 @@ function run () {
 
   txlistener.startListening()
 
-  txLogger({
+  var txLogger = new TxLogger({
     api: {
-      /**
-        * log the given transaction.
-        *
-        * @param {Object} tx - DOM element representing the transaction
-        */
-      log: function (tx) {
-        // terminal.log(tx)
-      },
+      editorpanel: self._components.editorpanel,
       resolvedTransaction: function (hash) {
         return txlistener.resolvedTransaction(hash)
       },
@@ -831,6 +824,9 @@ function run () {
       },
       compiledContracts: function () {
         return compiledContracts()
+      },
+      context: function () {
+        return executionContext.getProvider()
       }
     },
     events: {
@@ -838,6 +834,10 @@ function run () {
     }
   })
 
+  txLogger.event.register('debugRequested', (hash) => {
+    startdebugging(hash)
+  })
+
   // ----------------- autoCompile -----------------
   var autoCompile = document.querySelector('#autoCompile').checked
   if (config.exists('autoCompile')) {

src/app/editor/editor.js

@@ -8,10 +8,8 @@ var Range = ace.acequire('ace/range').Range
 require('./mode-solidity.js')
 
 var css = csjs`
-  .ace-editor         {
-    font-size         : 1.1em;
-    width             : 100%;
-    height            : 100%;
+  .ace-editor {
+    width     : 100%;
   }
 `
 document.head.appendChild(yo`

src/app/execution/txLogger.js

 'use strict'
+var yo = require('yo-yo')
+var remix = require('ethereum-remix')
+var EventManager = remix.lib.EventManager
+var helper = require('../../lib/helper')
+var ethJSUtil = require('ethereumjs-util')
+var BN = ethJSUtil.BN
 
 /**
   * This just export a function that register to `newTransaction` and forward them to the logger.
+  * Emit debugRequested
   *
   */
-module.exports = (opts = {}) => {
-  opts.events.txListener.register('newTransaction', (tx) => {
-    log(tx, opts.api)
-  })
+class TxLogger {
+  constructor (opts = {}) {
+    this.event = new EventManager()
+    this.opts = opts
+    opts.api.editorpanel.registerLogType('knownTransaction', (data) => {
+      return renderKnownTransaction(this, data)
+    })
+    opts.api.editorpanel.registerLogType('unknownTransaction', (data) => {
+      return renderUnknownTransaction(this, data)
+    })
+    opts.events.txListener.register('newTransaction', (tx) => {
+      log(this, tx, opts.api)
+    })
+  }
 }
 
-function log (tx, api) {
+function log (self, tx, api) {
   var resolvedTransaction = api.resolvedTransaction(tx.hash)
   if (resolvedTransaction) {
     api.parseLogs(tx, resolvedTransaction.contractName, api.compiledContracts(), (error, logs) => {
       if (!error) {
-        api.log(renderResolvedTransaction(tx, resolvedTransaction, logs))
+        api.editorpanel.log({type: 'knownTransaction', value: { tx: tx, resolvedData: resolvedTransaction, logs: logs }})
       }
     })
   } else {
     // contract unknown - just displaying raw tx.
-    api.log(renderTransaction(tx))
+    api.editorpanel.log({ type: 'unknownTransaction', value: { tx: tx } })
+  }
+}
+
+function renderKnownTransaction (self, data) {
+  var to = data.tx.to
+  if (to) to = helper.shortenAddress(data.tx.to)
+  function debug () {
+    self.event.trigger('debugRequested', [data.tx.hash])
+  }
+  function detail () {
+    // @TODO here should open a modal containing some info (e.g input params, logs, ...)
   }
+  return yo`<span>${context(self, data.tx)}: from:${helper.shortenAddress(data.tx.from)}, to:${to}, ${data.resolvedData.contractName}.${data.resolvedData.fn}, value:${value(data.tx.value)} wei, data:${helper.shortenHexData(data.tx.input)}, ${data.logs.length} logs, hash:${helper.shortenHexData((data.tx.hash))},<button onclick=${detail}>Details</button> <button onclick=${debug}>Debug</button></span>`
 }
 
-function renderResolvedTransaction (tx, resolvedTransaction, logs) {
-  console.log([tx, resolvedTransaction])
-  return JSON.stringify([tx, resolvedTransaction])
+function renderUnknownTransaction (self, data) {
+  var to = data.tx.to
+  if (to) to = helper.shortenAddress(data.tx.to)
+  function debug () {
+    self.event.trigger('debugRequested', [data.tx.hash])
+  }
+  function detail () {
+    // @TODO here should open a modal containing some info (e.g input params, logs, ...)
+  }
+  return yo`<span>${context(self, data.tx)}: from:${helper.shortenAddress(data.tx.from)}, to:${to}, value:${value(data.tx.value)} wei, data:${helper.shortenHexData((data.tx.input))}, hash:${helper.shortenHexData((data.tx.hash))}, <button onclick=${detail}>Details</button> <button onclick=${debug}>Debug</button></span>`
+}
+
+function context (self, tx) {
+  if (self.opts.api.context() === 'vm') {
+    return yo`<span>(vm)</span>`
+  } else {
+    return yo`<span>block:${tx.blockNumber}, txIndex:${tx.transactionIndex}`
+  }
 }
 
-function renderTransaction (tx) {
-  console.log(tx)
-  return JSON.stringify(tx)
+function value (v) {
+  try {
+    if (v.indexOf && v.indexOf('0x') === 0) {
+      return (new BN(v.replace('0x', ''), 16)).toString(10)
+    } else {
+      return v.toString(10)
+    }
+  } catch (e) {
+    console.log(e)
+    return v
+  }
 }
+
+module.exports = TxLogger

src/app/panels/editor-panel.js

@@ -2,7 +2,14 @@ var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var EventManager = require('ethereum-remix').lib.EventManager
 
+var Terminal = require('./terminal')
+
 var css = csjs`
+  .editorpanel         {
+    display            : flex;
+    flex-direction     : column;
+    height             : 100%;
+  }
   .tabsbar             {
     display            : flex;
     overflow           : hidden;
@@ -105,17 +112,75 @@ var css = csjs`
     pointer-events    : none;
     transition        : .3s opacity ease-in;
   }
+  
+  .content            {
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    height            : 100%;
+    width             : 100%;
+  }
 `
 
 class EditorPanel {
   constructor (opts = {}) {
     var self = this
+    self._api = { config: opts.api.config }
+    self.event = new EventManager()
     self.data = {
-      _FILE_SCROLL_DELTA: 200
+      _FILE_SCROLL_DELTA: 200,
+      _layout: {
+        top: {
+          offset: self._api.config.get('terminal-top-offset') || 500,
+          show: true
+        }
+      }
     }
     self._view = {}
-    self._api = { editor: opts.api.editor }
-    self.event = new EventManager()
+    self._components = {
+      editor: opts.api.editor, // @TODO: instantiate in eventpanel instead of passing via `opts`
+      terminal: new Terminal({
+        api: {
+          getPosition (event) {
+            var limitUp = 36
+            var limitDown = 20
+            var height = window.innerHeight
+            var newpos = (event.pageY < limitUp) ? limitUp : event.pageY
+            newpos = (newpos < height - limitDown) ? newpos : height - limitDown
+            return newpos
+          }
+        }
+      })
+    }
+    self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
+  }
+  _adjustLayout (direction, delta) {
+    var limitUp = 36
+    var limitDown = 20
+    var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
+    var self = this
+    var layout = self.data._layout[direction]
+    if (layout) {
+      if (delta === undefined) {
+        layout.show = !layout.show
+        if (layout.show) delta = layout.offset
+        else delta = containerHeight
+      } else {
+        layout.show = true
+        self._api.config.set(`terminal-${direction}-offset`, delta)
+        layout.offset = delta
+      }
+    }
+    var tmp = delta - limitDown
+    delta = tmp > 0 ? tmp : 0
+    if (direction === 'top') {
+      var height = containerHeight - delta
+      height = height < 0 ? 0 : height
+      self._view.editor.style.height = `${delta}px`
+      self._view.terminal.style.height = `${height}px` // - menu bar height
+      self._components.editor.resize((document.querySelector('#editorWrap') || {}).checked)
+      self._components.terminal.scroll2bottom()
+    }
   }
   refresh () {
     var self = this
@@ -124,12 +189,32 @@ class EditorPanel {
   render () {
     var self = this
     if (self._view.el) return self._view.el
-    self._view.el = [
-      self._renderTabsbar(),
-      self._api.editor.render()
-    ]
+    self._view.editor = self._components.editor.render()
+    self._view.terminal = self._components.terminal.render()
+    self._view.content = yo`
+      <div class=${css.content}>
+        ${self._view.editor}
+        ${self._view.terminal}
+      </div>
+    `
+    self._view.el = yo`
+      <div class=${css.editorpanel}>
+        ${self._renderTabsbar()}
+        ${self._view.content}
+      </div>
+    `
+    // INIT
+    self._adjustLayout('top', self.data._layout.top.offset)
     return self._view.el
   }
+  registerLogType (typename, template) {
+    var self = this
+    self._components.terminal.registerType(typename, template)
+  }
+  log () {
+    var self = this
+    self._components.terminal.log.apply(self._components.terminal, arguments)
+  }
   _renderTabsbar () {
     var self = this
     if (self._view.tabsbar) return self._view.tabsbar
@@ -197,8 +282,8 @@ class EditorPanel {
       this.children[0].classList.toggle('fa-angle-double-left')
       self.event.trigger('resize', ['right'])
     }
-    function increase () { self._api.editor.editorFontSize(1) }
-    function decrease () { self._api.editor.editorFontSize(-1) }
+    function increase () { self._components.editor.editorFontSize(1) }
+    function decrease () { self._components.editor.editorFontSize(-1) }
     function scrollLeft (event) {
       var leftArrow = this
       var rightArrow = this.nextElementSibling.nextElementSibling

src/app/panels/file-panel.js

@@ -228,7 +228,7 @@ function filepanel (appAPI, filesProvider) {
     newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
     return newpos
   }
-  function moveGhostbar (event) {
+  function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
     ghostbar.style.left = getPosition(event) + 'px'
   }
   function removeGhostbar (event) {

src/app/panels/righthand-panel.js

@@ -132,7 +132,7 @@ function RighthandPanel (appAPI, events, opts) {
       newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit
       return newpos
     }
-    function moveGhostbar (event) {
+    function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
       ghostbar.style.left = getPosition(event) + 'px'
     }
     function removeGhostbar (event) {

src/lib/helper.js

@@ -2,5 +2,10 @@ module.exports = {
   shortenAddress: function (address, etherBalance) {
     var len = address.length
     return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '')
+  },
+  shortenHexData: function (data) {
+    if (data.length < 5) return data
+    var len = data.length
+    return data.slice(0, 5) + '...' + data.slice(len - 5, len)
   }
 }