warning list UI changes. added more info and fixed warning position highlight

src/app/panels/tab-proxy.js

@@ -189,7 +189,7 @@ export class TabProxy {
 
     // @todo(#2492) remove style after the mainPanel layout fix.
     this._view.tabs = yo`
-      <div  style="display: -webkit-box; min-height: 35px">
+      <div  style="display: -webkit-box; max-height: 32px">
         ${zoomBtns}
         ${this._view.filetabs}
       </div>

src/app/tabs/staticanalysis/staticAnalysisView.js

@@ -113,10 +113,33 @@ staticAnalysisView.prototype.run = function () {
   if (this.lastCompilationResult && selected.length) {
     this.runBtn.removeAttribute('disabled')
     let warningCount = 0
-    this.runner.run(this.lastCompilationResult, selected, function (results) {
-      results.map(function (result, i) {
-        result.report.map(function (item, i) {
+    this.runner.run(this.lastCompilationResult, selected, (results) => {
+      const groupedModules = utils.groupBy(preProcessModules(this.runner.modules()), 'categoryId')
+      results.map((result, j) => {
+        let moduleName
+        Object.keys(groupedModules).map((key) => {
+          groupedModules[key].forEach((el) => {
+            if (el.name === result.name) {
+              moduleName = groupedModules[key][0].categoryDisplayName
+              return
+            }
+          })
+        })
+        let alreadyExistedEl = this.view.querySelector(`[id="staticAnalysisModule${moduleName}"]`)
+        if (!alreadyExistedEl) {
+          warningContainer.append(`
+            <div class="mb-4" name="staticAnalysisModules" id="staticAnalysisModule${moduleName}">
+              <span class="text-dark h6">${moduleName}</span>
+            </div>
+          `)
+        }
+
+        result.report.map((item, i) => {
           let location = ''
+          let locationString = 'not available'
+          let column = 0
+          let row = 0
+          let fileName = this.currentFile
           if (item.location) {
             var split = item.location.split(':')
             var file = split[2]
@@ -127,14 +150,38 @@ staticAnalysisView.prototype.run = function () {
             location = self._deps.offsetToLineColumnConverter.offsetToLineColumn(location,
               parseInt(file),
               self.lastCompilationSource.sources,
-              self.lastCompilationResult.sources)
-            location = Object.keys(self.lastCompilationResult.contracts)[file] + ':' + (location.start.line + 1) + ':' + (location.start.column + 1) + ':'
+              self.lastCompilationResult.sources
+            )
+            row = location.start.line + 1
+            column = location.start.column + 1
+            locationString = row + ':' + column + ':'
+            fileName = Object.keys(self.lastCompilationResult.contracts)[file]
           }
           warningCount++
-          const msg = yo`<span>${result.name} ${location} ${item.warning} ${item.more ? yo`<span><br><a href="${item.more}" target="blank">more</a></span>` : yo`<span></span>`}</span>`
-          self._components.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning alert alert-warning', useSpan: true})
+          const msg = yo`
+            <span class="d-flex flex-column">
+              <span class="h6">${result.name}</span>
+              ${item.warning}
+              ${item.more ? yo`<span><a href="${item.more}" target="blank">more</a></span>` : yo`<span></span>`}
+              <span class="" title="Position in ${fileName}">Pos: ${locationString}</span>
+            </span>`
+          self._components.renderer.error(
+            msg,
+            this.view.querySelector(`[id="staticAnalysisModule${moduleName}"]`),
+            {
+              type: 'staticAnalysisWarning mx-2 alert alert-warning',
+              useSpan: true,
+              errFile: fileName,
+              errLine: row,
+              errCol: column
+            }
+          )
         })
       })
+      // hide empty staticAnalysisModules sections
+      this.view.querySelectorAll('[name="staticAnalysisModules"]').forEach((section) => {
+        if (!section.getElementsByClassName('alert-warning').length) section.hidden = true
+      })
       self.event.trigger('staticAnaysisWarning', [warningCount])
     })
   } else {
@@ -206,7 +253,7 @@ staticAnalysisView.prototype.renderModules = function () {
     return yo`
       <div class="${css.block}">
         <input type="radio" name="accordion" class="w-100 d-none card" id="heading${categoryId}" onclick=${(e) => this.handleCollapse(e)}"/>
-        <label for="heading${categoryId}" style="cursor: pointer;" class="pl-3 h6 card-header d-flex justify-content-between font-weight-bold border-left px-1 py-2 w-100">
+        <label for="heading${categoryId}" style="cursor: pointer;" class="pl-3 card-heaader h6 d-flex justify-content-between font-weight-bold border-left px-1 py-2 w-100">
           <span>${category[0].categoryDisplayName}</span>
           <div>
             <i class="fas fa-angle-double-right"></i>

src/app/ui/landing-page/landing-page.js

@@ -195,7 +195,7 @@ export class LandingPage extends ViewPlugin {
 
     const createEnvButton = (imgPath, envID, envText, callback) => {
       return yo`
-        <button class="btn btn-lg border-secondary d-flex mr-3 justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
+        <button class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
           <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
           <label class="text-uppercase text-dark ${css.envLabel}">${envText}</label>
         </button>
@@ -233,8 +233,8 @@ export class LandingPage extends ViewPlugin {
             <div class="${css.logoContainer}">${img}</div>
           </div>
           <div class="${css.jumboBtnContainer} px-5">
-            <button class="btn btn-primary btn-lg mx-3" href="#" onclick=${() => learnMore()} role="button">Learn more</button>
-            <button class="btn btn-secondary btn-lg" onclick=${() => switchToPreviousVersion()}>Use previous version</button>
+            <button class="btn btn-primary mx-3" href="#" onclick=${() => learnMore()} role="button">Learn more</button>
+            <button class="btn btn-secondary" onclick=${() => switchToPreviousVersion()}>Use previous version</button>
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->