Merge pull request #662 from ethereum/compileRunTab5

src/app/loading-spinner.js

-var yo = require('yo-yo')
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-
-module.exports = loadingSpinner
-
-var css = csjs`
-  .loader {
-    display: inline-block;
-    margin-left: .3em;
-    border: 2px solid orange;
-    border-top: 2px solid #F4F6FF; /* Light blue */
-    border-radius: 50%;
-    width: 8px;
-    height: 8px;
-    animation: spin 2s linear infinite;
-  }
-  @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-  }
-`
-function loadingSpinner () {
-  var el = yo`<div class=${css.loader}></div>`
-  return el
-}

src/app/righthand-panel.js

-var csjs = require('csjs-inject')
 var yo = require('yo-yo')
 var EventManager = require('ethereum-remix').lib.EventManager
 var tabbedMenu = require('./tabbed-menu')
+var compileTab = require('./compile-tab')
+var runTab = require('./run-tab')
 var settingsTab = require('./settings-tab')
 var analysisTab = require('./analysis-tab')
 var debuggerTab = require('./debugger-tab')
 var filesTab = require('./files-tab')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
 var css = csjs`
   .options {
       float: left;
-      padding: 0.7em 0.3em;
-      min-width: 65px;
+      padding-top: 0.7em;
+      min-width: 60px;
       font-size: 0.9em;
       cursor: pointer;
-      background-color: transparent;
-      margin-right: 0.5em;
+      background-color: ${styles.colors.transparent};
       font-size: 1em;
+      text-align: center;
   }
   .dragbar             {
     position           : absolute;
@@ -40,6 +46,9 @@ var css = csjs`
   .panel              {
     height            : 100%;  
   }
+  .header             {
+    height            : 100%;
+  }
 `
 
 // ------------------------------------------------------------------
@@ -55,7 +64,8 @@ function RighthandPanel (appAPI, events, opts) {
   var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
   var options = yo`
     <ul id="options">
-      <li class="envView" title="Environment">Contract</li>
+      <li class="compileView" title="Compile">Compile</li>
+      <li class="runView" title="Run">Run</li>
       <li class="settingsView" title="Settings">Settings</li>
       <li class="publishView" title="Publish" >Files</li>
       <li class="debugView" title="Debugger">Debugger</li>
@@ -67,7 +77,7 @@ function RighthandPanel (appAPI, events, opts) {
   self._view.element = yo`
     <div id="righthand-panel" class=${css.panel}>
       ${self._view.dragbar}
-      <div id="header">
+      <div id="header" class=${css.header}>
         <div id="menu">
           <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
           ${options}
@@ -76,6 +86,8 @@ function RighthandPanel (appAPI, events, opts) {
       </div>
     </div>
   `
+  compileTab(optionViews, appAPI, events, opts)
+  runTab(optionViews, appAPI, events, opts)
   settingsTab(optionViews, appAPI, events, opts)
   analysisTab(optionViews, appAPI, events, opts)
   debuggerTab(optionViews, appAPI, events, opts)

src/app/tabbed-menu.js

 var $ = require('jquery')
-var loadingSpinner = require('./loading-spinner')
 
 module.exports = tabbedMenu
 
@@ -14,23 +13,7 @@ function tabbedMenu (container, appAPI, events, opts) {
   })
 
   // initialize tabbed menu
-  selectTab(container.querySelector('.envView'))
-
-  // add event listeners for loading spinner
-  events.compiler.register('loadingCompiler', function start () {
-    var settingsTab = document.querySelector('.settingsView')
-    if (settingsTab.children.length) return
-
-    var spinner = loadingSpinner()
-    settingsTab.appendChild(spinner)
-
-    appAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
-    events.compiler.register('compilerLoaded', finish)
-    function finish () {
-      events.compiler.unregister('compilerLoaded', finish)
-      settingsTab.removeChild(spinner)
-    }
-  })
+  selectTab(container.querySelector('.compileView'))
 
   // select tab
   function selectTab (el) {