diff --git a/src/app/files/chromeCloudStorageSync.js b/src/app/files/chromeCloudStorageSync.js
index 5875b0ff25..e12acb5e09 100644
--- a/src/app/files/chromeCloudStorageSync.js
+++ b/src/app/files/chromeCloudStorageSync.js
@@ -46,16 +46,19 @@ module.exports = function (filesProviders) {
     })
   }
 
-  for (var y in filesProviders['browser'].list()) {
-    console.log('checking', y)
-    filesProviders['browser'].get(y, (error, content) => {
-      if (error) {
-        console.log(error)
-      } else {
-        obj[y] = content
-        count++
-        check(y)
-      }
-    })
-  }
+  filesProviders['browser'].resolve('browser', (error, files) => {
+    if (!error) {
+      Object.keys(files).forEach((path) => {
+        filesProviders['browser'].get(path, (error, content) => {
+          if (error) {
+            console.log(error)
+          } else {
+            obj[path] = content
+            count++
+            check(path)
+          }
+        })
+      })
+    }
+  })
 }
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index e7eb5cee01..770e626ff8 100644
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -228,14 +228,23 @@ function fileExplorer (appAPI, files) {
   }
 }
 
+fileExplorer.prototype.hide = function () {
+  if (this.container) this.container.style.display = 'none'
+}
+
+fileExplorer.prototype.show = function () {
+  if (this.container) this.container.style.display = 'block'
+}
+
 fileExplorer.prototype.init = function () {
   this.container = yo`<div></div>`
   return this.container
 }
 
 fileExplorer.prototype.ensureRoot = function (cb) {
+  cb = cb || (() => {})
   var self = this
-  if (self.element && cb) return cb()
+  if (self.element) return cb()
 
   self.files.resolveDirectory('/', (error, files) => {
     if (error) console.error(error)
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index e632ca2f1f..51803bf3bf 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -21,6 +21,23 @@ var limit = 60
 var canUpload = window.File || window.FileReader || window.FileList || window.Blob
 var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
+/*
+  Overview of APIs:
+   * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor
+      - listen on browser & localhost file provider (`fileRenamed` & `fileRemoved`)
+      - update the tabs, switchFile
+      - trigger `currentFileChanged`
+      - set the current file in the config
+   * fileProvider: currently browser, swarm, localhost, github, gist
+      - link to backend
+      - provide properties `type`, `readonly`
+      - provide API `resolveDirectory`, `remove`, `exists`, `rename`, `get`, `set`
+      - trigger `fileExternallyChanged`, `fileRemoved`, `fileRenamed`, `fileRenamedError`, `fileAdded`
+   * file-explorer: treeview @args fileProvider
+      - listen on events triggered by fileProvider
+      - call fileProvider API
+*/
+
 function filepanel (appAPI, filesProvider) {
   var self = this
   var fileExplorer = new FileExplorer(appAPI, filesProvider['browser'])
@@ -89,7 +106,6 @@ function filepanel (appAPI, filesProvider) {
   self.event = event
   var element = template()
   fileExplorer.ensureRoot()
-  var containerFileSystem = element.querySelector('.filesystemexplorer')
   var websocketconn = element.querySelector('.websocketconn')
   filesProvider['localhost'].remixd.event.register('connecting', (event) => {
     websocketconn.style.color = styles.colors.yellow
@@ -99,22 +115,19 @@ function filepanel (appAPI, filesProvider) {
   filesProvider['localhost'].remixd.event.register('connected', (event) => {
     websocketconn.style.color = styles.colors.green
     websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
+    fileSystemExplorer.show()
   })
 
   filesProvider['localhost'].remixd.event.register('errored', (event) => {
     websocketconn.style.color = styles.colors.red
     websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
-    if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
-      containerFileSystem.removeChild(fileSystemExplorer.element)
-    }
+    fileSystemExplorer.hide()
   })
 
   filesProvider['localhost'].remixd.event.register('closed', (event) => {
     websocketconn.style.color = styles.colors.black
     websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
-    if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
-      containerFileSystem.removeChild(fileSystemExplorer.element)
-    }
+    fileSystemExplorer.hide()
   })
 
   fileExplorer.events.register('focus', function (path) {
@@ -256,6 +269,8 @@ function filepanel (appAPI, filesProvider) {
           modalDialogCustom.confirm(null, `Created a gist 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)
         }
       }
     }
@@ -309,33 +324,24 @@ function filepanel (appAPI, filesProvider) {
 }
 
 // return all the files, except the temporary/readonly ones..
-function packageFiles (files, callback) {
+function packageFiles (filesProvider, callback) {
   var ret = {}
-  // @TODO remove use of `list()`
-  var filtered = Object.keys(files.list()).filter(function (path) { if (!files.isReadOnly(path)) { return path } })
-  async.eachSeries(filtered, function (path, cb) {
-    ret[path.replace(files.type + '/', '')] = { content: files.get(path) }
-    cb()
-  }, () => {
-    callback(null, ret)
+  filesProvider.resolveDirectory('browser', (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)
+      })
+    }
   })
 }
 
-/*
-  Overview of APIs:
-   * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor
-      - listen on browser & localhost file provider (`fileRenamed` & `fileRemoved`)
-      - update the tabs, switchFile
-      - trigger `currentFileChanged`
-      - set the current file in the config
-   * fileProvider: currently browser, swarm, localhost, github, gist
-      - link to backend
-      - provide properties `type`, `readonly`
-      - provide API `resolveDirectory`, `remove`, `exists`, `rename`, `get`, `set`
-      - trigger `fileExternallyChanged`, `fileRemoved`, `fileRenamed`, `fileRenamedError`, `fileAdded`
-   * file-explorer: treeview @args fileProvider
-      - listen on events triggered by fileProvider
-      - call fileProvider API
-*/
-
 module.exports = filepanel