Merge pull request #1859 from ethereum/fixSpinningBouncing

Fix spinning bouncing

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`<div class="${css.errorBlobs}"></div>`
     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`
       <div id="compileTabView">

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)
     })
   }
 

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')
     })
   }
 

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; }
   }
 `
 

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')
     }