Show error message when localstorage is full and restore default file content.

apps/remix-ide/src/app/files/fileManager.ts

@@ -4,7 +4,7 @@ import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
 import { EventEmitter } from 'events'
 import { RemixAppManager } from '../../../../../libs/remix-ui/plugin-manager/src/types'
-import { fileChangedToastMsg } from '@remix-ui/helper'
+import { fileChangedToastMsg, storageFullMessage } from '@remix-ui/helper'
 import helper from '../../lib/helper.js'
 
 /*
@@ -715,8 +715,22 @@ class FileManager extends Plugin {
       if ((input !== null) && (input !== undefined)) {
         const provider = this.fileProviderOf(currentFile)
         if (provider) {
-          await provider.set(currentFile, input)
+          // use old content as default if save operation fails.
+          provider.get(currentFile, (error, oldContent) => {
+            provider.set(currentFile, input, (error) => {
+              if (error) {
+                if (error.message ) this.call('notification', 'toast', 
+                  error.message.indexOf(
+                    'LocalStorage is full') !== -1 ? storageFullMessage()
+                    : error.message
+                )
+                provider.set(currentFile, oldContent)
+                return console.error(error)
+              } else {
           this.emit('fileSaved', currentFile)
+              }
+            })
+          })
         } else {
           console.log('cannot save ' + currentFile + '. Does not belong to any explorer')
         }

libs/remix-ui/helper/src/lib/helper-components.tsx

@@ -69,3 +69,12 @@ export const envChangeNotification = (env: { context: string, fork: string }, fr
     </span>
   </div>
 )
+
+export const storageFullMessage = () => (
+  <div>
+    <i className="fas fa-exclamation-triangle text-danger mr-1"></i>
+    <span className="font-weight-bold">
+      <span>Cannot save this file due full LocalStorage. Backup existing files and free up some space.</span>
+    </span>
+  </div>
+)