Merge pull request #1891 from ethereum/origin/develop_L

new status icons

src/app/components/plugin-manager-component.js

@@ -155,7 +155,7 @@ class PluginManagerComponent extends BaseApi {
       <div id='pluginManager'>
         <div class="form-group ${css.pluginSearch}">
           <input onkeyup="${e => this.filterPlugins(e)}" class="form-control" placeholder="Search">
-          <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm ${css.localPluginBtn}">
+          <button onclick="${_ => this.openLocalPlugin()}" class="btn btn-sm text-dark ${css.localPluginBtn}">
             Connect to a Local Plugin
           </button>
         </div>

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

@@ -51,7 +51,17 @@ 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 (!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
@@ -74,6 +84,33 @@ class VerticalIconComponent {
     this.iconKind[kind || 'other'].appendChild(this.icons[name])
   }
 
+  /**
+   * 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
@@ -86,22 +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
+    if (status.key === 'none') return // remove status
+
+    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="fas fa-${key} ${css.status} text-${type}" aria-hidden="true"></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.appendChild(yo`<span
+      title="${title}"
+      class="${this.resolveClasses(key, type)}"
+      aria-hidden="true"
+    >
+    ${text}
+    </span>`)
 
     el.classList.add(`${css.icon}`)
-      el.classList.add('border')
-      el.classList.add(`border-${type}`)
-    }
   }
 
   /**
@@ -262,6 +307,9 @@ const css = csjs`
     bottom: 0;
     right: 0;
   }
+  .statusCheck {
+    font-size: 1.2em;
+  }
   .statusWithBG
     border-radius: 8px;
     background-color: var(--danger);

src/app/staticanalysis/staticAnalysisView.js

@@ -99,7 +99,7 @@ staticAnalysisView.prototype.run = function () {
   var warningContainer = $('#staticanalysisresult')
   warningContainer.empty()
   var self = this
-  if (this.lastCompilationResult) {
+  if (this.lastCompilationResult && selected.length) {
     var warningCount = 0
     this.runner.run(this.lastCompilationResult, selected, function (results) {
       results.map(function (result, i) {
@@ -120,14 +120,16 @@ staticAnalysisView.prototype.run = function () {
           }
           warningCount++
           var msg = yo`<span>${location} ${item.warning} ${item.more ? yo`<span><br><a href="${item.more}" target="blank">more</a></span>` : yo`<span></span>`}</span>`
-          self._deps.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning', useSpan: true})
+          self._deps.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning alert alert-warning', useSpan: true})
         })
       })
       self.event.trigger('staticAnaysisWarning', [warningCount])
     })
   } else {
+    if (selected.length) {
       warningContainer.html('No compiled AST available')
-    self.event.trigger('staticAnaysisWarning', [0])
+    }
+    self.event.trigger('staticAnaysisWarning', [-1])
   }
 }
 

src/app/tabs/analysis-tab.js

@@ -29,10 +29,13 @@ class AnalysisTab extends BaseApi {
   render () {
     if (!this.staticanalysis) this.staticanalysis = new StaticAnalysis()
     this.staticanalysis.event.register('staticAnaysisWarning', (count) => {
-      if (count) {
-        this.events.emit('statusChanged', {key: 'exclamation-triangle', title: count + ' warnings', type: 'warning'})
+      if (count > 0) {
+        this.events.emit('statusChanged', {key: count, title: `${count} warning${count === 1 ? '' : 's'}`, type: 'warning'})
+      } else if (count === 0) {
+        this.events.emit('statusChanged', {key: 'success', title: 'no warning', type: 'success'})
       } else {
-        this.events.emit('statusChanged', {key: 'check', title: 'no warning', type: 'success'})
+        // count ==-1 no compilation result
+        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', () => {
@@ -99,19 +99,31 @@ class CompileTab extends CompilerApi {
 
     this.fileManager.events.on('currentFileChanged', (name) => {
       this.compilerContainer.currentFile = name
+      cleanupErrors()
       onContentChanged()
     })
 
     this.fileManager.events.on('noFileSelected', () => {
       this.compilerContainer.currentFile = ''
-      onContentChanged()
+      cleanupErrors()
     })
 
+    const cleanupErrors = () => {
+      this._view.errorContainer.innerHTML = ''
+      this.events.emit('statusChanged', {key: 'none'})
+    }
+
     this.compiler.event.register('compilationFinished', (success, data, source) => {
       if (success) {
         // forwarding the event to the appManager infra
         this.events.emit('compilationFinished', source.target, source, 'soljson', data)
-        this.events.emit('statusChanged', {key: 'check', title: 'compilation successful', type: 'success'})
+        if (data.errors) {
+          this.events.emit('statusChanged', {
+            key: data.errors.length,
+            title: `compilation finished successful with warning${data.errors.length > 1 ? 's' : ''}`,
+            type: 'warning'
+          })
+        } else this.events.emit('statusChanged', {key: 'success', title: 'compilation successful', type: 'success'})
         // Store the contracts
         this.data.contractsDetails = {}
         this.compiler.visitContracts((contract) => {
@@ -122,7 +134,8 @@ class CompileTab extends CompilerApi {
           )
         })
       } else {
-        this.events.emit('statusChanged', {key: 'exclamation', 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 = {}

src/app/tabs/compileTab/compilerContainer.js

@@ -40,6 +40,7 @@ class CompilerContainer {
   }
 
   activate () {
+    this.currentFile = this.config.get('currentFile')
     this.listenToEvents()
   }
 
@@ -99,7 +100,7 @@ class CompilerContainer {
     var displayed = name === '' ? '<no file selected>' : name
     var el = yo`
     <div class="${css.compilerArticle}">
-      <button class="btn btn-primary btn-block" title="Compile" onclick="${this.compile.bind(this)}">
+      <button class="btn btn-primary btn-block ${name === '' ? 'disabled' : ''}" title="Compile" onclick="${this.compile.bind(this)}">
         <span>${this._view.compileIcon} Compile ${displayed}</span>
       </button>
     </div>`

src/app/ui/renderer.js

@@ -89,7 +89,8 @@ Renderer.prototype.error = function (message, container, opt) {
 
   var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
 
-  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fas fa-times"></i></div></div>`).prepend($pre)
+  let classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
+  var $error = $(yo`<div class="sol ${opt.type} ${classList}"><div class="close"><i class="fas fa-times"></i></div></div>`).prepend($pre)
   $(container).append($error)
 
   $error.click((ev) => {

src/app/ui/styles/renderer-styles.js

@@ -40,16 +40,12 @@ var css = yo`<style>
 }
 
 .sol.error {
-    background-color: var(--danger);
-    color: var(--white);
 }
 
 .sol.warning {
-  background-color: var(--warning);
 }
 
 .sol.staticAnalysisWarning {
-  background-color: var(--warning);
 }
 
 .sol.success {