yann300
8 years ago
committed by
GitHub
commit
4e97db9f01
@ -0,0 +1,41 @@ |
||||
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> |
||||
` |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
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> |
||||
` |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
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>` |
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
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> |
||||
` |
||||
} |
||||
@ -0,0 +1,69 @@ |
||||
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> |
||||
` |
||||
} |
||||
@ -0,0 +1,153 @@ |
||||
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'] |
||||
} |
||||
} |
||||
Loading…
Reference in new issue