update a start

package.json

@@ -38,9 +38,10 @@
     "npm-link-local": "^1.1.0",
     "npm-run-all": "^4.0.2",
     "onchange": "^3.2.1",
-    "remix-debug": "0.3.1",
     "remix-analyzer": "0.3.1",
+    "remix-debug": "0.3.1",
     "remix-lib": "0.4.1",
+    "remix-plugin": "0.0.1-alpha.2",
     "remix-solidity": "0.3.1",
     "remix-tests": "0.1.1",
     "remixd": "0.1.8-alpha.6",

src/app.js

@@ -22,9 +22,7 @@ var SharedFolder = require('./app/files/shared-folder')
 var Config = require('./config')
 var Renderer = require('./app/ui/renderer')
 var executionContext = require('./execution-context')
-var FilePanel = require('./app/panels/file-panel')
 var EditorPanel = require('./app/panels/editor-panel')
-var RighthandPanel = require('./app/panels/righthand-panel')
 var examples = require('./app/editor/example-contracts')
 var modalDialogCustom = require('./app/ui/modal-dialog-custom')
 var TxLogger = require('./app/execution/txLogger')
@@ -36,27 +34,16 @@ var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
 
-const CompilerAbstract = require('./app/compiler/compiler-abstract')
+const PluginManagerComponent = require('./app/components/plugin-manager-component')
-// const PluginManager = require('./app/plugin/pluginManager')
+const PluginManagerApi = require('./app/components/plugin-manager-api')
-
-// var IconPanel = require('./app/panels/left-icon-panel')
 
 const VerticalIconsComponent = require('./app/components/vertical-icons-component')
 const VerticalIconsApi = require('./app/components/vertical-icons-api')
-// var VerticalIconsProfile = require('./app/panels/vertical-icons-profile')
-
-const SwapPanelComponent = require('./app/component/swap-panel-component')
-const SwapPanelComponent = require('./app/component/swap-panel-api')
 
-const CompileTab = require('./app/tabs/compile-tab')
+const SwapPanelComponent = require('./app/components/swap-panel-component')
-const SettingsTab = require('./app/tabs/settings-tab')
+const SwapPanelApi = require('./app/components/swap-panel-api')
-const AnalysisTab = require('./app/tabs/analysis-tab')
-const DebuggerTab = require('./app/tabs/debugger-tab')
-const SupportTab = require('./app/tabs/support-tab')
-const TestTab = require('./app/tabs/test-tab')
-const RunTab = require('./app/tabs/run-tab')
 
-const appManager = require('remix-plugin').appManager
+const AppManager = require('remix-plugin').AppManager
 
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -81,16 +68,18 @@ var css = csjs`
     height             : 100vh;
     overflow           : hidden;
   }
-  .centerpanel         {
+  .mainpanel         {
     background-color  : ${styles.colors.transparent};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
     top                : 0;
     bottom             : 0;
+    left               : 450px;
     overflow           : hidden;
+    width              : 800px;
   }
-  .leftpanel           {
+  .iconpanel           {
     background-color  : ${styles.leftPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
@@ -99,16 +88,17 @@ var css = csjs`
     bottom             : 0;
     left               : 0;
     overflow           : hidden;
+    width              : 50px;
   }
-  .rightpanel          {
+  .swappanel          {
-    background-color  : ${styles.rightPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
     top                : 0;
-    right              : 0;
+    left               : 50px;
     bottom             : 0;
     overflow           : hidden;
+    width              : 400px;
   }
   .highlightcode {
     position:absolute;
@@ -176,18 +166,18 @@ class App {
     self.data = {
       _layout: {
         right: {
-          offset: self._components.config.get('right-offset') || 400,
+          offset: 400,
           show: true
         }, // @TODO: adapt sizes proportionally to browser window size
         left: {
-          offset: self._components.config.get('left-offset') || 200,
+          offset: 200,
           show: true
         }
       }
     }
   }
   _adjustLayout (direction, delta) {
-    var self = this
+    /*var self = this
     var layout = self.data._layout[direction]
     if (layout) {
       if (delta === undefined) {
@@ -203,10 +193,11 @@ class App {
       self._view.swappanel.style.width = delta + 'px'
       self._view.mainpanel.style.left = delta + 'px'
     }
-    // if (direction === 'right') {
+     if (direction === 'right') {
-    //   self._view.mainpanel.style.width = delta + 'px'
+       self._view.mainpanel.style.width = delta + 'px'
-    //   self._view.swappanel.style.right = delta + 'px'
+       self._view.swappanel.style.right = delta + 'px'
-    // }
+    }
+    */
   }
   init () {
     var self = this
@@ -218,7 +209,7 @@ class App {
     if (self._view.el) return self._view.el
     // not resizable
     self._view.iconpanel = yo`
-      <div id="icon-panel" class=${css.iconpanel} style="width: 50px;">
+      <div id="icon-panel" class=${css.iconpanel}>
       ${''}
       </div>
     `
@@ -232,7 +223,7 @@ class App {
 
     // handle the editor + terminal
     self._view.mainpanel = yo`
-      <div id="editor-container" class=${css.centerpanel}>
+      <div id="editor-container" class=${css.mainpanel}>
         ${''}
       </div>
     `
@@ -245,7 +236,7 @@ class App {
       </div>
     `
     // INIT
-    self._adjustLayout('left', self.data._layout.left.offset)
+    // self._adjustLayout('left', self.data._layout.left.offset)
     // self._adjustLayout('right', self.data._layout.right.offset)
     return self._view.el
   }
@@ -356,7 +347,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       resolveReceipt: function (tx, cb) {
         transactionReceiptResolver.resolve(tx, cb)
       }
-    }
+    },
     event: {
       udapp: udapp.event
     }})
@@ -384,103 +375,43 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   var fileManager = self._components.fileManager
   registry.put({api: fileManager, name: 'filemanager'})
 
-  // ----------------- app manager ----------------------------
+  // ----------------- Renderer -----------------
-  const VerticalIconsProfile = {
+  var renderer = new Renderer()
-    type: 'verticalIcons',
+  registry.put({api: renderer, name: 'renderer'})
-    methods: ['addIcon', 'removeIcon'],
-  }
-  
-  const SwapPanelProfile = {
-    type: 'swapPanel',
-    methods: ['addView', 'showContent'],
-  }
   
+  // ----------------- app manager ----------------------------
   const PluginManagerProfile = {
     type: 'pluginManager',
-    methods: [],
+    methods: []
-  }
-
-  const FileManagerProfile = {
-    type: 'fileManager',
-    methods: [],
-  }
-
-  const SettingsProfile = {
-    type: 'settings',
-    methods: [],
   }
 
-  const appManager = new appManager()
+  const appManager = new AppManager({modules: [],plugins : []})
 
   const swapPanelComponent = new SwapPanelComponent()
-  const pluginManagerComponent = new PluginManagerComponent(appManager)
+  const pluginManagerComponent = new PluginManagerComponent()
-  const verticalIconComponent = new VerticalIconsComponent(appManager)
+  registry.put({api: pluginManagerComponent.proxy(), name: 'pluginmanager'})
-
-  const swapPanelApi = new SwapPanelApi(swapPanelComponent)
-  const verticalIconApi = new VerticalsIconApi(verticalIconComponent)
-  const pluginManagerAPI = new pluginManagerAPI(pluginManagerComponent)
-
-  // All Plugins and Modules are registered in the contructor
-  // You cannot add module after
-  appManager.init({
-    // Module should be activated by default
-    modules: [
-      { json: VerticalIconsProfile, api: verticalIconApi },
-      { json: SwapPanelProfile, api: swapPanelApi },
-      { json: PluginManagerProfile, api: pluginManagerApi },
-      { json: FileManagerProfile, api: self._components.filePanel },
-    ],
-    // Plugins need to be activated
-    plugins: [],
-    options: {
-      bootstrap: 'pluginManager'
-    }
-  })
-
-  self._components.filePanel = new FilePanel()
-  registry.put({api: self._components.filePanel, name: 'filepanel'})
-  swapPanelApi.addView('File', self._components.filePanel.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00NiwxNXYtNCAgYzAtMS4xMDQtMC44OTYtMi0yLTJjMCwwLTI0LjY0OCwwLTI2LDBjLTEuNDY5LDAtMi40ODQtNC00LTRIM0MxLjg5Niw1LDEsNS44OTYsMSw3djR2Mjl2NGMwLDEuMTA0LDAuODk2LDIsMiwyaDM5ICBjMS4xMDQsMCwyLTAuODk2LDItMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEsNDRsNS0yNyAgYzAtMS4xMDQsMC44OTYtMiwyLTJoMzljMS4xMDQsMCwyLDAuODk2LDIsMmwtNSwyNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
-
-  const compileTab = new CompileTab(self._components.registry)
-  swapPanelApi.addView('Compile', compileTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxjaXJjbGUgY3g9IjI1IiBjeT0iMjUiIGZpbGw9Im5vbmUiIHI9IjI0IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48ZWxsaXBzZSBjeD0iMjUiIGN5PSIyNSIgZmlsbD0ibm9uZSIgcng9IjEyIiByeT0iMjQiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik02LjM2NSw0MC40MzhDMTAuNzY2LDM3LjcyOSwxNy40NzksMzYsMjUsMzYgIGM3LjQxOCwwLDE0LjA0OSwxLjY4MiwxOC40NTEsNC4zMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNNDMuNjM1LDkuNTYzQzM5LjIzNCwxMi4yNzEsMzIuNTIxLDE0LDI1LDE0ICBjLTcuNDE3LDAtMTQuMDQ5LTEuNjgyLTE4LjQ1MS00LjMyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHgxPSIxIiB4Mj0iNDkiIHkxPSIyNSIgeTI9IjI1Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgeDE9IjI1IiB4Mj0iMjUiIHkxPSIxIiB5Mj0iNDkiLz48L3N2Zz4=')
-
-  const testTab = new TestTab(self._components.registry, compileTab)
-  swapPanelApi.addView('Test', testTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjaXJjbGUgY3g9IjI1IiBjeT0iMjUiIGZpbGw9Im5vbmUiIHI9IjI0IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48cmVjdCBmaWxsPSJub25lIiBoZWlnaHQ9IjUwIiB3aWR0aD0iNTAiLz48Zz48cGF0aCBkPSJNMjMuNTMzLDMwLjQwN3YtMS40N2MwLTEuNDM2LDAuMzIyLTIuMTg4LDEuMDc1LTMuMjI5bDIuNDA0LTMuM2MxLjI1NC0xLjcyMSwxLjY4NC0yLjU0NiwxLjY4NC0zLjc2NiAgIGMwLTIuMDQ0LTEuNDM0LTMuMzM1LTMuNDc5LTMuMzM1Yy0yLjAwOCwwLTMuMjk5LDEuMjE5LTMuNzI5LDMuNDA3Yy0wLjAzNiwwLjIxNS0wLjE3OSwwLjMyMy0wLjM5NSwwLjI4N2wtMi4yNTktMC4zOTUgICBjLTAuMjE2LTAuMDM2LTAuMzIzLTAuMTc5LTAuMjg4LTAuMzk1YzAuNTM5LTMuNDQzLDMuMDE0LTUuNzAzLDYuNzQ0LTUuNzAzYzMuODcyLDAsNi40OSwyLjU0Niw2LjQ5LDYuMDk3ICAgYzAsMS43MjItMC42MDgsMi45NzctMS44MjgsNC42NjNsLTIuNDAzLDMuM2MtMC43MTcsMC45NjgtMC45MzMsMS40Ny0wLjkzMywyLjY4OXYxLjE0N2MwLDAuMjE1LTAuMTQzLDAuMzU4LTAuMzU4LDAuMzU4aC0yLjM2NyAgIEMyMy42NzYsMzAuNzY2LDIzLjUzMywzMC42MjIsMjMuNTMzLDMwLjQwN3ogTTIzLjM1NCwzMy44NTFjMC0wLjIxNSwwLjE0My0wLjM1OCwwLjM1OS0wLjM1OGgyLjcyNiAgIGMwLjIxNSwwLDAuMzU4LDAuMTQ0LDAuMzU4LDAuMzU4djMuMDg0YzAsMC4yMTYtMC4xNDQsMC4zNTgtMC4zNTgsMC4zNThoLTIuNzI2Yy0wLjIxNywwLTAuMzU5LTAuMTQzLTAuMzU5LTAuMzU4VjMzLjg1MXoiLz48L2c+PC9zdmc+')
 
-  const runTab = new RunTab(self._components.registry)
+  self._components.editorpanel.init()
-  swapPanelApi.addView('Run', runTab.render())
+  self._components.fileManager.init()  
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zMC45MzMsMzIuNTI4Yy0wLjE0Ni0xLjYxMi0wLjA5LTIuNzM3LTAuMDktNC4yMWMwLjczLTAuMzgzLDIuMDM4LTIuODI1LDIuMjU5LTQuODg4YzAuNTc0LTAuMDQ3LDEuNDc5LTAuNjA3LDEuNzQ0LTIuODE4ICBjMC4xNDMtMS4xODctMC40MjUtMS44NTUtMC43NzEtMi4wNjVjMC45MzQtMi44MDksMi44NzQtMTEuNDk5LTMuNTg4LTEyLjM5N2MtMC42NjUtMS4xNjgtMi4zNjgtMS43NTktNC41ODEtMS43NTkgIGMtOC44NTQsMC4xNjMtOS45MjIsNi42ODYtNy45ODEsMTQuMTU2Yy0wLjM0NSwwLjIxLTAuOTEzLDAuODc4LTAuNzcxLDIuMDY1YzAuMjY2LDIuMjExLDEuMTcsMi43NzEsMS43NDQsMi44MTggIGMwLjIyLDIuMDYyLDEuNTgsNC41MDUsMi4zMTIsNC44ODhjMCwxLjQ3MywwLjA1NSwyLjU5OC0wLjA5MSw0LjIxQzE5LjM2NywzNy4yMzgsNy41NDYsMzUuOTE2LDcsNDVoMzggIEM0NC40NTUsMzUuOTE2LDMyLjY4NSwzNy4yMzgsMzAuOTMzLDMyLjUyOHoiLz48L3N2Zz4=')
-
-  const analysisTab = new AnalysisTab(self._components.registry)
-  swapPanelApi.addView('Analysis', analysisTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iNDksMTQgMzYsMjEgMzYsMjkgICA0OSwzNiAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zNiwzNmMwLDIuMjA5LTEuNzkxLDQtNCw0ICBINWMtMi4yMDksMC00LTEuNzkxLTQtNFYxNGMwLTIuMjA5LDEuNzkxLTQsNC00aDI3YzIuMjA5LDAsNCwxLjc5MSw0LDRWMzZ6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
-
-  const debuggerTab = new DebuggerTab(self._components.registry)
-  swapPanelApi.addView('Debugger', debuggerTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwb2x5bGluZSBmaWxsPSJub25lIiBwb2ludHM9IjIwLDIzIDIsMjMgMiwxNCAgIDQ4LDE0IDQ4LDIzIDMwLDIzICIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIzNCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIiB3aWR0aD0iMTAiIHg9IjIwIiB5PSIxNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0yMCwyM0g0djI1aDQyVjIzSDMwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSIgIE0yNSwxM2MwLDAtMy41ODIsMC04LDBzLTktMi41ODEtOS03YzAtMS44MjgsMC44NzgtNCw0LjMxOS00QzE5LjIzNiwyLDE5LjM2MywxMywyNSwxM3oiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9IiAgTTI1LDEzYzAsMCwzLjU4MiwwLDgsMHM5LTIuNTgxLDktN2MwLTEuODI4LTAuODc4LTQtNC4zMTktNEMzMC43NjQsMiwzMC42MzcsMTMsMjUsMTN6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
-
-  const supportTab = new SupportTab(self._components.registry)
-  swapPanelApi.addView('Support', supportTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9Ik0yNSwxMC4wNjIgICBjMC0zLjU5LTIuOTEzLTYuNS02LjUtNi41Yy0zLjU5MywwLTYuNSwyLjkxLTYuNSw2LjVjMCwxLjAwNywwLjIzLDEuOTU1LDAuNjQyLDIuOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48cGF0aCBkPSIgIE00NS4zNzUsMjQuMDI5aC0xLjYyN2MtMC44NDgsMC0xLjI1LTAuMzc3LTEuMzEyLTAuNzYyYy0wLjQ0My0yLjc4OS0yLjI1NS02LjQxMy02LjgwOS04LjAwM2MtMC4wNDQtMi41MjMsMC41MTktNC4zNDMsMS42MTUtNy4zMDQgIGMtMi41NDcsMC42MzktNS4zNjEsMi4wMjYtNy4wMjcsNS43Yy0xLjg3Ny0wLjQ1OS0zLjg4My0wLjcwNy01Ljk3OC0wLjcwN2MtNS40ODUsMC05LjYyMiwxLjY2NC0xMi45MzQsNC4yNDIgIGMtMi45OTEsMi4zMjktNC44Nyw2LjIyOS00LjY0NywxMS41NDljMC4xNjgsNC4wMTMsMi45NjMsNy4wNzUsNS4xMDcsOC43OWMwLjMwOSwwLjI0NCwwLjkyNSwwLjYzNSwwLjYwMywxLjYzMiAgYy0wLjMyMywwLjk5NS0wLjkwMywyLjM4NC0wLjkwMywyLjM4NGMtMC4zMzgsMC44ODYsMC4xMTEsMS44ODEsMC45OTYsMi4yMThsMy4yMTgsMS4yMTZjMC44ODYsMC4zMzgsMS44ODEtMC4xMDksMi4yMTgtMC45OTYgIGMwLDAsMC40MjgtMS4xMTUsMC43NzYtMi4wNDVjMC42NjEtMS43NDgsMS4wNjUtMC4zMyw1LjU2Ni0wLjMzYzQuNjc3LDAsNS4xNDktMC45MTIsNS42MzgsMC41MiAgYzAuMzEzLDAuOTM1LDAuNzAzLDEuODU1LDAuNzAzLDEuODU1YzAuMzM0LDAuODg3LDEuMzMsMS4zMzQsMi4yMTksMC45OTZsMy4yMTQtMS4yMTZjMC44ODgtMC4zMzcsMS4zMzgtMS4zMzIsMC45OTktMi4yMTggIGwtMC41MTYtMS4zNjVjMCwwLTAuNTI1LTAuOSwwLjYtMS41MTFjMi4yNDItMS4yMiwzLjkzMi0zLjA3MSw1LjAyOC01LjM1N2MwLjIzMy0wLjQ5LDAuNTc3LTEuMTU2LDEuNjI2LTEuMTU2aDEuNjI3ICBjMC44OTYsMCwxLjYyNS0wLjcyOSwxLjYyNS0xLjYyNHYtNC44NzlDNDcsMjQuNzYxLDQ2LjI3MSwyNC4wMjksNDUuMzc1LDI0LjAyOXoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zNi40OCwyNi45MjJjLTEuMDU5LDAtMS45MTYtMC44NTctMS45MTYtMS45MTRjMC0xLjA1NSwwLjg1Ny0xLjkxMiwxLjkxNi0xLjkxMmMxLjA1NiwwLDEuOTEsMC44NTcsMS45MSwxLjkxMiAgQzM4LjM5MSwyNi4wNjQsMzcuNTM2LDI2LjkyMiwzNi40OCwyNi45MjJ6Ii8+PHBhdGggZD0iICBNNi44MjYsMjMuMDk2YzAsMC0zLjgyNi0wLjg3Ni0zLjgyNi00LjMyN2MwLTEuNDE1LDAuNzE0LTIuNzE3LDEuOTYzLTMuMjU2IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
   
-  const settings = new SettingsTab()(self._components.registry)
+  const verticalIconComponent = new VerticalIconsComponent()
-  swapPanelApi.addView('Settings', settingsTab.render())
-  verticalIconApi.addIcon('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00OSwyNy45NTR2LTZsLTcuMTQxLTEuMTY3ICBjLTAuNDIzLTEuNjkxLTEuMDg3LTMuMjgxLTEuOTYyLTQuNzM3bDQuMTYyLTUuOTMybC00LjI0My00LjI0MWwtNS44NTYsNC4yMWMtMS40Ni0wLjg4NC0zLjA2LTEuNTU4LTQuNzYzLTEuOTgybC0xLjI0NS03LjEwNmgtNiAgbC0xLjE1Niw3LjA4M2MtMS43MDQsMC40MTgtMy4zMTMsMS4wODMtNC43NzcsMS45NjNMMTAuMTgsNS44NzNsLTQuMjQzLDQuMjQxbDQuMTA3LDUuODc0Yy0wLjg4OCwxLjQ3LTEuNTYzLDMuMDc3LTEuOTkyLDQuNzkyICBMMSwyMS45NTR2Nmw3LjA0NCwxLjI0OWMwLjQyNSwxLjcxMSwxLjEwMSwzLjMxOCwxLjk5Miw0Ljc5bC00LjE2Myw1LjgyM2w0LjI0MSw0LjI0NWw1Ljg4MS00LjExOSAgYzEuNDY4LDAuODgyLDMuMDczLDEuNTUyLDQuNzc3LDEuOTczbDEuMTgsNy4wODdoNmwxLjI2MS03LjEwNWMxLjY5NS0wLjQzLDMuMjk3LTEuMTA1LDQuNzUxLTEuOTlsNS45MjIsNC4xNTVsNC4yNDItNC4yNDUgIGwtNC4yMjctNS44N2MwLjg3NS0xLjQ1NiwxLjUzOS0zLjA0OCwxLjk1OC00LjczOUw0OSwyNy45NTR6IE0yNSwzM2MtNC40MTgsMC04LTMuNTgyLTgtOHMzLjU4Mi04LDgtOHM4LDMuNTgyLDgsOFMyOS40MTgsMzMsMjUsMzMgIHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==')
 
-  self._components.iconpanel.appendChild(verticalIconComponent.render())
+  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
-  self._components.iconpanel.event.register('resize', delta => self._adjustLayout('left', delta))
+  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent)
+  const pluginManagerAPI = new PluginManagerApi(pluginManagerComponent)
 
-  self._components.swappanel.appendChild(swapPanelComponent.render())
+  self._view.mainpanel.appendChild(self._components.editorpanel.render())
-  self._components.swappanel.event.register('resize', delta => self._adjustLayout('center', delta))
+  self._view.iconpanel.appendChild(verticalIconComponent.render())
+  self._view.swappanel.appendChild(swapPanelComponent.render())
 
-  self._components.editorpanel.init()
+  pluginManagerComponent.initDefault()
-  self._components.fileManager.init()
+  verticalIconComponent.select('FilePanel')
+  // appManager.init(pluginManagerAPI)
 
-  self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  pluginManagerAPI.init({
-  self._view.centerpanel.appendChild(self._components.editorpanel.render())
+    modules: [],
+    plugins: []
+  })
 
   // The event listener needs to be registered as early as possible, because the
   // parent will send the message upon the "load" event.
@@ -503,10 +434,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     self.loadFiles(filesToLoad)
   }
 
-  // ----------------- Renderer -----------------
-  var renderer = new Renderer()
-  registry.put({api: renderer, name: 'renderer'})
-
   var txLogger = new TxLogger() // eslint-disable-line  
 
   var queryParams = new QueryParams()

src/app/components/plugin-manager-api.js

@@ -5,18 +5,29 @@ const remixLib = require('remix-lib')
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const styles = styleguide.chooser()
 
-const EventManager = remixLib.EventManager
-
 class PluginManagerApi {
-  constructor (swapPanelComponent, pluginManagerComponent, appManager) {
+  constructor (pluginManagerComponent) {
-    this.component = swapPanelComponent
+    pluginManagerComponent.event.on('activation', (item) => this.event.emit('activation', item)) // listen by appManager
-    this.appManager = appManager
+    pluginManagerComponent.event.on('deactivation', (item) => this.event.emit('deactivation', item)) // listen by appManager
-    appManager.event.register('pluginLoaded', (item) => {
+  }
-      pluginManagerComponent.addItem(item)
+
-    })
+  /*
-    pluginManagerComponent.event.on('activation', (item) => this.event.emit('activation', item))
+    function called by appManager
-    pluginManagerComponent.event.on('deactivation', (item) => this.event.emit('deactivation', item))
+  */
+  addItem (item) {
+    // add to appManager and then render
+    this.renderItem(item)
+  }
+
+  init (data) {
+    for (var m in  data.modules) {
+      this.renderItem(item)
+    }
+
+    for (var m in  data.plugins) {
+      this.renderItem(item)
+    }
   }
 }
 
-module.exports = SwapPanelApi
+module.exports = PluginManagerApi

src/app/components/plugin-manager-component.js

@@ -1,53 +1,120 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
+
+const FilePanel = require('../panels/file-panel')
+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 TestTab = require('../tabs/test-tab')
+const RunTab = require('../tabs/run-tab')
+
+var registry = require('../../global/registry')
 
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const styles = styleguide.chooser()
 
-const EventManager = remixLib.EventManager
+const PluginManagerProxy = require('./plugin-manager-proxy')
+
+const EventEmitter = require ('events')
 
 class PluginManagerComponent {
+
   constructor () {
+    this.event = new EventEmitter()
+    this.modulesDefinition = {
+      'FilePanel': { name: 'FilePanel', Type: FilePanel, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5bGluZSBmaWxsPSJub25lIiBwb2ludHM9IjQ0LDIxIDQ0LDQ5IDYsNDkgICA2LDIxICIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHBvaW50cz0iMTksNDkgMTksMjggMzEsMjggICAzMSw0OSAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwb2x5Z29uIHBvaW50cz0iMzUsNSAzNSw4LjAxNiAzNywxMC4wOTQgMzcsNyAzOSw3IDM5LDEyLjIwMyA0MSwxNC4yNjYgNDEsNSAiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgcG9pbnRzPSIgIDEuMTEsMjUuOTQyIDI1LDEuMDUzIDQ4Ljg5LDI1Ljk0MyAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==' },
+      'Solidity Compile': { name: 'Solidity Compile', class: 'evm-compiler', Type: CompileTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00NiwxNXYtNCAgYzAtMS4xMDQtMC44OTYtMi0yLTJjMCwwLTI0LjY0OCwwLTI2LDBjLTEuNDY5LDAtMi40ODQtNC00LTRIM0MxLjg5Niw1LDEsNS44OTYsMSw3djR2Mjl2NGMwLDEuMTA0LDAuODk2LDIsMiwyaDM5ICBjMS4xMDQsMCwyLTAuODk2LDItMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEsNDRsNS0yNyAgYzAtMS4xMDQsMC44OTYtMiwyLTJoMzljMS4xMDQsMCwyLDAuODk2LDIsMmwtNSwyNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+' },
+      'Test': { name: 'Test', dep: 'Solidity Compile', Type: TestTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00OSw0djI1YzAsMC01LjI3MywzLTEyLDMgIGMtMTEuOTI5LDAtMTUuODY5LTQtMjQtNFMxLDMwLDEsMzBWM2MwLDAsMi4wODUtMiwxMi0yczE0LjA0Nyw2LDI0LDZDNDMuMjgxLDcsNDguMTMsNC40NzEsNDksNHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgeDE9IjEiIHgyPSIxIiB5MT0iMyIgeTI9IjQ5Ii8+PC9zdmc+' },
+      'Run': { name: 'Run', Type: RunTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00My43MzQsMjFjLTMuNjMxLDAtMTUuMDkyLDAtMTUuMDkyLDAgIFMxNi4yNSw1LjE4OCwxNi4wNDcsNC45MzhzLTAuNDIyLTAuNTk0LTEuMTI1LTAuNjcyYy0wLjg1OS0wLjA5NS0xLjk2OS0wLjIwMy0yLjMyOC0wLjIzNGMtMC40MDYtMC4wMzUtMC43MTksMC4xNDEtMC40OTYsMC43MzQgIEMxMi4zODgsNS41MzksMTguNzQ4LDIxLDE4Ljc0OCwyMUg2LjAzNGMwLDAtMi40NTgtNC43MjItMi44NzgtNS41MzFDMi45NjUsMTUuMTAxLDIuNTU3LDE1LjAxNCwyLDE1SDEuMjk3ICBjLTAuMTI1LDAtMC4zMTIsMC0wLjI4MSwwLjM0NEMxLjA1OCwxNS44MTEsMywyNSwzLDI1cy0xLjg4OCw5LjE5Ny0xLjk4NCw5LjY1NkMwLjk1MywzNC45NTMsMS4xNzIsMzUsMS4yOTcsMzVIMiAgYzAuOTY2LTAuMDA5LDAuOTU0LTAuMDc5LDEuMTU2LTAuNDY5QzMuNTc2LDMzLjcyMiw2LjAzNCwyOSw2LjAzNCwyOWgxMi43MTRjMCwwLTYuMzYsMTUuNDYxLTYuNjUsMTYuMjM0ICBjLTAuMjIzLDAuNTk0LDAuMDksMC43NywwLjQ5NiwwLjczNGMwLjM1OS0wLjAzMSwxLjQ2OS0wLjEzOSwyLjMyOC0wLjIzNGMwLjcwMy0wLjA3OCwwLjkyMi0wLjQyMiwxLjEyNS0wLjY3MlMyOC42NDMsMjksMjguNjQzLDI5ICBzMTEuNDYxLDAsMTUuMDkyLDBjMy43NjYsMCw1LjI2NC0zLjAzMSw1LjI2NC00UzQ3LjQ4NCwyMSw0My43MzQsMjF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+' },
+      'Solidity Static Analysis': { name: 'Solidity Static Analysis', Type: AnalysisTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxjaXJjbGUgY3g9IjIiIGN5PSIyNSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTkiIHI9IjIiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjExIiByPSIyIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIxNyIgcj0iMiIvPjxjaXJjbGUgY3g9IjQ4IiBjeT0iNSIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIzOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE1IiBjeT0iNDEiIHI9IjIiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjMzIiByPSIyIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSI0MyIgcj0iMiIvPjxjaXJjbGUgY3g9IjQ4IiBjeT0iMzEiIHI9IjIiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgcG9pbnRzPSIyLDI1IDE1LDE5IDI1LDExICAgMzUsMTcgNDgsNSAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxwb2x5bGluZSBmaWxsPSJub25lIiBwb2ludHM9IjIsMzkgMTUsNDEgMjUsMzMgICAzNSw0MyA0OCwzMSAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==' },
+      'Debugger': { name: 'Debugger', Type: DebuggerTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00NiwxNXYtNCAgYzAtMS4xMDQtMC44OTYtMi0yLTJjMCwwLTI0LjY0OCwwLTI2LDBjLTEuNDY5LDAtMi40ODQtNC00LTRIM0MxLjg5Niw1LDEsNS44OTYsMSw3djR2Mjl2NGMwLDEuMTA0LDAuODk2LDIsMiwyaDM5ICBjMS4xMDQsMCwyLTAuODk2LDItMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTEsNDRsNS0yNyAgYzAtMS4xMDQsMC44OTYtMiwyLTJoMzljMS4xMDQsMCwyLDAuODk2LDIsMmwtNSwyNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+' },
+      'Support': { name: 'Support', Type: SupportTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zMC45MzMsMzIuNTI4Yy0wLjE0Ni0xLjYxMi0wLjA5LTIuNzM3LTAuMDktNC4yMWMwLjczLTAuMzgzLDIuMDM4LTIuODI1LDIuMjU5LTQuODg4YzAuNTc0LTAuMDQ3LDEuNDc5LTAuNjA3LDEuNzQ0LTIuODE4ICBjMC4xNDMtMS4xODctMC40MjUtMS44NTUtMC43NzEtMi4wNjVjMC45MzQtMi44MDksMi44NzQtMTEuNDk5LTMuNTg4LTEyLjM5N2MtMC42NjUtMS4xNjgtMi4zNjgtMS43NTktNC41ODEtMS43NTkgIGMtOC44NTQsMC4xNjMtOS45MjIsNi42ODYtNy45ODEsMTQuMTU2Yy0wLjM0NSwwLjIxLTAuOTEzLDAuODc4LTAuNzcxLDIuMDY1YzAuMjY2LDIuMjExLDEuMTcsMi43NzEsMS43NDQsMi44MTggIGMwLjIyLDIuMDYyLDEuNTgsNC41MDUsMi4zMTIsNC44ODhjMCwxLjQ3MywwLjA1NSwyLjU5OC0wLjA5MSw0LjIxQzE5LjM2NywzNy4yMzgsNy41NDYsMzUuOTE2LDcsNDVoMzggIEM0NC40NTUsMzUuOTE2LDMyLjY4NSwzNy4yMzgsMzAuOTMzLDMyLjUyOHoiLz48L3N2Zz4=' },
+      'Plugin Manager': { name: 'Plugin Manager', target: this, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9IiAgTTMyLDM1YzAsMCw4LjMxMiwwLDkuMDk4LDBDNDUuNDYzLDM1LDQ5LDMxLjQ2Myw0OSwyNy4wOTlzLTMuNTM3LTcuOTAyLTcuOTAyLTcuOTAyYy0wLjAyLDAtMC4wMzgsMC4wMDMtMC4wNTgsMC4wMDMgIGMwLjA2MS0wLjQ5NCwwLjEwMy0wLjk5NCwwLjEwMy0xLjUwNGMwLTYuNzEtNS40MzktMTIuMTUtMTIuMTUtMTIuMTVjLTUuMjI5LDAtOS42NzIsMy4zMDktMTEuMzg2LDcuOTQxICBjLTEuMDg3LTEuMDg5LTIuNTkxLTEuNzY0LTQuMjUxLTEuNzY0Yy0zLjMxOSwwLTYuMDA5LDIuNjktNi4wMDksNi4wMDhjMCwwLjA4NSwwLjAxLDAuMTY3LDAuMDEzLDAuMjUxICBDMy42OTUsMTguOTk1LDEsMjIuMzQ0LDEsMjYuMzMxQzEsMzEuMTE5LDQuODgxLDM1LDkuNjcsMzVjMC44MjcsMCw4LjMzLDAsOC4zMywwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgcG9pbnRzPSIzMCw0MSAyNSw0NiAyMCw0MSAgICIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIiB4MT0iMjUiIHgyPSIyNSIgeTE9IjI2IiB5Mj0iNDUuNjY4Ii8+PC9zdmc+' },
+      'Settings': { name: 'Settings', Type: SettingsTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00OSwyNy45NTR2LTZsLTcuMTQxLTEuMTY3ICBjLTAuNDIzLTEuNjkxLTEuMDg3LTMuMjgxLTEuOTYyLTQuNzM3bDQuMTYyLTUuOTMybC00LjI0My00LjI0MWwtNS44NTYsNC4yMWMtMS40Ni0wLjg4NC0zLjA2LTEuNTU4LTQuNzYzLTEuOTgybC0xLjI0NS03LjEwNmgtNiAgbC0xLjE1Niw3LjA4M2MtMS43MDQsMC40MTgtMy4zMTMsMS4wODMtNC43NzcsMS45NjNMMTAuMTgsNS44NzNsLTQuMjQzLDQuMjQxbDQuMTA3LDUuODc0Yy0wLjg4OCwxLjQ3LTEuNTYzLDMuMDc3LTEuOTkyLDQuNzkyICBMMSwyMS45NTR2Nmw3LjA0NCwxLjI0OWMwLjQyNSwxLjcxMSwxLjEwMSwzLjMxOCwxLjk5Miw0Ljc5bC00LjE2Myw1LjgyM2w0LjI0MSw0LjI0NWw1Ljg4MS00LjExOSAgYzEuNDY4LDAuODgyLDMuMDczLDEuNTUyLDQuNzc3LDEuOTczbDEuMTgsNy4wODdoNmwxLjI2MS03LjEwNWMxLjY5NS0wLjQzLDMuMjk3LTEuMTA1LDQuNzUxLTEuOTlsNS45MjIsNC4xNTVsNC4yNDItNC4yNDUgIGwtNC4yMjctNS44N2MwLjg3NS0xLjQ1NiwxLjUzOS0zLjA0OCwxLjk1OC00LjczOUw0OSwyNy45NTR6IE0yNSwzM2MtNC40MTgsMC04LTMuNTgyLTgtOHMzLjU4Mi04LDgtOHM4LDMuNTgyLDgsOFMyOS40MTgsMzMsMjUsMzMgIHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==' }
+    }
+    this.activated = {} // list all activated modules
+    this.plugins = []
+    this.data = {}
+    this.data.proxy = new PluginManagerProxy()
+  }
+
+  proxy () {
+    return this.data.proxy
+  }
+
+  initDefault () {
+    this.activateInternal('FilePanel')
+    this.activateInternal('Solidity Compile')
+    this.activateInternal('Run')
+    this.activateInternal('Plugin Manager')
+    this.activateInternal('Settings')
+    this.activateInternal('Support')
   }
 
   render () {
     var self = this
     // loop over all this.modules and this.plugins
-    var view = yo`
+    return yo`
       <div id='pluginManager' class=${css.plugins} >
+      list all modules / plugins that can be activated
       </div>
     `
   }
 
-  addItem (item) {
+  activatePlugin (name, api) {
-    // add to appManager and then render
+    let profile = { json: Plugin1Profile, api: pluginManagerApi }
-    renderItem(item)
+    let plugin = new Plugin(profile, api)
+    this.appManager.addPlugin(plugin)
+    // Plugin1Profile.location 
+    // mainpanel or swappanel or bottom-bar
+    // plugin.render() // plugin.create()
   }
 
-  _activate(item) {
+  activateInternal (name) {
+    const mod = this.modulesDefinition[name]
+    let dep
+    if (mod.dep) dep = this.activateInternal(mod.dep)
+    let instance = mod.target
+    if (!instance && mod.Type) instance = new mod.Type(registry, dep)
+    if (!instance) return console.log('PluginManagerComponent: no Type or instance to add')
+    registry.put({api: instance, name: mod.name.toLocaleLowerCase()})
+    if (instance.profile && typeof instance.profile === 'function') {
+      this.event.emit('requestActivation', instance.profile(), instance)
+    }
+    this.event.emit('internalActivated', mod, instance.render())
+    // if of type evm-compiler, we forward to the internal components
+    if (mod.class === 'evm-compiler') {
+      this.data.proxy.register(mod, instance)
+    }
+    this.activated[mod.name] = mod
+    return instance
+  }
+
+  _activate (item) {
     this.event.emit('activation', item)
   }
 
-  _deactivate(item) {
+  _deactivate (item) {
     this.event.emit('deactivation', item)
   }
 
   renderItem (item) {
+    this.plugins.push(item)
     var self = this
-
     var view = yo`
       <div id='pluginManager' class=${css.plugin} >
         ${item.name}
         ${item.url}
-        <button onclick=${() => { self._activate(item) }} ><button>
+        <button onclick=${() => { self._activate(item) }} ></button>
-        <button onclick=${() => { self._deactivate(item) }} ><button>
+        <button onclick=${() => { self._deactivate(item) }} ></button>
       </div>
     `
   }
 }
 
-module.exports = SwapPanelComponent
+module.exports = PluginManagerComponent
 
 const css = csjs`
   .plugins        {

src/app/components/plugin-manager-proxy.js

@@ -0,0 +1,24 @@
+var yo = require('yo-yo')
+
+var registry = require('../../global/registry')
+
+const CompilerAbstract = require('../compiler/compiler-abstract')
+
+const EventManager = require('remix-lib').EventManager
+
+class PluginManagerProxy {
+
+  constructor () {
+    this.event = new EventManager
+  }
+
+  register (mod, instance) {
+    instance.event.on('compilationFinished', (file, source, languageVersion, data) => {
+      registry.get('compilersartefacts').api['__last'] = new CompilerAbstract(languageVersion, data, source)
+      this.event.trigger('sendCompilationResult', [file, source, languageVersion, data])
+    })
+  }
+
+}
+
+module.exports = PluginManagerProxy

src/app/components/swap-panel-api.js

@@ -5,25 +5,30 @@ const remixLib = require('remix-lib')
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const styles = styleguide.chooser()
 
-const EventManager = remixLib.EventManager
+const EventEmmitter = require('events')
 
 class SwapPanelApi {
-  constructor (swapPanelComponent, pluginManagerApi) {
+  constructor (swapPanelComponent, verticalIconsComponent, pluginManagerComponent) {
     this.component = swapPanelComponent
+    verticalIconsComponent.event.on('showContent', (moduleName) => {
+      this.component.showContent(moduleName)
+    })
+    pluginManagerComponent.event.on('internalActivated', (mod, content) => {
+      this.add(mod.name, content)
+    })
   }
 
   /*
-    viewTitle: string
     content: DOM element
+    by appManager
   */
-  addView(viewTitle, content) {
+  add (moduleName, content) {
     // add the DOM to the swappanel
-    this.component.addView(viewTitle, contents)
+    return this.component.add(moduleName, content)
   }
 
-  activate() {
+  reference (modulename, domElement) {
-    this.event.emit(activated)
+    this.nodes[modulename] = domElement
-    this.pluginManagerApi.activated(this.type)
   }
 }
 

src/app/components/swap-panel-component.js

@@ -5,39 +5,40 @@ const remixLib = require('remix-lib')
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const styles = styleguide.chooser()
 
-const EventManager = remixLib.EventManager
-
 class SwapPanelComponent {
   constructor () {
+    // list of contents
+    this.contents = {}
+    // name of the current displayed content
+    this.currentNode
   }
 
   showContent (moduleName) {
     // hiding the current view and display the `moduleName`
+    if (this.contents[moduleName]) {
+      this.contents[moduleName].style.display = 'block'
+      if (this.currentNode) {
+        this.contents[this.currentNode].style.display = 'none'
+      }
+      this.currentNode = moduleName
+      return
     }
+    console.log(`${moduleName} not found`)
+  }
+
   
-  addView (title, content) {
+  add (moduleName, content) {
-    // add the DOM to the swappanel
+    this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>`
+    this.view.appendChild(this.contents[moduleName])
+    this.showContent(moduleName)
   }  
 
   render () {
-    var self = this
+    this.view =  yo`
-
-    var view = yo`
       <div id='plugins' class=${css.plugins} >
-        <div class=${css.plugItIn} >
-            <h1> Plugin 1 </h1>
-            <ul> <li> Some Text </li> </ul>
-        </div>
-        <div class=${css.plugItIn} >
-            <h1> Plugin 2 </h1>
-            <ul> <li> Some Text </li> </ul>
-        </div>
-        <div class=${css.plugItIn} >
-            <h1> Plugin 3 </h1>
-            <ul> <li> Some Text </li> </ul>
-        </div>
       </div>
     `
+    return this.view
   }
 }
 
@@ -45,7 +46,6 @@ module.exports = SwapPanelComponent
 
 const css = csjs`
   .plugins        {
-    width          : 300px;
   }
   .plugItIn       {
     display        : none;

src/app/components/vertical-icons-api.js

@@ -8,17 +8,9 @@ const styles = styleguide.chooser()
 // API
 class VerticalIconsApi {
 
-  constructor(verticalIconsComponent, pluginManagerApi) {
+  constructor(verticalIconsComponent, pluginManagerComponent) {
-    pluginManagerApi.event.on('activate', (module) => verticalIconsComponent.addIcon(module) )
     this.component = verticalIconsComponent
-  }
+    pluginManagerComponent.event.on('internalActivated', (mod, content) => verticalIconsComponent.addIcon(mod) )
-
-  addIcon(icon) {
-    this.component.event.trigger('addIcon', icon)
-  }
-
-  removeIcon(icon) {
-    this.component.event.trigger('removeIcon', icon)
   }  
 }
 module.exports = VerticalIconsApi

src/app/components/vertical-icons-component.js

@@ -5,34 +5,39 @@ const remixLib = require('remix-lib')
 
 const styleguide = require('../ui/styles-guide/theme-chooser')
 const styles = styleguide.chooser()
+const EventEmmitter = require('events')
   
   // Component
   class VerticalIconComponent {
   
-    constructor(appManager) {
+    constructor() {
-      this.appManager = appManager
+      this.event = new EventEmmitter
-      appManager.event.register('activated', (item) => {
-        this.addIcon(item)
-      })
-      appManager.event.register('deactivated', (item) => {
-        this.removeIcon(item)
-      })
     }
   
-    addIcon (item) {
+    addIcon (mod) {
-
+      let self = this
+      this.view.appendChild(yo`<div onclick=${(e) => { self._iconClick(mod.name)}} title=${mod.name}><img src="${mod.icon}" alt="${mod.name}" /></div>`)
     }
 
     removeIcon (item) {
 
     }
 
+    select (name) {
+      this.event.emit('showContent', name)
+    }
+
+    _iconClick (name) {
+      // called when an icon has been clicked
+      this.event.emit('showContent', name)
+    }
+
     render() {
-        yo`
+        this.view = yo`
-          <div id='plugins' class=${css.plugins} >
+          <div id='icons'>
-            <h3>example</h3>
           </div>
         `
+        return this.view
     }
   }
 

src/app/panels/editor-panel.js

@@ -244,12 +244,10 @@ class EditorPanel {
     function toggleLHP (event) {
       this.children[0].classList.toggle('fa-angle-double-right')
       this.children[0].classList.toggle('fa-angle-double-left')
-      self.event.trigger('resize', ['left'])
     }
     function toggleRHP (event) {
       this.children[0].classList.toggle('fa-angle-double-right')
       this.children[0].classList.toggle('fa-angle-double-left')
-      self.event.trigger('resize', ['right'])
     }
     function increase () { self._components.editor.editorFontSize(1) }
     function decrease () { self._components.editor.editorFontSize(-1) }

src/app/panels/file-panel.js

@@ -263,7 +263,6 @@ function filepanel (localRegistry) {
     document.removeEventListener('mousemove', moveGhostbar)
     document.removeEventListener('mouseup', removeGhostbar)
     document.removeEventListener('keydown', cancelGhostbar)
-    self.event.trigger('resize', [getPosition(event)])
   }
 
   function createNewFile () {

src/app/panels/left-icon-panel.js

@@ -132,7 +132,6 @@ module.exports = class LeftIconPanel {
       document.removeEventListener('mousemove', moveGhostbar)
       document.removeEventListener('mouseup', removeGhostbar)
       document.removeEventListener('keydown', cancelGhostbar)
-      self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)])
     }
   }
 }

src/app/panels/righthand-panel.js

@@ -1,163 +0,0 @@
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-const EventManager = require('../../lib/events')
-
-var globalRegistry = require('../../global/registry')
-
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const TabbedMenu = require('../tabs/tabbed-menu')
-const PluginTab = require('../tabs/plugin-tab')
-const DraggableContent = require('../ui/draggableContent')
-
-const styles = styleguide.chooser()
-
-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;
-  }
-`
-
-class RighthandPanel {
-  constructor ({pluginManager, tabs}, localRegistry) {
-    const self = this
-    self._components = {}
-    self._components.registry = localRegistry || globalRegistry
-    self._components.registry.put({api: this, name: 'righthandpanel'})
-    self.event = new EventManager()
-    self._view = {
-      element: null,
-      tabbedMenu: null,
-      tabbedMenuViewport: null,
-      dragbar: null
-    }
-
-    var tabbedMenu = new TabbedMenu(self._components.registry)
-
-    self._components = {
-      tabbedMenu: tabbedMenu,
-      tabs
-    }
-
-    self._components.tabs.settings.event.register('plugin-loadRequest', json => {
-      self.loadPlugin(json)
-    })
-
-    self.loadPlugin = function (json) {
-      var modal = new DraggableContent(() => {
-        pluginManager.unregister(json)
-      })
-      var tab = new PluginTab(json)
-      var content = tab.render()
-      document.querySelector('body').appendChild(modal.render(json.title, json.url, content))
-      pluginManager.register(json, modal, content)
-    }
-
-    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>`
-
-    const { compile, run, settings, analysis, debug, support, test } = tabs
-    self._components.tabbedMenu.addTab('Compile', 'compileView', compile.render())
-    self._components.tabbedMenu.addTab('Run', 'runView', run.render())
-    self._components.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysis.render())
-    self._components.tabbedMenu.addTab('Testing', 'testView', test.render())
-    self._components.tabbedMenu.addTab('Debugger', 'debugView', debug.render())
-    self._components.tabbedMenu.addTab('Settings', 'settingsView', settings.render())
-    self._components.tabbedMenu.addTab('Support', 'supportView', support.render())
-    self._components.tabbedMenu.selectTabByTitle('Compile')
-  }
-
-  render () {
-    const self = this
-    if (self._view.element) return self._view.element
-    return self._view.element
-  }
-
-  debugger () {
-    return this._components.tabs.debug.debugger()
-  }
-
-  focusOn (x) {
-    if (this._components.tabbedMenu) this._components.tabbedMenu.selectTabByClassName(x)
-  }
-
-  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)
-    const ghostbar = yo`<div class=${css.ghostbar}></div>`
-    function mousedown (event) {
-      event.preventDefault()
-      if (event.which === 1) {
-        moveGhostbar(event)
-        document.body.appendChild(ghostbar)
-        document.addEventListener('mousemove', moveGhostbar)
-        document.addEventListener('mouseup', removeGhostbar)
-        document.addEventListener('keydown', cancelGhostbar)
-      }
-    }
-    function cancelGhostbar (event) {
-      if (event.keyCode === 27) {
-        document.body.removeChild(ghostbar)
-        document.removeEventListener('mousemove', moveGhostbar)
-        document.removeEventListener('mouseup', removeGhostbar)
-        document.removeEventListener('keydown', cancelGhostbar)
-      }
-    }
-    function getPosition (event) {
-      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
-    }
-    function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
-      ghostbar.style.left = getPosition(event) + 'px'
-    }
-    function removeGhostbar (event) {
-      document.body.removeChild(ghostbar)
-      document.removeEventListener('mousemove', moveGhostbar)
-      document.removeEventListener('mouseup', removeGhostbar)
-      document.removeEventListener('keydown', cancelGhostbar)
-      self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)])
-    }
-  }
-}
-
-module.exports = RighthandPanel

src/app/tabs/compile-tab.js

@@ -1,4 +1,5 @@
 /* global Worker */
+const EventEmitter = require('events')
 const async = require('async')
 const $ = require('jquery')
 const yo = require('yo-yo')
@@ -25,6 +26,7 @@ const styles = styleGuide.chooser()
 module.exports = class CompileTab {
   constructor (localRegistry) {
     const self = this
+    self.event = new EventEmitter()
     self._view = {
       el: null,
       autoCompile: null,
@@ -115,9 +117,11 @@ module.exports = class CompileTab {
       self._view.compileIcon.setAttribute('title', '')
     })
     self._components.compiler.event.register('compilationFinished', function finish (success, data, source) {
+      if (success) {
+        // forwarding the event to the appManager infra
+        self.event.emit('compilationFinished', null, source, 'Solidity', data)
+      }
       if (self._view.compileIcon) {
-        const compileTab = document.querySelector('.compileView')
-        compileTab.style.color = styles.colors.black
         self._view.compileIcon.style.color = styles.colors.black
         self._view.compileIcon.classList.remove(`${css.spinningIcon}`)
         self._view.compileIcon.classList.remove(`${css.bouncingIcon}`)
@@ -129,7 +133,6 @@ module.exports = class CompileTab {
       self._view.contractNames.innerHTML = ''
       if (success) {
         // TODO consider using compile tab as a proper module instead of just forwarding event
-        self._deps.pluginManager.receivedDataFrom('sendCompilationResult', 'solidity-compiler', [data.target, source, self.data.selectedVersion, data])
         self._view.contractNames.removeAttribute('disabled')
         self._components.compiler.visitContracts(contract => {
           self.data.contractsDetails[contract.name] = parseContracts(contract.name, contract.object, self._components.compiler.getSource(contract.file))
@@ -139,22 +142,16 @@ module.exports = class CompileTab {
       } else {
         self._view.contractNames.setAttribute('disabled', true)
       }
-      // hightlight the tab if error
-      if (success) document.querySelector('.compileView').style.color = '' // @TODO: compileView tab
-      else document.querySelector('.compileView').style.color = styles.colors.red // @TODO: compileView tab
-      // display warning error if any
       var error = false
       if (data['error']) {
         error = true
         self._deps.renderer.error(data['error'].formattedMessage, self._view.errorContainer, {type: data['error'].severity || 'error'})
         if (data['error'].mode === 'panic') {
-          /*
           return modalDialogCustom.alert(yo`<div><i class="fa fa-exclamation-circle ${css.panicError}" aria-hidden="true"></i>
                                             The compiler returned with the following internal error: <br> <b>${data['error'].formattedMessage}.<br>
                                             The compiler might be in a non-sane state, please be careful and do not use further compilation data to deploy to mainnet.
                                             It is heavily recommended to use another browser not affected by this issue (Firefox is known to not be affected).</b><br>
                                             Please join <a href="https://gitter.im/ethereum/remix" target="blank" >remix gitter channel</a> for more information.</div>`)
-          */
         }
       }
       if (data.errors && data.errors.length) {
@@ -185,6 +182,13 @@ module.exports = class CompileTab {
       }
     })
   }
+  profile () {
+    return {
+      type: 'solidityCompile',
+      methods: {},
+      events: ['compilationFinished']
+    }
+  }
   addWarning (msg, settings) {
     const self = this
     self._deps.renderer.error(msg, self._view.errorContainerHead, settings)

src/app/tabs/settings-tab.js

@@ -205,7 +205,6 @@ module.exports = class SettingsTab {
 const css = csjs`
   .settingsTabView {
     padding: 2%;
-    display: flex;
   }
   .info {
     ${styles.rightPanel.settingsTab.box_SolidityVersionInfo};

src/app/ui/renderer.js

@@ -16,7 +16,6 @@ function Renderer (localRegistry) {
   self._components.registry = localRegistry || globlalRegistry
   // dependencies
   self._deps = {
-    editor: self._components.registry.get('editor').api,
     fileManager: self._components.registry.get('filemanager').api,
     config: self._components.registry.get('config').api
   }
@@ -27,13 +26,15 @@ function Renderer (localRegistry) {
 
 Renderer.prototype._error = function (file, error) {
   const self = this
+  const editor = self._components.registry.get('editor').api
   if (file === self._deps.config.get('currentFile')) {
-    self._deps.editor.addAnnotation(error)
+    editor.addAnnotation(error)
   }
 }
 
 Renderer.prototype._errorClick = function (errFile, errLine, errCol) {
   const self = this
+  const editor = self._components.registry.get('editor').api
   if (errFile !== self._deps.config.get('currentFile')) {
     // TODO: refactor with this._components.contextView.jumpTo
     var provider = self._deps.fileManager.fileProviderOf(errFile)
@@ -41,11 +42,11 @@ Renderer.prototype._errorClick = function (errFile, errLine, errCol) {
       provider.exists(errFile, (error, exist) => {
         if (error) return console.log(error)
         self._deps.fileManager.switchFile(errFile)
-        self._deps.editor.gotoLine(errLine, errCol)
+        editor.gotoLine(errLine, errCol)
       })
     }
   } else {
-    self._deps.editor.gotoLine(errLine, errCol)
+    editor.gotoLine(errLine, errCol)
   }
 }