new keys are defined

src/app/components/vertical-icons-component.js

@@ -51,15 +51,18 @@ class VerticalIconComponent {
 
   listenOnStatus (api) {
     if (!api.events) return
+
+    // the list of supported keys. 'none' will remove the status
+    const keys = ['edited', 'success', 'none', 'spinner', 'fail']
+    const types = ['error', 'warning', 'success', 'info', '']
     const fn = (status) => {
-      if (
-        status.type === 'warning' ||
-        status.type === 'danger' ||
-        status.key === 'code' ||
-        status.key === 'check' ||
-        (status.key === '' && status.type === '' && status.title === '')) {
-        this.setIconStatus(api.profile.name, status)
+      if (!types.includes(status.type) && status.type) throw new Error(`type should be ${keys.join()}`)
+      if (!status.key) throw new Error(`status key should be defined`)
+
+      if (typeof status.key === 'string' && (!keys.includes(status.key))) {
+        throw new Error('key should contain either number or ' + keys.join())
       }
+      this.setIconStatus(api.profile.name, status)
     }
     this.iconStatus[api.profile.name] = fn
     api.events.on('statusChanged', this.iconStatus[api.profile.name])
@@ -82,6 +85,33 @@ class VerticalIconComponent {
   }
 
   /**
+   * resolve a classes list for @arg key
+   * @param {Object} key
+   * @param {Object} type
+   */
+  resolveClasses (key, type) {
+    let classes = css.status
+    switch (key) {
+      case 'success':
+        classes += ' fas fa-check-circle text-' + type + ' ' + css.statusCheck
+        break
+      case 'edited':
+        classes += ' fas fa-sync text-' + type + ' ' + css.statusCheck
+        break
+      case 'spinner':
+        classes += ' fas fa-spinner text-' + type + ' ' + css.statusCheck
+        break
+      case 'fail':
+        classes += ' fas fa-exclamation-triangle text-' + type + ' ' + css.statusCheck
+        break
+      default: {
+        classes += ' badge badge-pill badge-' + type
+      }
+    }
+    return classes
+  }
+
+  /**
    * Set a new status for the @arg name
    * @param {String} name
    * @param {Object} status
@@ -93,38 +123,30 @@ class VerticalIconComponent {
     if (statusEl) {
       el.removeChild(statusEl)
     }
-    if (status.key) {
-      let key = helper.checkSpecialChars(status.key) ? '' : status.key
-      let type = helper.checkSpecialChars(status.type) ? '' : status.type
-      let title = helper.checkSpecialChars(status.title) ? '' : status.title
-
-      let classes = css.status
-      switch (key) {
-        case 'check':
-          classes += ' fas fa-check-circle text-' + type + ' ' + css.statusCheck
-          break
-        case 'code':
-          classes += ' fas fa-sync text-' + type
-          break
-        default:
-          classes += ' badge badge-pill badge-' + type
-      }
+    if (status.key === 'none') return // remove status
 
-      el.appendChild(yo`<span
-        title="${title}"
-        class="${classes}"
-        aria-hidden="true"
-      >
-      ${key === 'code' || key === 'check' ? '' : key}
-      </span>`)
-
-      // el.classList = "" doesn't work on all browser use instead
-      var classList = el.classList
-      while (classList.length > 0) {
-        classList.remove(classList.item(0))
-      }
-      el.classList.add(`${css.icon}`)
-    }
+    let text = ''
+    let key = ''
+    if (typeof status.key === 'number') {
+      key = status.key.toString()
+      text = key
+    } else key = helper.checkSpecialChars(status.key) ? '' : status.key
+
+    let type = ''
+    if (status.type === 'error') {
+      type = 'danger' // to use with bootstrap
+    } else type = helper.checkSpecialChars(status.type) ? '' : status.type
+    let title = helper.checkSpecialChars(status.title) ? '' : status.title
+
+    el.appendChild(yo`<span
+      title="${title}"
+      class="${this.resolveClasses(key, type)}"
+      aria-hidden="true"
+    >
+    ${text}
+    </span>`)
+
+    el.classList.add(`${css.icon}`)
   }
 
   /**

src/app/tabs/analysis-tab.js

@@ -30,11 +30,11 @@ class AnalysisTab extends BaseApi {
     if (!this.staticanalysis) this.staticanalysis = new StaticAnalysis()
     this.staticanalysis.event.register('staticAnaysisWarning', (count) => {
       if (count > 0) {
-        this.events.emit('statusChanged', {key: count.toString(), title: count + ' warnings', type: 'warning'})
+        this.events.emit('statusChanged', {key: count, title: `${count} warning${count === 1 ? '' : 's'}`, type: 'warning'})
       } else if (count === 0) {
-        this.events.emit('statusChanged', {key: 'check', title: 'no warning', type: 'success'})
+        this.events.emit('statusChanged', {key: 'success', title: 'no warning', type: 'success'})
       } else {
-        this.events.emit('statusChanged', {key: '', title: '', type: ''})
+        this.events.emit('statusChanged', {key: 'none'})
       }
     })
     this.registry.put({api: this.staticanalysis, name: 'staticanalysis'})

src/app/tabs/compile-tab.js

@@ -77,7 +77,7 @@ class CompileTab extends CompilerApi {
 
   listenToEvents () {
     let onContentChanged = () => {
-      this.events.emit('statusChanged', {key: 'code', title: 'the content has changed, needs recompilation', type: 'info'})
+      this.events.emit('statusChanged', {key: 'edited', title: 'the content has changed, needs recompilation', type: 'info'})
     }
     this.editor.event.register('contentChanged', onContentChanged)
     this.editor.event.register('sessionSwitched', onContentChanged)
@@ -87,7 +87,7 @@ class CompileTab extends CompilerApi {
     })
 
     this.compiler.event.register('compilerLoaded', () => {
-      this.events.emit('statusChanged', {key: '', title: '', type: ''})
+      this.events.emit('statusChanged', {key: 'none'})
     })
 
     this.compileTabLogic.event.on('startingCompilation', () => {
@@ -111,7 +111,7 @@ class CompileTab extends CompilerApi {
 
     const cleanupErrors = () => {
       this._view.errorContainer.innerHTML = ''
-      this.events.emit('statusChanged', {key: '', title: '', type: ''})
+      this.events.emit('statusChanged', {key: 'none'})
     }
 
     this.compiler.event.register('compilationFinished', (success, data, source) => {
@@ -120,11 +120,11 @@ class CompileTab extends CompilerApi {
         this.events.emit('compilationFinished', source.target, source, 'soljson', data)
         if (data.errors) {
           this.events.emit('statusChanged', {
-            key: data.errors.length.toString(),
-            title: 'compilation finished successful with warning' + data.errors.length > 1 ? 's' : '',
+            key: data.errors.length,
+            title: `compilation finished successful with warning${data.errors.length > 1 ? 's' : ''}`,
             type: 'warning'
           })
-        } else this.events.emit('statusChanged', {key: 'check', title: 'compilation successful', type: 'success'})
+        } else this.events.emit('statusChanged', {key: 'success', title: 'compilation successful', type: 'success'})
         // Store the contracts
         this.data.contractsDetails = {}
         this.compiler.visitContracts((contract) => {
@@ -135,8 +135,8 @@ class CompileTab extends CompilerApi {
           )
         })
       } else {
-        const count = (data.errors ? data.errors.filter(error => error.severity === 'error').length : 0 + data.error ? 1 : 0).toString()
-        this.events.emit('statusChanged', {key: count, title: 'compilation failed', type: 'danger'})
+        const count = (data.errors ? data.errors.filter(error => error.severity === 'error').length : 0 + data.error ? 1 : 0)
+        this.events.emit('statusChanged', {key: count, title: 'compilation failed', type: 'error'})
       }
       // Update contract Selection
       let contractMap = {}