Merge pull request #131 from yann300/remix_integration

assets/css/browser-solidity.css

@@ -208,6 +208,7 @@ body {
 #header #optionViews.settingsView #settingsView { display: block; }
 #header #optionViews.publishView #publishView { display: block; }
 #header #optionViews.envView #envView { display: block; }
+#header #optionViews.debugView #debugView { display: block; }
 
 #header #optionViews.txView input,
 #header #optionViews.txView select {

assets/css/universal-dapp.css

@@ -87,7 +87,7 @@
 
 .udapp .output .result {
 	position: relative;
-	margin-bottom: 0.5em;
+	margin-bottom: 3.5em;
 	white-space: pre;
 }
 
@@ -205,6 +205,11 @@
 	border-color: #FF8B8B;
 }
 
+.udapp .contractProperty .debug {
+	background-color: #9DC1F5;
+	border-color: #9DC1F5;
+}
+
 .udapp .contractProperty.constant .call {
 	background-color: #9DC1F5;
 	border-color: #9DC1F5;

index.html

@@ -64,6 +64,7 @@
 						<li class="txView" title="Transaction"><i class="fa fa-send"></i></li>
 						<li class="envView" title="Environment"><i class="fa fa-cube"></i></li>
 						<li class="publishView" title="Publish" ><i class="fa fa-cloud-upload"></i></li>
+						<li class="debugView" title="Debugger"><i class="fa fa-bug"></i></li>
 						<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation" class="fa fa-question"></a></li>
 					</ul>
 					<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.svg" alt="Solidity realtime compiler and runtime">
@@ -121,7 +122,9 @@
 							</label>
 						</span>
 					</div>
-
+					<div id="debugView">
+						<div id="debugger" ></div>
+					</div>
 				</div>
 			</div>
 			<div id="output"></div>

nightwatch.js

@@ -49,6 +49,7 @@ module.exports = {
       'desiredCapabilities': {
         'browserName': 'safari',
         'javascriptEnabled': true,
+        'platform': 'MAC',
         'acceptSslCerts': true,
         'build': 'build-' + TRAVIS_JOB_NUMBER,
         'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER

package.json

@@ -9,7 +9,7 @@
     "browser-test-remote-ie": "nightwatch --config nightwatch.js --env ie",
     "browser-test-remote-chrome": "nightwatch --config nightwatch.js --env chrome",
     "browser-test-remote-safari": "nightwatch --config nightwatch.js --env safari",
-    "build": "mkdir -p build; browserify src/index.js -o build/app.js",
+    "build": "mkdir -p build; browserify src/index.js -g yo-yoify -o build/app.js",
     "lint": "semistandard",
     "serve": "http-server ."
   },
@@ -30,7 +30,10 @@
     "solc": "https://github.com/ethereum/solc-js",
     "tape": "^4.5.1",
     "web3": "^0.16.0",
-    "webworkify": "^1.2.1"
+    "webworkify": "^1.2.1",
+    "yo-yo": "^1.2.2",
+    "yo-yoify": "^3.3.0",
+    "ethereum-remix": "0.0.2-alpha.0.0.4"
   },
   "repository": {
     "type": "git",

src/app.js

@@ -13,6 +13,7 @@ var Editor = require('./app/editor');
 var Renderer = require('./app/renderer');
 var Compiler = require('./app/compiler');
 var ExecutionContext = require('./app/execution-context');
+var Debugger = require('./app/debugger');
 
 // The event listener needs to be registered as early as possible, because the
 // parent will send the message upon the "load" event.
@@ -89,21 +90,23 @@ var run = function () {
   var editor = new Editor(loadingFromGist, storage);
 
   // ----------------- tabbed menu -------------------
-
   $('#options li').click(function (ev) {
     var $el = $(this);
-    var match = /[a-z]+View/.exec($el.get(0).className);
+    selectTab($el);
+  });
+  var selectTab = function (el) {
+    var match = /[a-z]+View/.exec(el.get(0).className);
     if (!match) return;
     var cls = match[0];
-    if (!$el.hasClass('active')) {
-      $el.parent().find('li').removeClass('active');
+    if (!el.hasClass('active')) {
+      el.parent().find('li').removeClass('active');
       $('#optionViews').attr('class', '').addClass(cls);
-      $el.addClass('active');
+      el.addClass('active');
     } else {
-      $el.removeClass('active');
+      el.removeClass('active');
       $('#optionViews').removeClass(cls);
     }
-  });
+  };
 
   // ------------------ gist publish --------------
 
@@ -423,7 +426,11 @@ var run = function () {
   }
 
   var executionContext = new ExecutionContext();
-  var renderer = new Renderer(editor, executionContext, updateFiles);
+  var transactionDebugger = new Debugger(executionContext, '#debugger');
+  transactionDebugger.onDebugRequested = function () {
+    selectTab($('ul#options li.debugView'));
+  };
+  var renderer = new Renderer(editor, executionContext, updateFiles, transactionDebugger);
   var compiler = new Compiler(editor, renderer, queryParams, handleGithubCall, $('#output'), getHidingRHP, updateFiles);
   executionContext.setCompiler(compiler);
 

src/app/debugger.js

+var remix = require('ethereum-remix');
+
+function Debugger (_executionContext, _id) {
+  this.el = document.querySelector(_id);
+  this.debugger = new remix.Debugger(_executionContext.web3());
+  this.el.appendChild(this.debugger.render());
+  this.web3 = _executionContext.web3();
+
+  Debugger.prototype.debug = function (receipt) {
+    if (this.onDebugRequested) this.onDebugRequested();
+    var self = this;
+    this.web3.eth.getTransaction(receipt.transactionHash, function (error, tx) {
+      if (!error) {
+        self.debugger.debug(tx);
+      }
+    });
+  };
+}
+
+module.exports = Debugger;

src/app/renderer.js

@@ -4,7 +4,7 @@ var UniversalDApp = require('../universal-dapp.js');
 
 var utils = require('./utils');
 
-function Renderer (editor, executionContext, updateFiles) {
+function Renderer (editor, executionContext, updateFiles, transactionDebugger) {
   var detailsOpen = {};
 
   function renderError (message) {
@@ -78,7 +78,7 @@ function Renderer (editor, executionContext, updateFiles) {
           .append(textRow('uDApp', combined(contractName, contract['interface'], contract.bytecode), 'deploy'))
           .append(getDetails(contract, source, contractName));
       }
-    });
+    }, transactionDebugger);
 
     var $contractOutput = dapp.render();
 

src/universal-dapp.js

@@ -8,7 +8,7 @@ var ethJSABI = require('ethereumjs-abi');
 var EthJSBlock = require('ethereumjs-block');
 var BN = ethJSUtil.BN;
 
-function UniversalDApp (contracts, options) {
+function UniversalDApp (contracts, options, transactionDebugger) {
   var self = this;
 
   self.options = options || {};
@@ -17,7 +17,7 @@ function UniversalDApp (contracts, options) {
   self.renderOutputModifier = options.renderOutputModifier || function (name, content) { return content; };
 
   self.web3 = options.web3;
-
+  self.transactionDebugger = transactionDebugger;
   if (options.mode === 'vm') {
     // FIXME: use `options.vm` or `self.vm` consistently
     options.vm = true;
@@ -352,6 +352,16 @@ UniversalDApp.prototype.getCallButton = function (args) {
     return $('<div class="' + returnCls + '">').html('<strong>' + returnName + ':</strong> ' + JSON.stringify(result, null, 2));
   };
 
+  var getDebugTransaction = function (result) {
+    var $debugTx = $('<div class="debugTx">');
+    var $button = $('<button class="debug">Debug Transaction</button>');
+    $button.click(function () {
+      self.transactionDebugger.debug(result);
+    });
+    $debugTx.append($button);
+    return $debugTx;
+  };
+
   var getGasUsedOutput = function (result, vmResult) {
     var $gasUsed = $('<div class="gasUsed">');
     var caveat = lookupOnly ? '<em>(<span class="caveat" title="Cost only applies when called by a contract">caveat</span>)</em>' : '';
@@ -493,6 +503,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
         replaceOutput($result, $('<span/>').text('Exception during execution.').addClass('error'));
       } else if (isConstructor) {
         replaceOutput($result, getGasUsedOutput(result, result.vm));
+        $result.append(getDebugTransaction(result));
         args.appendFunctions(self.options.vm ? result.createdAddress : result.contractAddress);
       } else if (self.options.vm) {
         var outputObj = '0x' + result.vm.return.toString('hex');
@@ -514,6 +525,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
       } else {
         clearOutput($result);
         $result.append(getReturnOutput(result)).append(getGasUsedOutput(result));
+        $result.append(getDebugTransaction(result));
       }
     });
   };

test-browser/debugger.js

+module.exports = {
+  'Debugger Render': function (browser) {
+    browser
+      .url('http://127.0.0.1:8080')
+      .waitForElementPresent('#debugger', 10000)
+      .waitForElementPresent('#debugger #slider', 10000)
+      .end();
+  }
+};

test-browser/new-file-test.js

@@ -4,6 +4,7 @@ module.exports = {
       .url('http://127.0.0.1:8080')
       .waitForElementVisible('.newFile', 10000)
       .click('.newFile')
+      .pause('10000')
       .assert.containsText('.active', 'Untitled')
       .end();
   }

test-browser/smoke-test.js

@@ -3,6 +3,7 @@ module.exports = {
     browser
       .url('http://127.0.0.1:8080')
       .waitForElementVisible('#righthand-panel', 10000)
+      .pause('10000')
       .assert.containsText('#righthand-panel', 'Solidity version')
       .end();
   }