add execution context toggle and warning

index.html

@@ -70,8 +70,12 @@ THE SOFTWARE.
 				<code>tx.origin = <span id="txorigin"/></code></p>
 			</div>
 			<div id="optimizeBox">
-				<input id="editorWrap" type="checkbox"><label for="editorWrap">Text Wrap</label>
+				<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
-				<input id="optimize" type="checkbox"><label for="optimize">Enable Optimization</label>
+				<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
+				<span id="executionContext">
+					<label for="vm"><input id="vm" type="radio" value="vm" checked name="executionContext">JavaScript VM</label>
+					<label for="web3"><input id="web3" type="radio" value="web3" name="executionContext">Web3 Provider</label>
+				</span>
 			</div>
 		</div>
 		<div id="output"></div>
@@ -111,6 +115,25 @@ THE SOFTWARE.
 	session.setTabSize(4);
 	session.setUseSoftTabs(true);
 
+	// ----------------- execution context -------------
+
+	var $vmToggle = $('#vm');
+	var $web3Toggle = $('#web3');
+	var executionContext = 'vm';
+
+	$vmToggle.on('change', executionContextChange );
+	$web3Toggle.on('change', executionContextChange );
+
+	function executionContextChange (ev) {
+		if (ev.target.value == 'web3' && !confirm("Are you sure you want to connect to a local ethereum node.") ) {
+			$vmToggle.get(0).checked = true;
+			executionContext = 'vm';
+		} else executionContext = ev.target.value;
+		compile();
+	}
+
+
+
 	// ----------------- file selector-------------
 
 	var $filesEl = $('#files');
@@ -408,7 +431,7 @@ THE SOFTWARE.
 
 		var renderError = function(message) {
 			var type = errortype(message);
-			var $error = $('<div class="' + type + '"><pre>' + message + '</pre><div class="close">x</div></div>');
+			var $error = $('<div class="sol ' + type + '"><pre>' + message + '</pre><div class="close">x</div></div>');
 			$('#output').append( $error );
 			var err = message.match(/^:([0-9]*):([0-9]*)/);
 			if (err && err.length) {
@@ -476,7 +499,7 @@ THE SOFTWARE.
 					interface:  contract['interface'],
 					bytecode: contract.bytecode
 				}], {
-					vm: true,
+					vm: executionContext === 'vm',
 					removable: false,
 					removable_instances: true
 				});
@@ -487,7 +510,12 @@ THE SOFTWARE.
 						.append(textRow('Web3 deploy', gethDeploy(contractName.toLowerCase(),contract['interface'],contract.bytecode), 'deploy'))
 						.append(textRow('uDApp', combined(contractName,contract['interface'],contract.bytecode), 'deploy'))
 						.append(getDetails(contract, source, contractName));
-				$('#txorigin').text('0x' + dapp.address.toString('hex'));
+
+				if (executionContext == 'vm') $('#txorigin').text('0x' + dapp.address.toString('hex'));
+				else web3.eth.getAccounts( function(err,accounts) {
+					$('#txorigin').text(accounts[0]);
+				});
+
 				$contractOutput.find('.title').click(function(ev){ $(this).closest('.udapp').toggleClass('hide') });
 				$('#output').append( $contractOutput );
 			}

stylesheets/browser-solidity.css

@@ -110,6 +110,13 @@ body {
     height: 5em;
 }
 
+#header #executionContext {
+    padding: 0.4em 1em;
+    background-color: #efefef;
+    display: inline-block;
+    margin-left: 1em;
+}
+
 .col1 {
     width: 30%;
     float: left;
@@ -186,8 +193,8 @@ body {
 }
 
 
-.error,
+.sol.error,
-.warning {
+.sol.warning {
     border-radius: 0;
     word-wrap: break-word;
     cursor: pointer;
@@ -195,15 +202,15 @@ body {
     margin: 0.25em;
 }
 
-.error pre,
+.sol.error pre,
-.warning pre {
+.sol.warning pre {
     background-color: transparent;
     margin: 0;
     font-size: 10px;
 }
 
-.error .close,
+.sol.error .close,
-.warning .close {
+.sol.warning .close {
     font-weight: bold;
     position: absolute;
     top: 0;
@@ -211,12 +218,12 @@ body {
     padding: 0.5em;
 }
 
-.error {
+.sol.error {
     background-color: rgba(255, 0, 0, 0.5);
     border: 1px solid #D00909;
 }
 
-.warning {
+.sol.warning {
     background-color: rgba(210, 202, 36, 0.5);
     border: 1px solid #BBB427; 
 }