Merge branch 'swap_it' of https://github.com/ethereum/remix-ide into swap_it

.circleci/config.yml

@@ -26,10 +26,10 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - dep-bundle-27-{{ checksum "package.json" }}
+            - dep-bundle-28-{{ checksum "package.json" }}
       - run: npm install
       - save_cache:
-          key: dep-bundle-27-{{ checksum "package.json" }}
+          key: dep-bundle-28-{{ checksum "package.json" }}
           paths:
             - ~/repo/node_modules
       - run: npm run lint && npm run test && npm run make-mock-compiler && npm run build

src/app.js

@@ -411,15 +411,15 @@ 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', { actives: [], ids: [], entities: {} })
   const pluginManagerComponent = new PluginManagerComponent()
-  const swapPanelComponent = new SwapPanelComponent()
-  const mainPanelComponent = new SwapPanelComponent()
-  const verticalIconsComponent = new VerticalIconsComponent()
+  const swapPanelComponent = new SwapPanelComponent(appStore)
+  const mainPanelComponent = new SwapPanelComponent(appStore)
+  const verticalIconsComponent = new VerticalIconsComponent(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
 
-  let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
   const appManager = new RemixAppManager(appStore, swapPanelApi, mainPanelApi, verticalIconsApi)
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
 

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

@@ -6,11 +6,19 @@ var csjs = require('csjs-inject')
 // const styles = styleguide.chooser()
 
 class SwapPanelComponent {
-  constructor () {
+  constructor (appStore) {
+    this.store = appStore
     // list of contents
     this.contents = {}
     // name of the current displayed content
     this.currentNode
+
+    this.store.event.on('activate', (name) => { })
+    this.store.event.on('deactivate', (name) => {
+      if (this.contents[name]) this.remove(name)
+    })
+    this.store.event.on('add', (name) => { })
+    this.store.event.on('remove', (name) => { })
   }
 
   showContent (moduleName) {

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

@@ -10,10 +10,22 @@ const EventEmmitter = require('events')
 // Component
 class VerticalIconComponent {
 
-  constructor () {
+  constructor (appStore) {
+    this.store = appStore
     this.event = new EventEmmitter()
     this.icons = {}
     this.iconKind = {}
+
+    this.store.event.on('activate', (name) => {
+      const item = this.store.get(name)
+      if (item && item.profile.icon && name !== 'code editor') this.addIcon(item.profile)
+    })
+    this.store.event.on('deactivate', (name) => {
+      const item = this.store.get(name)
+      if (item && this.icons[name]) this.removeIcon(item.profile)
+    })
+    this.store.event.on('add', (name) => { })
+    this.store.event.on('remove', (name) => { })
   }
 
   addIcon (mod) {
@@ -24,7 +36,7 @@ class VerticalIconComponent {
 
   removeIcon (mod) {
     let kind = mod.kind || 'other'
-    let el = this.icons[kind]
+    let el = this.iconKind[kind]
     if (el) el.parentElement.removeChild(el)
   }
 
@@ -53,7 +65,7 @@ class VerticalIconComponent {
     <div id='fileExplorerIcons'>
     </div>
     `
-    
+
     this.iconKind['compile'] = yo`
     <div id='compileIcons'>
     </div>
@@ -78,7 +90,7 @@ class VerticalIconComponent {
     <div id='debuggingIcons'>
     </div>
     `
-    
+
     this.iconKind['other'] = yo`
     <div id='otherIcons'>
     </div>
@@ -130,4 +142,8 @@ const css = csjs`
     padding-top: 1px;
     padding-left: 1px;
 }
+  .icon[title='settings'] {
+    position: absolute;
+    bottom: 0;
+  }
 `

src/app/editor/SourceHighlighters.js

 'use strict'
-var SourceHighlighter = require('./sourceHighlighter')
+const SourceHighlighter = require('./sourceHighlighter')
 
-module.exports = class SourceHighlighters {
+class SourceHighlighters {
 
   constructor () {
     this.highlighters = {}
@@ -17,7 +17,7 @@ module.exports = class SourceHighlighters {
 
     // TODO what to do with mod?
   highlight (mod, lineColumnPos, filePath, hexColor, cb) {
-    var position
+    let position
     try {
       position = JSON.parse(lineColumnPos)
     } catch (e) {
@@ -34,3 +34,5 @@ module.exports = class SourceHighlighters {
     cb()
   }
 }
+
+module.exports = SourceHighlighters

src/app/editor/contextView.js

 'use strict'
-var yo = require('yo-yo')
-var remixLib = require('remix-lib')
-var SourceMappingDecoder = remixLib.SourceMappingDecoder
-var globalRegistry = require('../../global/registry')
+const yo = require('yo-yo')
+const remixLib = require('remix-lib')
+const SourceMappingDecoder = remixLib.SourceMappingDecoder
+const globalRegistry = require('../../global/registry')
 
-var css = require('./styles/contextView-styles')
+const css = require('./styles/contextView-styles')
 
 /*
   Display information about the current focused code:
@@ -15,30 +15,29 @@ var css = require('./styles/contextView-styles')
 */
 class ContextView {
   constructor (opts, localRegistry) {
-    const self = this
-    self._components = {}
-    self._components.registry = localRegistry || globalRegistry
-    self.contextualListener = opts.contextualListener
-    self.editor = opts.editor
-    self._deps = {
-      compilersArtefacts: self._components.registry.get('compilersartefacts').api,
-      offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api,
-      config: self._components.registry.get('config').api,
-      fileManager: self._components.registry.get('filemanager').api
+    this._components = {}
+    this._components.registry = localRegistry || globalRegistry
+    this.contextualListener = opts.contextualListener
+    this.editor = opts.editor
+    this._deps = {
+      compilersArtefacts: this._components.registry.get('compilersartefacts').api,
+      offsetToLineColumnConverter: this._components.registry.get('offsettolinecolumnconverter').api,
+      config: this._components.registry.get('config').api,
+      fileManager: this._components.registry.get('filemanager').api
     }
     this._view
     this._nodes
     this._current
     this.sourceMappingDecoder = new SourceMappingDecoder()
     this.previousElement = null
-    self.contextualListener.event.register('contextChanged', nodes => {
+    this.contextualListener.event.register('contextChanged', nodes => {
       this._nodes = nodes
       this.update()
     })
   }
 
   render () {
-    var view = yo`<div class=${css.contextview}>
+    const view = yo`<div class=${css.contextview}>
       <div class=${css.container}>
         ${this._renderTarget()}
       </div>
@@ -70,13 +69,14 @@ class ContextView {
   }
 
   _renderTarget () {
-    var previous = this._current
+    let last
+    const previous = this._current
     if (this._nodes && this._nodes.length) {
-      var last = this._nodes[this._nodes.length - 1]
+      last = this._nodes[this._nodes.length - 1]
       if (isDefinition(last)) {
         this._current = last
       } else {
-        var target = this.contextualListener.declarationOf(last)
+        const target = this.contextualListener.declarationOf(last)
         if (target) {
           this._current = target
         } else {
@@ -91,27 +91,26 @@ class ContextView {
   }
 
   _jumpToInternal (position) {
-    var self = this
-    function jumpToLine (lineColumn) {
+    const jumpToLine = (lineColumn) => {
       if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) {
-        self.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
+        this.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1)
       }
     }
-    let lastCompilationResult = self._deps.compilersArtefacts['__last']
+    let lastCompilationResult = this._deps.compilersArtefacts['__last']
     if (lastCompilationResult && lastCompilationResult.data) {
-      var lineColumn = self._deps.offsetToLineColumnConverter.offsetToLineColumn(
+      const lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn(
         position,
         position.file,
         lastCompilationResult.getSourceCode().sources,
         lastCompilationResult.getAsts())
-      var filename = lastCompilationResult.getSourceName(position.file)
+      const filename = lastCompilationResult.getSourceName(position.file)
       // TODO: refactor with rendererAPI.errorClick
-      if (filename !== self._deps.config.get('currentFile')) {
-        var provider = self._deps.fileManager.fileProviderOf(filename)
+      if (filename !== this._deps.config.get('currentFile')) {
+        const provider = this._deps.fileManager.fileProviderOf(filename)
         if (provider) {
           provider.exists(filename, (error, exist) => {
             if (error) return console.log(error)
-            self._deps.fileManager.switchFile(filename)
+            this._deps.fileManager.switchFile(filename)
             jumpToLine(lineColumn)
           })
         }
@@ -123,14 +122,13 @@ class ContextView {
 
   _render (node, nodeAtCursorPosition) {
     if (!node) return yo`<div></div>`
-    var self = this
-    var references = self.contextualListener.referencesOf(node)
-    var type = (node.attributes && node.attributes.type) ? node.attributes.type : node.name
+    let references = this.contextualListener.referencesOf(node)
+    const type = (node.attributes && node.attributes.type) ? node.attributes.type : node.name
     references = `${references ? references.length : '0'} reference(s)`
 
-    var ref = 0
-    var nodes = self.contextualListener.getActiveHighlights()
-    for (var k in nodes) {
+    let ref = 0
+    const nodes = this.contextualListener.getActiveHighlights()
+    for (const k in nodes) {
       if (nodeAtCursorPosition.id === nodes[k].nodeId) {
         ref = k
         break
@@ -138,22 +136,35 @@ class ContextView {
     }
 
     // JUMP BETWEEN REFERENCES
-    function jump (e) {
+    const jump = (e) => {
       e.target.dataset.action === 'next' ? ref++ : ref--
       if (ref < 0) ref = nodes.length - 1
       if (ref >= nodes.length) ref = 0
-      self._jumpToInternal(nodes[ref].position)
+      this._jumpToInternal(nodes[ref].position)
     }
 
-    function jumpTo () {
+    const jumpTo = () => {
       if (node && node.src) {
-        var position = self.sourceMappingDecoder.decode(node.src)
+        const position = this.sourceMappingDecoder.decode(node.src)
         if (position) {
-          self._jumpToInternal(position)
+          this._jumpToInternal(position)
         }
       }
     }
 
+    const showGasEstimation = () => {
+      if (node.name === 'FunctionDefinition') {
+        const result = this.contextualListener.gasEstimation(node)
+        const executionCost = 'Execution cost: ' + result.executionCost + ' gas'
+        const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
+        const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`
+        return yo`<div class=${css.gasEstimation}>
+        <img class=${css.gasStationIcon} title='Gas estimation' src='assets/img/gasStation_50.png'>
+        ${estimatedGas}
+        </div>`
+      }
+    }
+
     return yo`<div class=${css.line}>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
@@ -163,19 +174,6 @@ class ContextView {
       <i data-action='next' class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
         ${showGasEstimation()}
     </div>`
-
-    function showGasEstimation () {
-      if (node.name === 'FunctionDefinition') {
-        var result = self.contextualListener.gasEstimation(node)
-        var executionCost = 'Execution cost: ' + result.executionCost + ' gas'
-        var codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas'
-        var estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}`
-        return yo`<div class=${css.gasEstimation}>
-        <img class=${css.gasStationIcon} title='Gas estimation' src='assets/img/gasStation_50.png'>
-        ${estimatedGas}
-        </div>`
-      }
-    }
   }
 }
 

src/app/editor/sourceHighlighter.js

 'use strict'
-var csjs = require('csjs-inject')
-var globlalRegistry = require('../../global/registry')
-var styleGuide = require('../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
+const csjs = require('csjs-inject')
+const globlalRegistry = require('../../global/registry')
+const styleGuide = require('../ui/styles-guide/theme-chooser')
+const styles = styleGuide.chooser()
 
 class SourceHighlighter {
   constructor (localRegistry) {
-    const self = this
-    self._components = {}
-    self._components.registry = localRegistry || globlalRegistry
+    this._components = {}
+    this._components.registry = localRegistry || globlalRegistry
     // dependencies
-    self._deps = {
-      editor: self._components.registry.get('editor').api,
-      config: self._components.registry.get('config').api,
-      fileManager: self._components.registry.get('filemanager').api,
-      compilerArtefacts: self._components.registry.get('compilersartefacts').api
+    this._deps = {
+      editor: this._components.registry.get('editor').api,
+      config: this._components.registry.get('config').api,
+      fileManager: this._components.registry.get('filemanager').api,
+      compilerArtefacts: this._components.registry.get('compilersartefacts').api
     }
     this.statementMarker = null
     this.fullLineMarker = null
@@ -26,7 +25,7 @@ class SourceHighlighter {
     if (this.fullLineMarker) this._deps.editor.removeMarker(this.fullLineMarker, this.source)
     let lastCompilationResult = this._deps.compilerArtefacts['__last']
     if (location && location.file !== undefined && lastCompilationResult) {
-      var path = lastCompilationResult.getSourceName(location.file)
+      const path = lastCompilationResult.getSourceName(location.file)
       if (path) {
         this.currentSourceLocationFromfileName(lineColumnPos, path)
       }
@@ -45,7 +44,7 @@ class SourceHighlighter {
         this._deps.fileManager.switchFile(this.source)
       }
 
-      var css = csjs`
+      const css = csjs`
         .highlightcode {
           position:absolute;
           z-index:20;

src/remixAppManager.js

@@ -61,10 +61,6 @@ export class RemixAppManager extends AppManagerApi {
       domEl.style.width = '100%'
       domEl.style.border = '0'
       panel.add(profile, domEl)
-      // TODO perhaps should not be here
-      if (profile.name !== 'code editor') {
-        this.verticalIconsApi.addIcon(profile)
-      }
       return
     }
     this.hiddenNodes[profile.name] = domEl
@@ -72,11 +68,6 @@ export class RemixAppManager extends AppManagerApi {
   }
 
   removeComponent (profile) {
-    if (profile.icon) {
-      this.swapPanelApi.remove(profile)
-      this.verticalIconsApi.removeIcon(profile)
-      return
-    }
     let hiddenNode = this.hiddenNodes[profile.name]
     if (hiddenNode) document.body.removeChild(hiddenNode)
   }

test-browser/helpers/init.js

@@ -17,9 +17,9 @@ module.exports = function (browser, callback) {
 }
 
 function initModules (browser, callback) {
-  browser.click('#icon-panel div[title="plugin manager"]')
+  browser.click('#icon-panel div[title="pluginManager"]')
   .execute(function () {
-    document.querySelector('div[title="plugin manager"]').scrollTop = document.querySelector('div[title="plugin manager"]').scrollHeight
+    document.querySelector('div[title="pluginManager"]').scrollTop = document.querySelector('div[title="pluginManager"]').scrollHeight
   }, [], function () {
     browser.click('#pluginManager div[title="solidity"] button')
     .click('#pluginManager div[title="run transactions"] button')