move debugger UI to its own module

src/app/debugger/debugger.js

@@ -12,6 +12,7 @@ function Debugger (container, sourceHighlighter, localRegistry) {
   this._components = {
     sourceHighlighter: sourceHighlighter
   }
+  // TODO: localRegistry doesn't seem to be actually used anywhere
   this._components.registry = localRegistry || globlalRegistry
   // dependencies
   this._deps = {

src/app/debugger/debuggerUI.js

@@ -0,0 +1,20 @@
+var Debugger = require('../debugger/debugger')
+var executionContext = require('../../execution-context')
+var SourceHighlighter = require('../editor/sourceHighlighter')
+
+class DebuggerUI {
+
+  constructor (container) {
+    this.transactionDebugger = new Debugger(container, new SourceHighlighter())
+    this.transactionDebugger.addProvider('vm', executionContext.vm())
+    this.transactionDebugger.addProvider('injected', executionContext.internalWeb3())
+    this.transactionDebugger.addProvider('web3', executionContext.internalWeb3())
+    this.transactionDebugger.switchProvider(executionContext.getProvider())
+  }
+
+  view () {
+    return this.transactionDebugger
+  }
+}
+
+module.exports = DebuggerUI

src/app/tabs/debugger-tab.js

@@ -2,24 +2,33 @@ 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 DebuggerUI = require('../debugger/debuggerUI')
 
 var globalRegistry = require('../../global/registry')
 var EventManager = remixLib.EventManager
 var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
-module.exports = class DebuggerTab {
+const css = csjs`
+  .debuggerTabView {
+    padding: 2%;
+  }
+  .debugger {
+    margin-bottom: 1%;
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+  }
+`
+
+class DebuggerTab {
   constructor (localRegistry) {
     const self = this
     self.event = new EventManager()
     self._view = { el: null }
     self.data = {}
     self._components = {}
+    // TODO: what is this used for? is repated in debugger.js
     self._components.registry = localRegistry || globalRegistry
   }
+
   render () {
     const self = this
     if (self._view.el) return self._view.el
@@ -29,23 +38,14 @@ module.exports = class DebuggerTab {
         <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())
+    let debuggerUI = new DebuggerUI(self._view.el.querySelector('#debugger'))
+    self._view.transactionDebugger = debuggerUI.view()
     return self._view.el
   }
+
   debugger () {
     return this._view.transactionDebugger
   }
 }
-const css = csjs`
-  .debuggerTabView {
-    padding: 2%;
-  }
-  .debugger {
-    margin-bottom: 1%;
-    ${styles.rightPanel.debuggerTab.box_Debugger}
-  }
-`
+
+module.exports = DebuggerTab