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) {
@@ -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']
@@ -437,7 +437,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       - 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(
@@ -456,8 +456,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   const verticalIconComponent = new VerticalIconsComponent()
 
-  const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
+  // const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent)
-  const verticalIconsApi = new VerticalIconsApi(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')
+// const remixLib = require('remix-lib')
-var csjs = require('csjs-inject')
-const remixLib = require('remix-lib')
-
-const styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
 
 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) {
+    for (var m in data.modules) {
-      this.renderItem(item)
+      this.renderItem(m)
     }
 
-    for (var m in  data.plugins) {
+    for (var n in data.plugins) {
-      this.renderItem(item)
+      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 styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.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 profile = { json: jsonProfile, api }
-    let plugin = new Plugin(profile, api)
+    // let plugin = new Plugin(profile, api)
-    this.appManager.addPlugin(plugin)
+    // this.appManager.addPlugin(plugin)
-    this.event.emit('displayableModuleActivated', jsonProfile, plugin.render())
+    // this.event.emit('displayableModuleActivated', jsonProfile, plugin.render())
-    this.activated[jsonProfile.name] = plugin
+    // 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       {
+  .plugin {
-    display        : none;
+    border-bottom: 1px black solid;
+    padding: 10px 20px;
+    margin-bottom: 20px;
+  }
+  .plugItIn.active {
+    display: block;
   }
-  .plugItIn.active     {
+  .plugin button {
-    display        :block;
+    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')
+// const EventEmmitter = require('events')
-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')
 
 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 styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const styles = styleguide.chooser()
 
 class SwapPanelComponent {
   constructor () {
@@ -26,7 +26,6 @@ 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])
@@ -34,7 +33,7 @@ class SwapPanelComponent {
   }
 
   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 styleguide = require('../ui/styles-guide/theme-chooser')
-const styles = styleguide.chooser()
+// const styles = styleguide.chooser()
 const EventEmmitter = require('events')
 
-  // Component
+// Component
-  class VerticalIconComponent {
+class VerticalIconComponent {
 
-    constructor() {
+  constructor () {
-      this.event = new EventEmmitter
+    this.event = new EventEmmitter()
-    }
+  }
 
-    addIcon (mod) {
+  addIcon (mod) {
-      let self = this
+    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>`)
+    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) {
+  removeIcon (item) {
 
-    }
+  }
 
-    select (name) {
+  select (name) {
-      this.event.emit('showContent', name)
+    this.event.emit('showContent', name)
-    }
+  }
 
-    _iconClick (name) {
+  _iconClick (name) {
-      // called when an icon has been clicked
+    // called when an icon has been clicked
-      this.event.emit('showContent', name)
+    this.event.emit('showContent', name)
-    }
+  }
 
-    render() {
+  render () {
-        this.view = yo`
+    this.view = yo`
-          <div id='icons'>
+      <div class=${css.icons}>
-          </div>
+      </div>
-        `
+    `
-        return this.view
+    return this.view
-    }
   }
+}
 
-  module.exports = VerticalIconComponent
+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 () {
+  constructor () {
-      this.highlighters = {}
+    this.highlighters = {}
-    }
+  }
 
-     profile () {
+  profile () {
-      return {
+    return {
-        type: 'sourcehighlighter',
+      type: 'sourcehighlighter',
-        methods: ['highlight', 'discardHighlight']
+      methods: ['highlight', 'discardHighlight']
-      }
     }
+  }
 
-     // TODO what to do with mod?
+    // TODO what to do with mod?
-    highlight (mod, lineColumnPos, filePath, hexColor, cb) {
+  highlight (mod, lineColumnPos, filePath, hexColor, cb) {
-      var position
+    var position
-      try {
+    try {
-        position = JSON.parse(lineColumnPos)
+      position = JSON.parse(lineColumnPos)
-      } catch (e) {
+    } catch (e) {
-        return cb(e.message)
+      return cb(e.message)
-      }
-      if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter()
-      highlighters[mod].currentSourceLocation(null)
-      highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor)
-      cb()
     }
+    if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter()
+    highlighters[mod].currentSourceLocation(null)
+    highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor)
+    cb()
+  }
 
-     discardHighlight (mod, cb) {
+  discardHighlight (mod, cb) {
-      if (highlighters[mod]) highlighters[mod].currentSourceLocation(null)
+    if (highlighters[mod]) highlighters[mod].currentSourceLocation(null)
-      cb()
+    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')

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

@@ -70,7 +70,6 @@ module.exports = class LeftIconPanel {
     ]
   }
 
-
   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!