Merge pull request #1803 from ethereum/overflow-y_on_tabs

test, static analysis tab && default minwidth for panel

src/app.js

@@ -170,7 +170,7 @@ class App extends ApiFactory {
 
   init () {
     var self = this
-    self._components.resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 })
+    self._components.resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 300, x: 300 })
     run.apply(self)
   }
 

src/app/panels/editor-panel.js

@@ -79,10 +79,9 @@ class EditorPanel {
       self._view.mainPanel.style.display = 'none'
     })
     self.data = {
-      _FILE_SCROLL_DELTA: 200,
       _layout: {
         top: {
-          offset: self._deps.config.get('terminal-top-offset') || 500,
+          offset: self._deps.config.get('terminal-top-offset') || 150,
           show: true
         }
       }
@@ -104,7 +103,7 @@ class EditorPanel {
           var height = window.innerHeight
           var newpos = (event.pageY < limitUp) ? limitUp : event.pageY
           newpos = (newpos < height - limitDown) ? newpos : height - limitDown
-          return newpos
+          return height - newpos
         }
       })
 
@@ -138,11 +137,11 @@ class EditorPanel {
     var tmp = delta - limitDown
     delta = tmp > 0 ? tmp : 0
     if (direction === 'top') {
-      var height = containerHeight - delta
-      height = height < 0 ? 0 : height
-      self._view.editor.style.height = `${delta}px`
-      self._view.mainPanel.style.height = `${delta}px`
-      self._view.terminal.style.height = `${height}px` // - menu bar height
+      var mainPanelHeight = containerHeight - delta
+      mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
+      self._view.editor.style.height = `${mainPanelHeight}px`
+      self._view.mainPanel.style.height = `${mainPanelHeight}px`
+      self._view.terminal.style.height = `${delta}px` // - menu bar height
       self._components.editor.resize((document.querySelector('#editorWrap') || {}).checked)
       self._components.terminal.scroll2bottom()
     }

src/app/panels/terminal.js

@@ -104,12 +104,17 @@ class Terminal {
     if (opts.shell) self._shell = opts.shell
     register(self)
   }
+
+  focus () {
+    if (this._view.input) this._view.input.focus()
+  }
+
   render () {
     var self = this
     if (self._view.el) return self._view.el
     self._view.journal = yo`<div class=${css.journal}></div>`
     self._view.input = yo`
-      <span class=${css.input} spellcheck="false" contenteditable="true" onpaste=${paste} onkeydown=${change}></span>
+      <span class=${css.input} spellcheck="false" onload=${() => { this.focus() }} contenteditable="true" onpaste=${paste} onkeydown=${change}></span>
     `
     self._view.input.innerText = '\n'
     self._view.cli = yo`

src/app/staticanalysis/staticAnalysisView.js

@@ -43,32 +43,34 @@ staticAnalysisView.prototype.render = function () {
   var self = this
   var view = yo`
     <div class="${css.analysis}">
-      <div id="staticanalysismodules" class="list-group list-group-flush">
-        ${this.modulesView}
-      </div>
       <div class="${css.buttons}">
-        <div class="${css.buttonsInner}">
-          <button class="${css.buttonRun} btn btn-sm btn-primary" onclick="${function () { self.run() }}" >Run</button>
-          <label class="${css.label}" for="autorunstaticanalysis">
-            <input id="autorunstaticanalysis"
-              type="checkbox"
-              style="vertical-align:bottom"
-              checked="true"
-            >
-            Auto run
-          </label>
-          <label class="${css.label}" for="checkAllEntries">
-            <input id="checkAllEntries"
-              type="checkbox"
-              onclick="${function (event) { self.checkAll(event) }}"
-              style="vertical-align:bottom"
-              checked="true"
-            >
-            Check/Uncheck all
-          </label>
+          <div class="${css.buttonsInner}">
+            <button class="${css.buttonRun} btn btn-sm btn-primary" onclick="${function () { self.run() }}" >Run</button>
+            <label class="${css.label}" for="autorunstaticanalysis">
+              <input id="autorunstaticanalysis"
+                type="checkbox"
+                style="vertical-align:bottom"
+                checked="true"
+              >
+              Auto run
+            </label>
+            <label class="${css.label}" for="checkAllEntries">
+              <input id="checkAllEntries"
+                type="checkbox"
+                onclick="${function (event) { self.checkAll(event) }}"
+                style="vertical-align:bottom"
+                checked="true"
+              >
+              Check/Uncheck all
+            </label>
+          </div>
         </div>
-      </div>
-      <div class="${css.result}" "id='staticanalysisresult'></div>
+        <div id="staticanalysismodules" class="list-group list-group-flush ${css.container}">
+          ${this.modulesView}
+        </div>
+        <hr>
+        <div><h6>Results:</h6></div>
+        <div class="${css.result}" id='staticanalysisresult'></div>
     </div>
   `
   if (!this.view) {
@@ -96,8 +98,8 @@ staticAnalysisView.prototype.run = function () {
   var selected = this.selectedModules()
   var warningContainer = $('#staticanalysisresult')
   warningContainer.empty()
+  var self = this
   if (this.lastCompilationResult) {
-    var self = this
     var warningCount = 0
     this.runner.run(this.lastCompilationResult, selected, function (results) {
       results.map(function (result, i) {

src/app/staticanalysis/styles/staticAnalysisView-styles.js

@@ -7,6 +7,8 @@ var css = csjs`
   }
   .result {
     margin-top: 1%;
+    max-height: 300px;
+    overflow-y: auto;
   }
   .buttons  {
     margin: 1rem 0;
@@ -25,6 +27,10 @@ var css = csjs`
     display: flex;
     align-items: center;
   }
+  .container {
+    max-height: 300px;
+    overflow-y: auto;
+  }
 `
 
 module.exports = css

src/app/tabs/styles/test-tab-styles.js

@@ -11,10 +11,15 @@ var css = csjs`
     display: flex;
     flex-direction: column;
     margin: 2%;
+    max-height: 300px;
+    overflow-y: auto;
+
   }
   .container {
     margin: 2%;
     padding-bottom: 5%;
+    max-height: 300px;
+    overflow-y: auto;
   }
   .outputTitle {
     font-weight: bold;

src/app/tabs/test-tab.js

@@ -174,9 +174,8 @@ module.exports = class TestTab extends ApiFactory {
           How to test smart contracts guide in our documentation.
           <div class="${css.generateTestFile} btn btn-primary m-1" onclick="${this.testTabLogic.generateTestFile(this)}">Generate test file</div>
         </div>
-        <div class="${css.tests}">
-          ${this.testList}
-          <div class="${css.buttons} btn-group">
+        <div class="${css.tests}">          
+          <div class="${css.buttons}">
             <div class="${css.runButton} btn btn-primary m-1"  onclick="${this.runTests.bind(this)}">Run Tests</div>
             <label class="${css.label}" for="checkAllTests">
               <input id="checkAllTests"
@@ -187,6 +186,9 @@ module.exports = class TestTab extends ApiFactory {
               Check/Uncheck all
             </label>
           </div>
+          ${this.testList}
+          <hr>
+          <div class="${css.buttons}" ><h6>Results:</h6></div>
           ${this.testsOutput}
           ${this.testsSummary}
         </div>

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

@@ -49,7 +49,7 @@ var css = yo`<style>
 }
 
 .sol.staticAnalysisWarning {
-  background-color: var(--info);
+  background-color: var(--warning);
 }
 
 .sol.success {