warn if compilation too slow

src/app.js

@@ -816,6 +816,16 @@ var run = function () {
     config.set('autoCompile', autoCompile)
   })
 
+  var warnMsg = ' Last compilation took {X}ms. We suggest to turn off autocompilation.'
+  compiler.event.register('compilationSpeed', (speed) => {
+    $('#warnCompilationSlow').html('')
+    $('#header #menu .settingsView').css('color', '')
+    if (speed > 1000) {
+      $('#warnCompilationSlow').html(warnMsg.replace('{X}', speed))
+      $('#header #menu .settingsView').css('color', '#FF8B8B')
+    }
+  })
+
   function runCompiler () {
     if (transactionDebugger.isActive) return
 

src/app/compiler.js

@@ -9,7 +9,7 @@ var utils = require('./utils')
 var EventManager = require('ethereum-remix').lib.EventManager
 
 /*
-  trigger compilationFinished, compilerLoaded, compilationStarted
+  trigger compilationFinished, compilerLoaded, compilationStarted, compilationSpeed
 */
 function Compiler (handleImportCall) {
   var self = this
@@ -28,6 +28,18 @@ function Compiler (handleImportCall) {
     optimize = _optimize
   }
 
+  var compilationStartTime = null
+  this.event.register('compilationFinished', (success, data, source) => {
+    if (success && compilationStartTime) {
+      this.event.trigger('compilationSpeed', [(new Date().getTime()) - compilationStartTime])
+    }
+    compilationStartTime = null
+  })
+
+  this.event.register('compilationStarted', () => {
+    compilationStartTime = new Date().getTime()
+  })
+
   var internalCompile = function (files, target, missingInputs) {
     gatherImports(files, target, missingInputs, function (error, input) {
       if (error) {

src/app/settings-tab.js

@@ -34,6 +34,9 @@ var css = csjs`
   .checkboxText {
     margin-left: 3px;
   }
+  #warnCompilationSlow {
+    color: #FF8B8B;
+  }
 }
 `
 module.exports = settingsTab
@@ -58,7 +61,7 @@ function settingsTab () {
       </div>
       <div class="${css.crow}">
         <div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
-        <span class="${css.checkboxText}">Auto Compile</span>
+        <span class="${css.checkboxText}">Auto Compile</span><span id="warnCompilationSlow"></span>
       </div>
       </div>
       <div class="${css.crow}">