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

prepare refactor compileTab to class indentation

Browse Source
pull/3094/head
serapath 7 years ago
parent efde154f02
commit 414e4bff94
1 changed files with 245 additions and 247 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 492
      src/app/tabs/compile-tab.js

492
src/app/tabs/compile-tab.js
Unescape View File

@ -14,293 +14,291 @@ var publishOnSwarm = require('../contract/publishOnSwarm')
var styles = styleGuide.chooser() var styles = styleGuide.chooser()
var x = { var x = {
compileTab: compileTab compileTab: function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
} // Containers
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
function compileTab (appAPI = {}, appEvents = {}, opts = {}) { var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
// Containers var compileContainer = yo`
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>` <div class="${css.compileContainer}">
var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>` <div class="${css.compileButtons}">
var compileContainer = yo` <div class="${css.compileButton} "id="compile" title="Compile source code">${compileIcon} Start to compile</div>
<div class="${css.compileContainer}"> <div class="${css.autocompileContainer}">
<div class="${css.compileButtons}"> <input class="${css.autocompile}" id="autoCompile" type="checkbox" title="Auto compile">
<div class="${css.compileButton} "id="compile" title="Compile source code">${compileIcon} Start to compile</div> <span class="${css.autocompileText}">Auto compile</span>
<div class="${css.autocompileContainer}"> </div>
<input class="${css.autocompile}" id="autoCompile" type="checkbox" title="Auto compile"> ${warnCompilationSlow}
<span class="${css.autocompileText}">Auto compile</span>
</div> </div>
${warnCompilationSlow}
</div> </div>
</div> `
`
compileContainer.querySelector('#compile').addEventListener('click', () => { compileContainer.querySelector('#compile').addEventListener('click', () => {
appAPI.runCompiler() appAPI.runCompiler()
}) })
var compileTimeout = null var compileTimeout = null
function scheduleCompilation () { function scheduleCompilation () {
if (!opts.config.get('autoCompile')) { if (!opts.config.get('autoCompile')) {
return return
} }
if (compileTimeout) { if (compileTimeout) {
window.clearTimeout(compileTimeout) window.clearTimeout(compileTimeout)
}
compileTimeout = window.setTimeout(() => {
appAPI.runCompiler()
}, 300)
} }
compileTimeout = window.setTimeout(() => {
appAPI.runCompiler()
}, 300)
}
appEvents.editor.register('contentChanged', () => { appEvents.editor.register('contentChanged', () => {
scheduleCompilation() scheduleCompilation()
}) })
appEvents.editor.register('sessionSwitched', () => { appEvents.editor.register('sessionSwitched', () => {
scheduleCompilation() scheduleCompilation()
}) })
// ----------------- autoCompile ----------------- // ----------------- autoCompile -----------------
var autoCompileInput = compileContainer.querySelector('#autoCompile') var autoCompileInput = compileContainer.querySelector('#autoCompile')
var autoCompile = false var autoCompile = false
if (opts.config.exists('autoCompile')) { if (opts.config.exists('autoCompile')) {
autoCompile = opts.config.get('autoCompile') autoCompile = opts.config.get('autoCompile')
} }
opts.config.set('autoCompile', autoCompile) opts.config.set('autoCompile', autoCompile)
if (autoCompile) { if (autoCompile) {
autoCompileInput.setAttribute('checked', autoCompile) autoCompileInput.setAttribute('checked', autoCompile)
} }
autoCompileInput.addEventListener('change', function () { autoCompileInput.addEventListener('change', function () {
opts.config.set('autoCompile', autoCompileInput.checked) opts.config.set('autoCompile', autoCompileInput.checked)
}) })
// REGISTER EVENTS // REGISTER EVENTS
// compilationDuration // compilationDuration
appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) { appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
if (speed > 1000) { if (speed > 1000) {
warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
warnCompilationSlow.style.display = 'inline-block' warnCompilationSlow.style.display = 'inline-block'
} else { } else {
warnCompilationSlow.style.display = 'none'
}
})
// loadingCompiler
appEvents.editor.register('contentChanged', function changedFile () {
var compileTab = document.querySelector('.compileView')
compileTab.style.color = styles.colors.red
compileIcon.classList.add(`${css.bouncingIcon}`)
})
appEvents.compiler.register('loadingCompiler', function start () {
compileIcon.classList.add(`${css.spinningIcon}`)
warnCompilationSlow.style.display = 'none' warnCompilationSlow.style.display = 'none'
} compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
}) })
// loadingCompiler appEvents.compiler.register('compilationFinished', function finish () {
appEvents.editor.register('contentChanged', function changedFile () { var compileTab = document.querySelector('.compileView')
var compileTab = document.querySelector('.compileView') compileTab.style.color = styles.colors.black
compileTab.style.color = styles.colors.red compileIcon.style.color = styles.colors.black
compileIcon.classList.add(`${css.bouncingIcon}`) compileIcon.classList.remove(`${css.spinningIcon}`)
}) compileIcon.classList.remove(`${css.bouncingIcon}`)
appEvents.compiler.register('loadingCompiler', function start () { compileIcon.setAttribute('title', 'idle')
compileIcon.classList.add(`${css.spinningIcon}`) })
warnCompilationSlow.style.display = 'none' appEvents.compiler.register('compilationStarted', function start () {
compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.') compileIcon.classList.remove(`${css.bouncingIcon}`)
}) compileIcon.classList.add(`${css.spinningIcon}`)
appEvents.compiler.register('compilationFinished', function finish () { compileIcon.setAttribute('title', 'compiling...')
var compileTab = document.querySelector('.compileView') })
compileTab.style.color = styles.colors.black appEvents.compiler.register('compilerLoaded', function loaded () {
compileIcon.style.color = styles.colors.black compileIcon.classList.remove(`${css.spinningIcon}`)
compileIcon.classList.remove(`${css.spinningIcon}`) compileIcon.setAttribute('title', '')
compileIcon.classList.remove(`${css.bouncingIcon}`) })
compileIcon.setAttribute('title', 'idle')
})
appEvents.compiler.register('compilationStarted', function start () {
compileIcon.classList.remove(`${css.bouncingIcon}`)
compileIcon.classList.add(`${css.spinningIcon}`)
compileIcon.setAttribute('title', 'compiling...')
})
appEvents.compiler.register('compilerLoaded', function loaded () {
compileIcon.classList.remove(`${css.spinningIcon}`)
compileIcon.setAttribute('title', '')
})
var errorContainer = yo`<div class='error'></div>` var errorContainer = yo`<div class='error'></div>`
var el = yo` var el = yo`
<div class="${css.compileTabView}" id="compileTabView"> <div class="${css.compileTabView}" id="compileTabView">
${compileContainer} ${compileContainer}
${contractNames(appAPI, appEvents, opts)} ${contractNames(appAPI, appEvents, opts)}
${errorContainer} ${errorContainer}
</div> </div>
` `
/* ------------------------------------------------ /* ------------------------------------------------
section CONTRACT DROPDOWN, DETAILS AND PUBLISH section CONTRACT DROPDOWN, DETAILS AND PUBLISH
------------------------------------------------ */ ------------------------------------------------ */
function contractNames (appAPI, appEvents, opts) { function contractNames (appAPI, appEvents, opts) {
var contractsDetails = {} var contractsDetails = {}
appEvents.compiler.register('compilationStarted', () => { appEvents.compiler.register('compilationStarted', () => {
errorContainer.innerHTML = '' errorContainer.innerHTML = ''
}) })
appEvents.compiler.register('compilationFinished', function (success, data, source) { appEvents.compiler.register('compilationFinished', function (success, data, source) {
// reset the contractMetadata list (used by the publish action) // reset the contractMetadata list (used by the publish action)
contractsDetails = {} contractsDetails = {}
// refill the dropdown list // refill the dropdown list
getContractNames(success, data) getContractNames(success, data)
// hightlight the tab if error // hightlight the tab if error
if (success) { if (success) {
document.querySelector('.compileView').style.color = '' document.querySelector('.compileView').style.color = ''
} else { } else {
document.querySelector('.compileView').style.color = styles.colors.red document.querySelector('.compileView').style.color = styles.colors.red
} }
// display warning error if any // display warning error if any
var error = false var error = false
if (data['error']) { if (data['error']) {
error = true error = true
opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity}) opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
} }
if (data['errors']) { if (data['errors']) {
if (data['errors'].length) error = true if (data['errors'].length) error = true
data['errors'].forEach(function (err) { data['errors'].forEach(function (err) {
opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity}) opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity})
})
}
if (!error) {
if (data.contracts) {
opts.compiler.visitContracts((contract) => {
opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
}) })
} }
} if (!error) {
}) if (data.contracts) {
opts.compiler.visitContracts((contract) => {
opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
})
}
}
})
appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => { appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
if (count) { if (count) {
opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), { opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
type: 'warning', type: 'warning',
click: () => appAPI.switchTab('staticanalysisView') click: () => appAPI.switchTab('staticanalysisView')
}) })
} }
}) })
var el = yo` var el = yo`
<div class="${css.container}"> <div class="${css.container}">
<select class="${css.contractNames}" disabled></select> <select class="${css.contractNames}" disabled></select>
<div class="${css.contractButtons}"> <div class="${css.contractButtons}">
<div title="Display Contract Details" class="${css.details}" onclick=${() => { details() }}>Details</div> <div title="Display Contract Details" class="${css.details}" onclick=${() => { details() }}>Details</div>
<div title="Publish on Swarm" class="${css.publish}" onclick=${() => { publish(appAPI) }}>Publish on Swarm</div> <div title="Publish on Swarm" class="${css.publish}" onclick=${() => { publish(appAPI) }}>Publish on Swarm</div>
</div>
</div> </div>
</div> `
`
// HELPERS // HELPERS
// GET NAMES OF ALL THE CONTRACTS // GET NAMES OF ALL THE CONTRACTS
function getContractNames (success, data) { function getContractNames (success, data) {
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
contractNames.innerHTML = '' contractNames.innerHTML = ''
if (success) { if (success) {
contractNames.removeAttribute('disabled') contractNames.removeAttribute('disabled')
opts.compiler.visitContracts((contract) => { opts.compiler.visitContracts((contract) => {
contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file)) contractsDetails[contract.name] = parseContracts(contract.name, contract.object, opts.compiler.getSource(contract.file))
var contractName = yo` var contractName = yo`
<option> <option>
${contract.name} ${contract.name}
</option>` </option>`
contractNames.appendChild(contractName) contractNames.appendChild(contractName)
}) })
appAPI.resetDapp(contractsDetails) appAPI.resetDapp(contractsDetails)
} else { } else {
contractNames.setAttribute('disabled', true) contractNames.setAttribute('disabled', true)
appAPI.resetDapp({}) appAPI.resetDapp({})
}
} }
}
function details () { function details () {
var select = el.querySelector('select') var select = el.querySelector('select')
if (select.children.length > 0 && select.selectedIndex >= 0) { if (select.children.length > 0 && select.selectedIndex >= 0) {
var contractName = select.children[select.selectedIndex].innerHTML var contractName = select.children[select.selectedIndex].innerHTML
var contractProperties = contractsDetails[contractName] var contractProperties = contractsDetails[contractName]
var log = yo`<div class="${css.detailsJSON}"></div>` var log = yo`<div class="${css.detailsJSON}"></div>`
Object.keys(contractProperties).map(propertyName => { Object.keys(contractProperties).map(propertyName => {
var copyDetails = yo`<span class="${css.copyDetails}"> var copyDetails = yo`<span class="${css.copyDetails}">
${copyToClipboard(() => contractProperties[propertyName])} ${copyToClipboard(() => contractProperties[propertyName])}
</span>` </span>`
var questionMark = yo`<span class="${css.questionMark}"><i title="${detailsHelpSection()[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>` var questionMark = yo`<span class="${css.questionMark}"><i title="${detailsHelpSection()[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>`
log.appendChild(yo` log.appendChild(yo`
<div class=${css.log}> <div class=${css.log}>
<div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div> <div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div>
${insertValue(contractProperties, propertyName)} ${insertValue(contractProperties, propertyName)}
</div> </div>
`) `)
}) })
modalDialog(contractName, log, {label: ''}, {label: 'Close'}) modalDialog(contractName, log, {label: ''}, {label: 'Close'})
}
} }
}
function insertValue (details, propertyName) { function insertValue (details, propertyName) {
var value = yo`<pre class="${css.value}"></pre>` var value = yo`<pre class="${css.value}"></pre>`
var node var node
if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') { if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
node = yo`<pre>${details[propertyName]}</pre>` node = yo`<pre>${details[propertyName]}</pre>`
} else if (propertyName === 'abi' || propertyName === 'metadata') { } else if (propertyName === 'abi' || propertyName === 'metadata') {
var treeView = new TreeView({ var treeView = new TreeView({
extractData: function (item, parent, key) { extractData: function (item, parent, key) {
var ret = {} var ret = {}
if (item instanceof Array) { if (item instanceof Array) {
ret.children = item.map((item, index) => { ret.children = item.map((item, index) => {
return {key: index, value: item} return {key: index, value: item}
}) })
ret.self = '' ret.self = ''
} else if (item instanceof Object) { } else if (item instanceof Object) {
ret.children = Object.keys(item).map((key) => { ret.children = Object.keys(item).map((key) => {
return {key: key, value: item[key]} return {key: key, value: item[key]}
}) })
ret.self = '' ret.self = ''
} else { } else {
ret.self = item ret.self = item
ret.children = [] ret.children = []
}
return ret
} }
return ret })
} if (details[propertyName] !== '') {
}) try {
if (details[propertyName] !== '') { node = yo`<div>${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}</div>` // catch in case the parsing fails.
try { } catch (e) {
node = yo`<div>${treeView.render(typeof details[propertyName] === 'object' ? details[propertyName] : JSON.parse(details[propertyName]))}</div>` // catch in case the parsing fails. node = yo`<div>Unable to display "${propertyName}": ${e.message}</div>`
} catch (e) { }
node = yo`<div>Unable to display "${propertyName}": ${e.message}</div>` } else {
node = yo`<div> - </div>`
} }
} else { } else {
node = yo`<div> - </div>` node = yo`<div>${JSON.stringify(details[propertyName], null, 4)}</div>`
} }
} else { if (node) value.appendChild(node)
node = yo`<div>${JSON.stringify(details[propertyName], null, 4)}</div>` return value
} }
if (node) value.appendChild(node)
return value
}
function publish (appAPI) { function publish (appAPI) {
var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`) var selectContractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) { if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML] var contract = contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
if (contract.metadata === undefined || contract.metadata.length === 0) { if (contract.metadata === undefined || contract.metadata.length === 0) {
modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.') modalDialogCustom.alert('This contract does not implement all functions and thus cannot be published.')
} else { } else {
publishOnSwarm(contract, appAPI, function (err) { publishOnSwarm(contract, appAPI, function (err) {
if (err) { if (err) {
try { try {
err = JSON.stringify(err) err = JSON.stringify(err)
} catch (e) {} } catch (e) {}
modalDialogCustom.alert(yo`<span>Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ).<br /> modalDialogCustom.alert(yo`<span>Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ).<br />
${err}</span>`) ${err}</span>`)
} else { } else {
modalDialogCustom.alert(yo`<span>Metadata published successfully.<br />The Swarm address of the metadata file is available in the contract details.</span>`) modalDialogCustom.alert(yo`<span>Metadata published successfully.<br />The Swarm address of the metadata file is available in the contract details.</span>`)
} }
}, function (item) { }, function (item) {
// triggered each time there's a new verified publish (means hash correspond) // triggered each time there's a new verified publish (means hash correspond)
appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content) appAPI.fileProvider('swarm').addReadOnly(item.hash, item.content)
}) })
}
} }
} }
return el
} }
return el return { render () { return el } }
} }
return { render () { return el } }
} }
function detailsHelpSection () { function detailsHelpSection () {

Write Preview
Loading…
Cancel
Save