Merge pull request #1084 from ethereum/test-tab

refactor righthandpanel

src/app.js

@@ -110,7 +110,7 @@ var css = csjs`
 `
 
 class App {
-  constructor (opts = {}) {
+  constructor (api = {}, events = {}, opts = {}) {
     var self = this
     self._api = {}
     var fileStorage = new Storage('sol:')
@@ -792,7 +792,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     editor: editor.event,
     staticAnalysis: staticanalysis.event
   }
-  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {})
+  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents)
   self._view.rightpanel.appendChild(self._components.righthandpanel.render())
   self._components.righthandpanel.init()
   self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))

src/app/panels/righthand-panel.js

@@ -2,29 +2,30 @@ 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 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 PluginManager = require('../../pluginManager')
 
 var css = require('./styles/righthand-panel-styles')
 
-function RighthandPanel (appAPI, events, opts) {
+function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   var self = this
   self._api = appAPI
   self.event = new EventManager()
   self._view = {}
 
   var optionViews = yo`<div id="optionViews"></div>`
-  var options = yo`
-    <ul class=${css.opts}>
-    </ul>
-  `
   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(self._api, 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}
@@ -40,23 +41,33 @@ function RighthandPanel (appAPI, events, opts) {
     this.event.trigger('switchTab', [tabClass])
   }
 
-  // load tabbed menu component
-  var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
-  self._view.tabbedMenu = new TabbedMenu(options, tabEvents)
-
   events.rhp = self.event
 
-  this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
-  this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events))
-  this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
-  this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
-  this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
-  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, events))
+  var compileTab = new CompileTab(appAPI, events)
+  optionViews.appendChild(compileTab.render())
+  var runTab = new RunTab(appAPI, events)
+  optionViews.appendChild(runTab.render())
+  var settingsTab = new SettingsTab(appAPI, events)
+  optionViews.appendChild(settingsTab.render())
+  var analysisTab = new AnalysisTab(appAPI, events)
+  optionViews.appendChild(analysisTab.render())
+  var debuggerTab = new DebuggerTab(appAPI, events)
+  optionViews.appendChild(debuggerTab.render())
+  var supportTab = new SupportTab(appAPI, events)
+  optionViews.appendChild(supportTab.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.selectTabByTitle('Compile')
 
   self.pluginManager = new PluginManager(appAPI, events)
   events.rhp.register('plugin-loadRequest', (json) => {
-    var content = pluginTab(optionViews, json.url)
+    var tab = new PluginTab(appAPI, events, json)
+    var content = tab.render()
+    optionViews.appendChild(content)
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)
     self.pluginManager.register(json, content)
   })

src/app/tabs/analysis-tab.js

@@ -1,13 +1,12 @@
 var yo = require('yo-yo')
 var css = require('./styles/analysis-tab-styles')
 
-function analysisTab (container) {
+function analysisTab (api = {}, events = {}, opts = {}) {
   var el = yo`
     <div class="${css.analysisTabView} "id="staticanalysisView">
     </div>
   `
-  container.appendChild(el)
-  return el
+  return { render () { return el } }
 }
 
 module.exports = analysisTab

src/app/tabs/compile-tab.js

@@ -14,10 +14,7 @@ var remixLib = require('remix-lib')
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
 
-function compileTab (container, appAPI, appEvents, opts) {
-  if (typeof container === 'string') container = document.querySelector(container)
-  if (!container) throw new Error('no container given')
-
+function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
   // Containers
   var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
   var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
@@ -115,24 +112,23 @@ function compileTab (container, appAPI, appEvents, opts) {
     compileIcon.setAttribute('title', '')
   })
 
+  var errorContainer = yo`<div class='error'></div>`
   var el = yo`
     <div class="${css.compileTabView}" id="compileTabView">
       ${compileContainer}
-      ${contractNames(container, appAPI, appEvents, opts)}
-      <div class='error'></div>
+      ${contractNames(appAPI, appEvents)}
+      ${errorContainer}
     </div>
   `
-  container.appendChild(el)
 
   /* ------------------------------------------------
     section CONTRACT DROPDOWN, DETAILS AND PUBLISH
   ------------------------------------------------ */
 
-  function contractNames (container, appAPI, appEvents, opts) {
+  function contractNames (appAPI, appEvents) {
     var contractsDetails = {}
 
     appEvents.compiler.register('compilationStarted', () => {
-      var errorContainer = container.querySelector('.error')
       errorContainer.innerHTML = ''
     })
 
@@ -148,7 +144,6 @@ function compileTab (container, appAPI, appEvents, opts) {
         document.querySelector('.compileView').style.color = styles.colors.red
       }
       // display warning error if any
-      var errorContainer = container.querySelector('.error')
       var error = false
       if (data['error']) {
         error = true
@@ -171,7 +166,6 @@ function compileTab (container, appAPI, appEvents, opts) {
 
     appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
       if (count) {
-        var errorContainer = container.querySelector('.error')
         appAPI.compilationMessage(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
           type: 'warning',
           click: () => appAPI.switchTab('staticanalysisView')
@@ -303,7 +297,7 @@ function compileTab (container, appAPI, appEvents, opts) {
     }
     return el
   }
-  return el
+  return { render () { return el } }
 }
 
 function detailsHelpSection () {

src/app/tabs/debugger-tab.js

@@ -1,13 +1,12 @@
 var yo = require('yo-yo')
 var css = require('./styles/debugger-tab-styles')
 
-function debuggerTab (container) {
+function debuggerTab (api = {}, events = {}, opts = {}) {
   var el = yo`
     <div class="${css.debuggerTabView} "id="debugView">
       <div id="debugger" class="${css.debugger}"></div>
     </div>`
-  container.appendChild(el)
-  return el
+  return { render () { return el } }
 }
 
 module.exports = debuggerTab

src/app/tabs/plugin-tab.js

@@ -1,13 +1,12 @@
 var yo = require('yo-yo')
 var css = require('./styles/plugin-tab-styles')
 
-function plugintab (container, url) {
+function plugintab (api = {}, events = {}, opts = {}) {
   var el = yo`
     <div class="${css.pluginTabView}" id="pluginView">
-      <iframe class="${css.iframe}" src="${url}/index.html"></iframe>
+      <iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
     </div>`
-  container.appendChild(el)
-  return el
+  return { render () { return el } }
 }
 
 module.exports = plugintab

src/app/tabs/run-tab.js

@@ -22,14 +22,15 @@ var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instance
 
 var pendingTxsText = yo`<span>0 pending transactions</span>`
 
-function runTab (container, appAPI, appEvents) {
-  var events = new EventManager()
+function runTab (appAPI = {}, appEvents = {}, opts = {}) {
+  var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+  var event = new EventManager()
 
   var clearInstanceElement = yo`<i class="${css.clearinstance} ${css.icon} fa fa-trash" title="Clear Instances List" aria-hidden="true"></i>`
   clearInstanceElement.addEventListener('click', () => {
-    events.trigger('clearInstance', [])
+    event.trigger('clearInstance', [])
   })
-  var recorderInterface = makeRecorder(events, appAPI, appEvents)
+  var recorderInterface = makeRecorder(event, appAPI, appEvents)
   var pendingTxsContainer = yo`
   <div class="${css.pendingTxsContainer}">
     <div class="${css.pendingTxsText}">
@@ -43,9 +44,9 @@ function runTab (container, appAPI, appEvents) {
   </div>`
 
   var el = yo`
-  <div class="${css.runTabView}" id="runTabView">
+  <div>
     ${settings(container, appAPI, appEvents)}
-    ${contractDropdown(events, appAPI, appEvents, instanceContainer)}
+    ${contractDropdown(event, appAPI, appEvents, instanceContainer)}
     ${pendingTxsContainer}
     ${instanceContainer}
   </div>
@@ -65,7 +66,7 @@ function runTab (container, appAPI, appEvents) {
     // set the final context. Cause it is possible that this is not the one we've originaly selected
     selectExEnv.value = executionContext.getProvider()
     fillAccountsList(appAPI, el)
-    events.trigger('clearInstance', [])
+    event.trigger('clearInstance', [])
   }
 
   selectExEnv.addEventListener('change', function (event) {
@@ -95,12 +96,12 @@ function runTab (container, appAPI, appEvents) {
     updatePendingTxs(container, appAPI)
   }, 10000)
 
-  events.register('clearInstance', () => {
+  event.register('clearInstance', () => {
     instanceContainer.innerHTML = '' // clear the instances list
     noInstancesText.style.display = 'block'
     instanceContainer.appendChild(noInstancesText)
   })
-  return el
+  return { render () { return container } }
 }
 
 function fillAccountsList (appAPI, container) {

src/app/tabs/settings-tab.js

@@ -10,10 +10,7 @@ var modal = require('../ui/modal-dialog-custom')
 
 var css = require('./styles/settings-tab-styles')
 
-function SettingsTab (container, appAPI, appEvents) {
-  if (typeof container === 'string') container = document.querySelector(container)
-  if (!container) throw new Error('no container given')
-
+function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
   var queryParams = new QueryParams()
 
   var optionVM = yo`<input id="alwaysUseVM" type="checkbox">`
@@ -203,8 +200,7 @@ function SettingsTab (container, appAPI, appEvents) {
     loadVersion('builtin', queryParams, appAPI, el)
   })
 
-  container.appendChild(el)
-  return el
+  return { render () { return el } }
 }
 
 function setVersionText (text, el) {

src/app/tabs/support-tab.js

@@ -33,7 +33,7 @@ function supportTabView (gitterIframe) {
   `
 }
 
-function supportTab (container, events) {
+function supportTab (api = {}, events = {}, opts = {}) {
   let el = supportTabView('')
   let gitterIsLoaded = false
 
@@ -47,8 +47,7 @@ function supportTab (container, events) {
     gitterIsLoaded = true
   })
 
-  container.appendChild(el)
-  return el
+  return { render () { return el } }
 }
 
 function openLink () {

src/app/tabs/tabbed-menu.js

@@ -4,8 +4,9 @@ var helper = require('../../lib/helper')
 var css = require('./styles/tabbed-menu-styles')
 
 class TabbedMenu {
-  constructor (tabView, events) {
+  constructor (api = {}, events = {}, opts = {}) {
     var self = this
+    var tabView = document.createElement('ul')
     this.tabView = tabView
     this.events = events
     this.tabs = {}
@@ -19,7 +20,7 @@ class TabbedMenu {
       self.selectTab(tabView.querySelector(`li.${tabName}`))
     })
   }
-
+  render () { return this.tabView }
   selectTabByTitle (title) {
     this.selectTab(this.tabs[title])
   }

src/pluginManager.js

@@ -38,7 +38,7 @@
  *
  */
 class PluginManager {
-  constructor (api, events) {
+  constructor (api = {}, events = {}, opts = {}) {
     var self = this
     this.plugins = {}
     this.inFocus