${self._view.dragbar}
@@ -40,23 +41,31 @@ 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', compileTab.render())
+ this._view.tabbedMenu.addTab('Run', 'runView', runTab.render())
+ this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab.render())
+ this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab.render())
+ this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab.render())
+ this._view.tabbedMenu.addTab('Support', 'supportView', supportTab.render())
this._view.tabbedMenu.selectTabByTitle('Compile')
self.pluginManager = new PluginManager(appAPI, events)
events.rhp.register('plugin-loadRequest', (json) => {
- var content = pluginTab(optionViews, json.url)
+ var content = new PluginTab(appAPI, events, json)
this._view.tabbedMenu.addTab(json.title, 'plugin', content)
self.pluginManager.register(json, content)
})
diff --git a/src/app/tabs/analysis-tab.js b/src/app/tabs/analysis-tab.js
index 8042a42ab1..6dea63f56c 100644
--- a/src/app/tabs/analysis-tab.js
+++ b/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`
`
- container.appendChild(el)
- return el
+ return { render () { return el } }
}
module.exports = analysisTab
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 9d92fff180..a254c07705 100644
--- a/src/app/tabs/compile-tab.js
+++ b/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`
`
var compileIcon = yo`
`
@@ -115,24 +112,23 @@ function compileTab (container, appAPI, appEvents, opts) {
compileIcon.setAttribute('title', '')
})
+ var errorContainer = yo`
`
var el = yo`
${compileContainer}
- ${contractNames(container, appAPI, appEvents, opts)}
-
+ ${contractNames(appAPI, appEvents)}
+ ${errorContainer}
`
- 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 () {
diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 7d3b3e5947..63ebb64e11 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/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`
`
- container.appendChild(el)
- return el
+ return { render () { return el } }
}
module.exports = debuggerTab
diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js
index 74b4f31045..6a8c700485 100644
--- a/src/app/tabs/plugin-tab.js
+++ b/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`
-
+
`
- container.appendChild(el)
- return el
+ return { render () { return el } }
}
module.exports = plugintab
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 01be4b6eb7..d30ea5610f 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -22,14 +22,15 @@ var noInstancesText = yo`
0 contract Instance
var pendingTxsText = yo`
0 pending transactions`
-function runTab (container, appAPI, appEvents) {
- var events = new EventManager()
+function runTab (appAPI = {}, appEvents = {}, opts = {}) {
+ var container = document.createElement('div')
+ var event = new EventManager()
var clearInstanceElement = yo`
`
clearInstanceElement.addEventListener('click', () => {
- events.trigger('clearInstance', [])
+ event.trigger('clearInstance', [])
})
- var recorderInterface = makeRecorder(events, appAPI, appEvents)
+ var recorderInterface = makeRecorder(event, appAPI, appEvents)
var pendingTxsContainer = yo`
@@ -45,7 +46,7 @@ function runTab (container, appAPI, appEvents) {
var el = yo`
${settings(container, appAPI, appEvents)}
- ${contractDropdown(events, appAPI, appEvents, instanceContainer)}
+ ${contractDropdown(event, appAPI, appEvents, instanceContainer)}
${pendingTxsContainer}
${instanceContainer}
@@ -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) {
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index 90ea3c3672..65243d5db7 100644
--- a/src/app/tabs/settings-tab.js
+++ b/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`
`
@@ -78,7 +75,7 @@ function SettingsTab (container, appAPI, appEvents) {
-
+
Plugin
@@ -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) {
diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index 29b9bbb105..0c4da109e5 100644
--- a/src/app/tabs/support-tab.js
+++ b/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 () {
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 0bd7b31cda..85d402febb 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/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])
}
diff --git a/src/pluginManager.js b/src/pluginManager.js
index 50bef847e6..93d4206992 100644
--- a/src/pluginManager.js
+++ b/src/pluginManager.js
@@ -38,7 +38,7 @@
*
*/
class PluginManager {
- constructor (api, events) {
+ constructor (api = {}, events = {}, opts = {}) {
var self = this
this.plugins = {}
this.inFocus