- move warning to renderer.js

- select debug tab when debugging starts

src/app.js

@@ -26,7 +26,6 @@ var EventManager = require('ethereum-remix').lib.EventManager
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var FilePanel = require('./app/file-panel')
-var loadingSpinner = require('./app/loading-spinner')
 var tabbedMenu = require('./app/tabbed-menu')
 var examples = require('./app/example-contracts')
 
@@ -76,9 +75,6 @@ var run = function () {
   var formalVerification = new FormalVerification($('#verificationView'), compiler.event)
   var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
 
-  // load tabbed menu component
-  tabbedMenu(compiler, loadingSpinner, self)
-
   // return all the files, except the temporary/readonly ones
   function packageFiles () {
     var ret = {}
@@ -902,8 +898,8 @@ var run = function () {
   })
 
   function startdebugging (txHash) {
+    self.event.trigger('debuggingRequested', [])
     transactionDebugger.debug(txHash)
-    selectTab($('ul#options li.debugView'))
   }
 
   function setVersionText (text) {
@@ -991,6 +987,17 @@ var run = function () {
 
     loadVersion('builtin')
   })
+
+  var tabbedMenuAPI = {
+    warnCompilerLoading: function (msg) {
+      renderer.clear()
+      if (msg) {
+        renderer.error(msg, $('#output'), {type: 'warning'})
+      }
+    }
+  }
+  // load tabbed menu component
+  tabbedMenu(tabbedMenuAPI, compiler.event, self.event)
 }
 
 module.exports = {

src/app/loading-spinner.js

@@ -8,7 +8,7 @@ var css = csjs`
   .loader {
     display: inline-block;
     margin-left: .3em;
-    border: 2px solid #C6CFD9; /* Light grey */
+    border: 2px solid orange;
     border-top: 2px solid #F4F6FF; /* Light blue */
     border-radius: 50%;
     width: 8px;

src/app/renderer.js

@@ -68,6 +68,10 @@ function Renderer (appAPI, formalVerificationEvent, compilerEvent) {
   })
 }
 
+Renderer.prototype.clear = function () {
+  $('#output').empty()
+}
+
 Renderer.prototype.error = function (message, container, options) {
   var self = this
   var opt = options || {}

src/app/tabbed-menu.js

@@ -1,43 +1,33 @@
 var $ = require('jquery')
-var yo = require('yo-yo')
+var loadingSpinner = require('./loading-spinner')
-var csjs = require('csjs-inject')
-var styleGuide = require('./style-guide')
-var styles = styleGuide()
 
 module.exports = tabbedMenu
 
-function tabbedMenu (compiler, loadingSpinner, self) {
+function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
-
-  var css = csjs`
-    .loadingMsg extends ${styles.warningTextBox} {
-      display: block;
-    }
-  `
-
   $('#options li').click(function (ev) {
     var $el = $(this)
     selectTab($el)
   })
 
+  appEvent.register('debuggingRequested', () => {
+    selectTab($('ul#options li.debugView'))
+  })
+
   // initialize tabbed menu
   selectTab($('#options .envView'))
 
   // add event listeners for loading spinner
-  compiler.event.register('loadingCompiler', function start () {
+  compilerEvent.register('loadingCompiler', function start () {
     var settingsTab = document.querySelector('.settingsView')
     if (settingsTab.children.length) return
 
-    var contractTabView = document.querySelector('[class^=contractTabView]')
-
-    var loadingMsg = yo`<div class=${css.loadingMsg}>Solidity compiler is currently loading. Please wait a moment...</div>`
     var spinner = loadingSpinner()
     settingsTab.appendChild(spinner)
-    contractTabView.appendChild(loadingMsg)
 
-    compiler.event.register('compilerLoaded', finish)
+    rendererAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
+    compilerEvent.register('compilerLoaded', finish)
     function finish () {
-      compiler.event.unregister('compilerLoaded', finish)
+      compilerEvent.unregister('compilerLoaded', finish)
-      contractTabView.removeChild(loadingMsg)
       settingsTab.removeChild(spinner)
     }
   })
@@ -54,6 +44,6 @@ function tabbedMenu (compiler, loadingSpinner, self) {
       $('#optionViews').attr('class', '').addClass(cls)
       el.addClass('active')
     }
-    self.event.trigger('tabChanged', [cls])
+    appEvent.trigger('tabChanged', [cls])
   }
 }