with Yann

src/app.js

@@ -37,7 +37,17 @@ var toolTip = require('./app/ui/tooltip')
 var TransactionReceiptResolver = require('./transactionReceiptResolver')
 
 const CompilerAbstract = require('./app/compiler/compiler-abstract')
-const PluginManager = require('./app/plugin/pluginManager')
+// const PluginManager = require('./app/plugin/pluginManager')
+
+// 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 SettingsTab = require('./app/tabs/settings-tab')
 const AnalysisTab = require('./app/tabs/analysis-tab')
@@ -46,6 +56,8 @@ 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
+
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
 
@@ -188,46 +200,53 @@ class App {
       }
     }
     if (direction === 'left') {
-      self._view.leftpanel.style.width = delta + 'px'
-      self._view.centerpanel.style.left = delta + 'px'
-    }
-    if (direction === 'right') {
-      self._view.rightpanel.style.width = delta + 'px'
-      self._view.centerpanel.style.right = delta + 'px'
+      self._view.swappanel.style.width = delta + 'px'
+      self._view.mainpanel.style.left = delta + 'px'
     }
+    // if (direction === 'right') {
+    //   self._view.mainpanel.style.width = delta + 'px'
+    //   self._view.swappanel.style.right = delta + 'px'
+    // }
   }
   init () {
     var self = this
     run.apply(self)
   }
+  
   render () {
     var self = this
     if (self._view.el) return self._view.el
-    self._view.leftpanel = yo`
-      <div id="filepanel" class=${css.leftpanel}>
+    // not resizable
+    self._view.iconpanel = yo`
+      <div id="icon-panel" class=${css.iconpanel} style="width: 50px;">
       ${''}
       </div>
     `
-    self._view.centerpanel = yo`
-      <div id="editor-container" class=${css.centerpanel}>
+
+    // center panel, resizable
+    self._view.swappanel = yo`
+      <div id="swap-panel" class=${css.swappanel}>
         ${''}
       </div>
     `
-    self._view.rightpanel = yo`
-      <div class=${css.rightpanel}>
+
+    // handle the editor + terminal
+    self._view.mainpanel = yo`
+      <div id="editor-container" class=${css.centerpanel}>
         ${''}
       </div>
     `
+    
     self._view.el = yo`
       <div class=${css.browsersolidity}>
-        ${self._view.leftpanel}
-        ${self._view.centerpanel}
-        ${self._view.rightpanel}
+        ${self._view.iconpanel}
+        ${self._view.swappanel}
+        ${self._view.mainpanel}
       </div>
     `
     // INIT
     self._adjustLayout('left', self.data._layout.left.offset)
-    self._adjustLayout('right', self.data._layout.right.offset)
+    // self._adjustLayout('right', self.data._layout.right.offset)
     return self._view.el
   }
   startdebugging (txHash) {
@@ -362,23 +381,113 @@ 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'})
 
-  // ---------------- Plugin Manager -------------------------------
-
-  let pluginManager = new PluginManager(
-    self,
-    self._components.compilersArtefacts,
-    txlistener,
-    self._components.fileProviders,
-    self._components.fileManager,
-    udapp)
-  registry.put({api: pluginManager, name: 'pluginmanager'})
-
-  pluginManager.event.register('sendCompilationResult', (file, source, languageVersion, data) => {
-    // TODO check whether the tab is configured
-    let compiler = new CompilerAbstract(languageVersion, data, source)
-    self._components.compilersArtefacts['__last'] = compiler
+  // ----------------- app manager ----------------------------
+  const VerticalIconsProfile = {
+    type: 'verticalIcons',
+    methods: ['addIcon', 'removeIcon'],
+  }
+  
+  const SwapPanelProfile = {
+    type: 'swapPanel',
+    methods: ['addView', 'showContent'],
+  }
+
+  const PluginManagerProfile = {
+    type: 'pluginManager',
+    methods: [],
+  }
+
+  const FileManagerProfile = {
+    type: 'fileManager',
+    methods: [],
+  }
+
+  const SettingsProfile = {
+    type: 'settings',
+    methods: [],
+  }
+
+  const appManager = new appManager()
+
+  const swapPanelComponent = new SwapPanelComponent()
+  const pluginManagerComponent = new PluginManagerComponent(appManager)
+  const verticalIconComponent = new VerticalIconsComponent(appManager)
+
+  const swapPanelApi = new SwapPanelApi(swapPanelComponent)
+  const verticalIconApi = new VerticalsIconApi(verticalIconComponent)
+  const pluginManagerAPI = new pluginManagerAPI(pluginManagerComponent)
+
+  self._components.filePanel = new FilePanel()
+  registry.put({api: self._components.filePanel, name: 'filepanel'})
+
+  var settings = new SettingsTab()
+
+  // 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 },
+      { json: SettingsProfile, api: settings }
+    ],
+    // Plugins need to be activated
+    plugins: [],
+    options: {
+      bootstrap: 'pluginManager'
+    }
   })
 
+  const compileTab = new CompileTab(self._components.registry)
+  const compileTabProfile = {
+    type: 'solidityCompile',
+    methods: [],
+  }
+  appManager.addPlugin({json: compileTabProfile, api: compileTab})
+
+  const testTab = new TestTab(self._components.registry, compileTab)
+  const testTabProfile = {
+    type: 'solidityUnitTesting',
+    methods: [],
+  }
+  appManager.addPlugin({json: testTabProfile, api: testTab})
+
+  const runTab = new RunTab(self._components.registry)
+  const runTabProfile = {
+    type: 'runTransaction',
+    methods: [],
+  }
+  appManager.addPlugin({json: runTabProfile, api: runTab})
+
+  const analysisTab = new AnalysisTab(self._components.registry)
+  const analysisTabProfile = {
+    type: 'solidityStaticAnalisys',
+    methods: [],
+  }
+  appManager.addPlugin({json: analysisTabProfile, api: analysisTab})
+
+  const debuggerTab = new DebuggerTab(self._components.registry)
+  const debuggerTabProfile = {
+    type: 'debugger',
+    methods: [],
+  }
+  appManager.addPlugin({json: debuggerTabProfile, api: debuggerTab})
+
+  const supportTab = new SupportTab(self._components.registry)
+  const supportTabProfile = {
+    type: 'support',
+    methods: [],
+  }
+  appManager.addPlugin({json: supportTabProfile, api: supportTab})
+
+  self._components.iconpanel.appendChild(verticalIconComponent.render())
+  self._components.iconpanel.event.register('resize', delta => self._adjustLayout('left', delta))
+
+  self._components.swappanel.appendChild(swapPanelComponent.render())
+  self._components.swappanel.event.register('resize', delta => self._adjustLayout('center', delta))
+
   self._components.editorpanel.init()
   self._components.fileManager.init()
 
@@ -406,34 +515,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     self.loadFiles(filesToLoad)
   }
 
-  // ---------------- FilePanel --------------------
-  self._components.filePanel = new FilePanel()
-  self._view.leftpanel.appendChild(self._components.filePanel.render())
-  self._components.filePanel.event.register('resize', delta => self._adjustLayout('left', delta))
-  registry.put({api: self._components.filePanel, name: 'filepanel'})
-
   // ----------------- Renderer -----------------
   var renderer = new Renderer()
   registry.put({api: renderer, name: 'renderer'})
 
-  // ---------------- Tabs -------------------------------
-  let compileTab = new CompileTab(self._components.registry)
-  let tabs = {
-    compile: compileTab,
-    run: new RunTab(self._components.registry),
-    settings: new SettingsTab(self._components.registry),
-    analysis: new AnalysisTab(self._components.registry),
-    debug: new DebuggerTab(self._components.registry),
-    support: new SupportTab(self._components.registry),
-    test: new TestTab(self._components.registry, compileTab)
-  }
-
-  // ---------------- Righthand-panel --------------------
-  self._components.righthandpanel = new RighthandPanel({ tabs, pluginManager })
-  self._view.rightpanel.appendChild(self._components.righthandpanel.render())
-  self._components.righthandpanel.init()
-  self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
-
   var txLogger = new TxLogger() // eslint-disable-line  
 
   var queryParams = new QueryParams()

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

+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 EventManager = remixLib.EventManager
+
+class SwapPanelApi {
+  constructor (swapPanelComponent) {
+    this.component = swapPanelComponent
+  }
+
+  /*
+    viewTitle: string
+    content: DOM element
+  */
+  addView(viewTitle, content) {
+    // add the DOM to the swappanel
+    this.component.addView(viewTitle, contents)
+  }
+}
+
+
+module.exports = SwapPanelApi

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

+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 EventManager = remixLib.EventManager
+
+class PluginManagerComponent {
+  constructor (appManager) {
+    this.appManager = appManager
+    appManager.event.register('pluginLoaded', () => {
+      // call this.renderItem
+    })
+  }
+
+  render () {
+    var self = this
+    // loop over all this.modules and this.plugins
+    var view = yo`
+      <div id='pluginManager' class=${css.plugins} >
+      </div>
+    `
+  }
+
+  _activate(item) {
+    this.appManager.activate(item)
+  }
+
+  _deactivate(item) {
+    this.appManager.deactivate(item)
+  }
+
+  renderItem (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 = SwapPanelComponent
+
+const css = csjs`
+  .plugins        {
+    width          : 300px;
+  }
+  .plugItIn       {
+    display        : none;
+  }
+  .plugItIn.active     {
+    display        :block;
+  }
+  .clearFunds { background-color: lightblue; }
+`

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

+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 EventManager = remixLib.EventManager
+
+class SwapPanelApi {
+  constructor (swapPanelComponent) {
+    this.component = swapPanelComponent
+  }
+
+  /*
+    viewTitle: string
+    content: DOM element
+  */
+  addView(viewTitle, content) {
+    // add the DOM to the swappanel
+    this.component.addView(viewTitle, contents)
+  }
+}
+
+
+module.exports = SwapPanelApi

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

+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 EventManager = remixLib.EventManager
+
+class SwapPanelComponent {
+  constructor () {
+  }
+
+  showContent (moduleName) {
+    // hiding the current view and display the `moduleName`
+  }
+
+  addView (title, content) {
+    // add the DOM to the swappanel
+  }
+
+  render () {
+    var self = this
+
+    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>
+    `
+  }
+}
+
+module.exports = SwapPanelComponent
+
+const css = csjs`
+  .plugins        {
+    width          : 300px;
+  }
+  .plugItIn       {
+    display        : none;
+  }
+  .plugItIn.active     {
+    display        :block;
+  }
+  .clearFunds { background-color: lightblue; }
+`

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

+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) {
+    this.component = verticalIconsComponent
+  }
+
+  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

+
+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()
+  
+  // Component
+  class VerticalIconComponent {
+  
+    constructor(appManager) {
+      this.appManager = appManager
+      appManager.event.register('activated', (item) => {
+        this.addIcon(item)
+      })
+      appManager.event.register('deactivated', (item) => {
+        this.removeIcon(item)
+      })
+    }
+  
+    addIcon (item) {
+
+    }
+
+    removeIcon (item) {
+
+    }
+
+    render() {
+        yo`
+          <div id='plugins' class=${css.plugins} >
+            <h3>example</h3>
+          </div>
+        `
+    }
+  }
+
+  module.exports = VerticalIconComponent

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

+const yo = require('yo-yo')
+const csjs = require('csjs-inject')
+const remixLib = require('remix-lib')
+
+var globalRegistry = require('../../global/registry')
+
+const styleguide = require('../ui/styles-guide/theme-chooser')
+const styles = styleguide.chooser()
+// const PluginManager = require('../plugin/pluginManager')
+// const TabbedMenu = require('../tabs/tabbed-menu')
+// 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 PluginTab = require('../tabs/plugin-tab')
+// const TestTab = require('../tabs/test-tab')
+// const RunTab = require('../tabs/run-tab')
+// const DraggableContent = require('../ui/draggableContent')
+
+const EventManager = remixLib.EventManager
+
+// var async = require('async')
+
+// var tooltip = require('../ui/tooltip')
+
+// var styleGuide = require('../ui/styles-guide/theme-chooser')
+
+// var css = require('./styles/file-panel-styles')
+
+// var canUpload = window.File || window.FileReader || window.FileList || window.Blob
+// var ghostbar = yo`<div class=${css.ghostbar}></div>`
+
+/*
+  Overview of APIs:
+   * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor
+      - listen on browser & localhost file provider (`fileRenamed` & `fileRemoved`)
+      - update the tabs, switchFile
+      - trigger `currentFileChanged`
+      - set the current file in the config
+   * fileProvider: currently browser, swarm, localhost, github, gist
+      - link to backend
+      - provide properties `type`, `readonly`
+      - provide API `resolveDirectory`, `remove`, `exists`, `rename`, `get`, `set`
+      - trigger `fileExternallyChanged`, `fileRemoved`, `fileRenamed`, `fileRenamedError`, `fileAdded`
+   * file-explorer: treeview @args fileProvider
+      - listen on events triggered by fileProvider
+      - call fileProvider API
+*/
+
+module.exports = class LeftIconPanel {
+  constructor (localRegistry) {
+    const self = this
+    self._components = {}
+    self._components.registry = localRegistry || globalRegistry
+
+    self._components.registry.put({api: this, name: 'lefticonpanel'})
+    self.event = new EventManager()
+    self._view = {
+      element: null,
+      tabbedMenu: null,
+      tabbedMenuViewport: null,
+      dragbar: null
+    }
+
+    self.plugins = [
+      {type: 'fileManager', displayName: 'File Manger', icon: 'fa fa-files-o fa-2x'},
+      {type: 'pluginManager', displayName: 'Plugin Manger', icon: 'fa fa-puzzle-piece fa-2x'},
+      {type: 'settings', displayName: 'setting', icon: 'fa fa-cog fa-2x'}
+    ]
+  }
+  
+
+  swapPlugin (name) {
+    console.log(name)
+  }
+
+  render () {
+    const self = this
+    // if (self._view.element) return self._view.element
+    // return self._view.element
+    return yo`
+    <div class=${css.container}>
+      <ul>
+      ${self.plugins.map(function (pi) {
+        return yo`<li>
+          <i onclick=${() => { self.swapPlugin(pi.type) }} style="size: 24px;" class="${pi.icon} ${css.plugin}"></i>
+        </li>`
+      })
+      }
+      </ul>
+    </div>
+    `
+  }
+
+  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)])
+    }
+  }
+}
+
+const css = csjs`
+  .lefticonpanel      {
+    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;
+  }
+  i.plugin            {
+    cursor            : pointer;
+  }
+  .container ul {
+    margin-top        : 10px;
+  }
+  .container ul li {
+    text-align        : center;
+    margin-top        : 10px;
+  }
+`