Merge pull request #2298 from ethereum/feRef

refactored file-panel a bit

src/app.js

@@ -12,15 +12,15 @@ var { OffsetToLineColumnConverter } = require('./lib/offsetToLineColumnConverter
 var QueryParams = require('./lib/query-params')
 var GistHandler = require('./lib/gist-handler')
 var Storage = remixLib.Storage
-var Browserfiles = require('./app/files/browser-files')
-var SharedFolder = require('./app/files/shared-folder')
+var LocalStorageProvider = require('./app/files/localStorageProvider')
+var RemixDProvider = require('./app/files/remixDProvider')
 var Config = require('./config')
 var Renderer = require('./app/ui/renderer')
 var examples = require('./app/editor/example-contracts')
 var modalDialogCustom = require('./app/ui/modal-dialog-custom')
 var FileManager = require('./app/files/fileManager')
-var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
-var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
+var ReadonlyProvider = require('./app/files/readonlyProvider')
+var BasicFileProvider = require('./app/files/basicFileProvider')
 var toolTip = require('./app/ui/tooltip')
 var CompilerMetadata = require('./app/files/compiler-metadata')
 var CompilerImport = require('./app/compiler/compiler-imports')
@@ -113,7 +113,7 @@ class App {
 
     // load file system
     self._components.filesProviders = {}
-    self._components.filesProviders['browser'] = new Browserfiles(fileStorage)
+    self._components.filesProviders['browser'] = new LocalStorageProvider(fileStorage)
     registry.put({api: self._components.filesProviders['browser'], name: 'fileproviders/browser'})
 
     var remixd = new Remixd(65520)
@@ -122,13 +122,13 @@ class App {
       if (message.error) toolTip(message.error)
     })
 
-    self._components.filesProviders['localhost'] = new SharedFolder(remixd)
-    self._components.filesProviders['swarm'] = new BasicReadOnlyExplorer('swarm')
-    self._components.filesProviders['github'] = new BasicReadOnlyExplorer('github')
-    self._components.filesProviders['gist'] = new NotPersistedExplorer('gist')
-    self._components.filesProviders['ipfs'] = new BasicReadOnlyExplorer('ipfs')
-    self._components.filesProviders['https'] = new BasicReadOnlyExplorer('https')
-    self._components.filesProviders['http'] = new BasicReadOnlyExplorer('http')
+    self._components.filesProviders['localhost'] = new RemixDProvider(remixd)
+    self._components.filesProviders['swarm'] = new ReadonlyProvider('swarm')
+    self._components.filesProviders['github'] = new ReadonlyProvider('github')
+    self._components.filesProviders['gist'] = new BasicFileProvider('gist')
+    self._components.filesProviders['ipfs'] = new ReadonlyProvider('ipfs')
+    self._components.filesProviders['https'] = new ReadonlyProvider('https')
+    self._components.filesProviders['http'] = new ReadonlyProvider('http')
     registry.put({api: self._components.filesProviders['localhost'], name: 'fileproviders/localhost'})
     registry.put({api: self._components.filesProviders['swarm'], name: 'fileproviders/swarm'})
     registry.put({api: self._components.filesProviders['github'], name: 'fileproviders/github'})

src/app/files/NotPersistedExplorer.js

@@ -1,39 +0,0 @@
-'use strict'
-var ReadOnlyExplorer = require('./basicReadOnlyExplorer')
-var toolTip = require('../ui/tooltip')
-
-class NotPersistedExplorer extends ReadOnlyExplorer {
-  constructor (type) {
-    super(type)
-    this.readonly = false
-  }
-
-  remove (path) {
-    var unprefixedPath = this.removePrefix(path)
-    var folderPath = path.substring(0, path.lastIndexOf('/'))
-    if (this.paths[folderPath]) {
-      delete this.paths[folderPath][unprefixedPath]
-      delete this.files[path]
-    }
-    this.event.trigger('fileRemoved', [this.type + '/' + unprefixedPath])
-    return true
-  }
-
-  rename (oldPath, newPath, isFolder) {
-    if (isFolder) { return toolTip('folder renaming is not handled by this explorer') }
-    var unprefixedoldPath = this.removePrefix(oldPath)
-    var unprefixednewPath = this.removePrefix(newPath)
-    this.get(oldPath, (error, content) => {
-      if (error) return console.log(error)
-      this.remove(oldPath)
-      this.set(newPath, content)
-      this.event.trigger('fileRenamed', [this.type + '/' + unprefixedoldPath, this.type + '/' + unprefixednewPath, isFolder])
-    })
-  }
-
-  isReadOnly (path) {
-    return false
-  }
-}
-
-module.exports = NotPersistedExplorer

src/app/files/basicFileProvider.js

@@ -1,7 +1,8 @@
 'use strict'
-var EventManager = require('../../lib/events')
+const EventManager = require('../../lib/events')
+const toolTip = require('../ui/tooltip')
 
-class BasicReadOnlyExplorer {
+class BasicFileProvider {
   constructor (type) {
     this.event = new EventManager()
     this.files = {}
@@ -71,15 +72,31 @@ class BasicReadOnlyExplorer {
     return true
   }
 
-  isReadOnly (path) {
+  remove (path) {
+    var unprefixedPath = this.removePrefix(path)
+    var folderPath = path.substring(0, path.lastIndexOf('/'))
+    if (this.paths[folderPath]) {
+      delete this.paths[folderPath][unprefixedPath]
+      delete this.files[path]
+    }
+    this.event.trigger('fileRemoved', [this.type + '/' + unprefixedPath])
     return true
   }
 
-  remove (path) {
+  rename (oldPath, newPath, isFolder) {
+    if (isFolder) { return toolTip('folder renaming is not handled by this explorer') }
+    var unprefixedoldPath = this.removePrefix(oldPath)
+    var unprefixednewPath = this.removePrefix(newPath)
+    this.get(oldPath, (error, content) => {
+      if (error) return console.log(error)
+      this.remove(oldPath)
+      this.set(newPath, content)
+      this.event.trigger('fileRenamed', [this.type + '/' + unprefixedoldPath, this.type + '/' + unprefixednewPath, isFolder])
+    })
   }
 
-  rename (oldPath, newPath, isFolder) {
-    return true
+  isReadOnly (path) {
+    return false
   }
 
   list () {
@@ -99,4 +116,4 @@ class BasicReadOnlyExplorer {
   }
 }
 
-module.exports = BasicReadOnlyExplorer
+module.exports = BasicFileProvider

src/app/files/file-explorer.js

@@ -62,6 +62,10 @@ function fileExplorer (localRegistry, files, menuItems) {
     fileManager: self._components.registry.get('filemanager').api
   }
 
+  self.events.register('focus', function (path) {
+    self._deps.fileManager.switchFile(path)
+  })
+
   self._components.registry.put({ api: self, name: `fileexplorer/${self.files.type}` })
 
   // warn if file changed outside of Remix

src/app/files/fileManager.js

@@ -277,9 +277,9 @@ class FileManager extends Plugin {
     if (file) return _switchFile(file)
     else {
       var browserProvider = this._deps.filesProviders['browser']
-      browserProvider.resolveDirectory('browser', (error, filesTree) => {
+      browserProvider.resolveDirectory('browser', (error, filesProvider) => {
         if (error) console.error(error)
-        var fileList = Object.keys(filesTree)
+        var fileList = Object.keys(filesProvider)
         if (fileList.length) {
           _switchFile(browserProvider.type + '/' + fileList[0])
         } else {
@@ -296,9 +296,9 @@ class FileManager extends Plugin {
     return new Promise((resolve, reject) => {
       const provider = this.fileProviderOf(path)
       if (!provider) return reject(`provider for path ${path} not found`)
-      provider.resolveDirectory(path, (error, filesTree) => {
+      provider.resolveDirectory(path, (error, filesProvider) => {
         if (error) reject(error)
-        resolve(filesTree)
+        resolve(filesProvider)
       })
     })
   }

src/app/files/filePovider.js

@@ -2,7 +2,7 @@
 
 var EventManager = require('../../lib/events')
 
-class FilesTree {
+class FileProvider {
   constructor (name, storage) {
     this.event = new EventManager()
     this.storage = storage
@@ -136,4 +136,4 @@ class FilesTree {
   }
 }
 
-module.exports = FilesTree
+module.exports = FileProvider

src/app/files/fileProviderBase.js

@@ -0,0 +1,29 @@
+'use strict'
+
+class FileProvider {
+
+  exists (path, cb) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  init (cb) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  get (path, cb) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  set (path, content, cb) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  addReadOnly (path, content) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  isReadOnly (path) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  remove (path) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  rename (oldPath, newPath, isFolder) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  resolveDirectory (path, callback) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  removePrefix (path) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+  updateRefs (path, type) { throw new Error(this.name + ' function is not implemented for ' + this.constructor.name + ' class') }
+
+}
+
+module.exports = FileProvider

src/app/files/localStorageProvider.js

@@ -2,7 +2,7 @@
 
 var EventManager = require('../../lib/events')
 
-function Files (storage) {
+function LocalStorageProvider (storage) {
   var event = new EventManager()
   this.event = event
   var readonly = {}
@@ -145,4 +145,4 @@ function Files (storage) {
   }
 }
 
-module.exports = Files
+module.exports = LocalStorageProvider

src/app/files/readonlyProvider.js

@@ -0,0 +1,18 @@
+'use strict'
+let BasicFileProvider = require('./basicFileProvider')
+
+class ReadonlyProvider extends BasicFileProvider {
+
+  remove (path) {
+    return false
+  }
+
+  rename (oldPath, newPath, isFolder) {
+    return false
+  }
+
+  isReadOnly (path) {
+    return true
+  }
+}
+module.exports = ReadonlyProvider

src/app/files/remixDProvider.js

@@ -2,7 +2,7 @@
 var EventManager = require('../../lib/events')
 var pathtool = require('path')
 
-module.exports = class SharedFolder {
+module.exports = class RemixDProvider {
   constructor (remixd) {
     this.event = new EventManager()
     this._remixd = remixd

src/app/files/remixd-handle.js

@@ -21,7 +21,7 @@ const profile = {
   name: 'remixd',
   methods: [],
   events: [],
-  description: 'using Remixd daemon, allow to access file system',
+  description: 'Using Remixd daemon, allow to access file system',
   kind: 'other',
   version: packageJson.version
 }

src/app/panels/file-panel.js

@@ -55,29 +55,40 @@ module.exports = class Filepanel extends ViewPlugin {
     var fileExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['browser'],
       ['createNewFile', 'publishToGist', 'copyFiles', canUpload ? 'uploadFile' : '']
     )
-    var fileSystemExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['localhost'])
-    var swarmExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['swarm'])
-    var githubExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['github'])
-    var gistExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['gist'], ['updateGist'])
-    var httpExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['http'])
-    var httpsExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['https'])
-    var ipfsExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['ipfs'])
+
+    function createProvider (key, menuItems) {
+      return new FileExplorer(self._components.registry, self._deps.fileProviders[key], menuItems)
+    }
+
+    var fileSystemExplorer = createProvider('localhost')
+    var swarmExplorer = createProvider('swarm')
+    var githubExplorer = createProvider('github')
+    var gistExplorer = createProvider('gist', ['updateGist'])
+    var httpExplorer = createProvider('http')
+    var httpsExplorer = createProvider('https')
+    var ipfsExplorer = createProvider('ipfs')
 
     self.remixdHandle = new RemixdHandle(fileSystemExplorer, self._deps.fileProviders['localhost'], appManager)
 
+    const explorers = yo`
+      <div>
+        <div class=${css.treeview}>${fileExplorer.init()}</div>
+        <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
+        <div class="swarmexplorer ${css.treeview}">${swarmExplorer.init()}</div>
+        <div class="githubexplorer ${css.treeview}">${githubExplorer.init()}</div>
+        <div class="gistexplorer ${css.treeview}">${gistExplorer.init()}</div>
+        <div class="httpexplorer ${css.treeview}">${httpExplorer.init()}</div>
+        <div class="httpsexplorer ${css.treeview}">${httpsExplorer.init()}</div>
+        <div class="ipfsexplorer ${css.treeview}">${ipfsExplorer.init()}</div>
+      </div>
+    `
+
     function template () {
       return yo`
         <div class=${css.container}>
           <div class="${css.fileexplorer}">           
             <div class="${css.fileExplorerTree}">
-              <div class=${css.treeview}>${fileExplorer.init()}</div>
-              <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
-              <div class="swarmexplorer ${css.treeview}">${swarmExplorer.init()}</div>
-              <div class="githubexplorer ${css.treeview}">${githubExplorer.init()}</div>
-              <div class="gistexplorer ${css.treeview}">${gistExplorer.init()}</div>
-              <div class="httpexplorer ${css.treeview}">${httpExplorer.init()}</div>
-              <div class="httpsexplorer ${css.treeview}">${httpsExplorer.init()}</div>
-              <div class="httpsexplorer ${css.treeview}">${ipfsExplorer.init()}</div>
+              ${explorers}
             </div>
           </div>
         </div>
@@ -103,38 +114,6 @@ module.exports = class Filepanel extends ViewPlugin {
       fileSystemExplorer.hide()
     })
 
-    fileExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    fileSystemExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    swarmExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    githubExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    gistExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    httpExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    httpsExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
-    ipfsExplorer.events.register('focus', function (path) {
-      self._deps.fileManager.switchFile(path)
-    })
-
     self.render = function render () { return element }
   }
 }

src/app/tabs/compile-tab.js

@@ -232,7 +232,6 @@ class CompileTab extends ViewPlugin {
         <label class="border-0 input-group-text" for="compiledContracts">Contract</label>
         ${selectEl}
       </div>
-        
       <article class="${css.compilerArticle}">
         <button class="btn btn-secondary btn-block" title="Publish on Swarm" onclick="${() => { this.publish('swarm') }}">
           <span>Publish on Swarm</span>