diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 50a73b19ec..e5cb75a7ac 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -76,7 +76,21 @@ class CompileTab extends CompilerApi {
*/
listenToEvents () {
- this.compiler.event.register('compilationStarted', () => {
+ let onContentChanged = () => {
+ this.events.emit('statusChanged', {key: 'code', title: 'the content has changed, needs recompilation', type: 'info'})
+ }
+ this.editor.event.register('contentChanged', onContentChanged)
+ this.editor.event.register('sessionSwitched', onContentChanged)
+
+ this.compiler.event.register('loadingCompiler', () => {
+ this.events.emit('statusChanged', {key: 'spinner', title: 'loading compiler...', type: 'info'})
+ })
+
+ this.compiler.event.register('compilerLoaded', () => {
+ this.events.emit('statusChanged', {key: '', title: '', type: ''})
+ })
+
+ this.compileTabLogic.event.on('startingCompilation', () => {
if (this._view.errorContainer) {
this._view.errorContainer.innerHTML = ''
}
@@ -85,10 +99,12 @@ class CompileTab extends CompilerApi {
this.fileManager.events.on('currentFileChanged', (name) => {
this.compilerContainer.currentFile = name
+ onContentChanged()
})
this.fileManager.events.on('noFileSelected', () => {
this.compilerContainer.currentFile = ''
+ onContentChanged()
})
this.compiler.event.register('compilationFinished', (success, data, source) => {
@@ -352,8 +368,6 @@ class CompileTab extends CompilerApi {
this._view.errorContainer = yo`
`
this._view.contractSelection = this.contractSelection()
this._view.compilerContainer = this.compilerContainer.render()
- const currentFile = this.fileManager.currentFile()
- if (currentFile) this.compilerContainer.currentFile = currentFile
this._view.el = yo`
diff --git a/src/app/tabs/compileTab/compileTab.js b/src/app/tabs/compileTab/compileTab.js
index cb5f155261..ca5cd9ce8a 100644
--- a/src/app/tabs/compileTab/compileTab.js
+++ b/src/app/tabs/compileTab/compileTab.js
@@ -1,4 +1,5 @@
const async = require('async')
+const EventEmitter = require('events')
var remixTests = require('remix-tests')
var Compiler = require('remix-solidity').Compiler
var CompilerImport = require('../../compiler/compiler-imports')
@@ -9,6 +10,7 @@ const addTooltip = require('../../ui/tooltip')
class CompileTab {
constructor (queryParams, fileManager, editor, config, fileProviders) {
+ this.event = new EventEmitter()
this.queryParams = queryParams
this.compilerImport = new CompilerImport()
this.compiler = new Compiler((url, cb) => this.importFileCb(url, cb))
@@ -45,7 +47,11 @@ class CompileTab {
provider.get(target, (error, content) => {
if (error) return console.log(error)
sources[target] = { content }
- this.compiler.compile(sources, target)
+ this.event.emit('startingCompilation')
+ setTimeout(() => {
+ // setTimeout fix the animation on chrome... (animation triggered by 'staringCompilation')
+ this.compiler.compile(sources, target)
+ }, 100)
})
}
diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js
index 9eb9d1561a..5ed1bf7bae 100644
--- a/src/app/tabs/compileTab/compilerContainer.js
+++ b/src/app/tabs/compileTab/compilerContainer.js
@@ -47,6 +47,13 @@ class CompilerContainer {
this.editor.event.register('contentChanged', this.scheduleCompilation.bind(this))
this.editor.event.register('sessionSwitched', this.scheduleCompilation.bind(this))
+ this.compileTabLogic.event.on('startingCompilation', () => {
+ if (!this._view.compileIcon) return
+ this._view.compileIcon.setAttribute('title', 'compiling...')
+ this._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
+ this._view.compileIcon.classList.add(`${css.spinningIcon}`)
+ })
+
this.compileTabLogic.compiler.event.register('compilationDuration', (speed) => {
if (!this._view.warnCompilationSlow) return
if (speed > 1000) {
@@ -65,29 +72,22 @@ class CompilerContainer {
this.compileTabLogic.compiler.event.register('loadingCompiler', () => {
if (!this._view.compileIcon) return
- this._view.compileIcon.classList.add(`${css.spinningIcon}`)
- this._view.warnCompilationSlow.style.visibility = 'hidden'
this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.')
- })
-
- this.compileTabLogic.compiler.event.register('compilationStarted', () => {
- if (!this._view.compileIcon) return
- this._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
this._view.compileIcon.classList.add(`${css.spinningIcon}`)
- this._view.compileIcon.setAttribute('title', 'compiling...')
+ this._view.warnCompilationSlow.style.visibility = 'hidden'
})
this.compileTabLogic.compiler.event.register('compilerLoaded', () => {
if (!this._view.compileIcon) return
- this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
this._view.compileIcon.setAttribute('title', '')
+ this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
})
this.compileTabLogic.compiler.event.register('compilationFinished', (success, data, source) => {
if (!this._view.compileIcon) return
+ this._view.compileIcon.setAttribute('title', 'idle')
this._view.compileIcon.classList.remove(`${css.spinningIcon}`)
this._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
- this._view.compileIcon.setAttribute('title', 'idle')
})
}
diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js
index d14ca2df52..17a7fb8b3a 100644
--- a/src/app/tabs/styles/compile-tab-styles.js
+++ b/src/app/tabs/styles/compile-tab-styles.js
@@ -141,32 +141,78 @@ const css = csjs`
.icon {
margin-right: 0.3em;
}
- .spinningIcon {
- margin-right: .3em;
- animation: spin 2s linear infinite;
- }
- .bouncingIcon {
- margin-right: .3em;
- animation: bounce 2s infinite;
- }
.errorBlobs {
padding-left: 5px;
padding-right: 5px;
}
+
+ .spinningIcon {
+ display: inline-block;
+ position: relative;
+ animation: spin 2s infinite linear;
+ -moz-animation: spin 2s infinite linear;
+ -o-animation: spin 2s infinite linear;
+ -webkit-animation: spin 2s infinite linear;
+ }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
+ @-webkit-keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ @-moz-keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ @-o-keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+ @-ms-keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ .bouncingIcon {
+ display: inline-block;
+ position: relative;
+ -moz-animation: bounce 2s infinite linear;
+ -o-animation: bounce 2s infinite linear;
+ -webkit-animation: bounce 2s infinite linear;
+ animation: bounce 2s infinite linear;
+ }
+
@-webkit-keyframes bounce {
- 0% {
- margin-bottom: 0;
- }
- 70% {
- margin-bottom: 0;
- }
- 100% {
- margin-bottom: 0;
- }
+ 0% { top: 0; }
+ 50% { top: -0.2em; }
+ 70% { top: -0.3em; }
+ 100% { top: 0; }
+ }
+ @-moz-keyframes bounce {
+ 0% { top: 0; }
+ 50% { top: -0.2em; }
+ 70% { top: -0.3em; }
+ 100% { top: 0; }
+ }
+ @-o-keyframes bounce {
+ 0% { top: 0; }
+ 50% { top: -0.2em; }
+ 70% { top: -0.3em; }
+ 100% { top: 0; }
+ }
+ @-ms-keyframes bounce {
+ 0% { top: 0; }
+ 50% { top: -0.2em; }
+ 70% { top: -0.3em; }
+ 100% { top: 0; }
+ }
+ @keyframes bounce {
+ 0% { top: 0; }
+ 50% { top: -0.2em; }
+ 70% { top: -0.3em; }
+ 100% { top: 0; }
}
`
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 6510889222..340c6cb76b 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -125,14 +125,12 @@ export class LandingPage extends BaseApi {
this.appManager.ensureActivated('run')
this.appManager.ensureActivated('solidityStaticAnalysis')
this.appManager.ensureActivated('solidityUnitTesting')
- globalRegistry.get('filemanager').api.switchFile()
globalRegistry.get('verticalicon').api.select('solidity')
}
let startVyper = () => {
closeAll()
this.appManager.ensureActivated('vyper')
this.appManager.ensureActivated('run')
- globalRegistry.get('filemanager').api.switchFile()
globalRegistry.get('verticalicon').api.select('vyper')
}