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/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) {
-    this.component = swapPanelComponent
-    this.appManager = appManager
-    appManager.event.register('pluginLoaded', (item) => {
-      pluginManagerComponent.addItem(item)
-    })
-    pluginManagerComponent.event.on('activation', (item) => this.event.emit('activation', item))
-    pluginManagerComponent.event.on('deactivation', (item) => this.event.emit('deactivation', item))
+  constructor (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.plugins) {
+      this.renderItem(item)
+    }
   }
 }
 
-module.exports = SwapPanelApi
+module.exports = PluginManagerApi

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

+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() {
-    this.event.emit(activated)
-    this.pluginManagerApi.activated(this.type)
+  reference (modulename, domElement) {
+    this.nodes[modulename] = domElement
   }
 }
 

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 the DOM to the swappanel
+  add (moduleName, content) {
+    this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>`
+    this.view.appendChild(this.contents[moduleName])
+    this.showContent(moduleName)
   }  
 
   render () {
-    var self = this
-
-    var view = yo`
+    this.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) {
-    pluginManagerApi.event.on('activate', (module) => verticalIconsComponent.addIcon(module) )
+  constructor(verticalIconsComponent, pluginManagerComponent) {
     this.component = verticalIconsComponent
-  }
-
-  addIcon(icon) {
-    this.component.event.trigger('addIcon', icon)
-  }
-
-  removeIcon(icon) {
-    this.component.event.trigger('removeIcon', icon)
+    pluginManagerComponent.event.on('internalActivated', (mod, content) => verticalIconsComponent.addIcon(mod) )
   }  
 }
 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) {
-      this.appManager = appManager
-      appManager.event.register('activated', (item) => {
-        this.addIcon(item)
-      })
-      appManager.event.register('deactivated', (item) => {
-        this.removeIcon(item)
-      })
+    constructor() {
+      this.event = new EventEmmitter
     }
   
-    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`
-          <div id='plugins' class=${css.plugins} >
-            <h3>example</h3>
+        this.view = yo`
+          <div id='icons'>
           </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

-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()
-
-module.exports = 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)])
-    }
-  }
-}
-
-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;
-  }
-`

src/app/tabs/compile-tab.js

 /* 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)
   }
 }