remixd as a module

src/app.js

@@ -474,7 +474,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     { profile: run.profile(), api: run },
     { profile: debug.profile(), api: debug },
     { profile: analysis.profile(), api: analysis },
-    { profile: test.profile(), api: test }
+    { profile: test.profile(), api: test },
+    { profile: filePanel.remixdHandle.profile(), api: filePanel.remixdHandle }
   ])
   appManager.registerMany(appManager.plugins())
 

src/app/files/remixd-handle.js

@@ -0,0 +1,87 @@
+var yo = require('yo-yo')
+var modalDialog = require('../ui/modaldialog')
+
+var csjs = require('csjs-inject')
+var styleGuide = require('../ui/styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .dialog {
+    display: flex;
+    flex-direction: column;
+  }
+  .dialogParagraph {
+    ${styles.infoTextBox}
+    margin-bottom: 2em;
+    word-break: break-word;
+  }
+`
+
+export class RemixdHandle {
+  constructor (fileSystemExplorer, locahostProvider) {
+    this.fileSystemExplorer = fileSystemExplorer
+    this.locahostProvider = locahostProvider
+  }
+
+  profile () {
+    return {
+      name: 'remixd',
+      methods: [],
+      events: [],
+      description: 'using Remixd daemon, allow to access file system',
+      kind: 'other'
+    }
+  }
+
+  deactivate () {
+    this.locahostProvider.close((error) => {
+      if (error) console.log(error)
+    })
+  }
+
+  activate () {
+    this.connectToLocalhost()
+  }
+
+   /**
+    * connect to localhost if no connection and render the explorer
+    * disconnect from localhost if connected and remove the explorer
+    *
+    * @param {String} txHash    - hash of the transaction
+    */
+  connectToLocalhost () {
+    if (this.locahostProvider.isConnected()) {
+      this.locahostProvider.close((error) => {
+        if (error) console.log(error)
+      })
+    } else {
+      modalDialog('Connect to localhost', remixdDialog(),
+        { label: 'Connect',
+          fn: () => {
+            this.locahostProvider.init((error) => {
+              if (error) {
+                console.log(error)
+              } else {
+                this.fileSystemExplorer.ensureRoot()
+              }
+            })
+          }})
+    }
+  }
+}
+
+function remixdDialog () {
+  return yo`
+    <div class=${css.dialog}>
+      <div class=${css.dialogParagraph}>Interact with your file system from Remix. Click connect and find shared folder in the Remix file explorer (under localhost).
+        Before you get started, check out <a target="_blank" href="https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">Tutorial_remixd_filesystem</a>
+        to find out how to run Remixd.
+      </div>
+      <div class=${css.dialogParagraph}>Connection will start a session between <em>${window.location.href}</em> and your local file system <i>ws://127.0.0.1:65520</i>
+        so please make sure your system is secured enough (port 65520 neither opened nor forwarded).
+        <i class="fa fa-link"></i> will show you current connection status.
+      </div>
+      <div class=${css.dialogParagraph}>This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.</div>
+    </div>
+  `
+}

src/app/panels/file-panel.js

@@ -6,18 +6,15 @@ var CompilerMetadata = require('../files/compiler-metadata')
 var EventManager = require('../../lib/events')
 var Gists = require('gists')
 var FileExplorer = require('../files/file-explorer')
-var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
 var tooltip = require('../ui/tooltip')
 var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 var helper = require('../../lib/helper')
+var { RemixdHandle } = require('../files/remixd-handle.js')
 
 var globalRegistry = require('../../global/registry')
 
-var styleGuide = require('../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
 var css = require('./styles/file-panel-styles')
 
 var canUpload = window.File || window.FileReader || window.FileList || window.Blob
@@ -58,6 +55,8 @@ function filepanel (localRegistry) {
   var httpExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['http'])
   var httpsExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['https'])
 
+  self.remixdHandle = new RemixdHandle(fileSystemExplorer, self._deps.fileProviders['localhost'])
+
   // ----------------- editor panel ----------------------
   self._compilerMetadata = new CompilerMetadata(
     {
@@ -70,22 +69,6 @@ function filepanel (localRegistry) {
 
   self.compilerMetadata = () => { return self._compilerMetadata }
 
-  function remixdDialog () {
-    return yo`
-      <div class=${css.dialog}>
-        <div class=${css.dialogParagraph}>Interact with your file system from Remix. Click connect and find shared folder in the Remix file explorer (under localhost).
-          Before you get started, check out <a target="_blank" href="https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">Tutorial_remixd_filesystem</a>
-          to find out how to run Remixd.
-        </div>
-        <div class=${css.dialogParagraph}>Connection will start a session between <em>${window.location.href}</em> and your local file system <i>ws://127.0.0.1:65520</i>
-          so please make sure your system is secured enough (port 65520 neither opened nor forwarded).
-          <i class="fa fa-link"></i> will show you current connection status.
-        </div>
-        <div class=${css.dialogParagraph}>This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.</div>
-      </div>
-    `
-  }
-
   function template () {
     return yo`
       <div class=${css.container}>
@@ -110,9 +93,6 @@ function filepanel (localRegistry) {
             <span class="${css.copyFiles}" title="Copy all files to another instance of Remix IDE" onclick=${copyFiles}>
               <i class="fa fa-files-o" aria-hidden="true"></i>
             </span>
-            <span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
-              <i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
-            </span>
           </div>
           <div class=${css.treeviews}>
             <div class=${css.treeview}>${fileExplorer.init()}</div>
@@ -134,27 +114,22 @@ function filepanel (localRegistry) {
   var element = template()
   fileExplorer.ensureRoot()
   configExplorer.ensureRoot()
-  var websocketconn = element.querySelector('.websocketconn')
   self._deps.fileProviders['localhost'].event.register('connecting', (event) => {
-    websocketconn.style.color = styles.colors.yellow
-    websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event))
+    tooltip('Connecting to localhost. ' + JSON.stringify(event))
   })
 
   self._deps.fileProviders['localhost'].event.register('connected', (event) => {
-    websocketconn.style.color = styles.colors.green
-    websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
+    tooltip('Connected to localhost. ' + JSON.stringify(event))
     fileSystemExplorer.show()
   })
 
   self._deps.fileProviders['localhost'].event.register('errored', (event) => {
-    websocketconn.style.color = styles.colors.red
-    websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
+    tooltip('localhost connection errored. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 
   self._deps.fileProviders['localhost'].event.register('closed', (event) => {
-    websocketconn.style.color = styles.colors.black
-    websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
+    tooltip('localhost connection closed. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 
@@ -254,32 +229,6 @@ function filepanel (localRegistry) {
     }, null, true)
   }
 
-  /**
-    * connect to localhost if no connection and render the explorer
-    * disconnect from localhost if connected and remove the explorer
-    *
-    * @param {String} txHash    - hash of the transaction
-    */
-  function connectToLocalhost () {
-    if (self._deps.fileProviders['localhost'].isConnected()) {
-      self._deps.fileProviders['localhost'].close((error) => {
-        if (error) console.log(error)
-      })
-    } else {
-      modalDialog('Connect to localhost', remixdDialog(),
-        { label: 'Connect',
-          fn: () => {
-            self._deps.fileProviders['localhost'].init((error) => {
-              if (error) {
-                console.log(error)
-              } else {
-                fileSystemExplorer.ensureRoot()
-              }
-            })
-          }})
-    }
-  }
-
   // ------------------ gist publish --------------
 
   function updateGist () {