move debugger to its own tab

src/app.js

@@ -27,7 +27,6 @@ var Config = require('./config')
 var Renderer = require('./app/ui/renderer')
 var Compiler = require('remix-solidity').Compiler
 var executionContext = require('./execution-context')
-var Debugger = require('./app/debugger/debugger')
 var FilePanel = require('./app/panels/file-panel')
 var EditorPanel = require('./app/panels/editor-panel')
 var RighthandPanel = require('./app/panels/righthand-panel')
@@ -42,7 +41,6 @@ var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
 var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
-var SourceHighlighter = require('./app/editor/sourceHighlighter')
 
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -230,7 +228,7 @@ class App {
   }
   runCompiler () {
     const self = this
-    if (self._view.transactionDebugger.isActive) return
+    if (self._components.righthandpanel.debugger().isActive) return
 
     self._components.fileManager.saveCurrentFile()
     self._components.editorpanel.getEditor().clearAnnotations()
@@ -259,7 +257,7 @@ class App {
   startdebugging (txHash) {
     const self = this
     self.event.trigger('debuggingRequested', [])
-    self._view.transactionDebugger.debug(txHash)
+    self._components.righthandpanel.debugger().debug(txHash)
   }
   loadFromGist (params) {
     const self = this
@@ -488,13 +486,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   self._components.righthandpanel.init()
   self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
 
-  // ----------------- Debugger -----------------
-  self._view.transactionDebugger = new Debugger('#debugger', new SourceHighlighter())
-  self._view.transactionDebugger.addProvider('vm', executionContext.vm())
-  self._view.transactionDebugger.addProvider('injected', executionContext.internalWeb3())
-  self._view.transactionDebugger.addProvider('web3', executionContext.internalWeb3())
-  self._view.transactionDebugger.switchProvider(executionContext.getProvider())
-
   var txLogger = new TxLogger() // eslint-disable-line
 
   var previousInput = ''

src/app/debugger/debugger.js

@@ -9,8 +9,7 @@ var globlalRegistry = require('../../global/registry')
 /**
  * Manage remix and source highlighting
  */
-function Debugger (id, sourceHighlighter, localRegistry) {
-  this.el = document.querySelector(id)
+function Debugger (container, sourceHighlighter, localRegistry) {
   this._components = {
     sourceHighlighter: sourceHighlighter
   }
@@ -32,7 +31,7 @@ function Debugger (id, sourceHighlighter, localRegistry) {
       }
     })
   this.sourceMappingDecoder = new remixLib.SourceMappingDecoder()
-  this.el.appendChild(this.debugger.render())
+  container.appendChild(this.debugger.render())
   this.isActive = false
 
   this.breakPointManager = new remixCore.code.BreakpointManager(this.debugger, (sourceLocation) => {

src/app/panels/righthand-panel.js

@@ -62,6 +62,8 @@ module.exports = class RighthandPanel {
 
     var analysisTab = new AnalysisTab(self._components.registry)
     analysisTab.event.register('newStaticAnaysisWarningMessage', (msg, settings) => { self._components.compile.addWarning(msg, settings) })
+    
+    self._components.debuggerTab = new DebuggerTab(self._components.registry)
 
     self._components = {
       pluginManager: pluginManager,
@@ -70,7 +72,7 @@ module.exports = class RighthandPanel {
       run: new RunTab(self._components.registry),
       settings: new SettingsTab(self._components.registry),
       analysis: analysisTab,
-      debug: new DebuggerTab(self._components.registry),
+      debug: self._components.debuggerTab,
       support: new SupportTab(self._components.registry),
       test: new TestTab(self._components.registry)
     }
@@ -130,6 +132,10 @@ module.exports = class RighthandPanel {
     return self._view.element
   }
 
+  debugger () {
+    return this._components.debug.debugger()
+  }
+
   focusOn (x) {
     if (this._components.tabbedMenu) this._components.tabbedMenu.selectTabByClassName(x)
   }

src/app/tabs/debugger-tab.js

@@ -2,6 +2,11 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var Debugger = require('../debugger/debugger')
+var SourceHighlighter = require('../editor/sourceHighlighter')
+
+var executionContext = require('../../execution-context')
+
 var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
 var styles = require('../ui/styles-guide/theme-chooser').chooser()
@@ -18,12 +23,22 @@ module.exports = class DebuggerTab {
   render () {
     const self = this
     if (self._view.el) return self._view.el
+
     self._view.el = yo`
-      <div class="${css.debuggerTabView} "id="debugView">
+      <div class="${css.debuggerTabView}" id="debugView">
         <div id="debugger" class="${css.debugger}"></div>
       </div>`
+
+    self._view.transactionDebugger = new Debugger(self._view.el.querySelector('#debugger'), new SourceHighlighter())
+    self._view.transactionDebugger.addProvider('vm', executionContext.vm())
+    self._view.transactionDebugger.addProvider('injected', executionContext.internalWeb3())
+    self._view.transactionDebugger.addProvider('web3', executionContext.internalWeb3())
+    self._view.transactionDebugger.switchProvider(executionContext.getProvider())
     return self._view.el
   }
+  debugger () {
+    return this._view.transactionDebugger
+  }
 }
 const css = csjs`
   .debuggerTabView {