remix int

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-cube"></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>

package.json

@@ -55,5 +55,8 @@
       "nightwatch.js",
       "ci/sauceDisconnect.js"
     ]
+  },
+  "dependencies": {
+    "ethereum-remix": "0.0.1"
   }
 }

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);
+    document.querySelector('ul#options').selectTab($el);
+  });
+  document.querySelector('ul#options').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,8 @@ var run = function () {
   }
 
   var executionContext = new ExecutionContext();
-  var renderer = new Renderer(editor, executionContext, updateFiles);
+  var transactionDebugger = new Debugger(executionContext, '#debugger');
+  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

@@ -0,0 +1,22 @@
+var Remix = require('ethereum-remix');
+var $ = require('jquery');
+
+function Debugger (executionContext, _id) {
+  this.el = document.querySelector(_id);
+  this.debugger = new Remix(executionContext.web3());
+  this.el.appendChild(this.debugger.render());
+  this.web3 = executionContext.web3();
+  this.debugView = $('ul#options li.debugView');
+
+  Debugger.prototype.debug = function (receipt) {
+    document.querySelector('ul#options').selectTab(this.debugView);
+    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>' : '';
@@ -514,6 +524,7 @@ UniversalDApp.prototype.getCallButton = function (args) {
       } else {
         clearOutput($result);
         $result.append(getReturnOutput(result)).append(getGasUsedOutput(result));
+        $result.append(getDebugTransaction(result));
       }
     });
   };