Merge branch 'swap_it_fileExplorer_ref' of https://github.com/ethereum/remix-ide…

src/app/panels/file-panel.js

@@ -40,16 +40,19 @@ module.exports = class Filepanel extends ApiFactory {
       config: self._components.registry.get('config').api,
       pluginManager: self._components.registry.get('pluginmanager').api
     }
-    var fileExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['browser'])
+    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'])
+    var gistExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['gist'], ['updateGist'])
     var configExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['config'])
     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'])
+    self.remixdHandle = new RemixdHandle(fileSystemExplorer, self._deps.fileProviders['localhost'],
+      self._deps.fileProviders['localhost'].isReadOnly ? ['createNewFile'] : [])
 
     // ----------------- editor panel ----------------------
     self._compilerMetadata = new CompilerMetadata(
@@ -66,28 +69,7 @@ module.exports = class Filepanel extends ApiFactory {
     function template () {
       return yo`
         <div class=${css.container}>
-          <div class="${css.fileexplorer}">
-            <div class=${css.menu}>
-              <span onclick=${createNewFile} class="newFile ${css.newFile}" title="Create New File in the Browser Storage Explorer">
-                <i class="fa fa-plus-circle"></i>
-              </span>
-              ${canUpload ? yo`
-                <span class=${css.uploadFile} title="Add Local file to the Browser Storage Explorer">
-                  <label class="fa fa-folder-open">
-                    <input type="file" onchange=${uploadFile} multiple />
-                  </label>
-                </span>
-              ` : ''}
-              <span class="${css.gist}" title="Publish all [browser] explorer files to a github gist" onclick=${() => publishToGist('browser')}>
-                <i class="fa fa-github"></i>
-              </span>
-              <span class="${css.gist}" title="Update the current [gist] explorer" onclick=${() => updateGist()}>
-                <i class="fa fa-github"></i>
-              </span>
-              <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>
-            </div>
+          <div class="${css.fileexplorer}">           
             <div>
               <div class=${css.treeview}>${fileExplorer.init()}</div>
               <div class="configexplorer ${css.treeview}">${configExplorer.init()}</div>
@@ -156,149 +138,6 @@ module.exports = class Filepanel extends ApiFactory {
     })
 
     self.render = function render () { return element }
-
-    function uploadFile (event) {
-      // TODO The file explorer is merely a view on the current state of
-      // the files module. Please ask the user here if they want to overwrite
-      // a file and then just use `files.add`. The file explorer will
-      // pick that up via the 'fileAdded' event from the files module.
-
-      ;[...this.files].forEach((file) => {
-        var files = fileExplorer.files
-        function loadFile () {
-          var fileReader = new FileReader()
-          fileReader.onload = function (event) {
-            if (helper.checkSpecialChars(file.name)) {
-              modalDialogCustom.alert('Special characters are not allowed')
-              return
-            }
-            var success = files.set(name, event.target.result)
-            if (!success) modalDialogCustom.alert('Failed to create file ' + name)
-            else self.event.trigger('focus', [name])
-          }
-          fileReader.readAsText(file)
-        }
-
-        var name = files.type + '/' + file.name
-        files.exists(name, (error, exist) => {
-          if (error) console.log(error)
-          if (!exist) {
-            loadFile()
-          } else {
-            modalDialogCustom.confirm(null, `The file ${name} already exists! Would you like to overwrite it?`, () => { loadFile() })
-          }
-        })
-      })
-    }
-
-    function createNewFile () {
-      modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
-        helper.createNonClashingName(input, self._deps.fileProviders['browser'], (error, newName) => {
-          if (error) return modalDialogCustom.alert('Failed to create file ' + newName + ' ' + error)
-          if (!self._deps.fileProviders['browser'].set(newName, '')) {
-            modalDialogCustom.alert('Failed to create file ' + newName)
-          } else {
-            var file = self._deps.fileProviders['browser'].type + '/' + newName
-            self._deps.fileManager.switchFile(file)
-            if (file.includes('_test.sol')) {
-              self.event.trigger('newTestFileCreated', [file])
-            }
-          }
-        })
-      }, null, true)
-    }
-
-    // ------------------ gist publish --------------
-
-    function updateGist () {
-      var gistId = self._deps.fileProviders['gist'].id
-      if (!gistId) {
-        tooltip('no gist content is currently loaded.')
-      } else {
-        toGist('gist', gistId)
-      }
-    }
-
-    function publishToGist (fileProviderName) {
-      modalDialogCustom.confirm(null, 'Are you very sure you want to publish all your files anonymously as a public gist on github.com?', () => {
-        toGist(fileProviderName)
-      })
-    }
-
-    function toGist (fileProviderName, id) {
-      packageFiles(self._deps.fileProviders[fileProviderName], (error, packaged) => {
-        if (error) {
-          console.log(error)
-          modalDialogCustom.alert('Failed to create gist: ' + error)
-        } else {
-          var tokenAccess = self._deps.config.get('settings/gist-access-token')
-          if (!tokenAccess) {
-            modalDialogCustom.alert('Remix requires an access token (which includes gists creation permission). Please go to the settings tab for more information.')
-          } else {
-            var description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
-            var gists = new Gists({
-              token: tokenAccess
-            })
-            if (id) {
-              tooltip('Saving gist (' + id + ') ...')
-              gists.edit({
-                description: description,
-                public: true,
-                files: packaged,
-                id: id
-              }, (error, result) => {
-                cb(error, result)
-              })
-            } else {
-              tooltip('Creating a new gist ...')
-              gists.create({
-                description: description,
-                public: true,
-                files: packaged
-              }, (error, result) => {
-                cb(error, result)
-              })
-            }
-          }
-        }
-      })
-    }
-
-    function cb (error, data) {
-      if (error) {
-        modalDialogCustom.alert('Failed to manage gist: ' + error)
-      } else {
-        if (data.html_url) {
-          modalDialogCustom.confirm(null, `The gist is at ${data.html_url}. Would you like to open it in a new window?`, () => {
-            window.open(data.html_url, '_blank')
-          })
-        } else {
-          modalDialogCustom.alert(data.message + ' ' + data.documentation_url + ' ' + JSON.stringify(data.errors, null, '\t'))
-        }
-      }
-    }
-
-    // ------------------ copy files --------------
-
-    function copyFiles () {
-      modalDialogCustom.prompt(null, 'To which other remix-ide instance do you want to copy over all files?', 'https://remix.ethereum.org', (target) => {
-        doCopy(target)
-      })
-      function doCopy (target) {
-        // package only files from the browser storage.
-        packageFiles(self._deps.fileProviders['browser'], (error, packaged) => {
-          if (error) {
-            console.log(error)
-          } else {
-            $('<iframe/>', {
-              src: target,
-              style: 'display:none;',
-              load: function () { this.contentWindow.postMessage(['loadFiles', packaged], '*') }
-            }).appendTo('body')
-          }
-        })
-      }
-    }
   }
 
   get profile () {
@@ -314,24 +153,3 @@ module.exports = class Filepanel extends ApiFactory {
   }
 }
 
-// return all the files, except the temporary/readonly ones..
-function packageFiles (filesProvider, callback) {
-  var ret = {}
-  filesProvider.resolveDirectory(filesProvider.type, (error, files) => {
-    if (error) callback(error)
-    else {
-      async.eachSeries(Object.keys(files), (path, cb) => {
-        filesProvider.get(path, (error, content) => {
-          if (error) cb(error)
-          else {
-            ret[path] = { content }
-            cb()
-          }
-        })
-      }, (error) => {
-        callback(error, ret)
-      })
-    }
-  })
-}
-

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

@@ -48,31 +48,33 @@ export class LandingPage extends ApiFactory {
 
   constructor (appManager, appStore) {
     super()
-    /*
-    var actions1 = [
-      {label: 'new file', type: `callback`, payload: () => { alert(`-new file created-`) }},
-      {label: 'import from GitHub', type: `callback`, payload: () => { alert(`-imported from GitHub-`) }},
-      {label: 'import from gist', type: `callback`, payload: () => { alert(`-imported from gist-`) }}
-    ]
-
-    var actions2 = [
-      {label: '...', type: `callback`, payload: () => { alert(`-...-`) }}
-    ]
+    this.sections = []
+    /* var actions1 = [
+    { label: 'New file',
+      type: 'callback',
+      payload: () => {
+        let fileManager = globalRegistry.get('fileexplorerbrowser').api
+        fileManager.creatNewFile()
+      }
+    },
+    {label: 'Import from GitHub', type: `callback`, payload: () => { this.alert(`-imported from GitHub-`) }},
+    {label: 'Import from gist', type: `callback`, payload: () => { this.alert(`-imported from gist-`) }}
+  ] */
 
     var actions3 = [
       {label: 'Remix documentation', type: `link`, payload: `https://remix.readthedocs.io/en/latest/#`},
       {label: 'GitHub repository', type: `link`, payload: `https://github.com/ethereum/remix-ide`},
-      {label: 'acces local file system (remixd)', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html`},
+      {label: 'Access local file system with remixd', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html`},
       {label: 'npm module for remixd', type: `link`, payload: `https://www.npmjs.com/package/remixd`},
-      {label: 'medium posts', type: `link`, payload: `https://medium.com/remix-ide`},
-      {label: 'tutorials', type: `link`, payload: `https://github.com/ethereum/remix-workshops`}
+      {label: 'Medium posts', type: `link`, payload: `https://medium.com/remix-ide`},
+      {label: 'Tutorials', type: `link`, payload: `https://github.com/ethereum/remix-workshops`}
     ]
 
     var actions4 = [
       {label: 'Remix plugins & modules', type: `link`, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md`},
-      {label: 'repository on GitHub', type: `link`, payload: `https://github.com/ethereum/remix-plugin`},
-      {label: 'examples', type: `link`, payload: `https://github.com/ethereum/remix-plugin/tree/master/examples`},
-      {label: 'build plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a`}
+      {label: 'Repository on GitHub', type: `link`, payload: `https://github.com/ethereum/remix-plugin`},
+      {label: 'Examples', type: `link`, payload: `https://github.com/ethereum/remix-plugin/tree/master/examples`},
+      {label: 'Build a plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a`}
     ]
 
     var actions5 = [
@@ -81,13 +83,12 @@ export class LandingPage extends ApiFactory {
       {label: 'Reddit', type: `link`, payload: `https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1`}
     ]
 
-    var section1 = new Section('Start', actions1)
-    var section2 = new Section('Recent', actions2)
-    var section3 = new Section('Learn', actions3)
-    var section4 = new Section('Plugins', actions4)
-    var section5 = new Section('Help', actions5)
-    */
-    const sectionsWorkspaces = []
+    // var sectionStart = new Section('Start', actions1)
+    var sectionLearn = new Section('Learn', actions3)
+    var sectionPlugins = new Section('Plugins', actions4)
+    var sectionHelp = new Section('Help', actions5)
+
+    var sectionsWorkspaces = []
     sectionsWorkspaces.push({
       label: 'Close All Modules',
       type: 'callback',
@@ -97,10 +98,18 @@ export class LandingPage extends ApiFactory {
         .forEach((profile) => { appManager.deactivateOne(profile.name) })
       }})
     defaultWorkspaces(appManager).forEach((workspace) => {
-      sectionsWorkspaces.push({label: workspace.title, type: 'callback', payload: () => { workspace.activate() }})
+      sectionsWorkspaces.push({
+        label: workspace.title,
+        type: 'callback',
+        payload: () => { workspace.activate() }
+      })
     })
-    const sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
-    this.sections = sectionWorkspace
+    var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
+
+    this.sections.push(sectionWorkspace)
+    this.sections.push(sectionLearn)
+    this.sections.push(sectionPlugins)
+    this.sections.push(sectionHelp)
   }
 
   get profile () {