update with commented out code, errors for discussion and a question

src/app.js

@@ -39,12 +39,12 @@ const PluginManagerComponent = require('./app/components/plugin-manager-componen
 const PluginManagerApi = require('./app/components/plugin-manager-api')
 
 const VerticalIconsComponent = require('./app/components/vertical-icons-component')
-const VerticalIconsApi = require('./app/components/vertical-icons-api')
+// const VerticalIconsApi = require('./app/components/vertical-icons-api')
 
 const SwapPanelComponent = require('./app/components/swap-panel-component')
-const SwapPanelApi = require('./app/components/swap-panel-api')
+// const SwapPanelApi = require('./app/components/swap-panel-api')
 
-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()
@@ -178,7 +178,7 @@ class App {
     }
   }
   _adjustLayout (direction, delta) {
-    /*var self = this
+    /* var self = this
     var layout = self.data._layout[direction]
     if (layout) {
       if (delta === undefined) {
@@ -211,7 +211,7 @@ class App {
       methods: ['getExecutionContextProvider', 'getProviderEndpoint', 'detectNetWork', 'addProvider', 'removeProvider']
     }
   }
-  
+
   render () {
     var self = this
     if (self._view.el) return self._view.el
@@ -235,7 +235,7 @@ class App {
         ${''}
       </div>
     `
-    
+
     self._view.el = yo`
       <div class=${css.browsersolidity}>
         ${self._view.iconpanel}
@@ -310,12 +310,12 @@ class App {
     })
   }
 
-   addProvider (name, url, cb) {
+  addProvider (name, url, cb) {
     executionContext.addProvider({ name, url })
     cb()
   }
 
-   removeProvider (name, cb) {
+  removeProvider (name, cb) {
     executionContext.removeProvider(name)
     cb()
   }
@@ -400,7 +400,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   */
   const txListenerModuleProxy = {
     event: new EventEmitter(),
-    profile() {
+    profile () {
       return {
         type: 'txListener',
         events: ['newTransaction']
@@ -427,21 +427,21 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // ----------------- Renderer -----------------
   var renderer = new Renderer()
   registry.put({api: renderer, name: 'renderer'})
-  
+
   // ----------------- app manager ----------------------------
 
   /*
     TODOs:
       - for each activated plugin,
         an internal module (associated only with the plugin) should be created for accessing specific part of the UI. detail to be discussed
-      - the current API is not optimal. For instance methods of `app` only refers to `executionContext`, wich does not make really sense. 
+      - the current API is not optimal. For instance methods of `app` only refers to `executionContext`, wich does not make really sense.
   */
 
-  const appManager = new AppManager({modules: [],plugins : []})
+  // const appManager = new AppManager({modules: [], plugins: []})
 
   const swapPanelComponent = new SwapPanelComponent()
   const pluginManagerComponent = new PluginManagerComponent(
-    { 
+    {
       app: this,
       udapp: udapp,
       fileManager: fileManager,
@@ -452,12 +452,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   registry.put({api: pluginManagerComponent.proxy(), name: 'pluginmanager'})
 
   self._components.editorpanel.init()
-  self._components.fileManager.init()  
-  
+  self._components.fileManager.init()
+
   const verticalIconComponent = new VerticalIconsComponent()
 
-  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
-  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent)
+  // const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
+  // const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent)
   const pluginManagerAPI = new PluginManagerApi(pluginManagerComponent)
 
   self._view.mainpanel.appendChild(self._components.editorpanel.render())

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

@@ -1,31 +1,19 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
-
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const remixLib = require('remix-lib')
 
 class PluginManagerApi {
   constructor (pluginManagerComponent) {
+    this.component = pluginManagerComponent
     pluginManagerComponent.event.on('activation', (item) => this.event.emit('activation', item)) // listen by appManager
     pluginManagerComponent.event.on('deactivation', (item) => this.event.emit('deactivation', item)) // listen by appManager
   }
 
-  /*
-    function called by appManager
-  */
-  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.modules) {
+      this.renderItem(m)
     }
 
-    for (var m in  data.plugins) {
-      this.renderItem(item)
+    for (var n in data.plugins) {
+      this.renderItem(n)
     }
   }
 }

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

@@ -12,12 +12,12 @@ const RunTab = require('../tabs/run-tab')
 
 var registry = require('../../global/registry')
 
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const styleguide = require('../ui/styles-guide/theme-chooser')
+// const styles = styleguide.chooser()
 
 const PluginManagerProxy = require('./plugin-manager-proxy')
 
-const EventEmitter = require ('events')
+const EventEmitter = require('events')
 
 class PluginManagerComponent {
 
@@ -44,9 +44,13 @@ class PluginManagerComponent {
       'Settings': { name: 'Settings', Type: SettingsTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00OSwyNy45NTR2LTZsLTcuMTQxLTEuMTY3ICBjLTAuNDIzLTEuNjkxLTEuMDg3LTMuMjgxLTEuOTYyLTQuNzM3bDQuMTYyLTUuOTMybC00LjI0My00LjI0MWwtNS44NTYsNC4yMWMtMS40Ni0wLjg4NC0zLjA2LTEuNTU4LTQuNzYzLTEuOTgybC0xLjI0NS03LjEwNmgtNiAgbC0xLjE1Niw3LjA4M2MtMS43MDQsMC40MTgtMy4zMTMsMS4wODMtNC43NzcsMS45NjNMMTAuMTgsNS44NzNsLTQuMjQzLDQuMjQxbDQuMTA3LDUuODc0Yy0wLjg4OCwxLjQ3LTEuNTYzLDMuMDc3LTEuOTkyLDQuNzkyICBMMSwyMS45NTR2Nmw3LjA0NCwxLjI0OWMwLjQyNSwxLjcxMSwxLjEwMSwzLjMxOCwxLjk5Miw0Ljc5bC00LjE2Myw1LjgyM2w0LjI0MSw0LjI0NWw1Ljg4MS00LjExOSAgYzEuNDY4LDAuODgyLDMuMDczLDEuNTUyLDQuNzc3LDEuOTczbDEuMTgsNy4wODdoNmwxLjI2MS03LjEwNWMxLjY5NS0wLjQzLDMuMjk3LTEuMTA1LDQuNzUxLTEuOTlsNS45MjIsNC4xNTVsNC4yNDItNC4yNDUgIGwtNC4yMjctNS44N2MwLjg3NS0xLjQ1NiwxLjUzOS0zLjA0OCwxLjk1OC00LjczOUw0OSwyNy45NTR6IE0yNSwzM2MtNC40MTgsMC04LTMuNTgyLTgtOHMzLjU4Mi04LDgtOHM4LDMuNTgyLDgsOFMyOS40MTgsMzMsMjUsMzMgIHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==' }
     }
     this.activated = {} // list all activated modules
+    // this.activated = [] // list all activated modules
     this.plugins = []
     this.data = {}
     this.data.proxy = new PluginManagerProxy()
+
+    // This load the state from localstorage first then from the second parameter is nothing is found in localstorage
+    // this.store = Store.fromLocal('***', {}) // Or EntityStore.fromLocal('***', {}, 'id')
   }
 
   proxy () {
@@ -70,21 +74,52 @@ class PluginManagerComponent {
   }
 
   render () {
-    var self = this
+    // var self = this
     // loop over all this.modules and this.plugins
-    return yo`
+    let pluginManagerDiv = yo`
       <div id='pluginManager' class=${css.plugins} >
-      list all modules / plugins that can be activated
+      <h2>Plugin Manager</h2>
+      </div>
+    `
+    for (var mod in this.modulesDefinition) {
+      if (this.modulesDefinition[mod].icon) pluginManagerDiv.appendChild(this.renderItem(mod))
+    }
+    console.log(this.activated)
+    return pluginManagerDiv
+  }
+
+  renderItem (item) {
+    let ctrBtns
+    if (this.activated.hasOwnProperty(item)) {
+      ctrBtns = yo`
+        <button onclick=${() => { this.deactivateInternal(this.modulesDefinition[item].name) }} >deactivate</button>
+      `
+    } else {
+      ctrBtns = yo`
+        <button onclick=${() => { this.activateInternal() }} >activate</button>
+      `
+    }
+    this.plugins.push(item)
+    // var self = this
+    return yo`
+      <div id='pluginManager' class=${css.plugin} >
+        ${this.modulesDefinition[item].name}
+        ${ctrBtns}
       </div>
     `
   }
 
   activatePlugin (jsonProfile, api) {
-    let profile = { json: jsonProfile, api }
-    let plugin = new Plugin(profile, api)
-    this.appManager.addPlugin(plugin)
-    this.event.emit('displayableModuleActivated', jsonProfile, plugin.render())
-    this.activated[jsonProfile.name] = plugin
+    // let profile = { json: jsonProfile, api }
+    // let plugin = new Plugin(profile, api)
+    // this.appManager.addPlugin(plugin)
+    // this.event.emit('displayableModuleActivated', jsonProfile, plugin.render())
+    // this.activated[jsonProfile.name] = plugin
+  }
+
+  deactivateInternal (name) {
+    delete this.activated[name]
+    this.event.emit('removingItem', name)
   }
 
   activateInternal (name) {
@@ -116,32 +151,23 @@ class PluginManagerComponent {
   _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._deactivate(item) }} ></button>
-      </div>
-    `
-  }
 }
 
 module.exports = PluginManagerComponent
 
 const css = csjs`
-  .plugins        {
+  .plugins {
     width          : 300px;
   }
-  .plugItIn       {
-    display        : none;
+  .plugin {
+    border-bottom: 1px black solid;
+    padding: 10px 20px;
+    margin-bottom: 20px;
+  }
+  .plugItIn.active {
+    display: block;
   }
-  .plugItIn.active     {
-    display        :block;
+  .plugin button {
+    cursor: pointer;
   }
-  .clearFunds { background-color: lightblue; }
 `

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

@@ -1,5 +1,3 @@
-var yo = require('yo-yo')
-
 var registry = require('../../global/registry')
 
 const CompilerAbstract = require('../compiler/compiler-abstract')
@@ -9,7 +7,7 @@ const EventManager = require('remix-lib').EventManager
 class PluginManagerProxy {
 
   constructor () {
-    this.event = new EventManager
+    this.event = new EventManager()
   }
 
   register (mod, instance) {

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

@@ -1,11 +1,4 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
-
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
-
-const EventEmmitter = require('events')
+// const EventEmmitter = require('events')
 
 class SwapPanelApi {
   constructor (swapPanelComponent, verticalIconsComponent, pluginManagerComponent) {

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

@@ -1,9 +1,9 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
+// const remixLib = require('remix-lib')
 
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const styleguide = require('../ui/styles-guide/theme-chooser')
+// const styles = styleguide.chooser()
 
 class SwapPanelComponent {
   constructor () {
@@ -26,15 +26,14 @@ class SwapPanelComponent {
     console.log(`${moduleName} not found`)
   }
 
-  
   add (moduleName, content) {
     this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>`
     this.view.appendChild(this.contents[moduleName])
     this.showContent(moduleName)
-  }  
+  }
 
   render () {
-    this.view =  yo`
+    this.view = yo`
       <div id='plugins' class=${css.plugins} >
       </div>
     `

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

@@ -1,16 +1,9 @@
-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
-
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
-
 // API
 class VerticalIconsApi {
 
-  constructor(verticalIconsComponent, pluginManagerComponent) {
+  constructor (verticalIconsComponent, pluginManagerComponent) {
     this.component = verticalIconsComponent
-    pluginManagerComponent.event.on('requestContainer', (mod, content) => verticalIconsComponent.addIcon(mod) )
-  }  
+    pluginManagerComponent.event.on('requestContainer', (mod, content) => verticalIconsComponent.addIcon(mod))
+  }
 }
 module.exports = VerticalIconsApi

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

@@ -1,44 +1,58 @@
 
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
+// const remixLib = require('remix-lib')
 
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const styleguide = require('../ui/styles-guide/theme-chooser')
+// const styles = styleguide.chooser()
 const EventEmmitter = require('events')
-  
-  // Component
-  class VerticalIconComponent {
-  
-    constructor() {
-      this.event = new EventEmmitter
-    }
-  
-    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() {
-        this.view = yo`
-          <div id='icons'>
-          </div>
-        `
-        return this.view
-    }
-  }
-
-  module.exports = VerticalIconComponent
+
+// Component
+class VerticalIconComponent {
+
+  constructor () {
+    this.event = new EventEmmitter()
+  }
+
+  addIcon (mod) {
+    let self = this
+    this.view.appendChild(yo`<div class="${css.icon}" 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 () {
+    this.view = yo`
+      <div class=${css.icons}>
+      </div>
+    `
+    return this.view
+  }
+}
+
+module.exports = VerticalIconComponent
+
+const css = csjs`
+  .icons {
+    margin-left: 10px;
+    margin-top: 15px;
+  }
+  .icon      {
+    cursor: pointer;
+    margin-bottom: 25px;
+  }
+  .icon img {
+    width: 25px;
+  }
+`

src/app/editor/SourceHighlighters.js

@@ -3,33 +3,33 @@ var SourceHighlighter = require('./sourceHighlighter')
 
 module.exports = class SourceHighlighters {
 
-    constructor () {
-      this.highlighters = {}
-    }
+  constructor () {
+    this.highlighters = {}
+  }
 
-     profile () {
-      return {
-        type: 'sourcehighlighter',
-        methods: ['highlight', 'discardHighlight']
-      }
+  profile () {
+    return {
+      type: 'sourcehighlighter',
+      methods: ['highlight', 'discardHighlight']
     }
+  }
 
-     // TODO what to do with mod?
-    highlight (mod, lineColumnPos, filePath, hexColor, cb) {
-      var position
-      try {
-        position = JSON.parse(lineColumnPos)
-      } catch (e) {
-        return cb(e.message)
-      }
-      if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter()
-      highlighters[mod].currentSourceLocation(null)
-      highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor)
-      cb()
+    // TODO what to do with mod?
+  highlight (mod, lineColumnPos, filePath, hexColor, cb) {
+    var position
+    try {
+      position = JSON.parse(lineColumnPos)
+    } catch (e) {
+      return cb(e.message)
     }
+    if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter()
+    highlighters[mod].currentSourceLocation(null)
+    highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor)
+    cb()
+  }
 
-     discardHighlight (mod, cb) {
-      if (highlighters[mod]) highlighters[mod].currentSourceLocation(null)
-      cb()
-    }
-}
+  discardHighlight (mod, cb) {
+    if (highlighters[mod]) highlighters[mod].currentSourceLocation(null)
+    cb()
+  }
+}

src/app/files/fileManager.js

@@ -2,7 +2,7 @@
 
 var $ = require('jquery')
 var yo = require('yo-yo')
-var EventEmitter = require ('events')
+var EventEmitter = require('events')
 var EventManager = require('../../lib/events')
 var globalRegistry = require('../../global/registry')
 var CompilerImport = require('../compiler/compiler-imports')
@@ -116,7 +116,7 @@ class FileManager {
       cb(null, path)
     }
   }
-  
+
   getFile (path, cb) {
     var provider = this.fileProviderOf(path)
     if (provider) {

src/app/panels/editor-panel.js

@@ -40,7 +40,7 @@ class EditorPanel {
       }
     }
     self._view = {}
-    
+
     var contextualListener = new ContextualListener({editor: self._components.editor, pluginManager: self._deps.pluginManager})
     var contextView = new ContextView({contextualListener, editor: self._components.editor})
 

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

@@ -69,7 +69,6 @@ module.exports = class LeftIconPanel {
       {type: 'settings', displayName: 'setting', icon: 'fa fa-cog fa-2x'}
     ]
   }
-  
 
   swapPlugin (name) {
     console.log(name)

src/universal-dapp.js

@@ -321,7 +321,6 @@ UniversalDApp.prototype.runTestTx = function (tx, cb) {
   })
 }
 
-
 /**
  * This function send a tx without alerting the user (if mainnet or if gas estimation too high).
  * SHOULD BE TAKEN CAREFULLY!