Merge pull request #1233 from ethereum/refactor_rhp

src/app/panels/righthand-panel.js

-var yo = require('yo-yo')
-var remixLib = require('remix-lib')
-var EventManager = remixLib.EventManager
-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')
+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const remixLib = require('remix-lib')
 
-var css = require('./styles/righthand-panel-styles')
+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')
 
-function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
-  var self = this
-  self._api = appAPI
-  self.event = new EventManager()
-  self._view = {}
+const EventManager = remixLib.EventManager
+const styles = styleguide.chooser()
 
-  var 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}
-  self._view.tabbedMenu = new TabbedMenu(appAPI, tabEvents)
-  var 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>
-    </div>
-  `
-  // selectTabByClassName
-  appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
-
-  events.rhp = self.event
-
-  var compileTab = new CompileTab(appAPI, events, opts)
-  optionViews.appendChild(compileTab.render())
-  var runTab = new RunTab(appAPI, events, opts)
-  optionViews.appendChild(runTab.render())
-  var settingsTab = new SettingsTab(appAPI, events, opts)
-  optionViews.appendChild(settingsTab.render())
-  var analysisTab = new AnalysisTab(appAPI, events, opts)
-  optionViews.appendChild(analysisTab.render())
-  var debuggerTab = new DebuggerTab(appAPI, events, opts)
-  optionViews.appendChild(debuggerTab.render())
-  var supportTab = new SupportTab(appAPI, events, 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')
-
-  self.pluginManager = new PluginManager(opts.pluginAPI, events)
-  events.rhp.register('plugin-loadRequest', (json) => {
-    var tab = new PluginTab({}, events, json)
-    var content = tab.render()
-    optionViews.appendChild(content)
-    this._view.tabbedMenu.addTab(json.title, 'plugin', content)
-    self.pluginManager.register(json, content)
-  })
+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._view = {
+      element: null,
+      tabbedMenu: null,
+      tabbedMenuViewport: null,
+      dragbar: null
+    }
+    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.render = function () { return self._view.element }
+    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.init = function () {
-    ;[...options.children].forEach((el) => { el.classList.add(css.options) })
+    self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
+    self._view.element = yo`
+      <div id="righthand-panel" class=${css.righthandpanel}>
+        ${self._view.dragbar}
+        <div id="header" class=${css.header}>
+          ${self._components.tabbedMenu.render()}
+          ${self._components.tabbedMenu.renderViewport()}
+        </div>
+      </div>`
 
-    // ----------------- resizeable ui ---------------
-    var limit = 60
+    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())
+    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 () {
+  //   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
+    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) {
@@ -103,8 +108,8 @@ 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
@@ -122,4 +127,37 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   }
 }
 
-module.exports = RighthandPanel
+const css = csjs`
+  .righthandpanel      {
+    display            : flex;
+    flex-direction     : column;
+    top                : 0;
+    right              : 0;
+    bottom             : 0;
+    box-sizing         : border-box;
+    overflow           : hidden;
+    height             : 100%;
+  }
+  .header              {
+    height             : 100%;
+  }
+  .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;
+  }
+`

src/app/panels/styles/righthand-panel-styles.js

-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

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
@@ -41,8 +44,7 @@ module.exports = class SupportTab {
           ${self._view.gitterIframe}
         </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') }
   }
 }

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;
   }
 `