From 3f68e461a338c3d59e79b4a5b5d59dcdf44987ce Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 23 May 2018 13:01:38 -0400
Subject: [PATCH 01/15] support Tab: refactor away yo.update

---
 src/app/tabs/support-tab.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index 9591db29cf..813843136b 100644
--- a/src/app/tabs/support-tab.js
+++ b/src/app/tabs/support-tab.js
@@ -18,15 +18,18 @@ module.exports = class SupportTab {
     self._components = {}
     self._events.app.register('tabChanged', (tabName) => {
       if (tabName !== 'Support' || self.data.gitterIsLoaded) return
-      if (!self._view.gitterIframe) self._view.gitterIframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
-      yo.update(self._view.el, self.render())
+      const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
+      self._view.gitterIframe.parentNode.replaceChild(iframe, self._view.gitterIframe)
+      self._view.gitterIframe = iframe
       self._view.el.style.display = 'block'
       self.data.gitterIsLoaded = true
     })
   }
   render () {
     const self = this
-    var el = yo`
+    if (self._view.el) return self._view.el
+    self._view.gitterIframe = yo`<div></div>`
+    self._view.el = yo`
       <div class="${css.supportTabView}" id="supportView">
         <div class="${css.infoBox}">
           Have a question, found a bug or want to propose a feature? Have a look at the
@@ -42,7 +45,7 @@ module.exports = class SupportTab {
         </div>
       </div>`
     if (!self._view.el) self._view.el = el
-    return el
+    return self._view.el
     function openLink () { window.open('https://gitter.im/ethereum/remix') }
   }
 }

From 10caf967d36eccc87cf8820359bbc8c0ed9ccb57 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 23 May 2018 13:05:43 -0400
Subject: [PATCH 02/15]  support tab: refactor away yo.update

---
 src/app/tabs/support-tab.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index 813843136b..2f2b651740 100644
--- a/src/app/tabs/support-tab.js
+++ b/src/app/tabs/support-tab.js
@@ -44,7 +44,6 @@ module.exports = class SupportTab {
           ${self._view.gitterIframe}
         </div>
       </div>`
-    if (!self._view.el) self._view.el = el
     return self._view.el
     function openLink () { window.open('https://gitter.im/ethereum/remix') }
   }

From 02382341f7cab16cc36aaa3875217e1b7866f6ec Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 5 Jun 2018 08:03:38 -0400
Subject: [PATCH 03/15] rhp: refactor requires

---
 src/app/panels/righthand-panel.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index bc0136146f..88cba2804c 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -1,20 +1,21 @@
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
+
+var PluginManager = require('../plugin/pluginManager')
 var TabbedMenu = require('../tabs/tabbed-menu')
 var CompileTab = require('../tabs/compile-tab')
-var RunTab = require('../tabs/run-tab')
 var SettingsTab = require('../tabs/settings-tab')
 var AnalysisTab = require('../tabs/analysis-tab')
 var DebuggerTab = require('../tabs/debugger-tab')
 var SupportTab = require('../tabs/support-tab')
 var PluginTab = require('../tabs/plugin-tab')
 var TestTab = require('../tabs/test-tab')
-var PluginManager = require('../plugin/pluginManager')
+var RunTab = require('../tabs/run-tab')
 
+var EventManager = remixLib.EventManager
 var css = require('./styles/righthand-panel-styles')
 
-function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
+module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   var self = this
   self._api = appAPI
   self.event = new EventManager()
@@ -121,5 +122,3 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
     }
   }
 }
-
-module.exports = RighthandPanel

From 7169d98fae04f61a6f28c28191517da3e1e6aeb8 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 5 Jun 2018 08:06:13 -0400
Subject: [PATCH 04/15] rhp: inline styles

---
 src/app/panels/righthand-panel.js             | 101 ++++++++++++++++-
 .../panels/styles/righthand-panel-styles.js   | 102 ------------------
 2 files changed, 100 insertions(+), 103 deletions(-)
 delete mode 100644 src/app/panels/styles/righthand-panel-styles.js

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 88cba2804c..5c0f9dc53d 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -1,6 +1,8 @@
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
 
+var styleguide = require('../ui/styles-guide/theme-chooser')
 var PluginManager = require('../plugin/pluginManager')
 var TabbedMenu = require('../tabs/tabbed-menu')
 var CompileTab = require('../tabs/compile-tab')
@@ -13,7 +15,7 @@ var TestTab = require('../tabs/test-tab')
 var RunTab = require('../tabs/run-tab')
 
 var EventManager = remixLib.EventManager
-var css = require('./styles/righthand-panel-styles')
+var styles = styleguide.chooser()
 
 module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   var self = this
@@ -122,3 +124,100 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
     }
   }
 }
+
+var css = csjs`
+  #righthand-panel {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  #optionViews {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    overflow: scroll;
+    height: 100%;
+  }
+  #optionViews > div {
+    display: none;
+  }
+  #optionViews .pre {
+    word-wrap: break-word;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
+  }
+  #optionViews .hide {
+    display: none;
+  }
+  a {
+    color: ${styles.rightPanel.text_link};
+  }
+  .menu {
+    display: flex;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+  }
+  .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};
+  }
+  .dragbar             {
+    position           : absolute;
+    width              : 0.5em;
+    top                : 3em;
+    bottom             : 0;
+    cursor             : col-resize;
+    z-index            : 999;
+    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
+  }
+  .ghostbar           {
+    width             : 3px;
+    background-color  : ${styles.rightPanel.bar_Ghost};
+    opacity           : 0.5;
+    position          : absolute;
+    cursor            : col-resize;
+    z-index           : 9999;
+    top               : 0;
+    bottom            : 0;
+  }
+  .panel              {
+    height            : 100%;
+  }
+  .header             {
+    height            : 100%;
+  }
+  .solIcon {
+    margin-left: 10px;
+    margin-right: 30px;
+    display: flex;
+    align-self: center;
+    height: 29px;
+    width: 20px;
+    background-color: ${styles.colors.transparent};
+  }
+`
diff --git a/src/app/panels/styles/righthand-panel-styles.js b/src/app/panels/styles/righthand-panel-styles.js
deleted file mode 100644
index f477529227..0000000000
--- a/src/app/panels/styles/righthand-panel-styles.js
+++ /dev/null
@@ -1,102 +0,0 @@
-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  #righthand-panel {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  #optionViews {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    overflow: scroll;
-    height: 100%;
-  }
-  #optionViews > div {
-    display: none;
-  }
-  #optionViews .pre {
-    word-wrap: break-word;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-  }
-  #optionViews .hide {
-    display: none;
-  }
-  a {
-    color: ${styles.rightPanel.text_link};
-  }
-  .menu {
-    display: flex;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-  }
-  .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};
-  }
-  .dragbar             {
-    position           : absolute;
-    width              : 0.5em;
-    top                : 3em;
-    bottom             : 0;
-    cursor             : col-resize;
-    z-index            : 999;
-    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
-  }
-  .ghostbar           {
-    width             : 3px;
-    background-color  : ${styles.rightPanel.bar_Ghost};
-    opacity           : 0.5;
-    position          : absolute;
-    cursor            : col-resize;
-    z-index           : 9999;
-    top               : 0;
-    bottom            : 0;
-  }
-  .panel              {
-    height            : 100%;
-  }
-  .header             {
-    height            : 100%;
-  }
-  .solIcon {
-    margin-left: 10px;
-    margin-right: 30px;
-    display: flex;
-    align-self: center;
-    height: 29px;
-    width: 20px;
-    background-color: ${styles.colors.transparent};
-  }
-`
-
-module.exports = css

From 8496be2b923cc4420372ed7d1341ef425fd43c2c Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 5 Jun 2018 08:09:25 -0400
Subject: [PATCH 05/15] rhp: refactor var2const

---
 src/app/panels/righthand-panel.js | 66 +++++++++++++++----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 5c0f9dc53d..d1a7e43494 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -1,34 +1,34 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const remixLib = require('remix-lib')
 
-var styleguide = require('../ui/styles-guide/theme-chooser')
-var PluginManager = require('../plugin/pluginManager')
-var TabbedMenu = require('../tabs/tabbed-menu')
-var CompileTab = require('../tabs/compile-tab')
-var SettingsTab = require('../tabs/settings-tab')
-var AnalysisTab = require('../tabs/analysis-tab')
-var DebuggerTab = require('../tabs/debugger-tab')
-var SupportTab = require('../tabs/support-tab')
-var PluginTab = require('../tabs/plugin-tab')
-var TestTab = require('../tabs/test-tab')
-var RunTab = require('../tabs/run-tab')
+const styleguide = require('../ui/styles-guide/theme-chooser')
+const PluginManager = require('../plugin/pluginManager')
+const TabbedMenu = require('../tabs/tabbed-menu')
+const CompileTab = require('../tabs/compile-tab')
+const SettingsTab = require('../tabs/settings-tab')
+const AnalysisTab = require('../tabs/analysis-tab')
+const DebuggerTab = require('../tabs/debugger-tab')
+const SupportTab = require('../tabs/support-tab')
+const PluginTab = require('../tabs/plugin-tab')
+const TestTab = require('../tabs/test-tab')
+const RunTab = require('../tabs/run-tab')
 
-var EventManager = remixLib.EventManager
-var styles = styleguide.chooser()
+const EventManager = remixLib.EventManager
+const styles = styleguide.chooser()
 
 module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
-  var self = this
+  const self = this
   self._api = appAPI
   self.event = new EventManager()
   self._view = {}
 
-  var optionViews = yo`<div id="optionViews"></div>`
+  const optionViews = yo`<div id="optionViews"></div>`
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
   // load tabbed menu component
-  var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
+  const tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
   self._view.tabbedMenu = new TabbedMenu(appAPI, tabEvents)
-  var options = self._view.tabbedMenu.render()
+  const options = self._view.tabbedMenu.render()
   options.classList.add(css.opts)
   self._view.element = yo`
     <div id="righthand-panel" class=${css.panel}>
@@ -46,17 +46,17 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
 
   events.rhp = self.event
 
-  var compileTab = new CompileTab(appAPI, events, opts)
+  const compileTab = new CompileTab(appAPI, events, opts)
   optionViews.appendChild(compileTab.render())
-  var runTab = new RunTab(appAPI, events, opts)
+  const runTab = new RunTab(appAPI, events, opts)
   optionViews.appendChild(runTab.render())
-  var settingsTab = new SettingsTab(appAPI, events, opts)
+  const settingsTab = new SettingsTab(appAPI, events, opts)
   optionViews.appendChild(settingsTab.render())
-  var analysisTab = new AnalysisTab(appAPI, events, opts)
+  const analysisTab = new AnalysisTab(appAPI, events, opts)
   optionViews.appendChild(analysisTab.render())
-  var debuggerTab = new DebuggerTab(appAPI, events, opts)
+  const debuggerTab = new DebuggerTab(appAPI, events, opts)
   optionViews.appendChild(debuggerTab.render())
-  var supportTab = new SupportTab(appAPI, events, opts)
+  const supportTab = new SupportTab(appAPI, events, opts)
   optionViews.appendChild(supportTab.render())
   var testTab = new TestTab(appAPI, events, opts)
   optionViews.appendChild(testTab.render())
@@ -71,8 +71,8 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
 
   self.pluginManager = new PluginManager(opts.pluginAPI, events)
   events.rhp.register('plugin-loadRequest', (json) => {
-    var tab = new PluginTab({}, events, json)
-    var content = tab.render()
+    const tab = new PluginTab({}, events, json)
+    const content = tab.render()
     optionViews.appendChild(content)
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)
     self.pluginManager.register(json, content)
@@ -84,9 +84,9 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
     ;[...options.children].forEach((el) => { el.classList.add(css.options) })
 
     // ----------------- resizeable ui ---------------
-    var limit = 60
+    const limit = 60
     self._view.dragbar.addEventListener('mousedown', mousedown)
-    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+    const ghostbar = yo`<div class=${css.ghostbar}></div>`
     function mousedown (event) {
       event.preventDefault()
       if (event.which === 1) {
@@ -106,8 +106,8 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
       }
     }
     function getPosition (event) {
-      var lhp = window['filepanel'].offsetWidth
-      var max = document.body.offsetWidth - limit
+      const lhp = window['filepanel'].offsetWidth
+      const max = document.body.offsetWidth - limit
       var newpos = (event.pageX > max) ? max : event.pageX
       newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit
       return newpos
@@ -125,7 +125,7 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   }
 }
 
-var css = csjs`
+const css = csjs`
   #righthand-panel {
     display: flex;
     flex-direction: column;

From 6ce81abf11cf6519f7b8a1230a464cee7b23b4c0 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 5 Jun 2018 10:36:19 -0400
Subject: [PATCH 06/15] rhp: refactor api/events/opts

---
 src/app/panels/righthand-panel.js | 35 +++++++++++++++++--------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index d1a7e43494..d0fd444b80 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -17,17 +17,20 @@ const RunTab = require('../tabs/run-tab')
 const EventManager = remixLib.EventManager
 const styles = styleguide.chooser()
 
-module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
+module.exports = function RighthandPanel (api = {}, events = {}, opts = {}) {
   const self = this
-  self._api = appAPI
+  self._api = api
+  self._events = events
+  self._opts = opts
   self.event = new EventManager()
-  self._view = {}
+  self._view = { el: null, tabbedMenu: null, tabbedMenuViewport: null, dragbar: null }
+  self._components = {}
 
   const optionViews = yo`<div id="optionViews"></div>`
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
   // load tabbed menu component
-  const tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
-  self._view.tabbedMenu = new TabbedMenu(appAPI, tabEvents)
+  const tabEvents = {compiler: self._events.compiler, app: self._events.app, rhp: self.event}
+  self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
   const options = self._view.tabbedMenu.render()
   options.classList.add(css.opts)
   self._view.element = yo`
@@ -42,21 +45,21 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
     </div>
   `
   // selectTabByClassName
-  appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
+  self._api.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
 
-  events.rhp = self.event
+  self._events.rhp = self.event
 
-  const compileTab = new CompileTab(appAPI, events, opts)
+  const compileTab = new CompileTab(self._api, self._events, self._opts)
   optionViews.appendChild(compileTab.render())
-  const runTab = new RunTab(appAPI, events, opts)
+  const runTab = new RunTab(self._api, self._events, self._opts)
   optionViews.appendChild(runTab.render())
-  const settingsTab = new SettingsTab(appAPI, events, opts)
+  const settingsTab = new SettingsTab(self._api, self._events, self._opts)
   optionViews.appendChild(settingsTab.render())
-  const analysisTab = new AnalysisTab(appAPI, events, opts)
+  const analysisTab = new AnalysisTab(self._api, self._events, self._opts)
   optionViews.appendChild(analysisTab.render())
-  const debuggerTab = new DebuggerTab(appAPI, events, opts)
+  const debuggerTab = new DebuggerTab(self._api, self._events, self._opts)
   optionViews.appendChild(debuggerTab.render())
-  const supportTab = new SupportTab(appAPI, events, opts)
+  const supportTab = new SupportTab(self._api, self._events, self._opts)
   optionViews.appendChild(supportTab.render())
   var testTab = new TestTab(appAPI, events, opts)
   optionViews.appendChild(testTab.render())
@@ -69,9 +72,9 @@ module.exports = function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
-  self.pluginManager = new PluginManager(opts.pluginAPI, events)
-  events.rhp.register('plugin-loadRequest', (json) => {
-    const tab = new PluginTab({}, events, json)
+  self.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
+  self._events.rhp.register('plugin-loadRequest', (json) => {
+    const tab = new PluginTab({}, self._events, json)
     const content = tab.render()
     optionViews.appendChild(content)
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)

From 4fcf2132d8c82e40e19a612f58f43538a26bc431 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 6 Jun 2018 06:27:03 -0400
Subject: [PATCH 07/15] rhp: refactor to prepare for class

---
 src/app/panels/righthand-panel.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index d0fd444b80..8b7ccb0619 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -17,7 +17,7 @@ const RunTab = require('../tabs/run-tab')
 const EventManager = remixLib.EventManager
 const styles = styleguide.chooser()
 
-module.exports = function RighthandPanel (api = {}, events = {}, opts = {}) {
+function RighthandPanel (api = {}, events = {}, opts = {}) {
   const self = this
   self._api = api
   self._events = events
@@ -80,11 +80,16 @@ module.exports = function RighthandPanel (api = {}, events = {}, opts = {}) {
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)
     self.pluginManager.register(json, content)
   })
-
-  self.render = function () { return self._view.element }
-
-  self.init = function () {
-    ;[...options.children].forEach((el) => { el.classList.add(css.options) })
+}
+var prototype = {
+  constructor: RighthandPanel,
+  render: function () {
+    const self = this
+    return self._view.element
+  },
+  init: function () {
+    const self = this
+    // ;[...options.children].forEach((el) => { el.classList.add(css.options) })
 
     // ----------------- resizeable ui ---------------
     const limit = 60
@@ -127,6 +132,9 @@ module.exports = function RighthandPanel (api = {}, events = {}, opts = {}) {
     }
   }
 }
+prototype.constructor.prototype = prototype
+
+module.exports = prototype.constructor
 
 const css = csjs`
   #righthand-panel {

From 6082aeadb2ae58f2ebd07a15955c7ce13a06dc35 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 6 Jun 2018 08:02:49 -0400
Subject: [PATCH 08/15] rhp: prepare indentation for class

---
 src/app/panels/righthand-panel.js | 119 +++++++++++++++---------------
 1 file changed, 59 insertions(+), 60 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 8b7ccb0619..a83dae1f8b 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -17,72 +17,71 @@ const RunTab = require('../tabs/run-tab')
 const EventManager = remixLib.EventManager
 const styles = styleguide.chooser()
 
-function RighthandPanel (api = {}, events = {}, opts = {}) {
-  const self = this
-  self._api = api
-  self._events = events
-  self._opts = opts
-  self.event = new EventManager()
-  self._view = { el: null, tabbedMenu: null, tabbedMenuViewport: null, dragbar: null }
-  self._components = {}
+var prototype = {
+  constructor: function RighthandPanel (api = {}, events = {}, opts = {}) {
+    const self = this
+    self._api = api
+    self._events = events
+    self._opts = opts
+    self.event = new EventManager()
+    self._view = { el: null, tabbedMenu: null, tabbedMenuViewport: null, dragbar: null }
+    self._components = {}
 
-  const optionViews = yo`<div id="optionViews"></div>`
-  self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
-  // load tabbed menu component
-  const tabEvents = {compiler: self._events.compiler, app: self._events.app, rhp: self.event}
-  self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
-  const options = self._view.tabbedMenu.render()
-  options.classList.add(css.opts)
-  self._view.element = yo`
-    <div id="righthand-panel" class=${css.panel}>
-      ${self._view.dragbar}
-      <div id="header" class=${css.header}>
-        <div class=${css.menu}>
-          ${options}
+    const optionViews = yo`<div id="optionViews"></div>`
+    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
+    // load tabbed menu component
+    const tabEvents = {compiler: self._events.compiler, app: self._events.app, rhp: self.event}
+    self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
+    const options = self._view.tabbedMenu.render()
+    options.classList.add(css.opts)
+    self._view.element = yo`
+      <div id="righthand-panel" class=${css.panel}>
+        ${self._view.dragbar}
+        <div id="header" class=${css.header}>
+          <div class=${css.menu}>
+            ${options}
+          </div>
+          ${optionViews}
         </div>
-        ${optionViews}
       </div>
-    </div>
-  `
-  // selectTabByClassName
-  self._api.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
+    `
+    // selectTabByClassName
+    self._api.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
 
-  self._events.rhp = self.event
+    self._events.rhp = self.event
 
-  const compileTab = new CompileTab(self._api, self._events, self._opts)
-  optionViews.appendChild(compileTab.render())
-  const runTab = new RunTab(self._api, self._events, self._opts)
-  optionViews.appendChild(runTab.render())
-  const settingsTab = new SettingsTab(self._api, self._events, self._opts)
-  optionViews.appendChild(settingsTab.render())
-  const analysisTab = new AnalysisTab(self._api, self._events, self._opts)
-  optionViews.appendChild(analysisTab.render())
-  const debuggerTab = new DebuggerTab(self._api, self._events, self._opts)
-  optionViews.appendChild(debuggerTab.render())
-  const supportTab = new SupportTab(self._api, self._events, self._opts)
-  optionViews.appendChild(supportTab.render())
-  var testTab = new TestTab(appAPI, events, opts)
-  optionViews.appendChild(testTab.render())
-  this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
-  this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
-  this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
-  this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
-  this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
-  this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
-  this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
-  this._view.tabbedMenu.selectTabByTitle('Compile')
+    const compileTab = new CompileTab(self._api, self._events, self._opts)
+    optionViews.appendChild(compileTab.render())
+    const runTab = new RunTab(self._api, self._events, self._opts)
+    optionViews.appendChild(runTab.render())
+    const settingsTab = new SettingsTab(self._api, self._events, self._opts)
+    optionViews.appendChild(settingsTab.render())
+    const analysisTab = new AnalysisTab(self._api, self._events, self._opts)
+    optionViews.appendChild(analysisTab.render())
+    const debuggerTab = new DebuggerTab(self._api, self._events, self._opts)
+    optionViews.appendChild(debuggerTab.render())
+    const supportTab = new SupportTab(self._api, self._events, self._opts)
+    optionViews.appendChild(supportTab.render())
+    const testTab = new TestTab(self._api, events, opts)
+    optionViews.appendChild(testTab.render())
+    this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
+    this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
+    this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
+    this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
+    this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
+    this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
+    this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
+    this._view.tabbedMenu.selectTabByTitle('Compile')
 
-  self.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
-  self._events.rhp.register('plugin-loadRequest', (json) => {
-    const tab = new PluginTab({}, self._events, json)
-    const content = tab.render()
-    optionViews.appendChild(content)
-    this._view.tabbedMenu.addTab(json.title, 'plugin', content)
-    self.pluginManager.register(json, content)
-  })
-}
-var prototype = {
-  constructor: RighthandPanel,
+    self.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
+    self._events.rhp.register('plugin-loadRequest', (json) => {
+      const tab = new PluginTab({}, self._events, json)
+      const content = tab.render()
+      optionViews.appendChild(content)
+      this._view.tabbedMenu.addTab(json.title, 'plugin', content)
+      self.pluginManager.register(json, content)
+    })
+  },
   render: function () {
     const self = this
     return self._view.element

From 39c970768e42648b899529446859fb18d466c6a4 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 6 Jun 2018 08:39:55 -0400
Subject: [PATCH 09/15] rhp: refactor to class

---
 src/app/panels/righthand-panel.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index a83dae1f8b..23d2cf90c0 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -17,8 +17,8 @@ const RunTab = require('../tabs/run-tab')
 const EventManager = remixLib.EventManager
 const styles = styleguide.chooser()
 
-var prototype = {
-  constructor: function RighthandPanel (api = {}, events = {}, opts = {}) {
+module.exports = class RighthandPanel {
+  constructor (api = {}, events = {}, opts = {}) {
     const self = this
     self._api = api
     self._events = events
@@ -81,12 +81,12 @@ var prototype = {
       this._view.tabbedMenu.addTab(json.title, 'plugin', content)
       self.pluginManager.register(json, content)
     })
-  },
-  render: function () {
+  }
+  render () {
     const self = this
     return self._view.element
-  },
-  init: function () {
+  }
+  init () {
     const self = this
     // ;[...options.children].forEach((el) => { el.classList.add(css.options) })
 
@@ -131,9 +131,6 @@ var prototype = {
     }
   }
 }
-prototype.constructor.prototype = prototype
-
-module.exports = prototype.constructor
 
 const css = csjs`
   #righthand-panel {

From 789c791576ef7cc11f92ae47794226bef3616ae3 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Wed, 6 Jun 2018 18:03:48 -0400
Subject: [PATCH 10/15] rhp: refactor css

---
 src/app/panels/righthand-panel.js | 86 ++++++-------------------------
 src/app/tabs/tabbed-menu.js       | 35 +++++++------
 2 files changed, 36 insertions(+), 85 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 23d2cf90c0..7bd1edae68 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -27,15 +27,15 @@ module.exports = class RighthandPanel {
     self._view = { el: null, tabbedMenu: null, tabbedMenuViewport: null, dragbar: null }
     self._components = {}
 
-    const optionViews = yo`<div id="optionViews"></div>`
-    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
-    // load tabbed menu component
     const tabEvents = {compiler: self._events.compiler, app: self._events.app, rhp: self.event}
     self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
+    const optionViews = self._view.tabbedMenu.renderViewport()
+    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
+    // load tabbed menu component
     const options = self._view.tabbedMenu.render()
     options.classList.add(css.opts)
     self._view.element = yo`
-      <div id="righthand-panel" class=${css.panel}>
+      <div id="righthand-panel" class=${css.righthandpanel}>
         ${self._view.dragbar}
         <div id="header" class=${css.header}>
           <div class=${css.menu}>
@@ -133,65 +133,26 @@ module.exports = class RighthandPanel {
 }
 
 const css = csjs`
-  #righthand-panel {
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-  #optionViews {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    overflow: scroll;
-    height: 100%;
-  }
-  #optionViews > div {
-    display: none;
-  }
-  #optionViews .pre {
-    word-wrap: break-word;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-  }
-  #optionViews .hide {
-    display: none;
-  }
-  a {
-    color: ${styles.rightPanel.text_link};
-  }
   .menu {
     display: flex;
     background-color: ${styles.rightPanel.BackgroundColor_Pre};
-  }
-  .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};
+
+  .righthandpanel      {
+    display            : flex;
+    flex-direction     : column;
+    top                : 0;
+    right              : 0;
+    bottom             : 0;
+    box-sizing         : border-box;
+    overflow           : hidden;
+    height             : 100%;
   }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
+  .header              {
+    height             : 100%;
   }
   .dragbar             {
     position           : absolute;
@@ -212,19 +173,4 @@ const css = csjs`
     top               : 0;
     bottom            : 0;
   }
-  .panel              {
-    height            : 100%;
-  }
-  .header             {
-    height            : 100%;
-  }
-  .solIcon {
-    margin-left: 10px;
-    margin-right: 30px;
-    display: flex;
-    align-self: center;
-    height: 29px;
-    width: 20px;
-    background-color: ${styles.colors.transparent};
-  }
 `
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index ba70f27636..f92c7650e5 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -68,7 +68,14 @@ module.exports = class TabbedMenu {
 }
 
 const css = csjs`
-  li.active {
+  .menu {
+    display: flex;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .active {
     background-color: ${styles.rightPanel.backgroundColor_Tab};
     color: ${styles.appProperties.mainText_Color}
   }
@@ -81,21 +88,19 @@ const css = csjs`
     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}
+  .optionViews {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    overflow: scroll;
+    height: 100%;
   }
-  .opts_li.active {
-    color: ${styles.rightPanel.text_Primary}
+  .optionViews > div {
+    display: none;
   }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
+  .optionViews .pre {
+    word-wrap: break-word;
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
   }
 `

From b97f5c1910a97fb198596d9ba72e543848f06a8b Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Thu, 7 Jun 2018 05:57:05 -0400
Subject: [PATCH 11/15] rhp: refactor rhp/tabbedMenu relation

---
 src/app/panels/righthand-panel.js | 39 +++++++++----------------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 7bd1edae68..684233ae66 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -38,9 +38,7 @@ module.exports = class RighthandPanel {
       <div id="righthand-panel" class=${css.righthandpanel}>
         ${self._view.dragbar}
         <div id="header" class=${css.header}>
-          <div class=${css.menu}>
-            ${options}
-          </div>
+          ${options}
           ${optionViews}
         </div>
       </div>
@@ -51,34 +49,27 @@ module.exports = class RighthandPanel {
     self._events.rhp = self.event
 
     const compileTab = new CompileTab(self._api, self._events, self._opts)
-    optionViews.appendChild(compileTab.render())
     const runTab = new RunTab(self._api, self._events, self._opts)
-    optionViews.appendChild(runTab.render())
     const settingsTab = new SettingsTab(self._api, self._events, self._opts)
-    optionViews.appendChild(settingsTab.render())
     const analysisTab = new AnalysisTab(self._api, self._events, self._opts)
-    optionViews.appendChild(analysisTab.render())
     const debuggerTab = new DebuggerTab(self._api, self._events, self._opts)
-    optionViews.appendChild(debuggerTab.render())
     const supportTab = new SupportTab(self._api, self._events, self._opts)
-    optionViews.appendChild(supportTab.render())
-    const testTab = new TestTab(self._api, events, opts)
-    optionViews.appendChild(testTab.render())
-    this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
-    this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
-    this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
-    this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
-    this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
-    this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
-    this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
-    this._view.tabbedMenu.selectTabByTitle('Compile')
+    const testTab = new TestTab(self._api, self._events, self._opts)
+    self._view.tabbedMenu.addTab('Compile', 'compileView', compileTab.render())
+    self._view.tabbedMenu.addTab('Run', 'runView', runTab.render())
+    self._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab.render())
+    self._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab.render())
+    self._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab.render())
+    self._view.tabbedMenu.addTab('Support', 'supportView', supportTab.render())
+    self._view.tabbedMenu.addTab('Test', 'testView', testTab.render())
+    self._view.tabbedMenu.selectTabByTitle('Compile')
 
     self.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
     self._events.rhp.register('plugin-loadRequest', (json) => {
       const tab = new PluginTab({}, self._events, json)
       const content = tab.render()
       optionViews.appendChild(content)
-      this._view.tabbedMenu.addTab(json.title, 'plugin', content)
+      self._view.tabbedMenu.addTab(json.title, 'plugin', content)
       self.pluginManager.register(json, content)
     })
   }
@@ -133,14 +124,6 @@ module.exports = class RighthandPanel {
 }
 
 const css = csjs`
-  .menu {
-    display: flex;
-    background-color: ${styles.rightPanel.BackgroundColor_Pre};
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
   .righthandpanel      {
     display            : flex;
     flex-direction     : column;

From f2a18ddce928704f7d70fe0f910300ff2aa56cc6 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Thu, 7 Jun 2018 17:10:19 -0400
Subject: [PATCH 12/15] rhp: minor refactorings

---
 src/app/panels/righthand-panel.js | 77 ++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 684233ae66..acf6f9cfdf 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -20,34 +20,31 @@ const styles = styleguide.chooser()
 module.exports = class RighthandPanel {
   constructor (api = {}, events = {}, opts = {}) {
     const self = this
+    self.event = new EventManager()
     self._api = api
+    self._api.switchTab = x => { // @TODO: refactor
+      if (self._components.tabbedMenu) self._components.tabbedMenu.selectTabByClassName(x)
+    }
     self._events = events
+    self._events.rhp = self.event // @TODO: refactor
     self._opts = opts
-    self.event = new EventManager()
-    self._view = { el: null, tabbedMenu: null, tabbedMenuViewport: null, dragbar: null }
+    self._view = {
+      element: null,
+      tabbedMenu: null,
+      tabbedMenuViewport: null,
+      dragbar: null
+    }
     self._components = {}
 
-    const tabEvents = {compiler: self._events.compiler, app: self._events.app, rhp: self.event}
-    self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
-    const optionViews = self._view.tabbedMenu.renderViewport()
-    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
-    // load tabbed menu component
-    const options = self._view.tabbedMenu.render()
-    options.classList.add(css.opts)
-    self._view.element = yo`
-      <div id="righthand-panel" class=${css.righthandpanel}>
-        ${self._view.dragbar}
-        <div id="header" class=${css.header}>
-          ${options}
-          ${optionViews}
-        </div>
-      </div>
-    `
-    // selectTabByClassName
-    self._api.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
-
-    self._events.rhp = self.event
+    self.event.register('plugin-loadRequest', json => {
+      const tab = new PluginTab({}, self._events, json)
+      const content = tab.render()
+      self._components.tabbedMenu.addTab(json.title, 'plugin', content)
+      self._components.pluginManager.register(json, content)
+    })
 
+    self._components.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
+    self._components.tabbedMenu = new TabbedMenu(self._api, self._events)
     const compileTab = new CompileTab(self._api, self._events, self._opts)
     const runTab = new RunTab(self._api, self._events, self._opts)
     const settingsTab = new SettingsTab(self._api, self._events, self._opts)
@@ -64,24 +61,38 @@ module.exports = class RighthandPanel {
     self._view.tabbedMenu.addTab('Test', 'testView', testTab.render())
     self._view.tabbedMenu.selectTabByTitle('Compile')
 
-    self.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
-    self._events.rhp.register('plugin-loadRequest', (json) => {
-      const tab = new PluginTab({}, self._events, json)
-      const content = tab.render()
-      optionViews.appendChild(content)
-      self._view.tabbedMenu.addTab(json.title, 'plugin', content)
-      self.pluginManager.register(json, content)
-    })
+    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
+    const optionViews = self._components.tabbedMenu.renderViewport()
+    const options = self._components.tabbedMenu.render()
+    self._view.element = yo`
+      <div id="righthand-panel" class=${css.righthandpanel}>
+        ${self._view.dragbar}
+        <div id="header" class=${css.header}>
+          ${options}
+          ${optionViews}
+        </div>
+      </div>`
+    self._components.tabbedMenu.addTab('Compile', 'compileView', compileTab.render())
+    self._components.tabbedMenu.addTab('Run', 'runView', runTab.render())
+    self._components.tabbedMenu.addTab('Settings', 'settingsView', settingsTab.render())
+    self._components.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab.render())
+    self._components.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab.render())
+    self._components.tabbedMenu.addTab('Support', 'supportView', supportTab.render())
+    self._components.tabbedMenu.selectTabByTitle('Compile')
   }
+  // showDebugger () {
+  //   const self = this
+  //   if (!self._components.tabbedMenu) return
+  //   self._components.tabbedMenu.selectTab(self._view.el.querySelector('li.debugView'))
+  // }
   render () {
     const self = this
+    if (self._view.element) return self._view.element
     return self._view.element
   }
   init () {
+    // @TODO: init is for resizable drag bar only and should be refactored in the future
     const self = this
-    // ;[...options.children].forEach((el) => { el.classList.add(css.options) })
-
-    // ----------------- resizeable ui ---------------
     const limit = 60
     self._view.dragbar.addEventListener('mousedown', mousedown)
     const ghostbar = yo`<div class=${css.ghostbar}></div>`

From 437a645f98c20e0f635ebd34f3e5fbc9ccc847d8 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Thu, 7 Jun 2018 20:40:48 -0400
Subject: [PATCH 13/15] rhp: minor refactorings

---
 src/app/panels/righthand-panel.js | 44 +++++++++++++------------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index acf6f9cfdf..fbd168ed1d 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -45,39 +45,33 @@ module.exports = class RighthandPanel {
 
     self._components.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
     self._components.tabbedMenu = new TabbedMenu(self._api, self._events)
-    const compileTab = new CompileTab(self._api, self._events, self._opts)
-    const runTab = new RunTab(self._api, self._events, self._opts)
-    const settingsTab = new SettingsTab(self._api, self._events, self._opts)
-    const analysisTab = new AnalysisTab(self._api, self._events, self._opts)
-    const debuggerTab = new DebuggerTab(self._api, self._events, self._opts)
-    const supportTab = new SupportTab(self._api, self._events, self._opts)
-    const testTab = new TestTab(self._api, self._events, self._opts)
-    self._view.tabbedMenu.addTab('Compile', 'compileView', compileTab.render())
-    self._view.tabbedMenu.addTab('Run', 'runView', runTab.render())
-    self._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab.render())
-    self._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab.render())
-    self._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab.render())
-    self._view.tabbedMenu.addTab('Support', 'supportView', supportTab.render())
-    self._view.tabbedMenu.addTab('Test', 'testView', testTab.render())
-    self._view.tabbedMenu.selectTabByTitle('Compile')
+
+    const compile = new CompileTab(self._api, self._events, self._opts)
+    const run = new RunTab(self._api, self._events, self._opts)
+    const settings = new SettingsTab(self._api, self._events, self._opts)
+    const analysis = new AnalysisTab(self._api, self._events, self._opts)
+    const debug = new DebuggerTab(self._api, self._events, self._opts)
+    const support = new SupportTab(self._api, self._events, self._opts)
+    const test = new TestTab(self._api, self._events, self._opts)
 
     self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
-    const optionViews = self._components.tabbedMenu.renderViewport()
-    const options = self._components.tabbedMenu.render()
     self._view.element = yo`
       <div id="righthand-panel" class=${css.righthandpanel}>
         ${self._view.dragbar}
         <div id="header" class=${css.header}>
-          ${options}
-          ${optionViews}
+          ${self._components.tabbedMenu.render()}
+          ${self._components.tabbedMenu.renderViewport()}
         </div>
       </div>`
-    self._components.tabbedMenu.addTab('Compile', 'compileView', compileTab.render())
-    self._components.tabbedMenu.addTab('Run', 'runView', runTab.render())
-    self._components.tabbedMenu.addTab('Settings', 'settingsView', settingsTab.render())
-    self._components.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab.render())
-    self._components.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab.render())
-    self._components.tabbedMenu.addTab('Support', 'supportView', supportTab.render())
+
+    // const { compile, run, settings, analysis, debug, support } = self._components
+    self._components.tabbedMenu.addTab('Compile', 'compileView', compile.render())
+    self._components.tabbedMenu.addTab('Run', 'runView', run.render())
+    self._components.tabbedMenu.addTab('Settings', 'settingsView', settings.render())
+    self._components.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysis.render())
+    self._components.tabbedMenu.addTab('Debugger', 'debugView', debug.render())
+    self._components.tabbedMenu.addTab('Support', 'supportView', support.render())
+    self._components.tabbedMenu.addTab('Test', 'testView', test.render())
     self._components.tabbedMenu.selectTabByTitle('Compile')
   }
   // showDebugger () {

From ad48cd311770b005e84f76f551de87e05a418416 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Thu, 7 Jun 2018 20:50:34 -0400
Subject: [PATCH 14/15] rhp: refactor to self._components

---
 src/app/panels/righthand-panel.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index fbd168ed1d..bb15d66a6f 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -34,7 +34,17 @@ module.exports = class RighthandPanel {
       tabbedMenuViewport: null,
       dragbar: null
     }
-    self._components = {}
+    self._components = {
+      pluginManager: new PluginManager(self._opts.pluginAPI, self._events),
+      tabbedMenu: new TabbedMenu(self._api, self._events),
+      compile: new CompileTab(self._api, self._events, self._opts),
+      run: new RunTab(self._api, self._events, self._opts),
+      settings: new SettingsTab(self._api, self._events, self._opts),
+      analysis: new AnalysisTab(self._api, self._events, self._opts),
+      debug: new DebuggerTab(self._api, self._events, self._opts),
+      support: new SupportTab(self._api, self._events, self._opts),
+      test: new TestTab(self._api, self._events, self._opts)
+    }
 
     self.event.register('plugin-loadRequest', json => {
       const tab = new PluginTab({}, self._events, json)
@@ -46,14 +56,6 @@ module.exports = class RighthandPanel {
     self._components.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
     self._components.tabbedMenu = new TabbedMenu(self._api, self._events)
 
-    const compile = new CompileTab(self._api, self._events, self._opts)
-    const run = new RunTab(self._api, self._events, self._opts)
-    const settings = new SettingsTab(self._api, self._events, self._opts)
-    const analysis = new AnalysisTab(self._api, self._events, self._opts)
-    const debug = new DebuggerTab(self._api, self._events, self._opts)
-    const support = new SupportTab(self._api, self._events, self._opts)
-    const test = new TestTab(self._api, self._events, self._opts)
-
     self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
     self._view.element = yo`
       <div id="righthand-panel" class=${css.righthandpanel}>
@@ -64,7 +66,7 @@ module.exports = class RighthandPanel {
         </div>
       </div>`
 
-    // const { compile, run, settings, analysis, debug, support } = self._components
+    const { compile, run, settings, analysis, debug, support, test } = self._components
     self._components.tabbedMenu.addTab('Compile', 'compileView', compile.render())
     self._components.tabbedMenu.addTab('Run', 'runView', run.render())
     self._components.tabbedMenu.addTab('Settings', 'settingsView', settings.render())

From ad923774bf76e20a24764d6078b1d2a13c467147 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 11 Jun 2018 14:20:55 +0200
Subject: [PATCH 15/15] fix tab instanciation

---
 src/app/panels/righthand-panel.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index bb15d66a6f..4d80cb400c 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -53,9 +53,6 @@ module.exports = class RighthandPanel {
       self._components.pluginManager.register(json, content)
     })
 
-    self._components.pluginManager = new PluginManager(self._opts.pluginAPI, self._events)
-    self._components.tabbedMenu = new TabbedMenu(self._api, self._events)
-
     self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
     self._view.element = yo`
       <div id="righthand-panel" class=${css.righthandpanel}>