From d53e351bd97673d75f64170b1d139307c6592c6d Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 10 Apr 2018 03:00:13 +0100
Subject: [PATCH 1/4] refactor tabbed menu

---
 src/app/tabs/tabbed-menu.js | 113 +++++++++++++++++++++++++-----------
 1 file changed, 79 insertions(+), 34 deletions(-)

diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 85d402febb..b0b03ea099 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -1,52 +1,97 @@
 var yo = require('yo-yo')
-var helper = require('../../lib/helper')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
 
-var css = require('./styles/tabbed-menu-styles')
+var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
-class TabbedMenu {
-  constructor (api = {}, events = {}, opts = {}) {
-    var self = this
-    var tabView = document.createElement('ul')
-    this.tabView = tabView
-    this.events = events
-    this.tabs = {}
-    this.contents = {}
-
-    events.app.register('debuggingRequested', () => {
-      self.selectTab(tabView.querySelector('li.debugView'))
-    })
+var EventManager = remixLib.EventManager
 
-    events.rhp.register('switchTab', tabName => {
-      self.selectTab(tabView.querySelector(`li.${tabName}`))
-    })
+module.exports = class TabbedMenu {
+  constructor (api = {}, events = {}, opts = {}) {
+    const self = this
+    self.event = new EventManager()
+    self._api = api
+    self._events = events
+    self._view = { el: null, viewport: null, tabs: {}, contents: {} }
+    self.data = {}
+    self._components = {}
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`<ul class=${css.menu}>${Object.values(self._view.tabs)}</ul>`
+    return self._view.el
+  }
+  renderViewport () {
+    const self = this
+    if (self._view.viewport) return self._view.viewport
+    self._view.viewport = yo`
+      <div id="optionViews" class=${css.optionViews}>
+        ${Object.values(self._view.contents)}
+      </div>`
+    return self._view.viewport
+  }
+  addTab (title, cssClass, content) {
+    const self = this
+    if (self._view.contents[title] || self._view.tabs[title]) throw new Error('tab already exists')
+    self._view.contents[title] = content
+    self._view.tabs[title] = yo`<li class="${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
+    if (self._view.el) self._view.el.appendChild(self._view.tabs[title])
+    if (self._view.viewport) self._view.viewport.appendChild(self._view.contents[title])
   }
-  render () { return this.tabView }
   selectTabByTitle (title) {
-    this.selectTab(this.tabs[title])
+    const self = this
+    self.selectTab(self._view.tabs[title])
+  }
+  switchTab (tabClass) {
+    const self = this
+    self.selectTab(self._view.el.querySelector(`li.${tabClass}`))
   }
-
   selectTab (el) {
+    const self = this
     if (!el.classList.contains(css.active)) {
-      var nodes = el.parentNode.querySelectorAll('li')
+      var nodes = Object.values(self._view.tabs)
       for (var i = 0; i < nodes.length; ++i) {
         nodes[i].classList.remove(css.active)
-        this.contents[nodes[i].getAttribute('title')].style.display = 'none'
+        self._view.contents[nodes[i].getAttribute('title')].style.display = 'none'
       }
     }
     var title = el.getAttribute('title')
-    this.contents[el.getAttribute('title')].style.display = 'block'
+    self._view.contents[el.getAttribute('title')].style.display = 'block'
     el.classList.add(css.active)
-    this.events.app.trigger('tabChanged', [title])
-  }
-
-  addTab (title, cssClass, content) {
-    var self = this
-    if (!helper.checkSpecialChars(title)) {
-      this.contents[title] = content
-      this.tabs[title] = yo`<li class="${css.opts_li} ${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
-      this.tabView.appendChild(this.tabs[title])
-    }
+    self._events.app.trigger('tabChanged', [title])
   }
 }
 
-module.exports = TabbedMenu
+const css = csjs`
+  li.active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    color: ${styles.appProperties.mainText_Color}
+  }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Teriary}
+  }
+  .opts_li.active {
+    color: ${styles.rightPanel.text_Primary}
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
+  }
+`

From e1771ba6735020473edf3eaa1b7634ccdeca9952 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 10 Apr 2018 17:10:49 +0100
Subject: [PATCH 2/4] fix refactored tabbed menu

---
 src/app/panels/righthand-panel.js | 5 ++---
 src/app/tabs/tabbed-menu.js       | 7 ++++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 94e75752b7..84aff7cceb 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -37,9 +37,8 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
       </div>
     </div>
   `
-  appAPI.switchTab = (tabClass) => {
-    this.event.trigger('switchTab', [tabClass])
-  }
+  // selectTabByClassName
+  appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
 
   events.rhp = self.event
 
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index b0b03ea099..6378c3912d 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -2,6 +2,7 @@ var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var helper = require('../../lib/helper')
 var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
 var EventManager = remixLib.EventManager
@@ -10,11 +11,10 @@ module.exports = class TabbedMenu {
   constructor (api = {}, events = {}, opts = {}) {
     const self = this
     self.event = new EventManager()
+    self._opts = opts
     self._api = api
     self._events = events
     self._view = { el: null, viewport: null, tabs: {}, contents: {} }
-    self.data = {}
-    self._components = {}
   }
   render () {
     const self = this
@@ -33,6 +33,7 @@ module.exports = class TabbedMenu {
   }
   addTab (title, cssClass, content) {
     const self = this
+    if (helper.checkSpecialChars(title)) return
     if (self._view.contents[title] || self._view.tabs[title]) throw new Error('tab already exists')
     self._view.contents[title] = content
     self._view.tabs[title] = yo`<li class="${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
@@ -43,7 +44,7 @@ module.exports = class TabbedMenu {
     const self = this
     self.selectTab(self._view.tabs[title])
   }
-  switchTab (tabClass) {
+  selectTabByClassName (tabClass) {
     const self = this
     self.selectTab(self._view.el.querySelector(`li.${tabClass}`))
   }

From 94aaeb62b372b629d57b0662f1ac2f18333837c8 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 10 Apr 2018 18:40:17 +0100
Subject: [PATCH 3/4] delete tabbedMenu stylesheet

---
 src/app/tabs/styles/tabbed-menu-styles.js | 38 -----------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 src/app/tabs/styles/tabbed-menu-styles.js

diff --git a/src/app/tabs/styles/tabbed-menu-styles.js b/src/app/tabs/styles/tabbed-menu-styles.js
deleted file mode 100644
index a076ae1131..0000000000
--- a/src/app/tabs/styles/tabbed-menu-styles.js
+++ /dev/null
@@ -1,38 +0,0 @@
-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  li.active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
-  }
-  .options {
-    float: left;
-    padding-top: 0.7em;
-    min-width: 60px;
-    font-size: 0.9em;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-  }
-  .opts {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .opts_li {
-    display: block;
-    font-weight: bold;
-    color: ${styles.rightPanel.text_Teriary}
-  }
-  .opts_li.active {
-    color: ${styles.rightPanel.text_Primary}
-  }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
-  }
-`
-
-module.exports = css

From 2d9ef70392a4ddab7e886a3b60a79dda14ebb810 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 12 Apr 2018 11:33:44 +0200
Subject: [PATCH 4/4] readd debuggingRequested registration

---
 src/app/tabs/tabbed-menu.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 6378c3912d..ba70f27636 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -15,6 +15,9 @@ module.exports = class TabbedMenu {
     self._api = api
     self._events = events
     self._view = { el: null, viewport: null, tabs: {}, contents: {} }
+    events.app.register('debuggingRequested', () => {
+      self.selectTabByTitle('Debugger')
+    })
   }
   render () {
     const self = this