move static analysis to its own tab

src/app.js

@@ -28,7 +28,6 @@ var Renderer = require('./app/ui/renderer')
 var Compiler = require('remix-solidity').Compiler
 var executionContext = require('./execution-context')
 var Debugger = require('./app/debugger/debugger')
-var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var FilePanel = require('./app/panels/file-panel')
 var EditorPanel = require('./app/panels/editor-panel')
 var RighthandPanel = require('./app/panels/righthand-panel')
@@ -483,19 +482,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   var renderer = new Renderer()
   registry.put({api: renderer, name: 'renderer'})
 
-  // ----------------- StaticAnalysis -----------------
-  var staticanalysis = new StaticAnalysis()
-  registry.put({api: staticanalysis, name: 'staticanalysis'})
-
   // ---------------- Righthand-panel --------------------
   self._components.righthandpanel = new RighthandPanel()
   self._view.rightpanel.appendChild(self._components.righthandpanel.render())
   self._components.righthandpanel.init()
   self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
 
-  var node = document.getElementById('staticanalysisView')
-  node.insertBefore(staticanalysis.render(), node.childNodes[0])
-
   // ----------------- Debugger -----------------
   self._view.transactionDebugger = new Debugger('#debugger', new SourceHighlighter())
   self._view.transactionDebugger.addProvider('vm', executionContext.vm())

src/app/panels/righthand-panel.js

@@ -57,7 +57,11 @@ module.exports = class RighthandPanel {
       pluginAPI,
       self._deps.app,
       self._deps.compiler,
-      self._deps.txlistener)
+      self._deps.txlistener
+   )
+
+    var analysisTab = new AnalysisTab(self._components.registry)
+    analysisTab.event.register('newStaticAnaysisWarningMessage', (msg, settings) => { self._components.compile.addWarning(msg, settings) })
 
     self._components = {
       pluginManager: pluginManager,
@@ -65,7 +69,7 @@ module.exports = class RighthandPanel {
       compile: new CompileTab(self._components.registry),
       run: new RunTab(self._components.registry),
       settings: new SettingsTab(self._components.registry),
-      analysis: new AnalysisTab(self._components.registry),
+      analysis: analysisTab,
       debug: new DebuggerTab(self._components.registry),
       support: new SupportTab(self._components.registry),
       test: new TestTab(self._components.registry)

src/app/tabs/analysis-tab.js

 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
+var StaticAnalysis = require('../staticanalysis/staticAnalysisView')
 
 var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
@@ -13,12 +14,23 @@ module.exports = class AnalysisTab {
     self.data = {}
     self._components = {}
     self._components.registry = localRegistry || globalRegistry
+    self._deps = {
+      rightHandPanel: self._components.registry.get('righthandpanel').api
+    }
   }
   render () {
     const self = this
+    var staticanalysis = new StaticAnalysis()
+    staticanalysis.event.register('staticAnaysisWarning', (count) => {
+      const msg = `Static Analysis raised ${count} warning(s) that requires your attention. Click here to show the warning(s).`
+      const settings = { type: 'staticAnalysisWarning', click: () => self._deps.rightHandPanel.focusOn('staticanalysisView'), useSpan: true }
+      self.event.trigger('newStaticAnaysisWarningMessage', [msg, settings])
+    })
+    self._components.registry.put({api: staticanalysis, name: 'staticanalysis'})
     if (self._view.el) return self._view.el
     self._view.el = yo`
-      <div class="${css.analysisTabView} "id="staticanalysisView"></div>`
+      <div class="${css.analysisTabView} "id="staticanalysisView">${staticanalysis.render()}</div>`
+
     return self._view.el
   }
 }

src/app/tabs/compile-tab.js

@@ -25,6 +25,7 @@ module.exports = class CompileTab {
       compileIcon: null,
       compileContainer: null,
       errorContainer: null,
+      errorContainerHead: null,
       contractNames: null,
       contractEl: null
     }
@@ -36,9 +37,7 @@ module.exports = class CompileTab {
       editor: self._components.registry.get('editor').api,
       config: self._components.registry.get('config').api,
       compiler: self._components.registry.get('compiler').api,
-      staticAnalysis: self._components.registry.get('staticanalysis').api,
-      renderer: self._components.registry.get('renderer').api,
-      rightHandPanel: self._components.registry.get('righthandpanel').api
+      renderer: self._components.registry.get('renderer').api
     }
     self.data = {
       hideWarnings: self._deps.config.get('hideWarnings') || false,
@@ -80,6 +79,7 @@ module.exports = class CompileTab {
     self._deps.compiler.event.register('compilationStarted', function start () {
       if (!self._view.compileIcon) return
       self._view.errorContainer.innerHTML = ''
+      self._view.errorContainerHead.innerHTML = ''
       self._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
       self._view.compileIcon.classList.add(`${css.spinningIcon}`)
       self._view.compileIcon.setAttribute('title', 'compiling...')
@@ -139,13 +139,10 @@ module.exports = class CompileTab {
         })
       }
     })
-    self._deps.staticAnalysis.event.register('staticAnaysisWarning', (count) => {
-      if (count) {
-        const msg = `Static Analysis raised ${count} warning(s) that requires your attention. Click here to show the warning(s).`
-        const settings = { type: 'staticAnalysisWarning', click: () => self._deps.rightHandPanel.focusOn('staticanalysisView'), useSpan: true }
-        self._deps.renderer.error(msg, self._view.errorContainer, settings)
-      }
-    })
+  }
+  addWarning (msg, settings) {
+    const self = this
+    self._deps.renderer.error(msg, self._view.errorContainerHead, settings)
   }
   render () {
     const self = this
@@ -173,6 +170,7 @@ module.exports = class CompileTab {
         </div>
       </div>`
     self._view.errorContainer = yo`<div class='error'></div>`
+    self._view.errorContainerHead = yo`<div class='error'></div>`
     self._view.contractNames = yo`<select class="${css.contractNames}" disabled></select>`
     self._view.contractEl = yo`
       <div class="${css.container}">
@@ -194,6 +192,7 @@ module.exports = class CompileTab {
       <div class="${css.compileTabView}" id="compileTabView">
         ${self._view.compileContainer}
         ${self._view.contractEl}
+        ${self._view.errorContainerHead}
         ${self._view.errorContainer}
       </div>`
     const help = {