Merge pull request #1692 from ethereum/swapit_mainView

Display plugin as a Tab

src/app.js

@@ -388,13 +388,18 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   // TODO: There are still a lot of dep between editorpanel and filemanager
 
+  let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
+  const appManager = new RemixAppManager(appStore)
+
+  const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false })
+
   // ----------------- file manager ----------------------------
   self._components.fileManager = new FileManager()
   var fileManager = self._components.fileManager
   registry.put({api: fileManager, name: 'filemanager'})
 
   // ----------------- editor panel ----------------------
-  self._components.editorpanel = new EditorPanel()
+  self._components.editorpanel = new EditorPanel(appStore, appManager, mainPanelComponent)
   registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
 
   // ----------------- Renderer -----------------
@@ -412,12 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   // TODOs those are instanciated before hand. should be instanciated on demand
 
-  let appStore = new EntityStore('module')
   const pluginManagerComponent = new PluginManagerComponent()
-  const appManager = new RemixAppManager(appStore)
   const swapPanelComponent = new SwapPanelComponent('swapPanel', appStore, appManager, { default: true })
-  const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false })
-  const verticalIconsComponent = new VerticalIconsComponent(appStore)
+  const verticalIconsComponent = new VerticalIconsComponent('swapPanel', appStore)
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
   const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
   const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
@@ -430,7 +432,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   self._components.editorpanel.init()
   self._components.fileManager.init()
 
-  self._view.mainpanel.appendChild(mainPanelComponent.render())
+  self._view.mainpanel.appendChild(self._components.editorpanel.render())
   self._view.iconpanel.appendChild(verticalIconsComponent.render())
   self._view.swappanel.appendChild(swapPanelComponent.render())
 
@@ -464,7 +466,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     { profile: sourceHighlighters.profile(), api: sourceHighlighters },
     { profile: configProvider.profile(), api: configProvider },
     { profile: txListenerModuleProxy.profile(), api: txListenerModuleProxy },
-    { profile: self._components.editorpanel.profile(), api: self._components.editorpanel },
     { profile: filePanel.profile(), api: filePanel },
     // { profile: support.profile(), api: support },
     { profile: settings.profile(), api: settings },

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

@@ -63,7 +63,7 @@ class PluginManagerComponent {
       </div>
     `
 
-    searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event) })
+    searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event.target) })
 
     var modulesActiveNotReq = this.store.getActives().filter(({profile}) => !profile.required)
     this.sortObject(modulesActiveNotReq)
@@ -90,6 +90,13 @@ class PluginManagerComponent {
     return rootView
   }
 
+  searchBox () {
+    if (this.views.root) {
+      return this.views.root.querySelector('#filter_plugins')
+    }
+    return null
+  }
+
   sortObject (obj) {
     obj.sort((a, b) => {
       var textA = a.profile.name.toUpperCase()
@@ -128,11 +135,13 @@ class PluginManagerComponent {
   reRender () {
     if (this.views.root) {
       yo.update(this.views.root, this.render())
+      this.filterPlugins(this.searchBox())
     }
   }
 
-  filterPlugins (event) {
-    let filterOn = event.target.value.toUpperCase()
+  filterPlugins (target) {
+    if (!target) return
+    let filterOn = target.value.toUpperCase()
     var nodes = this.views.root.querySelectorAll(`.${css.plugin}`)
     nodes.forEach((node) => {
       let h = node.querySelector('h3')

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

@@ -6,15 +6,19 @@ const EventEmmitter = require('events')
 // Component
 class VerticalIconComponent {
 
-  constructor (appStore) {
+  constructor (name, appStore) {
     this.store = appStore
     this.event = new EventEmmitter()
     this.icons = {}
     this.iconKind = {}
+    this.name = name
 
     this.store.event.on('activate', (name) => {
-      const item = this.store.getOne(name)
-      if (item && item.profile.icon && name !== 'code editor') this.addIcon(item.profile)
+      const { profile } = this.store.getOne(name)
+      if (!profile.icon) return
+      if (profile.prefferedLocation === this.name || !profile.prefferedLocation) {
+        this.addIcon(profile)
+      }
     })
     this.store.event.on('deactivate', (name) => {
       const item = this.store.getOne(name)

src/app/panels/editor-panel.js

@@ -13,24 +13,17 @@ var cssTabs = styles.cssTabs
 var css = styles.css
 
 class EditorPanel {
-  constructor (localRegistry) {
+  constructor (appStore, appManager, mainPanelComponent) {
     var self = this
     self.event = new EventManager()
     self._view = {}
     self._components = {}
-    self._components.registry = localRegistry || globalRegistry
+    self._components.registry = globalRegistry
     self._components.editor = new Editor({})
     self._components.registry.put({api: self._components.editor, name: 'editor'})
-  }
-  profile () {
-    return {
-      name: 'code editor',
-      methods: [],
-      events: [],
-      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjk2IDM4NHE0MCAwIDY4IDI4dDI4IDY4djEyMTZxMCA0MC0yOCA2OHQtNjggMjhoLTk2MHEtNDAgMC02OC0yOHQtMjgtNjh2LTI4OGgtNTQ0cS00MCAwLTY4LTI4dC0yOC02OHYtNjcycTAtNDAgMjAtODh0NDgtNzZsNDA4LTQwOHEyOC0yOCA3Ni00OHQ4OC0yMGg0MTZxNDAgMCA2OCAyOHQyOCA2OHYzMjhxNjgtNDAgMTI4LTQwaDQxNnptLTU0NCAyMTNsLTI5OSAyOTloMjk5di0yOTl6bS02NDAtMzg0bC0yOTkgMjk5aDI5OXYtMjk5em0xOTYgNjQ3bDMxNi0zMTZ2LTQxNmgtMzg0djQxNnEwIDQwLTI4IDY4dC02OCAyOGgtNDE2djY0MGg1MTJ2LTI1NnEwLTQwIDIwLTg4dDQ4LTc2em05NTYgODA0di0xMTUyaC0zODR2NDE2cTAgNDAtMjggNjh0LTY4IDI4aC00MTZ2NjQwaDg5NnoiLz48L3N2Zz4=',
-      description: ' - ',
-      prefferedLocation: 'mainPanel'
-    }
+    self.appStore = appStore
+    self.appManager = appManager
+    self.mainPanelComponent = mainPanelComponent
   }
   init () {
     var self = this
@@ -41,7 +34,35 @@ class EditorPanel {
       udapp: self._components.registry.get('udapp').api,
       pluginManager: self._components.registry.get('pluginmanager').api
     }
-    self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor)
+    self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor, self.appStore, self.appManager)
+    /*
+      We listen here on event from the tab component to display / hide the editor and mainpanel
+      depending on the content that should be displayed
+    */
+    self._deps.fileManager.event.register('currentFileChanged', (file) => {
+      // we check upstream for "fileChanged"
+      self._view.editor.style.display = 'block'
+      self._components.contextView.show()
+      self._view.mainPanel.style.display = 'none'
+    })
+    self.tabProxy.event.on('switchFile', (file) => {
+      self._view.editor.style.display = 'block'
+      self._components.contextView.show()
+      self._view.mainPanel.style.display = 'none'
+    })
+    self.tabProxy.event.on('closeFile', (file) => {
+    })
+    self.tabProxy.event.on('switchApp', (name) => {
+      self.mainPanelComponent.showContent(name)
+      self._view.editor.style.display = 'none'
+      self._components.contextView.hide()
+      self._view.mainPanel.style.display = 'block'
+    })
+    self.tabProxy.event.on('closeApp', (name) => {
+      self._view.editor.style.display = 'block'
+      self._components.contextView.hide()
+      self._view.mainPanel.style.display = 'none'
+    })
     self.data = {
       _FILE_SCROLL_DELTA: 200,
       _layout: {
@@ -108,6 +129,7 @@ class EditorPanel {
       var height = containerHeight - delta
       height = height < 0 ? 0 : height
       self._view.editor.style.height = `${delta}px`
+      self._view.mainPanel.style.height = `${delta}px`
       self._view.terminal.style.height = `${height}px` // - menu bar height
       self._components.editor.resize((document.querySelector('#editorWrap') || {}).checked)
       self._components.terminal.scroll2bottom()
@@ -138,6 +160,8 @@ class EditorPanel {
     var self = this
     if (self._view.el) return self._view.el
     self._view.editor = self._components.editor.render()
+    self._view.mainPanel = self.mainPanelComponent.render()
+    self._view.mainPanel.style.display = 'none'
     self._view.terminal = self._components.terminal.render()
     self._view.content = yo`
       <div class=${css.content}>
@@ -146,6 +170,7 @@ class EditorPanel {
           ${self._components.contextView.render()}
         </div>
         ${self._view.editor}
+        ${self._view.mainPanel}
         ${self._view.terminal}
       </div>
     `

src/app/panels/styles/editor-panel-styles.js

@@ -167,9 +167,12 @@ var css = csjs`
     width             : 100%;
   }
   .contextviewcontainer{
-    width             : 100%;
-    height            : 20px;
+    position          : absolute;
+    top               : 29px;
+    z-index           : 50;
     background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
+    left              : 350px;
+    border-radius     : 1px;
   }
 `
 

src/app/panels/tab-proxy.js

@@ -1,40 +1,43 @@
 var yo = require('yo-yo')
 var $ = require('jquery')
+const EventEmitter = require('events')
 
 var styles = require('./styles/editor-panel-styles')
 var css = styles.css
 
 export class TabProxy {
-  constructor (fileManager, editor) {
+  constructor (fileManager, editor, appStore, appManager) {
+    this.event = new EventEmitter()
     this.fileManager = fileManager
+    this.appManager = appManager
     this.editor = editor
     this.activeEntity
     this.entities = {}
     this.data = {}
     this._view = {}
+    this._handlers = {}
 
     fileManager.event.register('fileRemoved', (name) => {
-      const filesEl = document.querySelector('#files')
-      var file = filesEl.querySelector(`li[path="${name}"]`)
-      if (file) {
-        filesEl.removeChild(file)
-      }
+      this.removeTab(name)
     })
 
     fileManager.event.register('fileClosed', (name) => {
-      const filesEl = document.querySelector('#files')
-      var file = filesEl.querySelector(`li[path="${name}"]`)
-      if (file) {
-        filesEl.removeChild(file)
-      }
+      this.removeTab(name)
     })
 
     fileManager.event.register('currentFileChanged', (file) => {
       const filesEl = document.querySelector('#files')
       if (!filesEl.querySelector(`li[path="${file}"]`)) {
-        filesEl.appendChild(yo`<li class="file" path="${file}" ><span class="name">${file}</span><span class="remove"><i class="fa fa-close"></i></span></li>`)
+        this.addTab(file, () => {
+          this.fileManager.switchFile(file)
+          this.event.emit('switchFile', file)
+        },
+        () => {
+          this.fileManager.closeFile(file)
+          this.event.emit('closeFile', file)
+        })
       }
-      this.active(file)
+      this.active(file) // this put the css class "active"
     })
 
     fileManager.event.register('fileRenamed', (oldName, newName) => {
@@ -45,6 +48,37 @@ export class TabProxy {
         file.querySelector(`.name`).innerHTML = newName
       }
     })
+
+    appStore.event.on('activate', (name) => {
+      const { profile } = appStore.getOne(name)
+      if (profile.prefferedLocation === 'mainPanel') {
+        this.addTab(name, () => {
+          this.event.emit('switchApp', name)
+        }, () => {
+          this.event.emit('closeApp', name)
+          this.appManager.deactivateOne(name)
+        })
+      }
+    })
+
+    appStore.event.on('deactivate', (name) => {
+      this.removeTab(name)
+    })
+  }
+
+  addTab (name, switchTo, close, kind) {
+    const filesEl = document.querySelector('#files')
+    filesEl.appendChild(yo`<li class="file" path="${name}" ><span class="name">${name}</span><span class="remove"><i class="fa fa-close"></i></span></li>`)
+    this._handlers[name] = { switchTo, close }
+  }
+
+  removeTab (name) {
+    const filesEl = document.querySelector('#files')
+    var file = filesEl.querySelector(`li[path="${name}"]`)
+    if (file) {
+      filesEl.removeChild(file)
+      delete this._handlers[name]
+    }
   }
 
   active (name) {
@@ -97,7 +131,9 @@ export class TabProxy {
     var self = this
     $filesEl.on('click', '.file:not(.active)', function (ev) {
       ev.preventDefault()
-      self.fileManager.switchFile($(this).find('.name').text())
+      var name = $(this).find('.name').text()
+      self._handlers[name].switchTo()
+      self.active(name)
       return false
     })
 
@@ -105,7 +141,7 @@ export class TabProxy {
     $filesEl.on('click', '.file .remove', function (ev) {
       ev.preventDefault()
       var name = $(this).parent().find('.name').text()
-      self.fileManager.closeFile(name)
+      self._handlers[name].close()
       return false
     })
 

src/app/tabs/support-tab.js

@@ -12,7 +12,7 @@ class SupportTab {
   __showing () {
     if (this.gitterIsLoaded) return
 
-    const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
+    const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'></iframe>`
     this.gitterIframe.parentNode.replaceChild(iframe, this.gitterIframe)
     this.gitterIframe = iframe
     this.el.style.display = 'block'

src/app/ui/renderer.js

@@ -87,7 +87,7 @@ Renderer.prototype.error = function (message, container, opt) {
     })
   }
 
-  var $pre = $(opt.useSpan ? yo`<span />` : yo`<pre />`).html(message)
+  var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
 
   var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fa fa-close"></i></div></div>`).prepend($pre)
   $(container).append($error)