From 0da0ef80c99f88a8c47de71eb509e5d8e71ff22e Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 10 Apr 2018 18:40:56 +0100
Subject: [PATCH 1/2] refactor debugger tab

---
 src/app/tabs/debugger-tab.js               | 42 +++++++++++++++++-----
 src/app/tabs/styles/debugger-tab-styles.js | 15 --------
 2 files changed, 33 insertions(+), 24 deletions(-)
 delete mode 100644 src/app/tabs/styles/debugger-tab-styles.js

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 63ebb64e11..d9670f067a 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -1,12 +1,36 @@
 var yo = require('yo-yo')
-var css = require('./styles/debugger-tab-styles')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
 
-function debuggerTab (api = {}, events = {}, opts = {}) {
-  var el = yo`
-    <div class="${css.debuggerTabView} "id="debugView">
-      <div id="debugger" class="${css.debugger}"></div>
-    </div>`
-  return { render () { return el } }
-}
+var EventManager = remixLib.EventManager
+var styles = require('../../ui/styles-guide/theme-chooser').chooser()
 
-module.exports = debuggerTab
+module.exports = class DebuggerTab {
+  constructor (opts = { api: {}, events: {} }) {
+    const self = this
+    self.event = new EventManager()
+    self._api = opts.api
+    self._events = opts.events
+    self._view = { el: null }
+    self.data = {}
+    self._components = {}
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`
+      <div class="${css.debuggerTabView} "id="debugView">
+        <div id="debugger" class="${css.debugger}"></div>
+      </div>`
+    return self._view.el
+  }
+}
+const css = csjs`
+  .debuggerTabView {
+    padding: 2%;
+  }
+  .debugger {
+    margin-bottom: 1%;
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+  }
+`
diff --git a/src/app/tabs/styles/debugger-tab-styles.js b/src/app/tabs/styles/debugger-tab-styles.js
deleted file mode 100644
index ee0d804e17..0000000000
--- a/src/app/tabs/styles/debugger-tab-styles.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .debuggerTabView {
-    padding: 2%;
-  }
-  .debugger {
-    margin-bottom: 1%;
-    ${styles.rightPanel.debuggerTab.box_Debugger}
-  }
-`
-
-module.exports = css

From d4ac2c907b1674172d34f92e138c533001b57b5e Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 15 May 2018 03:11:21 +0100
Subject: [PATCH 2/2] fix module path

---
 src/app/tabs/debugger-tab.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index d9670f067a..a9fed861c5 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -3,7 +3,7 @@ var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
 var EventManager = remixLib.EventManager
-var styles = require('../../ui/styles-guide/theme-chooser').chooser()
+var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 module.exports = class DebuggerTab {
   constructor (opts = { api: {}, events: {} }) {