Merge branch 'master' into oneclickplugin

src/app.js

@@ -62,38 +62,29 @@ var css = csjs`
     overflow-x: auto;
   }
   .browsersolidity     {
-    position           : relative;
     width              : 100vw;
     height             : 100vh;
     overflow           : hidden;
+    flex-direction     : row;
+    display            : flex;
   }
   .mainpanel         {
     display            : flex;
     flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    bottom             : 0;
     overflow           : hidden;
+    flex               : 1;
   }
   .iconpanel           {
     display            : flex;
     flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    bottom             : 0;
-    left               : 0;
     overflow           : hidden;
     width              : 50px;
     user-select        : none;
-    /* border-right       : 1px solid var(--primary); */
   }
-  .sidepanel          {
+  .sidepanel           {
     display            : flex;
-    flex-direction     : column;
-    position           : absolute;
-    top                : 0;
-    left               : 50px;
-    bottom             : 0;
+    flex-direction     : row-reverse;
+    width              : 320px;
   }
   .highlightcode {
     position:absolute;
@@ -150,7 +141,6 @@ class App {
 
   init () {
     var self = this
-    self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 300, x: 450 })
     run.apply(self)
   }
 
@@ -166,22 +156,25 @@ class App {
 
     // center panel, resizable
     self._view.sidepanel = yo`
-      <div id="side-panel" class=${css.sidepanel}>
+      <div id="side-panel" style="min-width: 320px;" class=${css.sidepanel}>
         ${''}
       </div>
     `
 
     // handle the editor + terminal
     self._view.mainpanel = yo`
-      <div id="editor-container" class=${css.mainpanel}>
+      <div id="main-panel" class=${css.mainpanel}>
         ${''}
       </div>
     `
 
+    self._components.resizeFeature = new PanelsResize(self._view.sidepanel)
+
     self._view.el = yo`
       <div class=${css.browsersolidity}>
         ${self._view.iconpanel}
         ${self._view.sidepanel}
+        ${self._components.resizeFeature.render()}
         ${self._view.mainpanel}
       </div>
     `

src/app/components/local-plugin.js

@@ -2,8 +2,6 @@
 const yo = require('yo-yo')
 const modalDialog = require('../ui/modaldialog')
 
-const unexposedEvents = ['statusChanged']
-
 module.exports = class LocalPlugin {
 
   /**
@@ -40,8 +38,6 @@ module.exports = class LocalPlugin {
       ...this.profile,
       hash: `local-${this.profile.name}`
     }
-    profile.events = (profile.events || []).filter(item => item !== '')
-
     if (!profile.location) throw new Error('Plugin should have a location')
     if (!profile.name) throw new Error('Plugin should have a name')
     if (!profile.url) throw new Error('Plugin should have an URL')
@@ -49,23 +45,6 @@ module.exports = class LocalPlugin {
     return profile
   }
 
-  /**
-   * Add or remove a notification to/from the profile
-   * @param {Event} e The event when checkbox changes
-   * @param {string} pluginName The name of the plugin
-   * @param {string} eventName The name of the event to listen on
-   */
-  toggleNotification (e, pluginName, eventName) {
-    const {checked} = e.target
-    if (checked) {
-      if (!this.profile.notifications[pluginName]) this.profile.notifications[pluginName] = []
-      this.profile.notifications[pluginName].push(eventName)
-    } else {
-      this.profile.notifications[pluginName].splice(this.profile.notifications[pluginName].indexOf(eventName), 1)
-      if (this.profile.notifications[pluginName].length === 0) delete this.profile.notifications[pluginName]
-    }
-  }
-
   updateName ({target}) {
     this.profile.name = target.value
   }
@@ -78,33 +57,11 @@ module.exports = class LocalPlugin {
     this.profile.displayName = target.value
   }
 
-  updateEvents ({target}, index) {
-    if (this.profile.events[index] !== undefined) {
-      this.profile.events[index] = target.value
-    }
-  }
-
   updateLoc ({target}) {
     this.profile.location = target.value
   }
 
   /**
-   * The checkbox for a couple module / event
-   * @param {string} plugin The name of the plugin
-   * @param {string} event The name of the event exposed by the plugin
-   */
-  notificationCheckbox (plugin, event) {
-    const notifications = this.profile.notifications || {}
-    const checkbox = notifications[plugin] && notifications[plugin].includes(event)
-      ? yo`<input id="${plugin}${event}" type="checkbox" checked onchange="${e => this.toggleNotification(e, plugin, event)}">`
-      : yo`<input id="${plugin}${event}" type="checkbox" onchange="${e => this.toggleNotification(e, plugin, event)}">`
-    return yo`<div>
-      ${checkbox}
-      <label for="${plugin}${event}">${plugin} - ${event}</label>
-    </div>`
-  }
-
-  /**
    * The form to create a local plugin
    * @param {ProfileApi[]} plugins Liste of profile of the plugins
    */
@@ -112,15 +69,6 @@ module.exports = class LocalPlugin {
     const name = this.profile.name || ''
     const url = this.profile.url || ''
     const displayName = this.profile.displayName || ''
-    const profiles = plugins
-      .filter(({profile}) => profile.events && profile.events.length > 0)
-      .map(({profile}) => profile)
-
-    const eventsForm = (events) => {
-      return yo`<div>${events.map((event, i) => {
-        return yo`<input class="form-control" onchange="${e => this.updateEvents(e, i)}" value="${event}" />`
-      })}</div>`
-    }
     const radioLocations = (label, displayN) => {
       const radioButton = (this.profile.location === label)
        ? yo`<div class="radio">
@@ -135,14 +83,6 @@ module.exports = class LocalPlugin {
         ${radioButton}
       </div>`
     }
-    const eventsEl = eventsForm(this.profile.events || [])
-    const pushEvent = () => {
-      if (!this.profile.events) this.profile.events = []
-      this.profile.events.push('')
-      yo.update(eventsEl, eventsForm(this.profile.events))
-    }
-    const addEvent = yo`<button type="button" class="btn btn-sm btn-light" onclick="${() => pushEvent()}">Add an event</button>`
-
     return yo`
     <form id="local-plugin-form">
       <div class="form-group">
@@ -158,18 +98,6 @@ module.exports = class LocalPlugin {
         <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" placeholder="ex: https://localhost:8000">
       </div>
       <div class="form-group">
-        <label>Events</label>
-        ${eventsEl}${addEvent}
-      </div>
-      <div class="form-group">
-        <label>Notifications</label>
-        ${profiles.map(({name, events}) => {
-          return events
-            .filter(event => !unexposedEvents.includes(event))
-            .map(event => this.notificationCheckbox(name, event))
-        })}
-      </div>
-      <div class="form-group">
       <h6>Location in remix <small>(required)</small></h6>
       ${radioLocations('sidePanel', 'Side Panel')}
       ${radioLocations('mainPanel', 'Main Panel')}

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

@@ -19,9 +19,6 @@ const css = csjs`
     z-index: 2;
     margin-bottom: 0px;
   }
-  .localPluginBtn {
-    margin-top: 15px;
-  }
   .displayName {
     text-transform: capitalize;
     display: flex;
@@ -186,7 +183,7 @@ class PluginManagerComponent extends ViewPlugin {
       <div id='pluginManager'>
         <header class="form-group ${css.pluginSearch}">
           <input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search">
-          <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-info ${css.localPluginBtn}">
+          <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-dark border-0 font-weight-bold mt-2">
             Connect to a Local Plugin
           </button>
         </header>

src/app/components/side-panel.js

@@ -5,9 +5,11 @@ const yo = require('yo-yo')
 
 const css = csjs`
   .panel {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
+    flex: auto;
   }
   .swapitTitle {
     margin: 0;
@@ -22,7 +24,6 @@ const css = csjs`
   }
   .swapitHeader {
     height: 35px;
-    padding: 15px 20px;
     display: flex;
     align-items: center;
   }
@@ -32,7 +33,6 @@ const css = csjs`
   }
   .pluginsContainer {
     height: 100%;
-    flex: 1;
     overflow-y: auto;
   }
   .titleInfo {
@@ -131,10 +131,10 @@ export class SidePanel extends AbstractPanel {
     }
 
     return yo`
-      <header class="${css.swapitHeader}">
-          <h6 class="${css.swapitTitle}">${name}</h6>
-          ${docLink}
-          ${versionWarning}
+      <header class="${css.swapitHeader} px-3">
+        <h6 class="${css.swapitTitle}">${name}</h6>
+        ${docLink}
+        ${versionWarning}
       </header>
     `
   }
@@ -143,7 +143,7 @@ export class SidePanel extends AbstractPanel {
     return yo`
       <section class="${css.panel}">
         ${this.header}
-        <div class="${css.pluginsContainer}">
+        <div class="${css.pluginsContainer} py-1">
           ${this.view}
         </div>
       </section>`

src/app/components/vertical-icons.js

@@ -160,9 +160,9 @@ export class VerticalIcons extends Plugin {
     })
 
     // remove active
-    const currentActive = this.view.querySelector(`.${css.active}`)
+    const currentActive = this.view.querySelector(`.active`)
     if (currentActive) {
-      currentActive.classList.remove(css.active)
+      currentActive.classList.remove(`active`)
     }
   }
 
@@ -176,7 +176,7 @@ export class VerticalIcons extends Plugin {
     const nextActive = this.view.querySelector(`[plugin="${name}"]`)
     if (nextActive) {
       let image = nextActive.querySelector('.image')
-      nextActive.classList.add(css.active)
+      nextActive.classList.add(`active`)
       image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`)
     }
   }
@@ -210,7 +210,7 @@ export class VerticalIcons extends Plugin {
 
   onThemeChanged (themeType) {
     const invert = themeType === 'dark' ? 1 : 0
-    const active = this.view.querySelector(`.${css.active}`)
+    const active = this.view.querySelector(`.active`)
     if (active) {
       let image = active.querySelector('.image')
       image.style.setProperty('filter', `invert(${invert})`)

src/app/tabs/runTab/model/dropdownlogic.js

@@ -54,8 +54,9 @@ class DropdownLogic {
         }
         cb(null, 'abi', abi)
       })
+    } else {
+      cb(null, 'instance')
     }
-    cb(null, 'instance')
   }
 
   getCompiledContracts (compiler, compilerFullName) {

src/app/tabs/runTab/settings.js

@@ -178,18 +178,17 @@ class SettingsUI {
     selectExEnv.addEventListener('change', (event) => {
       let context = selectExEnv.options[selectExEnv.selectedIndex].value
       this.settings.changeExecutionContext(context, () => {
-        modalDialogCustom.confirm('External node request', 'Are you sure you want to connect to an ethereum node?', () => {
+        const modal = modalDialogCustom.confirm('External node request', 'Are you sure you want to connect to an ethereum node?', () => {
+          modal.hide()
           modalDialogCustom.prompt('External node request', 'Web3 Provider Endpoint', 'http://localhost:8545', (target) => {
             this.settings.setProviderFromEndpoint(target, context, (alertMsg) => {
-              if (alertMsg) {
-                modalDialogCustom.alert(alertMsg)
-              }
+              if (alertMsg) addTooltip(alertMsg)
               this.setFinalContext()
             })
           }, this.setFinalContext.bind(this))
         }, this.setFinalContext.bind(this))
       }, (alertMsg) => {
-        modalDialogCustom.alert(alertMsg)
+        addTooltip(alertMsg)
       }, this.setFinalContext.bind(this))
     })
 

src/app/tabs/settings-tab.js

@@ -10,14 +10,15 @@ import * as packageJson from '../../../package.json'
 const profile = {
   name: 'settings',
   displayName: 'Settings',
-  methods: [],
+  methods: ['getGithubAccessToken'],
   events: [],
   icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTUyIDg5NnEwLTEwNi03NS0xODF0LTE4MS03NS0xODEgNzUtNzUgMTgxIDc1IDE4MSAxODEgNzUgMTgxLTc1IDc1LTE4MXptNTEyLTEwOXYyMjJxMCAxMi04IDIzdC0yMCAxM2wtMTg1IDI4cS0xOSA1NC0zOSA5MSAzNSA1MCAxMDcgMTM4IDEwIDEyIDEwIDI1dC05IDIzcS0yNyAzNy05OSAxMDh0LTk0IDcxcS0xMiAwLTI2LTlsLTEzOC0xMDhxLTQ0IDIzLTkxIDM4LTE2IDEzNi0yOSAxODYtNyAyOC0zNiAyOGgtMjIycS0xNCAwLTI0LjUtOC41dC0xMS41LTIxLjVsLTI4LTE4NHEtNDktMTYtOTAtMzdsLTE0MSAxMDdxLTEwIDktMjUgOS0xNCAwLTI1LTExLTEyNi0xMTQtMTY1LTE2OC03LTEwLTctMjMgMC0xMiA4LTIzIDE1LTIxIDUxLTY2LjV0NTQtNzAuNXEtMjctNTAtNDEtOTlsLTE4My0yN3EtMTMtMi0yMS0xMi41dC04LTIzLjV2LTIyMnEwLTEyIDgtMjN0MTktMTNsMTg2LTI4cTE0LTQ2IDM5LTkyLTQwLTU3LTEwNy0xMzgtMTAtMTItMTAtMjQgMC0xMCA5LTIzIDI2LTM2IDk4LjUtMTA3LjV0OTQuNS03MS41cTEzIDAgMjYgMTBsMTM4IDEwN3E0NC0yMyA5MS0zOCAxNi0xMzYgMjktMTg2IDctMjggMzYtMjhoMjIycTE0IDAgMjQuNSA4LjV0MTEuNSAyMS41bDI4IDE4NHE0OSAxNiA5MCAzN2wxNDItMTA3cTktOSAyNC05IDEzIDAgMjUgMTAgMTI5IDExOSAxNjUgMTcwIDcgOCA3IDIyIDAgMTItOCAyMy0xNSAyMS01MSA2Ni41dC01NCA3MC41cTI2IDUwIDQxIDk4bDE4MyAyOHExMyAyIDIxIDEyLjV0OCAyMy41eiIvPjwvc3ZnPg==',
   description: 'Remix-IDE settings',
   kind: 'settings',
   location: 'sidePanel',
   documentation: 'https://remix-ide.readthedocs.io/en/latest/settings.html',
-  version: packageJson.version
+  version: packageJson.version,
+  permission: true
 }
 
 module.exports = class SettingsTab extends ViewPlugin {
@@ -162,4 +163,8 @@ module.exports = class SettingsTab extends ViewPlugin {
     this._deps.themeModule.switchTheme()
     return this._view.el
   }
+
+  getGithubAccessToken () {
+    return this.config.get('settings/gist-access-token')
+  }
 }

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

@@ -147,6 +147,7 @@ const css = csjs`
   .errorBlobs {
     padding-left: 5px;
     padding-right: 5px;
+    word-break: break-all;
   }
 
   .spinningIcon {

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

@@ -2,7 +2,6 @@ var csjs = require('csjs-inject')
 
 var css = csjs`
   .runTabView {
-    padding: 2%;
     display: flex;
     flex-direction: column;
   }

src/app/udapp/run-tab.js

@@ -74,7 +74,7 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderContainer () {
-    this.container = yo`<div class="${css.runTabView} p-3" id="runTabView" ></div>`
+    this.container = yo`<div class="${css.runTabView} py-0 pr-2" id="runTabView" ></div>`
 
     var el = yo`
     <div class="list-group list-group-flush">
@@ -133,7 +133,7 @@ export class RunTab extends LibraryPlugin {
       if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
     })
     this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
-      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
+      this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, '<at address>'))
     })
     this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
       this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))

src/app/ui/landing-page/landing-page.js

@@ -136,10 +136,11 @@ export class LandingPage extends ViewPlugin {
       this.verticalIcons.select('vyper')
     }
     const startWorkshop = () => {
+      this.appManager.ensureActivated('box')
       this.appManager.ensureActivated('solidity')
       this.appManager.ensureActivated('solidityUnitTesting')
-      this.appManager.ensureActivated('workshop')
-      this.verticalIcons.select('workshop')
+      this.appManager.ensureActivated('workshops')
+      this.verticalIcons.select('workshops')
     }
 
     const startPipeline = () => {
@@ -200,7 +201,7 @@ export class LandingPage extends ViewPlugin {
             <div class="${css.enviroments} pt-2">
               <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startSolidity()}>Solidity</button>
               <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startVyper()}>Vyper</button>
-              <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startWorkshop()}>Workshop</button>
+              <button class="btn btn-lg btn-secondary mr-3" onclick=${() => startWorkshop()}>Workshops</button>
             </div>
           </div>
           <div class="file">

src/framingService.js

@@ -10,13 +10,13 @@ export class FramingService {
 
   start () {
     this.sidePanel.events.on('toggle', () => {
-      this.resizeFeature.panel1.clientWidth !== 0 ? this.resizeFeature.minimize() : this.resizeFeature.maximise()
+      this.resizeFeature.panel.clientWidth !== 0 ? this.resizeFeature.hidePanel() : this.resizeFeature.showPanel()
     })
     this.sidePanel.events.on('showing', () => {
-      this.resizeFeature.panel1.clientWidth === 0 ? this.resizeFeature.maximise() : ''
+      this.resizeFeature.panel.clientWidth === 0 ? this.resizeFeature.showPanel() : ''
     })
     this.mainPanel.events.on('toggle', () => {
-      this.resizeFeature.maximise()
+      this.resizeFeature.showPanel()
     })
 
     this.verticalIcon.select('fileExplorers')

src/lib/panels-resize.js

@@ -3,14 +3,10 @@ const csjs = require('csjs-inject')
 
 const css = csjs`
   .dragbar            {
-    position          : absolute;
-    top               : 0px;
-    width             : 0.5em;
-    right             : 0;
-    bottom            : 0;
+    width             : 1px;
+    height            : 100%;
     cursor            : col-resize;
     z-index           : 999;
-    /* border-right      : 2px solid var(--primary); */
   }
   .ghostbar           {
     width             : 3px;
@@ -24,98 +20,70 @@ const css = csjs`
   }
 `
 
-/*
-* opt:
-*   minWidth  : minimn width for panels
-*   x         : position of gutter at load
-*
-*
-*/
 export default class PanelsResize {
-  constructor (idpanel1, idpanel2, opt) {
-    var panel1 = document.querySelector(idpanel1)
-    var panel2 = document.querySelector(idpanel2)
-    this.panel1 = panel1
-    this.panel2 = panel2
-    this.opt = opt
+  constructor (panel) {
+    this.panel = panel
+    const string = panel.style.minWidth
+    this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0
+  }
 
-    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+  render () {
+    this.ghostbar = yo`<div class=${css.ghostbar}></div>`
 
-    let mousedown = (event) => {
+    const mousedown = (event) => {
       event.preventDefault()
       if (event.which === 1) {
         moveGhostbar(event)
-        document.body.appendChild(ghostbar)
+        document.body.appendChild(this.ghostbar)
         document.addEventListener('mousemove', moveGhostbar)
         document.addEventListener('mouseup', removeGhostbar)
         document.addEventListener('keydown', cancelGhostbar)
       }
     }
 
-    let cancelGhostbar = (event) => {
+    const cancelGhostbar = (event) => {
       if (event.keyCode === 27) {
-        document.body.removeChild(ghostbar)
+        document.body.removeChild(this.ghostbar)
         document.removeEventListener('mousemove', moveGhostbar)
         document.removeEventListener('mouseup', removeGhostbar)
         document.removeEventListener('keydown', cancelGhostbar)
       }
     }
 
-    let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
-      let p = processPositions(event)
-      if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
-      ghostbar.style.left = event.x + 'px'
-    }
-
-    let setPosition = (event) => {
-      let p = processPositions(event)
-      panel1.style.width = p.panel1Width + 'px'
-      panel2.style.left = p.panel2left + 'px'
-      panel2.style.width = p.panel2Width + 'px'
+    const moveGhostbar = (event) => {
+      this.ghostbar.style.left = event.x + 'px'
     }
 
-    let removeGhostbar = (event) => {
-      document.body.removeChild(ghostbar)
+    const removeGhostbar = (event) => {
+      document.body.removeChild(this.ghostbar)
       document.removeEventListener('mousemove', moveGhostbar)
       document.removeEventListener('mouseup', removeGhostbar)
       document.removeEventListener('keydown', cancelGhostbar)
-      setPosition(event)
+      this.setPosition(event)
     }
 
-    let processPositions = (event) => {
-      let panel1Width = event.x - panel1.offsetLeft
-      panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
-      let panel2left = panel1.offsetLeft + panel1Width
-      let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
-      panel2Width = panel2Width < opt.minWidth ? opt.minWidth : panel2Width
-      return { panel1Width, panel2left, panel2Width }
-    }
-
-    window.addEventListener('resize', function (event) {
-      setPosition({ x: panel1.offsetLeft + panel1.clientWidth })
-    })
+    return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
+  }
 
-    var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
-    panel1.appendChild(dragbar)
+  calculatePanelWidth (event) {
+    return event.x - this.panel.offsetLeft
+  }
 
-    setPosition(opt)
+  setPosition (event) {
+    const panelWidth = this.calculatePanelWidth(event)
+    // close the panel if the width is less than a minWidth
+    if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') {
+      this.panel.style.width = panelWidth + 'px'
+      this.showPanel()
+    } else this.hidePanel()
   }
 
-  minimize () {
-    let panel1Width = 0
-    let panel2left = this.panel1.offsetLeft + panel1Width
-    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
-    this.panel1.style.width = panel1Width + 'px'
-    this.panel2.style.left = panel2left + 'px'
-    this.panel2.style.width = panel2Width + 'px'
+  hidePanel () {
+    this.panel.style.display = 'none'
   }
 
-  maximise () {
-    let panel1Width = this.opt.minWidth
-    let panel2left = this.panel1.offsetLeft + panel1Width
-    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
-    this.panel1.style.width = panel1Width + 'px'
-    this.panel2.style.left = panel2left + 'px'
-    this.panel2.style.width = panel2Width + 'px'
+  showPanel () {
+    this.panel.style.display = 'flex'
   }
 }
+

src/remixAppManager.js

@@ -136,7 +136,7 @@ export class RemixAppManager extends PluginEngine {
         'solidity': ['compilationFinished']
       },
       version: '0.1.0-beta',
-      url: 'https://remix-mythx-plugin.surge.sh',
+      url: 'https://remythx.xyz',
       description: 'Perform Static and Dynamic Security Analysis using the MythX Cloud Service',
       icon: 'https://remix-mythx-plugin.surge.sh/logo.png',
       location: 'sidePanel',
@@ -158,7 +158,7 @@ export class RemixAppManager extends PluginEngine {
       location: 'sidePanel'
     }
     const threeBox = {
-      name: '3box',
+      name: 'box',
       displayName: '3Box Spaces',
       description: 'A decentralized storage for everything that happen on Remix',
       methods: ['login', 'isEnabled', 'getUserAddress', 'openSpace', 'closeSpace', 'isSpaceOpened', 'getSpacePrivateValue', 'setSpacePrivateValue', 'getSpacePublicValue', 'setSpacePublicValue', 'getSpacePublicData'],
@@ -169,9 +169,9 @@ export class RemixAppManager extends PluginEngine {
       location: 'sidePanel'
     }
     const remixWorkshop = {
-      name: 'workshop',
-      displayName: 'Remix Workshop',
-      description: 'Learn Solidity with Remix !',
+      name: 'workshops',
+      displayName: 'Remix Workshops',
+      description: 'Learn Ethereum with Remix !',
       methods: [],
       events: [],
       version: '0.1.0-alpha',
@@ -212,6 +212,15 @@ export class RemixAppManager extends PluginEngine {
       description: 'A free tool to generate smart contract interfaces.',
       documentation: 'https://github.com/pi0neerpat/remix-plugin-one-click-dapp',
       icon: 'https://remix-one-click-dapp.surge.sh/icon.png',
+    const gasProfiler = {
+      name: 'gasProfiler',
+      displayName: 'Gas Profiler',
+      events: [],
+      methods: [],
+      version: '0.1.0-alpha',
+      url: 'https://remix-gas-profiler.surge.sh',
+      description: 'Profile gas costs',
+      icon: 'https://res.cloudinary.com/key-solutions/image/upload/v1565781702/gas-profiler_nxmsal.png',
       location: 'sidePanel'
     }
     return [
@@ -226,6 +235,7 @@ export class RemixAppManager extends PluginEngine {
       new IframePlugin(debugPlugin),
       new IframePlugin(libraTools),
       new IframePlugin(oneClickDapp)
+      new IframePlugin(gasProfiler)
     ]
   }
 }

test-browser/commands/checkTerminalFilter.js

@@ -17,10 +17,10 @@ function checkFilter (browser, filter, test, done) {
     done()
     return
   }
-  var filterClass = '#editor-container div[class^="search"] input[class^="filter"]'
+  const filterClass = '#main-panel div[class^="search"] input[class^="filter"]'
   browser.setValue(filterClass, filter, function () {
     browser.execute(function () {
-      return document.querySelector('#editor-container div[class^="journal"]').innerHTML === test
+      return document.querySelector('#main-panel div[class^="journal"]').innerHTML === test
     }, [], function (result) {
       browser.clearValue(filterClass).setValue(filterClass, '', function () {
         if (!result.value) {

test-browser/commands/testFunction.js

@@ -16,12 +16,12 @@ class TestFunction extends EventEmitter {
     })
     .click('.instance button[title="' + fnFullName + '"]')
     .pause(500)
-    .waitForElementPresent('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"]')
-    .assert.containsText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] span', log)
-    .click('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]')
+    .waitForElementPresent('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"]')
+    .assert.containsText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] span', log)
+    .click('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] div[class^="log"]')
     .perform(function (client, done) {
       if (expectedReturn) {
-        client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => {
+        client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #decodedoutput', (result) => {
           console.log(result)
           var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedReturn))
           if (!equal) {
@@ -33,7 +33,7 @@ class TestFunction extends EventEmitter {
     })
     .perform((client, done) => {
       if (expectedEvent) {
-        client.getText('#editor-container div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => {
+        client.getText('#main-panel div[class^="terminal"] span[id="tx' + txHash + '"] table[class^="txTable"] #logs', (result) => {
           console.log(result)
           var equal = deepequal(JSON.parse(result.value), JSON.parse(expectedEvent))
           if (!equal) {