Merge pull request #553 from ethereum/loadingSpinnerOrigin

index.html

@@ -57,9 +57,9 @@
 				<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">
 					<ul id="options">
-						<li class="settingsView active" title="Settings">Settings</li>
-						<li class="publishView" title="Publish" >Files</li>
 						<li class="envView" title="Environment">Contract</li>
+						<li class="settingsView" title="Settings">Settings</li>
+						<li class="publishView" title="Publish" >Files</li>
 						<li class="debugView" title="Debugger">Debugger</li>
 						<li class="staticanalysisView" title="Static Analysis">Analysis</li>
 						<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>

src/app.js

@@ -26,7 +26,7 @@ var EventManager = require('ethereum-remix').lib.EventManager
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var FilePanel = require('./app/file-panel')
-
+var tabbedMenu = require('./app/tabbed-menu')
 var examples = require('./app/example-contracts')
 
 var contractTab = require('./app/contract-tab.js')
@@ -70,6 +70,11 @@ var run = function () {
   var files = new Files(fileStorage)
   var config = new Config(fileStorage)
 
+  var executionContext = new ExecutionContext()
+  var compiler = new Compiler(handleImportCall)
+  var formalVerification = new FormalVerification($('#verificationView'), compiler.event)
+  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
+
   // return all the files, except the temporary/readonly ones
   function packageFiles () {
     var ret = {}
@@ -277,24 +282,7 @@ var run = function () {
     }).appendTo('body')
   })
 
-  // ---------------- tabbed menu ------------------
-  $('#options li').click(function (ev) {
-    var $el = $(this)
-    selectTab($el)
-  })
-
-  var selectTab = function (el) {
-    var match = /[a-z]+View/.exec(el.get(0).className)
-    if (!match) return
-    var cls = match[0]
-    if (!el.hasClass('active')) {
-      el.parent().find('li').removeClass('active')
-      $('#optionViews').attr('class', '').addClass(cls)
-      el.addClass('active')
-    }
-    self.event.trigger('tabChanged', [cls])
-  }
-
+  // --------------------Files tabs-----------------------------
   var $filesEl = $('#files')
   var FILE_SCROLL_DELTA = 300
 
@@ -623,11 +611,6 @@ var run = function () {
     }
   }
 
-  var executionContext = new ExecutionContext()
-  var compiler = new Compiler(handleImportCall)
-  var formalVerification = new FormalVerification($('#verificationView'), compiler.event)
-  var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
-
   // ----------------- Debugger -----------------
   var debugAPI = {
     statementMarker: null,
@@ -915,8 +898,8 @@ var run = function () {
   })
 
   function startdebugging (txHash) {
+    self.event.trigger('debuggingRequested', [])
     transactionDebugger.debug(txHash)
-    selectTab($('ul#options li.debugView'))
   }
 
   function setVersionText (text) {
@@ -1004,6 +987,17 @@ var run = function () {
 
     loadVersion('builtin')
   })
+
+  var tabbedMenuAPI = {
+    warnCompilerLoading: function (msg) {
+      renderer.clear()
+      if (msg) {
+        renderer.error(msg, $('#output'), {type: 'warning'})
+      }
+    }
+  }
+  // load tabbed menu component
+  tabbedMenu(tabbedMenuAPI, compiler.event, self.event)
 }
 
 module.exports = {

src/app/compiler.js

@@ -77,7 +77,6 @@ function Compiler (handleImportCall) {
 
         compilationFinished(result, missingInputs, source)
       }
-
       onCompilerLoaded(compiler.version())
     }
   }

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/renderer.js

@@ -68,6 +68,10 @@ function Renderer (appAPI, formalVerificationEvent, compilerEvent) {
   })
 }
 
+Renderer.prototype.clear = function () {
+  $('#output').empty()
+}
+
 Renderer.prototype.error = function (message, container, options) {
   var self = this
   var opt = options || {}

src/app/style-guide.js

@@ -74,11 +74,11 @@ function styleGuide () {
     }
 
     .warning-text-box {
-      background-color      : #E6E5A7;  // yellow
+      background-color      : hsla(59, 56%, 78%, 0.5);  // yellow
       line-height           : 20px;
-      padding               : 1em 1em .5em 1em;
-      border-radius         : 3px;
-      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
+      padding               : 8px 15px;
+      border-radius         : 5px;
+      border                : .2em dotted #ffbd01; // orange-yellow
       margin-bottom         : 1em;
     }
 
@@ -143,6 +143,7 @@ function styleGuide () {
   return {
     textBoxL: textBoxes['display-box-L'],
     infoTextBox: textBoxes['info-text-box'],
+    warningTextBox: textBoxes['warning-text-box'],
     titleL: texts['title-L'],
     titleM: texts['title-M'],
     dropdown: buttons['dropdown-menu'],

src/app/tabbed-menu.js

+var $ = require('jquery')
+var loadingSpinner = require('./loading-spinner')
+
+module.exports = tabbedMenu
+
+function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
+  $('#options li').click(function (ev) {
+    var $el = $(this)
+    selectTab($el)
+  })
+
+  appEvent.register('debuggingRequested', () => {
+    selectTab($('ul#options li.debugView'))
+  })
+
+  // initialize tabbed menu
+  selectTab($('#options .envView'))
+
+  // add event listeners for loading spinner
+  compilerEvent.register('loadingCompiler', function start () {
+    var settingsTab = document.querySelector('.settingsView')
+    if (settingsTab.children.length) return
+
+    var spinner = loadingSpinner()
+    settingsTab.appendChild(spinner)
+
+    rendererAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
+    compilerEvent.register('compilerLoaded', finish)
+    function finish () {
+      compilerEvent.unregister('compilerLoaded', finish)
+      settingsTab.removeChild(spinner)
+    }
+  })
+
+  // select tab
+  function selectTab (el) {
+    var match = /[a-z]+View/.exec(el.get(0).className)
+    if (!match) return
+    var cls = match[0]
+    if (!el.hasClass('active')) {
+      el.parent().find('li').removeClass('active')
+      $('#optionViews').attr('class', '').addClass(cls)
+      el.addClass('active')
+    }
+    appEvent.trigger('tabChanged', [cls])
+  }
+}

test-browser/tests/smoke-test.js

@@ -10,6 +10,7 @@ module.exports = {
   'Smoke test': function (browser) {
     browser
       .waitForElementVisible('#righthand-panel', 10000)
+      .click('.settingsView')
       .assert.containsText('#righthand-panel', 'Solidity version')
       .end()
   },