mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Rename and restructure tabs and content in righthand panel

Browse Source
pull/1/head
ninabreznik 8 years ago
parent 81fc40e678
commit 69b15fd37b
9 changed files with 215 additions and 169 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 75
      assets/css/browser-solidity.css
  2. 24
      assets/css/universal-dapp.css
  3. 118
      index.html
  4. 53
      package.json
  5. 4
      src/app.js
  6. 51
      src/app/execution-context.js
  7. 4
      src/app/renderer.js
  8. 39
      src/app/staticanalysis/staticAnalysisView.js
  9. 16
      src/universal-dapp.js

75
assets/css/browser-solidity.css
Unescape View File

@ -149,10 +149,12 @@ body {
#output {
display: block;
padding: 1em;
}
#header {
font-size: 12px;
font-size: 13px;
height: 100%;
}
#header #solIcon {
@ -165,7 +167,7 @@ body {
border-bottom: 3px solid #F4F6FF;
overflow: hidden;
height: 2em;
font-size: 1.25em;
font-size: 1em;
padding-top: 0.5em;
box-sizing: content-box;
}
@ -176,15 +178,6 @@ body {
padding: 0;
}
#header #options li {
float: left;
padding: 0.3em 0.6em;
font-size: 1em;
cursor: pointer;
background-color: transparent;
margin-right: 0.5em;
}
#header #options li.active {
background-color: #F4F6FF;
}
@ -197,11 +190,12 @@ body {
clear: both;
overflow: auto;
background-color: #F4F6FF;
height: 100%;
}
#header #optionViews > div {
display: none;
padding: 1em 0.5em 0.5em;
padding: .5em .5em .5em;
}
#header #optionViews.txView #txView {
@ -214,6 +208,7 @@ body {
#header #optionViews.publishView #publishView {
display: block;
padding: 3em;
}
#header #optionViews.envView #envView {
@ -222,6 +217,7 @@ body {
#header #optionViews.debugView #debugView {
display: block;
padding: 3em;
}
#header #optionViews.verificationView #verificationView {
@ -230,6 +226,8 @@ body {
#header #optionViews.staticanalysisView #staticanalysisView {
display: block;
padding: 3em;
line-height: 1.5em;
}
#header #optionViews.txView input,
@ -243,17 +241,13 @@ body {
#header #optionViews .pre {
word-wrap: break-word;
background-color: #C6CFF7;
background-color: rgba(255, 255, 255, 0.5);
font-family: monospace;
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#header #optionViews .hide {
display: none;
}
#header .info {
font-family: monospace;
min-height: 6em;
@ -265,12 +259,11 @@ body {
background-color: #C6CFF7;
font-size: 12px;
padding: 0.25em;
margin-bottom: .5em;
margin: 3em 1em .5em 0;
color: black;
border:0 none;
border-radius: 3px;
width: 8em;
margin-right: 1em;
cursor: pointer;
}
@ -291,12 +284,11 @@ body {
background-color: #C6CFF7;
font-size: 12px;
padding: 0.25em;
margin-bottom: .5em;
margin: 2em 1em .5em 0;
color: black;
border:0 none;
border-radius: 3px;
width: 8em;
margin-right: 1em;
cursor: pointer;
}
@ -321,12 +313,28 @@ body {
#header #executionContext {
display: block;
word-wrap: break-word;
padding: 1.5em;
font-weight: bold;
}
#selectExEnv {
text-decoration: none;
background-color: #C6CFF7;
cursor: pointer;
font-size: 12px;
color: black;
border-radius: 3px;
border: 0 none;
}
#header #versionSelector {
text-decoration: none;
background-color: #C6CFF7;
cursor: pointer;
font-size: 12px;
color: black;
border-radius: 3px;
border: 0 none;
font-family: monospace;
background-color: transparent;
}
.col1 {
@ -345,9 +353,6 @@ body {
.contract.hide {
padding-bottom: 0;
}
.contract.hide {
margin: 0;
}
@ -364,6 +369,7 @@ body {
opacity: 0.5;
margin-right: 0.4em;
font-size: 10px;
margin-top: 0.2em;
}
.contract.hide > .title:before {
@ -380,7 +386,18 @@ body {
overflow: auto;
display: block;
clear: both;
margin: 0.5em;
margin: 1.5em;
font-weight: bold;
}
.crow #txorigin {
text-decoration: none;
background-color: #C6CFF7;
cursor: pointer;
font-size: 12px;
color: black;
border-radius: 3px;
border: 0 none;
}
.contractDetails button {
@ -479,7 +496,7 @@ input[type="file"] {
position:absolute;
z-index:20;
background-color:#F77E79;
}
}
.highlightcode_fullLine {
position:absolute;
@ -488,6 +505,6 @@ input[type="file"] {
opacity: 0.5;
}
.ace_gutter-cell.ace_breakpoint{
.ace_gutter-cell.ace_breakpoint{
background-color: #F77E79;
}

24
assets/css/universal-dapp.css
Unescape View File

@ -1,5 +1,5 @@
.udapp {
padding: 1em;
padding: .5em;
border: 1px dotted #4D5686;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
@ -42,7 +42,6 @@
}
.udapp .contract {
margin-bottom: 1em;
clear: both;
}
@ -53,19 +52,24 @@
.udapp .title {
margin-bottom: 0.4em;
padding: 0.2em;
background-color: rgba(255, 255, 255, 0.5);
display: block;
padding: 1em;
background-color: #C6CFF7;
font-weight: bold;
padding-right: 2em;
display: flex;
justify-content: space-between;
word-wrap: break-word;
position: relative;
border-radius: 3px;
}
.udapp .definitionTitle {
background-color: #C6CFD9;
}
.udapp .title:hover {
opacity: 0.8;
}
.udapp .title .size {
position: absolute;
right: 2.2em;
top: 0.2em;
font-weight: normal;
}
@ -142,6 +146,7 @@
}
.udapp .instance .title {
content: "\25BC";
cursor: pointer;
}
@ -156,6 +161,7 @@
opacity: 0.5;
margin-right: 0.4em;
font-size: 10px;
margin-top: 0.2em;
}
.udapp .instance.hide > *:not(.title) {

118
index.html
Unescape View File

@ -57,93 +57,93 @@
<div id="header">
<div id="menu">
<ul id="options">
<li class="settingsView active" title="Settings"><i class="fa fa-gear"></i></li>
<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 class="verificationView" title="Formal Verification"><i class="fa fa-check"></i></li>
<li class="staticanalysisView" title="Static Analysis"><i class="fa fa-search"></i></li>
<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation" class="fa fa-question"></a></li>
<li class="settingsView active" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li>
<li class="envView" title="Environment">Contract</li>
<li class="debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li>
<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
</div>
<div id="optionViews" class="settingsView">
<div id="txView">
<div class="crow">
<label for="txorigin"><select name="txorigin" id="txorigin"></select> Transaction origin</label>
</div>
<div class="crow">
<label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label>
</div>
<div class="crow hide">
<label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
</div>
<div class="crow">
<label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
</div>
</div>
<div id="txView"></div>
<div id="settingsView">
<div class="version crow"><strong>Solidity version:</strong> <span id="version">(loading)</span></div>
<div class="crow">Change to: <select id="versionSelector"></select></div>
<div class="version crow"><strong>Current Solidity version:</strong> <span id="version">( Loading... )</span></div>
<div class="crow">Switch version: <select id="versionSelector"></select></div>
<div class="crow">
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
<label for="autoCompile"><input id="autoCompile" type="checkbox" checked>Auto Compile</label>
<button id="compile" title="Compile source code"><i class="fa fa-cog"></i> Compile</button>
<button id="compile" title="Compile source code">Compile</button>
</div>
</div>
<div id="publishView">
<p>
<button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish Gist</button> Publish all open files to an anonymous github gist.<br/>
<button id="copyOver" title="Copy all files to another instance of browser-solidity.">Copy files</button> Copy all files to another instance of browser-solidity.
<button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish Gist</button>Publish all open files to an anonymous github gist.<br/>
<button id="copyOver" title="Copy all files to another instance of browser-solidity.">Copy files</button> Copy all files to another instance of Browser-solidity.
</p>
<p>You can also load a gist by adding the following <span class="pre">#gist=GIST_ID</span> to your url, where GIST_ID is the id of the gist to load.</p>
</div>
<div id="envView">
<div class="crow">
<label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label>
</div>
<div class="crow">
<label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label>
</div>
<div class="crow">
<label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
</div>
<div class="crow">
<label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
</div>
<span id="executionContext">
<label for="vm-mode">
<input id="vm-mode" type="radio" value="vm" checked name="executionContext">
<strong>JavaScript VM</strong>
<p>Execution environment does not connect to any node, everything is local and in memory only.</p>
</label>
<label for="injected-mode">
<input id="injected-mode" type="radio" value="injected" checked name="executionContext">
<strong>Injected Web3</strong>
<p>Execution environment has been provided by Mist or similar provider.</p>
</label>
<label for="web3-mode">
<input id="web3-mode" type="radio" value="web3" name="executionContext">
<strong>Web3 Provider</strong>
<p>Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!<br/>
<b>If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http.</b></p>
<label for="web3Endpoint">
<strong>Web3 Provider Endpoint</strong>: <input type="text" id="web3Endpoint" value="http://localhost:8545">
</label>
</label>
Select execution environment: <br><br>
<select id='selectExEnv'>
<option id="vm-mode"
title="Execution environment does not connect to any node, everything is local and in memory only."
value="vm"
checked name="executionContext">
JavaScript VM
</option>
<option id="injected-mode"
title="Execution environment has been provided by Mist or similar provider."
value="injected"
checked name="executionContext">
Injected Web3
</option>
<option id="web3-mode"
title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
value="web3"
name="executionContext">
Web3 Provider
</option>
</select>
</span>
<div id="output"></div>
</div>
<div id="debugView">
<div id="debugger" ></div>
<div id="debugger"></div>
</div>
<div id="staticanalysisView">
</div>
<div id="verificationView">
<p>This tab provides support for <b>formal verification</b> of Solidity contracts.<br/>
This feature is still in development and thus also not yet well documented,
but you can find some information
<a href="http://solidity.readthedocs.io/en/latest/security-considerations.html#formal-verification">here</a>.
The compiler generates input to be verified
(or report errors). Please paste the text below into
<a href="http://why3.lri.fr/try/">http://why3.lri.fr/try/</a>
to actually perform the verification.
We plan to support direct integration in the future.</p>
<p>
This tab provides support for <b>formal verification</b> of Solidity contracts.<br/>
This feature is still in development and thus also not yet well documented,
but you can find some information
<a href="http://solidity.readthedocs.io/en/latest/security-considerations.html#formal-verification">here</a>.
The compiler generates input to be verified
(or report errors). Please paste the text below into
<a href="http://why3.lri.fr/try/">http://why3.lri.fr/try/</a>
to actually perform the verification.
We plan to support direct integration in the future.
</p>
<textarea id="formalVerificationInput" readonly="readonly"></textarea>
<div id="formalVerificationErrors"></div>
</div>
</div>
</div>
<div id="output"></div>
</div>
<script src="build/app.js"></script>

53
package.json
Unescape View File

@ -30,10 +30,8 @@
"babel-plugin-transform-es2015-unicode-regex": "^6.11.0",
"babel-plugin-transform-regenerator": "^6.16.1",
"babel-polyfill": "^6.22.0",
"babel-plugin-yo-yoify": "^0.3.3",
"babel-preset-es2015": "^6.24.0",
"babelify": "^7.3.0",
"brace": "^0.8.0",
"browserify": "^13.0.0",
@ -116,24 +114,36 @@
},
"browserify": {
"transform": [
["babelify", {
"sourceMapsAbsolute": false,
"sourceMaps": true,
"plugins": [
["fast-async", {
"runtimePattern": null,
"compiler": {
"es7": true,
"noRuntime": true,
"promises": true,
"wrapAwait": true
}
}],
["yo-yoify"]
],
"presets": ["es2015"]
}],
["uglifyify"]
[
"babelify",
{
"sourceMapsAbsolute": false,
"sourceMaps": true,
"plugins": [
[
"fast-async",
{
"runtimePattern": null,
"compiler": {
"es7": true,
"noRuntime": true,
"promises": true,
"wrapAwait": true
}
}
],
[
"yo-yoify"
]
],
"presets": [
"es2015"
]
}
],
[
"uglifyify"
]
]
},
"scripts": {
@ -160,5 +170,8 @@
"test": "standard; npm run csslint; node test/index.js",
"test-browser": "npm-run-all -lpr selenium downloadsolc make-mock-compiler serve browsertest",
"watch": "watchify src/index.js -dv --delay 0 -p browserify-reload -o '| npm run sourcemap'"
},
"dependencies": {
"csjs-inject": "^1.0.1"
}
}

4
src/app.js
Unescape View File

@ -858,7 +858,7 @@ var run = function () {
})
compiler.event.register('loadingCompiler', this, function (url, usingWorker) {
setVersionText(usingWorker ? '(loading using worker)' : '(loading)')
setVersionText(usingWorker ? '(loading using worker)' : '( Loading... Please, wait a moment. )')
})
compiler.event.register('compilerLoaded', this, function (version) {
@ -940,7 +940,7 @@ var run = function () {
loadVersion($('#versionSelector').val())
})
var header = new Option('Select new compiler version to load')
var header = new Option('Click to select new compiler version')
header.disabled = true
header.selected = true
$('#versionSelector').append(header)

51
src/app/execution-context.js
Unescape View File

@ -1,4 +1,4 @@
/* global confirm */
/* global confirm, prompt */
'use strict'
var $ = require('jquery')
@ -94,43 +94,25 @@ function ExecutionContext () {
this.setContext = function (context) {
executionContext = context
executionContextChange(context)
setExecutionContextRadio()
}
var $injectedToggle = $('#injected-mode')
var $vmToggle = $('#vm-mode')
var $web3Toggle = $('#web3-mode')
var $web3endpoint = $('#web3Endpoint')
if (web3.providers && web3.currentProvider instanceof web3.providers.IpcProvider) {
$web3endpoint.val('ipc')
}
setExecutionContextRadio()
$injectedToggle.on('change', executionContextUIChange)
$vmToggle.on('change', executionContextUIChange)
$web3Toggle.on('change', executionContextUIChange)
$web3endpoint.on('change', function () {
setProviderFromEndpoint()
if (executionContext === 'web3') {
self.event.trigger('web3EndpointChanged')
}
})
function executionContextUIChange (ev) {
executionContextChange(ev.target.value)
}
function executionContextChange (context) {
if (context === 'web3' && !confirm('Are you sure you want to connect to a local ethereum node?')) {
setExecutionContextRadio()
return false
} else if (context === 'injected' && injectedProvider === undefined) {
setExecutionContextRadio()
return false
} else {
if (context === 'web3') {
executionContext = context
setProviderFromEndpoint()
var endpoint = prompt('Please type Web3 Provider Endpoint', 'http://localhost:8545')
setProviderFromEndpoint(endpoint)
self.event.trigger('web3EndpointChanged')
self.event.trigger('contextChanged', ['web3'])
} else if (context === 'injected') {
executionContext = context
@ -143,11 +125,11 @@ function ExecutionContext () {
})
self.event.trigger('contextChanged', ['vm'])
}
return true
}
}
function setProviderFromEndpoint () {
var endpoint = $web3endpoint.val()
function setProviderFromEndpoint (endpoint) {
if (endpoint === 'ipc') {
web3.setProvider(new web3.providers.IpcProvider())
} else {
@ -155,15 +137,16 @@ function ExecutionContext () {
}
}
function setExecutionContextRadio () {
if (executionContext === 'injected') {
$injectedToggle.get(0).checked = true
} else if (executionContext === 'vm') {
$vmToggle.get(0).checked = true
} else if (executionContext === 'web3') {
$web3Toggle.get(0).checked = true
/* ---------------------------------------------------------------------------
DROPDOWN
--------------------------------------------------------------------------- */
var selectExEnv = document.querySelector('#selectExEnv')
selectExEnv.addEventListener('change', function (event) {
if (!executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) {
selectExEnv.value = executionContext
}
}
})
}
module.exports = ExecutionContext

4
src/app/renderer.js
Unescape View File

@ -16,6 +16,10 @@ function Renderer (appAPI, formalVerificationEvent, compilerEvent) {
$('#output').empty()
if (success) {
self.contracts(data, source)
$('#header #menu .envView').css('color', '')
} else {
// envView is the `Contract` tab, as a refactor the entire envView should have his own module
$('#header #menu .envView').css('color', '#FF8B8B')
}
// NOTE: still need to display as there might be warnings

39
src/app/staticanalysis/staticAnalysisView.js
Unescape View File

@ -3,6 +3,14 @@ var StaticAnalysisRunner = require('./staticAnalysisRunner.js')
var yo = require('yo-yo')
var $ = require('jquery')
var utils = require('../utils')
var csjs = require('csjs-inject')
var css = csjs`
.analysis {
margin-top: 2em;
font-height: 1.5em;
}
`
function staticAnalysisView (appAPI, compilerEvent) {
this.view = null
@ -25,7 +33,7 @@ function staticAnalysisView (appAPI, compilerEvent) {
staticAnalysisView.prototype.render = function () {
var self = this
var view = yo`<div>
var view = yo`<div class="${css.analysis}">
<strong>Static Analysis</strong>
<label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
<div id="staticanalysismodules">
@ -99,23 +107,23 @@ function renderModules (modules) {
return Object.keys(groupedModules).map((categoryId, i) => {
var category = groupedModules[categoryId]
var entriesDom = category.map((item, i) => {
return yo`<label>
<input id="staticanalysismodule_${categoryId}_${i}"
type="checkbox"
name="staticanalysismodule"
index=${item._index}
checked="true" style="vertical-align:bottom">${item.name} (${item.description})
</label>`
return yo`
<label>
<input id="staticanalysismodule_${categoryId}_${i}"
type="checkbox"
name="staticanalysismodule"
index=${item._index}
checked="true" style="vertical-align:bottom">
${item.name}
${item.description}
</label>
`
})
return yo`<div>
<br>
<label>
<b>${category[0].categoryDisplayName}</b> (
<input id="staticanalysismodule_${categoryId}"
type="checkbox"
checked="true"
style="vertical-align:bottom; margin-left:0"
onchange=${function () { $('[id^=' + this.id + ']').prop('checked', this.checked) }}/> all/none)
</label>
<b>${category[0].categoryDisplayName}</b>
</label>
${entriesDom}
</div>`
})
@ -129,4 +137,3 @@ function preProcessModules (arr) {
return item
})
}

16
src/universal-dapp.js
Unescape View File

@ -9,6 +9,21 @@ var EventManager = require('./lib/eventManager')
var crypto = require('crypto')
var async = require('async')
var TxRunner = require('./app/txRunner')
var csjs = require('csjs-inject')
var css = csjs`
.options {
float: left;
padding: 0.7em 0.3em;
font-size: 0.9em;
cursor: pointer;
background-color: transparent;
margin-right: 0.5em;
font-size: 1em;
}
`
;[...document.querySelectorAll('#header #options li')].forEach(addCss)
function addCss (el) { el.classList.add(css.options) }
/*
trigger debugRequested
@ -162,6 +177,7 @@ UniversalDApp.prototype.render = function () {
} else {
var $title = $('<span class="title"/>').text(self.contracts[c].name)
if (self.contracts[c].bytecode) {
$title.addClass('definitionTitle')
$title.append($('<div class="size"/>').text((self.contracts[c].bytecode.length / 2) + ' bytes'))
}
$contractEl.append($title).append(self.getCreateInterface($contractEl, self.contracts[c]))

Write Preview
Loading…
Cancel
Save