Skip to content

B
baas-ide
Commit 4e97db9f authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #533 from ninabreznik/style-guide

Style guide
parents b3e68cd4 9ba1af25
Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 258 deletions
.travis.yml
View file @ 4e97db9f
...@@ -2,7 +2,7 @@ language: node_js ...@@ -2,7 +2,7 @@ language: node_js
node_js: node_js:
- stable - stable
script: script:
- npm run lint && npm run csslint && npm run test && npm run downloadsolc && npm run make-mock-compiler && npm run build - npm run lint && npm run test && npm run downloadsolc && npm run make-mock-compiler && npm run build
- ./ci/browser_tests.sh - ./ci/browser_tests.sh
deploy: deploy:
provider: script provider: script
......
assets/css/browser-solidity.css
View file @ 4e97db9f
...@@ -136,11 +136,6 @@ body { ...@@ -136,11 +136,6 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
#output {
display: block;
padding: 1em;
}
#header { #header {
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
...@@ -166,6 +161,8 @@ body { ...@@ -166,6 +161,8 @@ body {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
justify-content: space-between;
} }
#header #options li.active { #header #options li.active {
...@@ -185,7 +182,6 @@ body { ...@@ -185,7 +182,6 @@ body {
#header #optionViews > div { #header #optionViews > div {
display: none; display: none;
padding: .5em .5em .5em;
} }
#header #optionViews.txView #txView { #header #optionViews.txView #txView {
...@@ -198,7 +194,6 @@ body { ...@@ -198,7 +194,6 @@ body {
#header #optionViews.publishView #publishView { #header #optionViews.publishView #publishView {
display: block; display: block;
padding: 3em;
} }
#header #optionViews.envView #envView { #header #optionViews.envView #envView {
...@@ -207,7 +202,6 @@ body { ...@@ -207,7 +202,6 @@ body {
#header #optionViews.debugView #debugView { #header #optionViews.debugView #debugView {
display: block; display: block;
padding: 3em;
} }
#header #optionViews.verificationView #verificationView { #header #optionViews.verificationView #verificationView {
...@@ -216,8 +210,6 @@ body { ...@@ -216,8 +210,6 @@ body {
#header #optionViews.staticanalysisView #staticanalysisView { #header #optionViews.staticanalysisView #staticanalysisView {
display: block; display: block;
padding: 3em;
line-height: 1.5em;
} }
#header #optionViews.txView input, #header #optionViews.txView input,
...@@ -264,12 +256,12 @@ body { ...@@ -264,12 +256,12 @@ body {
#publishView button { #publishView button {
background-color: #C6CFF7; background-color: #C6CFF7;
font-size: 12px; font-size: 12px;
padding: 0.25em;
margin-bottom: .5em; margin-bottom: .5em;
color: black; color: black;
border:0 none; border:0 none;
border-radius: 3px; border-radius: 3px;
width: 8em; width: 8em;
height: 20px;
margin-right: 1em; margin-right: 1em;
cursor: pointer; cursor: pointer;
} }
...@@ -303,24 +295,13 @@ body { ...@@ -303,24 +295,13 @@ body {
display: block; display: block;
} }
#header .origin, #header .origin {
#header #executionContext {
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
padding: 1.5em; padding: 1.5em;
font-weight: bold; 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 { #header #versionSelector {
text-decoration: none; text-decoration: none;
background-color: #C6CFF7; background-color: #C6CFF7;
...@@ -331,15 +312,6 @@ body { ...@@ -331,15 +312,6 @@ body {
border: 0 none; border: 0 none;
} }
.col1 {
width: 30%;
float: left;
}
.col2 {
width: 70%;
float: left;
}
#formalVerificationInput { #formalVerificationInput {
height: 4.5em; height: 4.5em;
width: 100%; width: 100%;
...@@ -354,18 +326,6 @@ body { ...@@ -354,18 +326,6 @@ body {
display: none; display: none;
} }
.udapp .contract > .title {
cursor:pointer;
}
.udapp .contract > .title:before {
content: "\25BC";
opacity: 0.5;
margin-right: 0.4em;
font-size: 10px;
margin-top: 0.2em;
}
.contract.hidesub > .title:before { .contract.hidesub > .title:before {
content: "\25B6"; content: "\25B6";
} }
...@@ -380,11 +340,13 @@ body { ...@@ -380,11 +340,13 @@ body {
overflow: auto; overflow: auto;
display: block; display: block;
clear: both; clear: both;
margin: 1.5em; margin: .5em .5em 0 .5em;
padding: .5em;
font-weight: bold; font-weight: bold;
} }
.crow #txorigin { .crow #txorigin {
margin-left: 0.5em;
text-decoration: none; text-decoration: none;
background-color: #C6CFF7; background-color: #C6CFF7;
cursor: pointer; cursor: pointer;
...@@ -412,9 +374,10 @@ body { ...@@ -412,9 +374,10 @@ body {
word-wrap: break-word; word-wrap: break-word;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
margin: 0.5em; margin: 0.5em 0 1em 0;
border-radius: 0.6em; border-radius: 5px;
padding: 1em 1.5em; line-height: 20px;
padding: 8px 15px;
} }
.sol.error pre, .sol.error pre,
...@@ -438,11 +401,13 @@ body { ...@@ -438,11 +401,13 @@ body {
} }
.sol.error { .sol.error {
background-color: rgba(255, 0, 0, 0.4); background-color: hsla(0, 100%, 75%, 0.1);
border: .2em dotted #FF8080;
} }
.sol.warning { .sol.warning {
background-color: rgba(210, 202, 36, 0.4); background-color: hsla(59, 56%, 78%, 0.5);
border: .2em dotted #ffbd01;
} }
#ghostbar { #ghostbar {
...@@ -465,7 +430,7 @@ body { ...@@ -465,7 +430,7 @@ body {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
z-index: 999; z-index: 999;
border-right: 2px solid #C6CFF7; border-right: 2px solid hsla(215, 81%, 79%, .3);
} }
#editor .ace-tm .ace_gutter, #editor .ace-tm .ace_gutter,
...@@ -475,11 +440,10 @@ body { ...@@ -475,11 +440,10 @@ body {
} }
input[readonly] { input[readonly] {
padding: .4em;
border: 1px solid #ccc;
box-sizing: border-box;
display: block; display: block;
width: 100%; width: 100%;
height: 7px;
padding: .8em;
} }
input[type="file"] { input[type="file"] {
......
assets/css/universal-dapp.css
View file @ 4e97db9f
.udapp { .udapp {
padding: .5em;
border: 1px dotted #4D5686;
position: relative; position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
...@@ -16,7 +14,6 @@ ...@@ -16,7 +14,6 @@
color: #7A7AE2; color: #7A7AE2;
} }
.udapp input,
.udapp button, .udapp button,
.udapp-setup textarea, .udapp-setup textarea,
.udapp-setup button { .udapp-setup button {
...@@ -47,30 +44,7 @@ ...@@ -47,30 +44,7 @@
.udapp .create { .udapp .create {
overflow: auto; overflow: auto;
margin-bottom: 1em; margin: 1em;
}
.udapp .title {
margin-bottom: 0.4em;
padding: 1em;
background-color: #C6CFF7;
font-weight: bold;
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 {
font-weight: normal;
} }
.udapp .output { .udapp .output {
...@@ -205,12 +179,8 @@ ...@@ -205,12 +179,8 @@
border-radius: 3px; border-radius: 3px;
} }
.udapp input {
border-left: 0 none;
}
.udapp button { .udapp button {
background-color: #666; padding: .36em;
color: #4C4B4B; color: #4C4B4B;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
...@@ -310,15 +280,24 @@ ...@@ -310,15 +280,24 @@
} }
.udapp .legend { .udapp .legend {
font-size: 12px; background-color: white;
float: left; line-height: 20px;
color: #666; border: .2em dotted lightGrey;
padding: 8px 15px;
border-radius: 5px;
margin-bottom: 1em;
display: flex;
justify-content: initial;
flex-wrap: wrap;
} }
.udapp .legend div { .udapp .legend div {
display: inline-block; display: inline-block;
margin-right: 0.5em; margin-right: 0.5em;
margin-bottom: 1em; display: flex;
align-items: center;
line-height: 0px;
padding: 5px;
} }
.udapp .legend div:before { .udapp .legend div:before {
...@@ -329,6 +308,7 @@ ...@@ -329,6 +308,7 @@
height: 1em; height: 1em;
margin-right: 0.5em; margin-right: 0.5em;
width: 1em; width: 1em;
border-radius: 50%;
} }
.udapp .legend .publish:before { .udapp .legend .publish:before {
......
ci/browser_tests.sh
View file @ 4e97db9f
...@@ -19,8 +19,11 @@ while [ ! -f "$SAUCECONNECT_READYFILE" ]; do ...@@ -19,8 +19,11 @@ while [ ! -f "$SAUCECONNECT_READYFILE" ]; do
sleep .5 sleep .5
done done
# npm run browser-test-remote-parallel || TEST_EXITCODE=1 npm run nightwatch_remote_chrome || TEST_EXITCODE=1
npm run nightwatch_remote_parallel || TEST_EXITCODE=1 npm run nightwatch_remote_firefox || TEST_EXITCODE=1
npm run nightwatch_remote_safari || TEST_EXITCODE=1
# npm run nightwatch_remote_ie || TEST_EXITCODE=1
# npm run nightwatch_remote_parallel || TEST_EXITCODE=1
node ci/sauceDisconnect.js "$SAUCECONNECT_USERNAME" "$SAUCECONNECT_ACCESSKEY" "$SAUCECONNECT_JOBIDENTIFIER" node ci/sauceDisconnect.js "$SAUCECONNECT_USERNAME" "$SAUCECONNECT_ACCESSKEY" "$SAUCECONNECT_JOBIDENTIFIER"
......
index.html
View file @ 4e97db9f
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- <!--
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2014, 2015, the individual contributors Copyright (c) 2014, 2015, the individual contributors
...@@ -26,7 +25,6 @@ ...@@ -26,7 +25,6 @@
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
--> -->
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Remix</title> <title>Remix</title>
...@@ -57,6 +55,7 @@ ...@@ -57,6 +55,7 @@
<div id="righthand-panel"> <div id="righthand-panel">
<div id="header"> <div id="header">
<div id="menu"> <div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
<ul id="options"> <ul id="options">
<li class="settingsView active" title="Settings">Settings</li> <li class="settingsView active" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li> <li class="publishView" title="Publish" >Files</li>
...@@ -65,88 +64,14 @@ ...@@ -65,88 +64,14 @@
<li class="staticanalysisView" title="Static Analysis">Analysis</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> <li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul> </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>
<div id="optionViews" class="settingsView"> <div id="optionViews" class="settingsView">
<div id="txView"></div> <!-- contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js -->
<div id="settingsView">
<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">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.
</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 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>
<span id="executionContext">
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>
<div id="staticanalysisView">
<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> </div>
</div> </div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>
</html> </html>
nightwatch.js
View file @ 4e97db9f
...@@ -50,8 +50,8 @@ module.exports = { ...@@ -50,8 +50,8 @@ module.exports = {
'desiredCapabilities': { 'desiredCapabilities': {
'browserName': 'safari', 'browserName': 'safari',
'javascriptEnabled': true, 'javascriptEnabled': true,
'platform': 'OS X 10.10', 'platform': 'OS X 10.11',
'version': '8.0', 'version': '10.0',
'acceptSslCerts': true, 'acceptSslCerts': true,
'build': 'build-' + TRAVIS_JOB_NUMBER, 'build': 'build-' + TRAVIS_JOB_NUMBER,
'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER 'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER
...@@ -62,8 +62,9 @@ module.exports = { ...@@ -62,8 +62,9 @@ module.exports = {
'desiredCapabilities': { 'desiredCapabilities': {
'browserName': 'internet explorer', 'browserName': 'internet explorer',
'javascriptEnabled': true, 'javascriptEnabled': true,
'platform': 'Windows 10',
'acceptSslCerts': true, 'acceptSslCerts': true,
'version': '11', 'version': '11.103',
'build': 'build-' + TRAVIS_JOB_NUMBER, 'build': 'build-' + TRAVIS_JOB_NUMBER,
'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER 'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER
} }
......
package.json
View file @ 4e97db9f
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"babelify": "^7.3.0", "babelify": "^7.3.0",
"brace": "^0.8.0", "brace": "^0.8.0",
"browserify-reload": "^1.0.3", "browserify-reload": "^1.0.3",
"clipboard-copy": "^1.2.0",
"csjs-inject": "^1.0.1", "csjs-inject": "^1.0.1",
"csslint": "^1.0.2", "csslint": "^1.0.2",
"ethereum-remix": "https://github.com/ethereum/remix", "ethereum-remix": "https://github.com/ethereum/remix",
...@@ -92,24 +93,39 @@ ...@@ -92,24 +93,39 @@
}, },
"browserify": { "browserify": {
"transform": [ "transform": [
["babelify", { [
"sourceMapsAbsolute": false, "babelify",
"sourceMaps": true, {
"plugins": [ "sourceMapsAbsolute": false,
["fast-async", { "sourceMaps": true,
"runtimePattern": null, "plugins": [
"compiler": { [
"es7": true, "fast-async",
"noRuntime": true, {
"promises": true, "runtimePattern": null,
"wrapAwait": true "compiler": {
} "es7": true,
}], "noRuntime": true,
["yo-yoify"], ["transform-object-assign"] "promises": true,
], "wrapAwait": true
"presets": ["es2015"] }
}], }
["uglifyify"] ],
[
"yo-yoify"
],
[
"transform-object-assign"
]
],
"presets": [
"es2015"
]
}
],
[
"uglifyify"
]
] ]
}, },
"scripts": { "scripts": {
......
src/app.js
View file @ 4e97db9f
...@@ -29,6 +29,29 @@ var FilePanel = require('./app/file-panel') ...@@ -29,6 +29,29 @@ var FilePanel = require('./app/file-panel')
var examples = require('./app/example-contracts') var examples = require('./app/example-contracts')
var contractTab = require('./app/contract-tab.js')
var settingsTab = require('./app/settings-tab.js')
var analysisTab = require('./app/analysis-tab.js')
var debuggerTab = require('./app/debugger-tab.js')
var filesTab = require('./app/files-tab.js')
/* ----------------------------------------------
TABS - Righthand pannel
---------------------------------------------- */
var contractView = contractTab()
document.querySelector('#optionViews').appendChild(contractView)
var settingsView = settingsTab()
document.querySelector('#optionViews').appendChild(settingsView)
var analysisView = analysisTab()
document.querySelector('#optionViews').appendChild(analysisView)
var debuggerView = debuggerTab()
document.querySelector('#optionViews').appendChild(debuggerView)
var filesView = filesTab()
document.querySelector('#optionViews').appendChild(filesView)
// The event listener needs to be registered as early as possible, because the // The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event. // parent will send the message upon the "load" event.
var filesToLoad = null var filesToLoad = null
...@@ -406,12 +429,6 @@ var run = function () { ...@@ -406,12 +429,6 @@ var run = function () {
return $filesEl.position().left return $filesEl.position().left
} }
function activeFilePos () {
var el = $filesEl.find('.active')
var l = el.position().left
return l
}
function reAdjust () { function reAdjust () {
if (widthOfList() + getLeftPosi() > widthOfVisible()) { if (widthOfList() + getLeftPosi() > widthOfVisible()) {
$scrollerRight.fadeIn('fast') $scrollerRight.fadeIn('fast')
...@@ -785,7 +802,8 @@ var run = function () { ...@@ -785,7 +802,8 @@ var run = function () {
} }
} }
var staticanalysis = new StaticAnalysis(staticAnalysisAPI, compiler.event) var staticanalysis = new StaticAnalysis(staticAnalysisAPI, compiler.event)
$('#staticanalysisView').append(staticanalysis.render()) var node = document.getElementById('staticanalysisView')
node.insertBefore(staticanalysis.render(), node.childNodes[0])
// ----------------- autoCompile ----------------- // ----------------- autoCompile -----------------
var autoCompile = document.querySelector('#autoCompile').checked var autoCompile = document.querySelector('#autoCompile').checked
...@@ -876,7 +894,7 @@ var run = function () { ...@@ -876,7 +894,7 @@ var run = function () {
}) })
compiler.event.register('loadingCompiler', this, function (url, usingWorker) { compiler.event.register('loadingCompiler', this, function (url, usingWorker) {
setVersionText(usingWorker ? '(loading using worker)' : '( Loading... Please, wait a moment. )') setVersionText(usingWorker ? '(loading using worker)' : ' Loading... please, wait a moment! ')
}) })
compiler.event.register('compilerLoaded', this, function (version) { compiler.event.register('compilerLoaded', this, function (version) {
...@@ -956,7 +974,7 @@ var run = function () { ...@@ -956,7 +974,7 @@ var run = function () {
loadVersion($('#versionSelector').val()) loadVersion($('#versionSelector').val())
}) })
var header = new Option('Click to select new compiler version') var header = new Option('Select new compiler version')
header.disabled = true header.disabled = true
header.selected = true header.selected = true
$('#versionSelector').append(header) $('#versionSelector').append(header)
......
src/app/analysis-tab.js 0 → 100644
View file @ 4e97db9f
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
.analysisTabView {
padding: 2%;
margin-top: 1em;
}
.infoBox extends ${styles.infoTextBox} {
margin-bottom: 1em;
}
.textBox extends ${styles.textBoxL} {
margin-bottom: 1em;
}
`
module.exports = analysisTab
function analysisTab () {
return yo`
<div class="${css.analysisTabView} "id="staticanalysisView">
<div class="${css.infoBox}">
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.
</div>
<textarea class="${css.textBox}" id="formalVerificationInput" readonly="readonly"></textarea>
<div id="formalVerificationErrors"></div>
</div>
`
}
src/app/contract-tab.js 0 → 100644
View file @ 4e97db9f
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
.contractTabView {
padding: 2%;
}
.crow {
margin-top: 1em;
display: flex;
}
.col1 extends ${styles.titleL} {
width: 30%;
float: left;
align-self: center;
}
.col1_1 extends ${styles.titleM} {
width: 30%;
float: left;
align-self: center;
}
.col2 extends ${styles.textBoxL}{
width: 70%;
height: 7px;
float: left;
padding: .8em;
}
.select extends ${styles.dropdown} {
width: 70%;
float: left;
text-align: center;
}
.contract {
display: block;
margin: 4em 0 2em 0;
}
`
module.exports = contractTab
function contractTab () {
return yo`
<div class="${css.contractTabView}" id="envView">
<div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}">
Execution environment
</div>
<select id="selectExEnvOptions" class="${css.select}">
<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>
</div>
<div class="${css.crow}">
<div class="${css.col1_1}">Transaction origin</div>
<select name="txorigin" class="${css.select}" id="txorigin"></select>
</div>
<div class="${css.crow}">
<div class="${css.col1_1}">Transaction gas limit</div>
<input type="number" class="${css.col2}" id="gasLimit" value="3000000">
</div>
<div class="${css.crow} hide">
<div class="${css.col1_1}">Gas Price</div>
<input type="number" class="${css.col2}" id="gasPrice" value="0">
</div>
<div class="${css.crow}">
<div class="${css.col1_1}"> Value</div>
<input type="text" class="${css.col2}" id="value" value="0" title="(e.g. .7 ether ...)">
</div>
<div id="output" class="${css.contract}"></div>
</div>
`
}
src/app/debugger-tab.js 0 → 100644
View file @ 4e97db9f
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var css = csjs`
.debuggerTabView {
padding: 2%;
}
`
module.exports = debuggerTab
function debuggerTab () {
return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
}
src/app/editor.js
View file @ 4e97db9f
...@@ -19,8 +19,7 @@ var css = csjs` ...@@ -19,8 +19,7 @@ var css = csjs`
} }
.ace-editor { .ace-editor {
top : 4px; top : 4px;
border-top : 3px solid transparent; font-size : 2vmin;
font-size : 15px;
width : 100%; width : 100%;
} }
` `
......
src/app/execution-context.js
View file @ 4e97db9f
...@@ -136,7 +136,7 @@ function ExecutionContext () { ...@@ -136,7 +136,7 @@ function ExecutionContext () {
DROPDOWN DROPDOWN
--------------------------------------------------------------------------- */ --------------------------------------------------------------------------- */
var selectExEnv = document.querySelector('#selectExEnv') var selectExEnv = document.querySelector('#selectExEnvOptions')
selectExEnv.addEventListener('change', function (event) { selectExEnv.addEventListener('change', function (event) {
if (!executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) { if (!executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) {
selectExEnv.value = executionContext selectExEnv.value = executionContext
......
src/app/file-panel.js
View file @ 4e97db9f
...@@ -55,10 +55,10 @@ var css = csjs` ...@@ -55,10 +55,10 @@ var css = csjs`
} }
.dragbar { .dragbar {
position : relative; position : relative;
top : 6px; top : 4px;
cursor : col-resize; cursor : col-resize;
z-index : 999; z-index : 999;
border-right : 2px solid #C6CFF7; border-right : 2px solid hsla(215, 81%, 79%, .3);
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
......
src/app/files-tab.js 0 → 100644
View file @ 4e97db9f
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
.filesTabView {
padding: 2%;
}
.crow {
margin-top: 1em;
display: flex;
}
.infoBox extends ${styles.infoTextBox} {
margin-top: 2em;
}
`
module.exports = filesTab
function filesTab () {
return yo`
<div class="${css.filesTabView}" id="publishView">
<div class="${css.crow}">
<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>
</div>
<div class="${css.crow}">
<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.
</div>
<div class="${css.infoBox}">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.
</div>
</div>
`
}
src/app/renderer.js
View file @ 4e97db9f
...@@ -4,6 +4,40 @@ var $ = require('jquery') ...@@ -4,6 +4,40 @@ var $ = require('jquery')
var utils = require('./utils') var utils = require('./utils')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
.col2 {
width: 70%;
float: left;
}
.col1 extends ${styles.titleL} {
width: 30%;
float: left;
}
.toggleText {
text-decoration: underline;
margin-left: 2px;
font-size: .9em;
}
.toggle {
font-size: 1.1em;
color: ${styles.colors.blue};
margin: 1em;
cursor: pointer;
font-weight: 400;
display: flex;
align-items: center;
}
.toggle:hover {
opacity: .8;
}
`
// ----------------------------------------------
function Renderer (appAPI, formalVerificationEvent, compilerEvent) { function Renderer (appAPI, formalVerificationEvent, compilerEvent) {
this.appAPI = appAPI this.appAPI = appAPI
var self = this var self = this
...@@ -96,16 +130,17 @@ Renderer.prototype.contracts = function (data, source) { ...@@ -96,16 +130,17 @@ Renderer.prototype.contracts = function (data, source) {
} }
var tableRowItems = function (first, second, cls) { var tableRowItems = function (first, second, cls) {
second.get(0).classList.add(styles.textBoxL) // replace <pre> styling with textBoxL
return $('<div class="crow"/>') return $('<div class="crow"/>')
.addClass(cls) .addClass(cls)
.append($('<div class="col1">').append(first)) .append($(`<div class="${css.col1}">`).append(first))
.append($('<div class="col2">').append(second)) .append($(`<div class="${css.col2}">`).append(second))
} }
var tableRow = function (description, data) { var tableRow = function (description, data) {
return tableRowItems( return tableRowItems(
$('<span/>').text(description), $('<span/>').text(description),
$('<input readonly="readonly"/>').val(data)) $(`<input class="${css.col2} ${styles.textBoxL}" readonly="readonly"/>`).val(data))
} }
var preRow = function (description, data) { var preRow = function (description, data) {
...@@ -219,9 +254,25 @@ Renderer.prototype.contracts = function (data, source) { ...@@ -219,9 +254,25 @@ Renderer.prototype.contracts = function (data, source) {
var detailsOpen = {} var detailsOpen = {}
var getDetails = function (contract, source, contractName) { var getDetails = function (contract, source, contractName) {
var button = $('<button>Toggle Details</button>') var button = $(`<div class="${css.toggle}"><i class="fa fa-info-circle" aria-hidden="true"></i><div class="${css.toggleText}">Contract details (bytecode, interface etc.)</div></div>`)
var details = $('<div style="display: none;"/>') var details = $('<div style="display: none;"/>')
if (contract.bytecode) {
details.append(preRow('Bytecode', contract.bytecode))
}
details.append(preRow('Interface', contract['interface']))
if (contract.bytecode) {
details.append(preRow('Web3 deploy', gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
// check if there's a metadata hash appended
var metadataHash = retrieveMetadataHash(contract.bytecode)
if (metadataHash) {
details.append(preRow('Metadata location', 'bzzr://' + metadataHash))
}
}
if (contract.metadata) { if (contract.metadata) {
details.append(preRow('Metadata', contract.metadata)) details.append(preRow('Metadata', contract.metadata))
} }
...@@ -264,22 +315,6 @@ Renderer.prototype.contracts = function (data, source) { ...@@ -264,22 +315,6 @@ Renderer.prototype.contracts = function (data, source) {
var self = this var self = this
var renderOutputModifier = function (contractName, $contractOutput) { var renderOutputModifier = function (contractName, $contractOutput) {
var contract = data.contracts[contractName] var contract = data.contracts[contractName]
if (contract.bytecode) {
$contractOutput.append(tableRow('Bytecode', contract.bytecode))
}
$contractOutput.append(tableRow('Interface', contract['interface']))
if (contract.bytecode) {
$contractOutput.append(preRow('Web3 deploy', gethDeploy(contractName.toLowerCase(), contract['interface'], contract.bytecode), 'deploy'))
// check if there's a metadata hash appended
var metadataHash = retrieveMetadataHash(contract.bytecode)
if (metadataHash) {
$contractOutput.append(tableRow('Metadata location', 'bzzr://' + metadataHash))
}
}
var ctrSource = self.appAPI.currentCompiledSourceCode() var ctrSource = self.appAPI.currentCompiledSourceCode()
if (ctrSource) { if (ctrSource) {
$contractOutput.append(getDetails(contract, ctrSource, contractName)) $contractOutput.append(getDetails(contract, ctrSource, contractName))
...@@ -306,9 +341,8 @@ Renderer.prototype.contracts = function (data, source) { ...@@ -306,9 +341,8 @@ Renderer.prototype.contracts = function (data, source) {
} }
}) })
$contractOutput.find('.title').click(function (ev) { $(this).closest('.contract').toggleClass('hidesub') })
$('#output').append($contractOutput) $('#output').append($contractOutput)
$('.col2 input,textarea').click(function () { this.select() }) $('.' + css.col2 + ' input,textarea').click(function () { this.select() })
} }
module.exports = Renderer module.exports = Renderer
src/app/settings-tab.js 0 → 100644
View file @ 4e97db9f
var yo = require('yo-yo')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs`
.settingsTabView {
padding: 2%;
display: flex;
}
.info extends ${styles.infoTextBox} {
margin-bottom: 2em;
}
.crow {
margin-top: 1em;
display: flex;
}
.select extends ${styles.dropdown} {
float: left;
max-width: 90%;
}
.button extends ${styles.button} {
background-color: #C6CFF7;
width: 100%;
align-self: center;
text-align: -webkit-center;
}
.col1 extends ${styles.titleL} {
float: left;
align-self: center;
}
.checkboxText {
margin-left: 3px;
}
}
`
module.exports = settingsTab
function settingsTab () {
return yo`
<div class="${css.settingsTabView} "id="settingsView">
<div class="${css.info}">
<div>Your current Solidity version is</div>
<div id="version"></div>
</div>
<div class="${css.crow}">
<select class="${css.select}" id="versionSelector"></select>
</div>
<div class="${css.crow}">
<div><input class="${css.col1}" id="editorWrap" type="checkbox"></div>
<span class="${css.checkboxText}">Text Wrap</span>
</div>
<div class="${css.crow}">
<div><input class="${css.col1}" id="optimize" type="checkbox"></div>
<span class="${css.checkboxText}">Enable Optimization</span>
</div>
<div class="${css.crow}">
<div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
<span class="${css.checkboxText}">Auto Compile</span>
</div>
</div>
<div class="${css.crow}">
<div class="${css.button} "id="compile" title="Compile source code">Compile</div>
</div>
</div>
`
}
src/app/staticanalysis/modules/gasCosts.js
View file @ 4e97db9f
var name = 'gas costs' var name = 'gas costs: '
var desc = 'Warn if the gas requiremets of functions are too high.' var desc = 'warn if the gas requiremets of functions are too high'
var categories = require('./categories') var categories = require('./categories')
function gasCosts () { function gasCosts () {
......
src/app/staticanalysis/modules/thisLocal.js
View file @ 4e97db9f
var name = 'this on local' var name = 'this on local: '
var desc = 'Invocation of local functions via this' var desc = 'invocation of local functions via this'
var categories = require('./categories') var categories = require('./categories')
var common = require('./staticAnalysisCommon') var common = require('./staticAnalysisCommon')
......
src/app/staticanalysis/modules/txOrigin.js
View file @ 4e97db9f
var name = 'tx origin' var name = 'tx origin: '
var desc = 'warn if tx.origin is used' var desc = 'warn if tx.origin is used'
var categories = require('./categories') var categories = require('./categories')
......
src/app/staticanalysis/staticAnalysisView.js
View file @ 4e97db9f
...@@ -7,9 +7,11 @@ var csjs = require('csjs-inject') ...@@ -7,9 +7,11 @@ var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.analysis { .analysis {
margin-top: 2em;
font-height: 1.5em; font-height: 1.5em;
} }
.result {
margin-top: 1em;
}
` `
function staticAnalysisView (appAPI, compilerEvent) { function staticAnalysisView (appAPI, compilerEvent) {
...@@ -33,17 +35,19 @@ function staticAnalysisView (appAPI, compilerEvent) { ...@@ -33,17 +35,19 @@ function staticAnalysisView (appAPI, compilerEvent) {
staticAnalysisView.prototype.render = function () { staticAnalysisView.prototype.render = function () {
var self = this var self = this
var view = yo`<div class="${css.analysis}"> var view = yo`
<strong>Static Analysis</strong> <div class="${css.analysis}">
<label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label> <strong class="${css.title}">Static Analysis</strong><br>
<div id="staticanalysismodules"> <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
${this.modulesView} <div id="staticanalysismodules">
</div> ${this.modulesView}
<div> </div>
<button onclick=${function () { self.run() }} >Run</button> <div>
<button onclick=${function () { self.run() }} >Run</button>
</div>
<div class="${css.result}" "id='staticanalysisresult'></div>
</div> </div>
<div id='staticanalysisresult'></div> `
</div>`
if (!this.view) { if (!this.view) {
this.view = view this.view = view
} }
......
src/app/style-guide.js 0 → 100644
View file @ 4e97db9f
var csjs = require('csjs-inject')
module.exports = styleGuide
function styleGuide () {
/* --------------------------------------------------------------------------
COLORS
-------------------------------------------------------------------------- */
var colors = {
blue: '#9393bf',
lightBlue: '#F4F6FF',
greyBlue: '#102026',
grey: '#666',
lightGrey: '#dddddd',
red: '#FF8080',
lightRed: '#FFB9B9',
green: '#B1EAC5',
violet: '#C6CFF7',
pink: '#EC96EC',
yellow: '#ffbd01'
}
/* --------------------------------------------------------------------------
FONTS
-------------------------------------------------------------------------- */
var texts = csjs `
.title-XL {
font-size : 2em;
font-weight : 700;
letter-spacing : .05em;
}
.title-L {
font-size : 1em;
font-weight : 600;
}
.title-M {
font-size : 1em;
font-weight : 400;
}
.title-S {
font-size : .8em;
font-weight : 300;
}
.text {
font-size : .8em;
}
`
/* --------------------------------------------------------------------------
TEXT-BOXES
-------------------------------------------------------------------------- */
var textBoxes = csjs`
.display-box-L {
font-size : 1em;
padding : 8px 15px;
line-height : 20px;
background : #f8f8f8;
border-radius : 3px;
border : 1px solid #e5e5e5;
overflow-x : auto;
width : 100%;
}
.info-text-box {
background-color : white;
line-height : 20px;
border : .2em dotted lightGrey;
padding : 8px 15px;
border-radius : 5px;
margin-bottom : 1em;
}
.warning-text-box {
background-color : #E6E5A7; // yellow
line-height : 20px;
padding : 1em 1em .5em 1em;
border-radius : 3px;
box-shadow : rgba(0,0,0,.2) 0 1px 4px;
margin-bottom : 1em;
}
.error-text-box {
background-color : #FFB9B9; // light-red
line-height : 20px;
padding : 1em 1em .5em 1em;
border-radius : 3px;
box-shadow : rgba(0,0,0,.2) 0 1px 4px;
margin-bottom : 1em;
}
.title-box {
margin-bottom : 0.4em;
padding : 1em;
background-color : transparent;
font-weight : bold;
display : flex;
justify-content : space-between;
word-wrap : break-word;
position : relative;
border-radius : 3px;
}
`
/* --------------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------------- */
var buttons = csjs`
.button {
border-color : transparent;
border-radius : 3px;
cursor : pointer;
padding : .3em;
}
.button:hover {
opacity : 0.8;
}
.dropdown-menu {
font-size : 1em;
text-decoration : none;
background-color : #C6CFF7;
cursor : pointer;
font-size : 12px;
border : none;
height : 20px;
}
`
/* --------------------------------------------------------------------------
INPUT FIELDS
-------------------------------------------------------------------------- */
/*
.input-field {
border : 1px solid #f0f0f0; // light-grey
padding : .3em;
margin : .3em;
}
*/
return {
textBoxL: textBoxes['display-box-L'],
infoTextBox: textBoxes['info-text-box'],
titleL: texts['title-L'],
titleM: texts['title-M'],
dropdown: buttons['dropdown-menu'],
button: buttons['button'],
colors: colors,
titleBox: textBoxes['title-box']
}
}
src/universal-dapp.js
View file @ 4e97db9f
...@@ -9,7 +9,15 @@ var EventManager = require('./lib/eventManager') ...@@ -9,7 +9,15 @@ var EventManager = require('./lib/eventManager')
var crypto = require('crypto') var crypto = require('crypto')
var async = require('async') var async = require('async')
var TxRunner = require('./app/txRunner') var TxRunner = require('./app/txRunner')
var yo = require('yo-yo')
// copy to copyToClipboard
const copy = require('clipboard-copy')
// -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./app/style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
.options { .options {
...@@ -21,7 +29,75 @@ var css = csjs` ...@@ -21,7 +29,75 @@ var css = csjs`
margin-right: 0.5em; margin-right: 0.5em;
font-size: 1em; font-size: 1em;
} }
.title extends ${styles.titleBox} {
cursor: pointer;
background-color: ${styles.colors.violet};
}
.title:hover {
opacity: .8;
}
.contract .title:before {
content: "\\25BE";
}
.contract.hidesub .title:before {
content: "\\25B8"
}
.contract.hidesub {
padding-bottom: 0;
margin: 0;
}
.contract.hidesub > *:not(.title) {
display: none;
}
` `
var cssInstance = csjs`
.title {
display: flex;
justify-content: center;
margin-bottom: 1em;
padding: 1em;
font-size: .95em;
cursor: pointer;
background-color: ${styles.colors.violet};
border: 2px dotted ${styles.colors.blue};
border-radius: 5px;
}
.titleText {
margin-right: 1em;
word-break: break-all;
}
.titleText:hover {
opacity: .8;
}
.instance .title:before {
content: "\\25BE";
margin-right: .5em;
}
.instance.hidesub .title:before {
content: "\\25B8"
margin-right: .5em;
}
.instance.hidesub {
padding-bottom: 0;
margin: 0;
}
.instance.hidesub > *:not(.title) {
display: none;
}
.copy extends ${styles.button} {
border: 1px dotted ${styles.colors.grey};
border-radius: 5px;
text-align: center;
padding: 1em .3em;
min-width: 30%;
}
.copy:hover{
background-color: ${styles.colors.lightGrey};
opacity: .8;
}
`
;[...document.querySelectorAll('#header #options li')].forEach(addCss) ;[...document.querySelectorAll('#header #options li')].forEach(addCss)
function addCss (el) { el.classList.add(css.options) } function addCss (el) { el.classList.add(css.options) }
...@@ -164,20 +240,20 @@ UniversalDApp.prototype.render = function () { ...@@ -164,20 +240,20 @@ UniversalDApp.prototype.render = function () {
.append($('<div class="publish"/>').text('Publish')) .append($('<div class="publish"/>').text('Publish'))
.append($('<div class="attach"/>').text('Attach')) .append($('<div class="attach"/>').text('Attach'))
.append($('<div class="transact"/>').text('Transact')) .append($('<div class="transact"/>').text('Transact'))
.append($('<div class="payable"/>').text('Transact (Payable)')) .append($('<div class="payable"/>').text('Transact(Payable)'))
.append($('<div class="call"/>').text('Call')) .append($('<div class="call"/>').text('Call'))
self.$el.append($legend) self.$el.append($legend)
for (var c in self.contracts) { for (var c in self.contracts) {
var $contractEl = $('<div class="contract"/>') var $contractEl = $(`<div class="contract ${css.contract}"/>`)
if (self.contracts[c].address) { if (self.contracts[c].address) {
self.getInstanceInterface(self.contracts[c], self.contracts[c].address, $contractEl) self.getInstanceInterface(self.contracts[c], self.contracts[c].address, $contractEl)
} else { } else {
var $title = $('<span class="title"/>').text(self.contracts[c].name) var $title = $(`<span class="${css.title}"/>`).text(self.contracts[c].name)
$title.click(function (ev) { $(this).closest(`.${css.contract}`).toggleClass(`${css.hidesub}`) })
if (self.contracts[c].bytecode) { if (self.contracts[c].bytecode) {
$title.addClass('definitionTitle')
$title.append($('<div class="size"/>').text((self.contracts[c].bytecode.length / 2) + ' bytes')) $title.append($('<div class="size"/>').text((self.contracts[c].bytecode.length / 2) + ' bytes'))
} }
$contractEl.append($title).append(self.getCreateInterface($contractEl, self.contracts[c])) $contractEl.append($title).append(self.getCreateInterface($contractEl, self.contracts[c]))
...@@ -207,7 +283,7 @@ UniversalDApp.prototype.getCreateInterface = function ($container, contract) { ...@@ -207,7 +283,7 @@ UniversalDApp.prototype.getCreateInterface = function ($container, contract) {
$createInterface.append($close) $createInterface.append($close)
} }
var $publishButton = $('<button class="publishContract"/>').text('Publish').click(function () { self.event.trigger('publishContract', [contract]) }) var $publishButton = $(`<button class="publishContract"/>`).text('Publish').click(function () { self.event.trigger('publishContract', [contract]) })
$createInterface.append($publishButton) $createInterface.append($publishButton)
var $atButton = $('<button class="atAddress"/>').text('At Address').click(function () { self.clickContractAt(self, $container.find('.createContract'), contract) }) var $atButton = $('<button class="atAddress"/>').text('At Address').click(function () { self.clickContractAt(self, $container.find('.createContract'), contract) })
...@@ -264,7 +340,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar ...@@ -264,7 +340,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
var $createInterface = $('<div class="createContract"/>') var $createInterface = $('<div class="createContract"/>')
var appendFunctions = function (address, $el) { var appendFunctions = function (address, $el) {
var $instance = $('<div class="instance"/>') var $instance = $(`<div class="instance ${cssInstance.instance}"/>`)
if (self.options.removable_instances) { if (self.options.removable_instances) {
var $close = $('<div class="udapp-close" />') var $close = $('<div class="udapp-close" />')
$close.click(function () { $instance.remove() }) $close.click(function () { $instance.remove() })
...@@ -273,10 +349,19 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar ...@@ -273,10 +349,19 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
var context = self.executionContext.isVM() ? 'memory' : 'blockchain' var context = self.executionContext.isVM() ? 'memory' : 'blockchain'
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
var $title = $('<span class="title"/>').text(contract.name + ' at ' + address + ' (' + context + ')') var title = yo`
$title.click(function () { <div class="${cssInstance.title}">
$instance.toggleClass('hidesub') <div class="${cssInstance.titleText}" onclick=${toggleClass}> ${contract.name} at ${address} (${context}) </div>
}) <div class="${cssInstance.copy}" onclick=${copyToClipboard}> <i class="fa fa-clipboard" aria-hidden="true"></i> Copy address </div>
</div>
`
function toggleClass () {
$instance.toggleClass(`${cssInstance.hidesub}`)
}
function copyToClipboard () {
copy(address)
}
var $events = $('<div class="events"/>') var $events = $('<div class="events"/>')
...@@ -336,7 +421,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar ...@@ -336,7 +421,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
var eventFilter = self.web3.eth.contract(abi).at(address).allEvents() var eventFilter = self.web3.eth.contract(abi).at(address).allEvents()
eventFilter.watch(parseLogs) eventFilter.watch(parseLogs)
} }
$instance.append($title) $instance.get(0).appendChild(title)
// Add the fallback function // Add the fallback function
var fallback = self.getFallbackInterface(abi) var fallback = self.getFallbackInterface(abi)
...@@ -615,7 +700,6 @@ UniversalDApp.prototype.getCallButton = function (args) { ...@@ -615,7 +700,6 @@ UniversalDApp.prototype.getCallButton = function (args) {
var outputObj = '0x' + result.vm.return.toString('hex') var outputObj = '0x' + result.vm.return.toString('hex')
clearOutput($result) clearOutput($result)
$result.append(getReturnOutput(outputObj)).append(getGasUsedOutput(result, result.vm)) $result.append(getReturnOutput(outputObj)).append(getGasUsedOutput(result, result.vm))
decoded = decodeResponse(result.vm.return) decoded = decodeResponse(result.vm.return)
if (decoded) { if (decoded) {
$result.append(decoded) $result.append(decoded)
......
test-browser/helpers/contracts.js
View file @ 4e97db9f
...@@ -6,7 +6,7 @@ module.exports = { ...@@ -6,7 +6,7 @@ module.exports = {
} }
function checkCompiledContracts (browser, compiled, callback) { function checkCompiledContracts (browser, compiled, callback) {
browser.elements('css selector', '.udapp .contract .title', function (elements) { browser.elements('css selector', '.udapp .title', function (elements) {
elements.value.map(function (item, i) { elements.value.map(function (item, i) {
browser.elementIdText(item.ELEMENT, function (text) { browser.elementIdText(item.ELEMENT, function (text) {
browser.assert.equal(text.value.split('\n')[0], compiled[i]) browser.assert.equal(text.value.split('\n')[0], compiled[i])
...@@ -21,7 +21,7 @@ function testContracts (browser, contractCode, compiledContractNames, callback) ...@@ -21,7 +21,7 @@ function testContracts (browser, contractCode, compiledContractNames, callback)
.clearValue('#input textarea') .clearValue('#input textarea')
.click('.newFile') .click('.newFile')
.setValue('#input textarea', contractCode, function () {}) .setValue('#input textarea', contractCode, function () {})
.waitForElementPresent('.contract .create', 5000, true, function () { .waitForElementPresent('.udapp .create', 5000, true, function () {
checkCompiledContracts(browser, compiledContractNames, callback) checkCompiledContracts(browser, compiledContractNames, callback)
}) })
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment