Merge branch 'master' into updatepmluginAPI

README.md

 [![Build Status](https://travis-ci.org/ethereum/remix-ide.svg?branch=master)](https://travis-ci.org/ethereum/remix-ide)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=MTc5WVBoNnhOTGhaUng3ZFI3MDZvNWkraHIrd1FNanZIZk80SG9uMkFIND0tLUoyUjd1YVhWRnRrcUJMMnFlbmN3Y0E9PQ==--4085377897aef217e507c8fc46d463eb699838b8)](https://www.browserstack.com/automate/public-build/MTc5WVBoNnhOTGhaUng3ZFI3MDZvNWkraHIrd1FNanZIZk80SG9uMkFIND0tLUoyUjd1YVhWRnRrcUJMMnFlbmN3Y0E9PQ==--4085377897aef217e507c8fc46d463eb699838b8)
+
+
 
 # Remix
 
@@ -32,8 +35,9 @@ Or if you want to clone the github repository (`wget` need to be installed first
 ```bash
 git clone https://github.com/ethereum/remix-ide.git
 cd remix-ide
+npm run setupremix  # this will clone https://github.com/ethereum/remix for you and link it to remix-ide
 npm install
-npm run build && npm run serve
+npm start
 ```
 
 ## DEVELOPING:
@@ -44,21 +48,6 @@ Then open your `text editor` and start developing.
 The browser will automatically refresh when files are saved.
 
 Most of the the time working with other modules (like debugger etc.) hosted in the [Remix repository](https://github.com/ethereum/remix) is not needed.
-But in case changes have to be made in that repository too, the following command will help you link Remix with your local remix-ide repository:
-
-After `npm install` run also:
-
-```bash
-npm run pullremix
-
-npm run linkremixcore
-
-npm run linkremixlib
-
-npm run linkremixsolidity
-
-npm run linkremixdebugger
-```
 
 ### Troubleshooting building
 

release-process.md

+This document includes:
+ - how to make npm, github release of remix-* packages
+ - how to update remix.ethereum.org.
+ - how to update remix-alpha.ethereum.org.
+
+# remix-* release (npm release, github release) 
+   
+ - For a specifix module (lib/core/debug/ide/solidity/tests)
+ - In a new branch, bump the version in package.json, push it and create PR.
+ - Wait for tests completion.
+ - merge PR
+ - build the branch ( `npm run build` for remix-ide ).
+ - execute `npm publish`.
+ - create new `tag` ( e.g `git tag v0.6.1-alpha.2` ).
+ - push the tag ( `git push --tag` ).
+ - execute `gren changelog --generate -t <new tag>..<previous tag> --data-source=prs`.
+ - in `changelog.md` remove the closed and non merged PR.
+ - publish a release in github using the changelog.
+
+
+# remix.ethereum.org update
+
+This is not strictly speaking a release. Updating the remix site is done through the Travis build:
+
+ - In remix-ide repository
+ - Switch to the branch `remix_live`
+ - Rebase the branch against master
+ - Force push
+ - https://travis-ci.org/ethereum/remix-ide
+ - Click `More options`
+ - Click `Trigger build`
+ - Select `remix_live`
+ - Click `Trigger custom build`
+ - Once the build is finished (can take a while) and successful, check remix.ethereum.org is updated accordingly
+
+# remix-alpha.ethereum.org update
+
+This is not strictly speaking a release. Updating the remix-alpha site is done through the Travis build:
+
+ - https://travis-ci.org/ethereum/remix-ide
+ - Click `More options`
+ - Click `Trigger build`
+ - Select `Master`
+ - Click `Trigger custom build`
+ - Once the build is finished (can take a while) and successful, check remix-alpha.ethereum.org is updated accordingly

src/app/panels/righthand-panel.js

@@ -37,9 +37,8 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
       </div>
     </div>
   `
-  appAPI.switchTab = (tabClass) => {
-    this.event.trigger('switchTab', [tabClass])
-  }
+  // selectTabByClassName
+  appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
 
   events.rhp = self.event
 

src/app/plugin/pluginManager.js

@@ -75,48 +75,47 @@
  * See index.html and remix.js in test-browser folder for sample
  *
  */
-class PluginManager {
+module.exports = class PluginManager {
   constructor (api = {}, events = {}, opts = {}) {
-    var self = this
-    this.plugins = {}
-    this.inFocus
-    var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
-    events.compiler.register('compilationFinished', (success, data, source) => {
-      if (this.inFocus) {
+    const self = this
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self.plugins = {}
+    self.inFocus
+    self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
+    self._events.compiler.register('compilationFinished', (success, data, source) => {
+      if (self.inFocus) {
         // trigger to the current focus
-        this.post(this.inFocus, JSON.stringify({
+        self.post(self.inFocus, JSON.stringify({
           action: 'notification',
           key: 'compiler',
           type: 'compilationFinished',
-          value: [
-            success,
-            data,
-            source
-          ]
+          value: [ success, data, source ]
         }))
       }
     })
 
-    events.app.register('tabChanged', (tabName) => {
-      if (this.inFocus && this.inFocus !== tabName) {
+    self._events.app.register('tabChanged', (tabName) => {
+      if (self.inFocus && self.inFocus !== tabName) {
         // trigger unfocus
-        this.post(this.inFocus, JSON.stringify({
+        self.post(self.inFocus, JSON.stringify({
           action: 'notification',
           key: 'app',
           type: 'unfocus',
           value: []
         }))
       }
-      if (this.plugins[tabName]) {
+      if (self.plugins[tabName]) {
         // trigger focus
-        this.post(tabName, JSON.stringify({
+        self.post(tabName, JSON.stringify({
           action: 'notification',
           key: 'app',
           type: 'focus',
           value: []
         }))
-        this.inFocus = tabName
-        this.post(tabName, JSON.stringify({
+        self.inFocus = tabName
+        self.post(tabName, JSON.stringify({
           action: 'notification',
           key: 'compiler',
           type: 'compilationData',
@@ -136,10 +135,10 @@ class PluginManager {
           value: [ result ]
         }))
       }
-      if (event.type === 'message' && this.inFocus && this.plugins[this.inFocus] && this.plugins[this.inFocus].origin === event.origin) {
+      if (event.type === 'message' && self.inFocus && self.plugins[self.inFocus] && self.plugins[self.inFocus].origin === event.origin) {
         var data = JSON.parse(event.data)
-        data.value.unshift(this.inFocus)
-        if (allowedapi[data.type]) {
+        data.value.unshift(self.inFocus)
+        if (self.allowedapi[data.type]) {
           data.value.push((error, result) => {
             response(data.key, data.type, data.id, error, result)
           })
@@ -149,13 +148,13 @@ class PluginManager {
     }, false)
   }
   register (desc, content) {
-    this.plugins[desc.title] = {content, origin: desc.url}
+    const self = this
+    self.plugins[desc.title] = {content, origin: desc.url}
   }
   post (name, value) {
-    if (this.plugins[name]) {
-      this.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, this.plugins[name].origin)
+    const self = this
+    if (self.plugins[name]) {
+      self.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, self.plugins[name].origin)
     }
   }
 }
-
-module.exports = PluginManager

src/app/tabs/analysis-tab.js

 var yo = require('yo-yo')
-var css = require('./styles/analysis-tab-styles')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
 
-function analysisTab (api = {}, events = {}, opts = {}) {
-  var el = yo`
-    <div class="${css.analysisTabView} "id="staticanalysisView">
-    </div>
-  `
-  return { render () { return el } }
-}
+var EventManager = remixLib.EventManager
 
-module.exports = analysisTab
+module.exports = class AnalysisTab {
+  constructor (opts = { api: {}, events: {} }) {
+    const self = this
+    self.event = new EventManager()
+    self._api = opts.api
+    self._events = opts.events
+    self._view = { el: null }
+    self.data = {}
+    self._components = {}
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`
+      <div class="${css.analysisTabView} "id="staticanalysisView"></div>`
+    return self._view.el
+  }
+}
+const css = csjs`
+  .analysisTabView {
+    padding: 2%;
+    padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
+  }
+`

src/app/tabs/plugin-tab.js

 var yo = require('yo-yo')
-var css = require('./styles/plugin-tab-styles')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
 
-function plugintab (api = {}, events = {}, opts = {}) {
-  var el = yo`
-    <div class="${css.pluginTabView}" id="pluginView">
-      <iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
-    </div>`
-  return { render () { return el } }
-}
+var EventManager = remixLib.EventManager
 
-module.exports = plugintab
+module.exports = class plugintab {
+  constructor (api = {}, events = {}, opts = {}) {
+    const self = this
+    self.event = new EventManager()
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self._view = { el: null }
+    self._components = {}
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`
+      <div class="${css.pluginTabView}" id="pluginView">
+        <iframe class="${css.iframe}" src="${self._opts.url}/index.html"></iframe>
+      </div>`
+    return self._view.el
+  }
+}
+const css = csjs`
+  .pluginTabView {
+    height: 100%;
+    width: 100%;
+  }
+  .iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+`

src/app/tabs/run-tab.js

@@ -65,7 +65,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
   function setFinalContext () {
     // set the final context. Cause it is possible that this is not the one we've originaly selected
     selectExEnv.value = executionContext.getProvider()
-    fillAccountsList(appAPI, el)
+    fillAccountsList(appAPI, opts, el)
     event.trigger('clearInstance', [])
   }
 

src/app/tabs/styles/analysis-tab-styles.js

-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .analysisTabView {
-    padding: 2%;
-    padding-bottom: 3em;
-    display: flex;
-    flex-direction: column;
-  }
-  #staticanalysisView {
-    display: block;
-  }
-  .infoBox  {
-    ${styles.infoTextBox}
-    margin-bottom: 1em;
-  }
-  .textBox  {
-    ${styles.textBoxL}
-    margin-bottom: 1em;
-  }
-`
-
-module.exports = css

src/app/tabs/styles/plugin-tab-styles.js

-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .pluginTabView {
-    height: 100%;
-    width: 100%;
-  }
-  
-  .iframe {
-    height: 100%;
-    width: 100%;
-    border: 0;
-  }
-`
-
-module.exports = css

src/app/tabs/styles/tabbed-menu-styles.js

-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  li.active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
-  }
-  .options {
-    float: left;
-    padding-top: 0.7em;
-    min-width: 60px;
-    font-size: 0.9em;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-  }
-  .opts {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .opts_li {
-    display: block;
-    font-weight: bold;
-    color: ${styles.rightPanel.text_Teriary}
-  }
-  .opts_li.active {
-    color: ${styles.rightPanel.text_Primary}
-  }
-  .opts_li:hover {
-    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
-  }
-`
-
-module.exports = css

src/app/tabs/tabbed-menu.js

 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+
 var helper = require('../../lib/helper')
+var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
-var css = require('./styles/tabbed-menu-styles')
+var EventManager = remixLib.EventManager
 
-class TabbedMenu {
+module.exports = class TabbedMenu {
   constructor (api = {}, events = {}, opts = {}) {
-    var self = this
-    var tabView = document.createElement('ul')
-    this.tabView = tabView
-    this.events = events
-    this.tabs = {}
-    this.contents = {}
-
+    const self = this
+    self.event = new EventManager()
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self._view = { el: null, viewport: null, tabs: {}, contents: {} }
     events.app.register('debuggingRequested', () => {
-      self.selectTab(tabView.querySelector('li.debugView'))
-    })
-
-    events.rhp.register('switchTab', tabName => {
-      self.selectTab(tabView.querySelector(`li.${tabName}`))
+      self.selectTabByTitle('Debugger')
     })
   }
-  render () { return this.tabView }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`<ul class=${css.menu}>${Object.values(self._view.tabs)}</ul>`
+    return self._view.el
+  }
+  renderViewport () {
+    const self = this
+    if (self._view.viewport) return self._view.viewport
+    self._view.viewport = yo`
+      <div id="optionViews" class=${css.optionViews}>
+        ${Object.values(self._view.contents)}
+      </div>`
+    return self._view.viewport
+  }
+  addTab (title, cssClass, content) {
+    const self = this
+    if (helper.checkSpecialChars(title)) return
+    if (self._view.contents[title] || self._view.tabs[title]) throw new Error('tab already exists')
+    self._view.contents[title] = content
+    self._view.tabs[title] = yo`<li class="${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
+    if (self._view.el) self._view.el.appendChild(self._view.tabs[title])
+    if (self._view.viewport) self._view.viewport.appendChild(self._view.contents[title])
+  }
   selectTabByTitle (title) {
-    this.selectTab(this.tabs[title])
+    const self = this
+    self.selectTab(self._view.tabs[title])
+  }
+  selectTabByClassName (tabClass) {
+    const self = this
+    self.selectTab(self._view.el.querySelector(`li.${tabClass}`))
   }
-
   selectTab (el) {
+    const self = this
     if (!el.classList.contains(css.active)) {
-      var nodes = el.parentNode.querySelectorAll('li')
+      var nodes = Object.values(self._view.tabs)
       for (var i = 0; i < nodes.length; ++i) {
         nodes[i].classList.remove(css.active)
-        this.contents[nodes[i].getAttribute('title')].style.display = 'none'
+        self._view.contents[nodes[i].getAttribute('title')].style.display = 'none'
       }
     }
     var title = el.getAttribute('title')
-    this.contents[el.getAttribute('title')].style.display = 'block'
+    self._view.contents[el.getAttribute('title')].style.display = 'block'
     el.classList.add(css.active)
-    this.events.app.trigger('tabChanged', [title])
-  }
-
-  addTab (title, cssClass, content) {
-    var self = this
-    if (!helper.checkSpecialChars(title)) {
-      this.contents[title] = content
-      this.tabs[title] = yo`<li class="${css.opts_li} ${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
-      this.tabView.appendChild(this.tabs[title])
-    }
+    self._events.app.trigger('tabChanged', [title])
   }
 }
 
-module.exports = TabbedMenu
+const css = csjs`
+  li.active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    color: ${styles.appProperties.mainText_Color}
+  }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Teriary}
+  }
+  .opts_li.active {
+    color: ${styles.rightPanel.text_Primary}
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
+  }
+`