Merge pull request #651 from ethereum/remove-ensure-activated

apps/remix-ide/src/app.js

@@ -314,7 +314,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
   registry.put({ api: mainview, name: 'mainview' })
 
-  engine.register(appPanel)
+  engine.register([
+    appPanel,
+    mainview.tabProxy
+  ])
 
   // those views depend on app_manager
   const menuicons = new VerticalIcons(appManager)
@@ -429,8 +432,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     }).catch(console.error)
   } else {
     // activate solidity plugin
-    appManager.ensureActivated('solidity')
-    appManager.ensureActivated('udapp')
+    appManager.activatePlugin(['solidity', 'udapp'])
   }
 
   // Load and start the service who manager layout and frame

apps/remix-ide/src/app/components/vertical-icons.js

@@ -225,8 +225,9 @@ export class VerticalIcons extends Plugin {
     const home = yo`
       <div
         class="${css.homeIcon}"
-        onclick="${(e) => {
-          this.appManager.ensureActivated('home')
+        onclick="${async () => {
+          await this.appManager.activatePlugin('home')
+          this.call('tabs', 'focus', 'home')
         }}"
         plugin="home" title="Home"
         data-id="verticalIconsHomeIcon"

apps/remix-ide/src/app/panels/main-view.js

@@ -17,6 +17,7 @@ var css = csjs`
   }
 `
 
+// @todo(#650) Extract this into two classes: MainPanel (TabsProxy + Iframe/Editor) & BottomPanel (Terminal)
 export class MainView {
   constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
     var self = this

apps/remix-ide/src/app/panels/tab-proxy.js

-var yo = require('yo-yo')
-var $ = require('jquery')
+import { Plugin } from '@remixproject/engine'
+const yo = require('yo-yo')
+const $ = require('jquery')
 const EventEmitter = require('events')
 const globalRegistry = require('../../global/registry')
 const csjs = require('csjs-inject')
-
 require('remix-tabs')
 
 const css = csjs`
@@ -12,8 +12,15 @@ const css = csjs`
   }
 `
 
-export class TabProxy {
+const profile = {
+  name: 'tabs',
+  methods: ['focus']
+}
+
+// @todo(#650) Merge this with MainPanel into one plugin
+export class TabProxy extends Plugin {
   constructor (fileManager, editor, appManager) {
+    super(profile)
     this.event = new EventEmitter()
     this.fileManager = fileManager
     this.appManager = appManager
@@ -84,23 +91,18 @@ export class TabProxy {
     appManager.event.on('deactivate', (profile) => {
       this.removeTab(profile.name)
     })
+  }
 
-    appManager.event.on('ensureActivated', (name) => {
-      if (name === 'home') {
-        // if someone force activation of home, we switch to it
-        this.event.emit('switchApp', name)
-        this._view.filetabs.activateTab(name)
-      }
-    })
+  focus (name) {
+    this.event.emit('switchApp', name)
+    this._view.filetabs.activateTab(name)
   }
 
   updateImgStyles () {
     const images = this._view.filetabs.getElementsByClassName('iconImage')
-    if (images.length !== 0) {
-      for (const element of images) {
-        globalRegistry.get('themeModule').api.fixInvert(element)
-      };
-    }
+    for (const element of images) {
+      globalRegistry.get('themeModule').api.fixInvert(element)
+    };
   }
 
   switchTab (tabName) {
@@ -205,6 +207,7 @@ export class TabProxy {
     delete this._handlers[name]
     this.switchToActiveTab()
     this.loadedTabs = this.loadedTabs.filter(tab => tab.name !== name)
+    this.updateImgStyles()
   }
 
   addHandler (type, fn) {

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -240,44 +240,27 @@ export class LandingPage extends ViewPlugin {
       })
     }
 
-    const startSolidity = () => {
-      this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('udapp')
-      this.appManager.ensureActivated('solidityStaticAnalysis')
-      this.appManager.ensureActivated('solidityUnitTesting')
+    const startSolidity = async () => {
+      await this.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
       this.verticalIcons.select('solidity')
     }
-    /*
-    const startWorkshop = () => {
-      this.appManager.ensureActivated('box')
-      this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('solidityUnitTesting')
-      this.appManager.ensureActivated('workshops')
-      this.verticalIcons.select('workshops')
-    }
-    */
-
     const startPipeline = () => {
-      this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('pipeline')
-      this.appManager.ensureActivated('udapp')
+      this.appManager.activatePlugin(['solidity', 'pipeline', 'udapp'])
     }
-    const startDebugger = () => {
-      this.appManager.ensureActivated('debugger')
+    const startDebugger = async () => {
+      await this.appManager.activatePlugin('debugger')
       this.verticalIcons.select('debugger')
     }
-    const startMythX = () => {
-      this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('mythx')
+    const startMythX = async () => {
+      await this.appManager.activatePlugin(['solidity', 'mythx'])
       this.verticalIcons.select('mythx')
     }
-    const startSourceVerify = () => {
-      this.appManager.ensureActivated('solidity')
-      this.appManager.ensureActivated('source-verification')
+    const startSourceVerify = async () => {
+      await this.appManager.activatePlugin(['solidity', 'source-verification'])
       this.verticalIcons.select('source-verification')
     }
-    const startPluginManager = () => {
-      this.appManager.ensureActivated('pluginManager')
+    const startPluginManager = async () => {
+      await this.appManager.activatePlugin('pluginManager')
       this.verticalIcons.select('pluginManager')
     }
 
@@ -286,7 +269,7 @@ export class LandingPage extends ViewPlugin {
       fileExplorer.createNewFile()
     }
     const connectToLocalhost = () => {
-      this.appManager.ensureActivated('remixd')
+      this.appManager.activatePlugin('remixd')
     }
     const importFromGist = () => {
       this.gistHandler.loadFromGist({ gist: '' }, globalRegistry.get('filemanager').api)

apps/remix-ide/src/app/ui/landing-page/workspace.js

-export class Workspace {
-  constructor (title, description, isMain, activate, deactivate) {
-    this.title = title
-    this.description = description
-    this.isMain = isMain
-    this.activate = activate
-    this.deactivate = deactivate
-  }
-}
-
-export const defaultWorkspaces = (appManager) => {
-  return [
-    new Workspace(
-      'Solidity',
-      'Writing smart contracts. It is used for implementing smart contracts on various blockchain platforms',
-      true,
-      () => {
-        appManager.ensureActivated('solidity')
-        appManager.ensureActivated('udapp')
-        appManager.ensureActivated('solidityStaticAnalysis')
-        appManager.ensureActivated('solidityUnitTesting')
-      }, () => {}),
-    new Workspace(
-      'Vyper',
-      'Vyper is a contract-oriented, pythonic programming language that targets the Ethereum Virtual Machine (EVM)',
-      true,
-      () => {
-        appManager.ensureActivated('vyper')
-        appManager.ensureActivated('udapp')
-      }, () => {}),
-    new Workspace(
-      'Lexon',
-      'Lexon is a language modelling legal contracts that compiles down to ethereum smart contracts',
-      true,
-      () => {
-        appManager.ensureActivated('lexon')
-        appManager.ensureActivated('udapp')
-      }, () => {}),
-    new Workspace('Debugger', 'Debug transactions with remix', false, () => {
-      appManager.ensureActivated('debugger')
-    }, () => {}),
-    new Workspace('Pipeline', '', false, () => {
-      appManager.ensureActivated('solidity')
-      appManager.ensureActivated('pipeline')
-      appManager.ensureActivated('udapp')
-    })
-  ]
-}

apps/remix-ide/src/remixAppManager.js

@@ -70,13 +70,6 @@ export class RemixAppManager extends PluginManager {
     this.event.emit('deactivate', plugin)
   }
 
-  onRegistration () {}
-
-  async ensureActivated (apiName) {
-    await this.activatePlugin(apiName)
-    this.event.emit('ensureActivated', apiName)
-  }
-
   async ensureDeactivated (apiName) {
     await this.deactivatePlugin(apiName)
     this.event.emit('ensureDeactivated', apiName)