Merge pull request #666 from ethereum/compileRunTab10

Compile run tab - 10

src/app/debugger-tab.js

@@ -2,16 +2,24 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
 
 var css = csjs`
   .debuggerTabView {
     padding: 2%;
   }
+  .debugger extends ${styles.displayBox} {
+    margin-bottom: 1%;
+  }
 `
 
 module.exports = debuggerTab
 
 function debuggerTab (container, appAPI, events, opts) {
-  var el = yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
+  var el = yo`
+    <div class="${css.debuggerTabView} "id="debugView">
+      <div id="debugger" class="${css.debugger}"></div>
+    </div>`
   container.appendChild(el)
 }

src/app/files-tab.js

@@ -14,13 +14,19 @@ var css = csjs`
   .filesTabView {
     padding: 2%;
   }
-  .crow {
-    margin-top: 1em;
+  .crow extends ${styles.displayBox} {
+    margin-bottom: 1%;
     display: flex;
+    flex-wrap: wrap;
   }
   .infoBox extends ${styles.infoTextBox} {
     margin-top: 2em;
   }
+  .button extends ${styles.button} {
+    background-color: ${styles.colors.blue};
+    margin-bottom: .5em;
+    margin-right: 1em;
+  }
 `
 
 module.exports = filesTab
@@ -29,14 +35,15 @@ function filesTab (container, appAPI, events, opts) {
   var el = yo`
     <div class="${css.filesTabView}" id="publishView">
       <div class="${css.crow}">
-        <button id="gist" title="Publish all files as public gist on github.com">
+        <button class="${css.button}" id="gist" title="Publish all files as public gist on github.com">
           <i class="fa fa-github"></i>
           Publish Gist
         </button>
         Publish all open files to an anonymous github gist.<br>
       </div>
       <div class="${css.crow}">
-        <button id="copyOver" title="Copy all files to another instance of browser-solidity.">
+        <button class="${css.button}" id="copyOver" title="Copy all files to another instance of browser-solidity.">
+          <i class="fa fa-files-o" aria-hidden="true"></i>
           Copy files
         </button>
         Copy all files to another instance of Browser-solidity.

src/app/righthand-panel.js

@@ -99,9 +99,7 @@ function RighthandPanel (appAPI, events, opts) {
     ;[...options.children].forEach((el) => { el.classList.add(css.options) })
 
     // ----------------- tabbed menu -----------------
-    var tabbedMenuAPI = {
-      warnCompilerLoading: appAPI.warnCompilerLoading
-    }
+    var tabbedMenuAPI = {}
     // load tabbed menu component
     var tabEvents = {compiler: events.compiler, app: events.app}
     tabbedMenu(options, tabbedMenuAPI, tabEvents, {})

src/app/settings-tab.js

@@ -12,6 +12,7 @@ var css = csjs`
   }
   .info extends ${styles.infoTextBox} {
     margin-bottom: 2em;
+    word-break: break-word;
   }
   .crow {
     margin-top: 1em;
@@ -21,23 +22,6 @@ var css = csjs`
     float: left;
     max-width: 90%;
   }
-  .button extends ${styles.button} {
-    background-color: #C6CFF7;
-    width: 100%;
-    align-self: center;
-    text-align: -webkit-center;
-  }
-  .col1 extends ${styles.titleL} {
-    float: left;
-    align-self: center;
-  }
-  .checkboxText {
-    margin-left: 3px;
-  }
-  .compilationWarning extends ${styles.warningTextBox} {
-    margin-top: 1em;
-    margin-left: 0.5em;
-  }
 }
 `
 module.exports = SettingsTab
@@ -46,21 +30,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
   if (typeof container === 'string') container = document.querySelector(container)
   if (!container) throw new Error('no container given')
 
-  var warnCompilationSlow = yo`<div id="warnCompilationSlow"></div>`
-  warnCompilationSlow.className = css.compilationWarning
-  appEvents.compiler.register('compilationDuration', function tabHighlighting (speed) {
-    var settingsView = document.querySelector('#header #menu .settingsView')
-    if (speed > 1000) {
-      warnCompilationSlow.innerHTML = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`
-      warnCompilationSlow.style.visibility = 'visible'
-      settingsView.style.color = '#FF8B8B'
-    } else {
-      warnCompilationSlow.innerHTML = ''
-      warnCompilationSlow.style.visibility = 'hidden'
-      settingsView.style.color = ''
-    }
-  })
-
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -78,15 +47,6 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <div><input class="${css.col1}" id="optimize" type="checkbox"></div>
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
-      <div class="${css.crow}">
-        <div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
-        <span class="${css.checkboxText}">Auto Compile</span>
-      </div>
-      </div>
-      <div class="${css.crow}">
-        <div class="${css.button} "id="compile" title="Compile source code">Compile</div>
-      </div>
-      ${warnCompilationSlow}
     </div>
   `
   container.appendChild(el)

src/app/staticanalysis/staticAnalysisView.js

@@ -5,12 +5,26 @@ var $ = require('jquery')
 var utils = require('../utils')
 var csjs = require('csjs-inject')
 
+var styleGuide = require('../style-guide')
+var styles = styleGuide()
+
 var css = csjs`
   .analysis {
     font-height: 1.5em;
   }
   .result {
-    margin-top: 1em;
+    margin-top: 1%;
+  }
+  .buttons extends ${styles.displayBox} {
+    display: flex;
+    align-items: center;
+  }
+  .buttonRun extends ${styles.button} {
+    background-color: ${styles.colors.blue};
+    margin-right: 1%;
+  }
+  .analysisModulesContainer extends ${styles.displayBox} {
+    margin-bottom: 1%;
   }
 `
 
@@ -37,13 +51,12 @@ staticAnalysisView.prototype.render = function () {
   var self = this
   var view = yo`
     <div class="${css.analysis}">
-      <strong class="${css.title}">Static Analysis</strong><br>
-      <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
       <div id="staticanalysismodules">
-      ${this.modulesView}
+        ${this.modulesView}
       </div>
-      <div>
-        <button onclick=${function () { self.run() }} >Run</button>
+      <div class="${css.buttons}">
+        <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
+        <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
       </div>
       <div class="${css.result}" "id='staticanalysisresult'></div>
     </div>
@@ -93,10 +106,10 @@ staticAnalysisView.prototype.run = function () {
         })
       })
       if (warningContainer.html() === '') {
-        $('#header #menu .staticanalysisView').css('color', '')
+        $('#righthand-panel #menu .staticanalysisView').css('color', '')
         warningContainer.html('No warning to report')
       } else {
-        $('#header #menu .staticanalysisView').css('color', '#FF8B8B')
+        $('#righthand-panel #menu .staticanalysisView').css('color', '#FF8B8B')
       }
     })
   } else {
@@ -123,8 +136,7 @@ function renderModules (modules) {
         </label>
             `
     })
-    return yo`<div>
-                <br>
+    return yo`<div class="${css.analysisModulesContainer}">
                 <label>
                 <b>${category[0].categoryDisplayName}</b>
                 </label>