refactor debugger tab

src/app/tabs/debugger-tab.js

@@ -1,30 +1,11 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
+var css = require('./styles/debugger-tab-styles')
 
 var DebuggerUI = require('../debugger/debuggerUI')
 
-var globalRegistry = require('../../global/registry')
-var EventManager = require('../../lib/events')
-var styles = require('../ui/styles-guide/theme-chooser').chooser()
-
-const css = csjs`
-  .debuggerTabView {
-    padding: 2%;
-  }
-  .debugger {
-    margin-bottom: 1%;
-    ${styles.rightPanel.debuggerTab.box_Debugger}
-  }
-`
-
 class DebuggerTab {
-  constructor (localRegistry) {
+  constructor () {
-    const self = this
+    this.el = null
-    self.event = new EventManager()
-    self._view = { el: null }
-    self.data = {}
-    self._components = {}
-    self._components.registry = localRegistry || globalRegistry
   }
 
   profile () {
@@ -38,16 +19,15 @@ class DebuggerTab {
   }
 
   render () {
-    const self = this
+    if (this.el) return this.el
-    if (self._view.el) return self._view.el
 
-    self._view.el = yo`
+    this.el = yo`
       <div class="${css.debuggerTabView}" id="debugView">
         <div id="debugger" class="${css.debugger}"></div>
       </div>`
 
-    this.debuggerUI = new DebuggerUI(self._view.el.querySelector('#debugger'))
+    this.debuggerUI = new DebuggerUI(this.el.querySelector('#debugger'))
-    return self._view.el
+    return this.el
   }
 
   debugger () {

src/app/tabs/styles/debugger-tab-styles.js

@@ -0,0 +1,14 @@
+var csjs = require('csjs-inject')
+var styles = require('../../ui/styles-guide/theme-chooser').chooser()
+
+const css = csjs`
+  .debuggerTabView {
+    padding: 2%;
+  }
+  .debugger {
+    margin-bottom: 1%;
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+  }
+`
+
+module.exports = css