- refactored file explorer and file panel

- fixed bug for empty file during create gist

- landing page restyleing

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
@@ -31,6 +63,8 @@ function fileExplorer (localRegistry, files) {
     fileManager: self._components.registry.get('filemanager').api
   }
 
+  self._components.registry.put(`fileexplorer${files.type}`, this)
+
   // warn if file changed outside of Remix
   function remixdDialog () {
     return yo`<div>This file has been changed outside of Remix IDE.</div>`
@@ -122,13 +156,19 @@ function fileExplorer (localRegistry, files) {
     },
     formatSelf: function formatSelf (key, data, li) {
       var isRoot = data.path === self.files.type
-      return yo`<label
-        class=${css.label}
-        data-path="${data.path}"
-        style="${isRoot ? 'font-weight:bold;' : ''}"
-        onkeydown=${editModeOff}
-        onblur=${editModeOff}
-      >${key.split('/').pop()}</label>`
+      return yo`
+        <div class="${css.items}">
+          <label
+            class=${css.label}
+            data-path="${data.path}"
+            style="${isRoot ? 'font-weight:bold;' : ''}"
+            onkeydown=${editModeOff}
+            onblur=${editModeOff}
+          >${key.split('/').pop()}
+          </label>
+          ${isRoot ? self.renderMenuItems() : ''}
+        </div>
+      `
     }
   })
 
@@ -276,6 +316,217 @@ fileExplorer.prototype.init = function () {
   return this.container
 }
 
+fileExplorer.prototype.publishToGist = function (fileProviderName) {
+  modalDialogCustom.confirm(
+    null,
+    'Are you sure you want to publish all your files anonymously as a public gist on github.com?',
+    () => { this.toGist(fileProviderName) }
+  )
+}
+
+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}">
+            <input type="file" onchange=${(event) => {
+              this.uploadFile(event)
+            }} multiple />
+          </label>
+        `
+      } else {
+        return yo`
+        <span onclick=${() => { 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,26 +1,13 @@
-/* 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'
 
-var canUpload = window.File || window.FileReader || window.FileList || window.Blob
-
 /*
   Overview of APIs:
    * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor
@@ -77,28 +64,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>
@@ -167,182 +133,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 () {
-    return {
-      name: 'fileExplorers',
-      displayName: 'file explorers',
-      methods: [],
-      events: [],
-      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjk2IDM4NHE0MCAwIDY4IDI4dDI4IDY4djEyMTZxMCA0MC0yOCA2OHQtNjggMjhoLTk2MHEtNDAgMC02OC0yOHQtMjgtNjh2LTI4OGgtNTQ0cS00MCAwLTY4LTI4dC0yOC02OHYtNjcycTAtNDAgMjAtODh0NDgtNzZsNDA4LTQwOHEyOC0yOCA3Ni00OHQ4OC0yMGg0MTZxNDAgMCA2OCAyOHQyOCA2OHYzMjhxNjgtNDAgMTI4LTQwaDQxNnptLTU0NCAyMTNsLTI5OSAyOTloMjk5di0yOTl6bS02NDAtMzg0bC0yOTkgMjk5aDI5OXYtMjk5em0xOTYgNjQ3bDMxNi0zMTZ2LTQxNmgtMzg0djQxNnEwIDQwLTI4IDY4dC02OCAyOGgtNDE2djY0MGg1MTJ2LTI1NnEwLTQwIDIwLTg4dDQ4LTc2em05NTYgODA0di0xMTUyaC0zODR2NDE2cTAgNDAtMjggNjh0LTY4IDI4aC00MTZ2NjQwaDg5NnoiLz48L3N2Zz4=',
-      description: ' - ',
-      kind: 'fileexplorer'
-    }
   }
 }
 
-// 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 (selectContractNames.children.length > 0 && selectContractNames.selectedIndex >= 0) {
-      var contract = this.data.contractsDetails[selectContractNames.children[selectContractNames.selectedIndex].innerHTML]
+    if (this.selectedContract) {
+      var contract = this.data.contractsDetails[this.selectedContract]
       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])
+}