Move tab views in separate files: contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js

pull/1/head
ninabreznik 8 years ago
parent d61d9e106f
commit a9a2b7d3e5
  1. 76
      index.html
  2. 24
      src/app.js
  3. 22
      src/app/analysis-tab.js
  4. 74
      src/app/contract-tab.js
  5. 7
      src/app/debugger-tab.js
  6. 25
      src/app/files-tab.js
  7. 18
      src/app/settings-tab.js

@ -68,81 +68,7 @@
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime"> <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>

@ -29,6 +29,30 @@ 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

@ -0,0 +1,22 @@
var yo = require('yo-yo')
module.exports = analysisTab
function analysisTab () {
return yo`
<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>
`
}

@ -5,43 +5,43 @@ module.exports = contractTab
function contractTab () { function contractTab () {
return yo` return yo`
<div id="envView"> <div id="envView">
<div class="crow"> <div class="crow">
<label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label> <label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label>
</div> </div>
<div class="crow"> <div class="crow">
<label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label> <label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label>
</div> </div>
<div class="crow hide"> <div class="crow hide">
<label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label> <label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
</div> </div>
<div class="crow"> <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> <label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
</div> </div>
<span id="executionContext"> <span id="executionContext">
Select execution environment: <br><br> Select execution environment: <br><br>
<select id='selectExEnv'> <select id='selectExEnv'>
<option id="vm-mode" <option id="vm-mode"
title="Execution environment does not connect to any node, everything is local and in memory only." title="Execution environment does not connect to any node, everything is local and in memory only."
value="vm" value="vm"
checked name="executionContext"> checked name="executionContext">
JavaScript VM JavaScript VM
</option> </option>
<option id="injected-mode" <option id="injected-mode"
title="Execution environment has been provided by Mist or similar provider." title="Execution environment has been provided by Mist or similar provider."
value="injected" value="injected"
checked name="executionContext"> checked name="executionContext">
Injected Web3 Injected Web3
</option> </option>
<option id="web3-mode" <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! 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." 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" value="web3"
name="executionContext"> name="executionContext">
Web3 Provider Web3 Provider
</option> </option>
</select> </select>
</span> </span>
<div id="output"></div> <div id="output"></div>
</div> </div>
` `
} }

@ -0,0 +1,7 @@
var yo = require('yo-yo')
module.exports = debuggerTab
function debuggerTab () {
return yo` <div id="debugView"><div id="debugger"></div></div>`
}

@ -0,0 +1,25 @@
var yo = require('yo-yo')
module.exports = filesTab
function filesTab () {
return yo`
<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>
`
}

@ -0,0 +1,18 @@
var yo = require('yo-yo')
module.exports = settingsTab
function settingsTab () {
return yo`
<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>
`
}
Loading…
Cancel
Save