Merge pull request #1764 from ethereum/swap_it_fileExplorer_ref

refactored file explorer

package.json

@@ -177,7 +177,7 @@
     "remixd": "remixd -s ./contracts --remix-ide http://127.0.0.1:8080",
     "selenium": "execr --silent selenium-standalone start",
     "selenium-install": "selenium-standalone install",
-    "serve": "execr --silent http-server .",
+    "serve": "http-server .",
     "serve_debugger": "execr --silent http-server src/app/debugger/remix-debugger",
     "sourcemap": "exorcist --root ../ build/app.js.map > build/app.js",
     "start": "npm-run-all -lpr serve watch onchange remixd",

src/app/files/file-explorer.js

@@ -1,19 +1,22 @@
+/* global FileReader */
+var async = require('async')
+var Gists = require('gists')
+var modalDialogCustom = require('../ui/modal-dialog-custom')
+var tooltip = require('../ui/tooltip')
+var QueryParams = require('../../lib/query-params')
+var helper = require('../../lib/helper')
 var yo = require('yo-yo')
 var Treeview = require('../ui/TreeView')
 var modalDialog = require('../ui/modaldialog')
-var modalDialogCustom = require('../ui/modal-dialog-custom')
 var EventManager = require('../../lib/events')
 var contextMenu = require('../ui/contextMenu')
 var addTooltip = require('../ui/tooltip')
-var helper = require('../../lib/helper')
-
 var css = require('./styles/file-explorer-styles')
-
 var globalRegistry = require('../../global/registry')
-
+var queryParams = new QueryParams()
 let MENU_HANDLE
 
-function fileExplorer (localRegistry, files) {
+function fileExplorer (localRegistry, files, menuItems) {
   var self = this
   this.events = new EventManager()
   // file provider backend
@@ -22,6 +25,35 @@ function fileExplorer (localRegistry, files) {
   this.focusElement = null
   // path currently focused on
   this.focusPath = null
+  let allItems =
+    [
+      { action: 'createNewFile',
+        title: 'Create New File in the Browser Storage Explorer',
+        icon: 'fa fa-plus-circle'
+      },
+      { action: 'publishToGist',
+        title: 'Publish all [browser] explorer files to a github gist',
+        icon: 'fa fa-github'
+      },
+      { action: 'copyFiles',
+        title: 'Copy all files to another instance of Remix IDE',
+        icon: 'fa fa-files-o'
+      },
+      { action: 'uploadFile',
+        title: 'Add Local file to the Browser Storage Explorer',
+        icon: 'fa fa-folder-open'
+      },
+      { action: 'updateGist',
+        title: 'Update the current [gist] explorer',
+        icon: 'fa fa-github'
+      }
+    ]
+  // menu items
+  this.menuItems = allItems.filter(
+    (item) => {
+      if (menuItems) return menuItems.find((name) => { return name === item.action })
+    }
+  )
 
   self._components = {}
   self._components.registry = localRegistry || globalRegistry
@@ -122,13 +154,19 @@ function fileExplorer (localRegistry, files) {
     },
     formatSelf: function formatSelf (key, data, li) {
       var isRoot = data.path === self.files.type
-      return yo`<label
+      return yo`
-        class=${css.label}
+        <div class="${css.items}">
-        data-path="${data.path}"
+          <label
-        style="${isRoot ? 'font-weight:bold;' : ''}"
+            class=${css.label}
-        onkeydown=${editModeOff}
+            data-path="${data.path}"
-        onblur=${editModeOff}
+            style="${isRoot ? 'font-weight:bold;' : ''}"
-      >${key.split('/').pop()}</label>`
+            onkeydown=${editModeOff}
+            onblur=${editModeOff}
+          >${key.split('/').pop()}
+          </label>
+          ${isRoot ? self.renderMenuItems() : ''}
+        </div>
+      `
     }
   })
 
@@ -276,6 +314,218 @@ fileExplorer.prototype.init = function () {
   return this.container
 }
 
+fileExplorer.prototype.publishToGist = function () {
+  modalDialogCustom.confirm(
+    null,
+    'Are you sure you want to publish all your files anonymously as a public gist on github.com?',
+    () => { this.toGist() }
+  )
+}
+
+fileExplorer.prototype.uploadFile = function (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.
+
+  let self = this
+
+  ;[...event.target.files].forEach((file) => {
+    let files = this.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.events.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() })
+      }
+    })
+  })
+}
+
+fileExplorer.prototype.toGist = function (id) {
+  let proccedResult = function (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'))
+      }
+    }
+  }
+
+  this.packageFiles(this.files, (error, packaged) => {
+    if (error) {
+      console.log(error)
+      modalDialogCustom.alert('Failed to create gist: ' + error)
+    } else {
+      var tokenAccess = this._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 to create one.'
+        )
+      } 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) => {
+            proccedResult(error, result)
+          })
+        } else {
+          tooltip('Creating a new gist ...')
+          gists.create({
+            description: description,
+            public: true,
+            files: packaged
+          }, (error, result) => {
+            proccedResult(error, result)
+          })
+        }
+      }
+    }
+  })
+}
+
+// return all the files, except the temporary/readonly ones..
+fileExplorer.prototype.packageFiles = function (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 (/^\s+$/.test(content)) {
+            content = '// this line is added to create a gist. Empty file is not allowed.'
+          }
+          if (error) cb(error)
+          else {
+            ret[path] = { content }
+            cb()
+          }
+        })
+      }, (error) => {
+        callback(error, ret)
+      })
+    }
+  })
+}
+
+// ------------------ copy files --------------
+fileExplorer.prototype.copyFiles = function () {
+  let self = this
+  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.
+    self.packageFiles(self.files, (error, packaged) => {
+      if (error) {
+        console.log(error)
+      } else {
+        let iframe = yo`
+          <iframe src=${target} style='display:none;'></iframe>
+        `
+        iframe.onload = function () {
+          iframe.contentWindow.postMessage(['loadFiles', packaged], '*')
+          tooltip('Files copied successfully.')
+        }
+        document.querySelector('body').appendChild(iframe)
+      }
+    })
+  }
+}
+
+// ------------------ gist publish --------------
+fileExplorer.prototype.updateGist = function () {
+  var gistId = this.files.id
+  if (!gistId) {
+    tooltip('no gist content is currently loaded.')
+  } else {
+    this.toGist(gistId)
+  }
+}
+
+fileExplorer.prototype.createNewFile = function () {
+  let self = this
+  modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
+    helper.createNonClashingName(input, self.files, (error, newName) => {
+      if (error) return modalDialogCustom.alert('Failed to create file ' + newName + ' ' + error)
+      if (!self.files.set(newName, '')) {
+        modalDialogCustom.alert('Failed to create file ' + newName)
+      } else {
+        var file = self.files.type + '/' + newName
+        self._deps.fileManager.switchFile(file)
+        if (file.includes('_test.sol')) {
+          self.event.trigger('newTestFileCreated', [file])
+        }
+      }
+    })
+  }, null, true)
+}
+
+fileExplorer.prototype.renderMenuItems = function () {
+  let items = ''
+  if (this.menuItems) {
+    items = this.menuItems.map(({action, title, icon}) => {
+      if (action === 'uploadFile') {
+        return yo`
+          <label class="${icon} ${css.newFile}">
+            <input type="file" onchange=${(event) => {
+              event.stopPropagation()
+              this.uploadFile(event)
+            }} multiple />
+          </label>
+        `
+      } else {
+        return yo`
+        <span onclick=${(event) => { event.stopPropagation(); this[ action ]() }} class="newFile ${css.newFile}" title=${title}>
+          <i class=${icon}></i>
+        </span>
+        `
+      }
+    })
+  }
+  return yo`<span class=${css.menu}>${items}</span>`
+}
+
 fileExplorer.prototype.ensureRoot = function (cb) {
   cb = cb || (() => {})
   var self = this

src/app/files/styles/file-explorer-styles.js

@@ -16,6 +16,22 @@ var css = csjs`
     cursor            : pointer;
   }
   .file               {
+    padding           : 4px;
+  }
+  .newFile            {
+    padding           : 4px;
+  }
+  .newFile i          {
+    cursor            : pointer;
+  }
+  .newFile i:hover    {
+    color             : var(--secondary)
+  }
+  .menu               {
+    margin-left       : 20px;
+  }
+  .items              {
+    display           : inline
   }
   .hasFocus           {
   }

src/app/panels/file-panel.js

@@ -1,20 +1,9 @@
-/* global FileReader */
-var async = require('async')
-var $ = require('jquery')
 var yo = require('yo-yo')
 var CompilerMetadata = require('../files/compiler-metadata')
 var EventManager = require('../../lib/events')
-var Gists = require('gists')
 var FileExplorer = require('../files/file-explorer')
-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 css = require('./styles/file-panel-styles')
 
 import { ApiFactory } from 'remix-plugin'
@@ -51,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(
@@ -77,28 +69,7 @@ module.exports = class Filepanel extends ApiFactory {
     function template () {
       return yo`
         <div class=${css.container}>
-          <div class="${css.fileexplorer}">
+          <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>
               <div class=${css.treeview}>${fileExplorer.init()}</div>
               <div class="configexplorer ${css.treeview}">${configExplorer.init()}</div>
@@ -167,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 () {
@@ -325,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/panels/styles/file-panel-styles.js

@@ -14,22 +14,6 @@ var css = csjs`
     position          : relative;
     width             : 100%;
   }
-  .menu               {
-    margin-top        : -0.2em;
-    flex-shrink       : 0;
-    display           : flex;
-    flex-direction    : row;
-    min-width         : 160px;
-  }
-  .newFile            {
-    padding           : 10px;
-  }
-  .newFile i          {
-    cursor            : pointer;
-  }
-  .newFile i:hover    {
-    color             : var(--secondary)
-  }
   .gist            {
     padding           : 10px;
   }

src/app/tabs/compile-tab.js

@@ -208,9 +208,8 @@ class CompileTab extends ApiFactory {
   }
 
   publish () {
-    const selectContractNames = this._view.contractNames
+    if (this.selectedContract) {
-    if (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
+      var contract = this.data.contractsDetails[this.selectedContract]
-      var contract = this.data.contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
       if (contract.metadata === undefined || contract.metadata.length === 0) {
         modalDialogCustom.alert('This contract may be abstract, may not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
       } else {

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

@@ -0,0 +1,78 @@
+/* global */
+import LandingPage from './landing-page'
+import Section from './section'
+import { defaultWorkspaces } from './workspace'
+// var globalRegistry = require('../../../global/registry')
+
+export function homepageProfile () {
+  return {
+    displayName: 'Home',
+    name: 'home',
+    methods: [],
+    events: [],
+    description: ' - ',
+    icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
+    prefferedLocation: 'mainPanel'
+  }
+}
+
+export function generateHomePage (appManager, appStore) {
+ /* 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: '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`}
+  ]
+
+  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 a plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a`}
+  ]
+
+  var actions5 = [
+    {label: 'Gitter channel', type: `link`, payload: `https://gitter.im/ethereum/remix`},
+    {label: 'Stack Overflow', type: `link`, payload: `https://stackoverflow.com/questions/tagged/remix`},
+    {label: 'Reddit', type: `link`, payload: `https://www.reddit.com/r/ethdev/search?q=remix&restrict_sr=1`}
+  ]
+
+  // 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',
+    payload: () => {
+      appStore.getActives()
+      .filter(({profile}) => !profile.required)
+      .forEach((profile) => { appManager.deactivateOne(profile.name) })
+    }})
+  defaultWorkspaces(appManager).forEach((workspace) => {
+    sectionsWorkspaces.push({
+      label: workspace.title,
+      type: 'callback',
+      payload: () => { workspace.activate() }
+    })
+  })
+  var sectionWorkspace = new Section('Workspaces', sectionsWorkspaces)
+
+  return new LandingPage([sectionWorkspace, /* sectionStart, */sectionLearn, sectionPlugins, sectionHelp])
+}