Skip to content

B
baas-ide
Commit 69b15fd3 authored by ninabreznik's avatar ninabreznik
Browse files
Options

Rename and restructure tabs and content in righthand panel

parent 81fc40e6
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 169 deletions
assets/css/browser-solidity.css
View file @ 69b15fd3
......@@ -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;
}
assets/css/universal-dapp.css
View file @ 69b15fd3
.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) {
......
index.html
View file @ 69b15fd3
......@@ -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>
......
package.json
View file @ 69b15fd3
......@@ -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"
}
}
src/app.js
View file @ 69b15fd3
......@@ -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)
......
src/app/execution-context.js
View file @ 69b15fd3
/* 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
src/app/renderer.js
View file @ 69b15fd3
......@@ -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
......
src/app/staticanalysis/staticAnalysisView.js
View file @ 69b15fd3
......@@ -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
})
}
src/universal-dapp.js
View file @ 69b15fd3
......@@ -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]))
......
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