comilerContainer: change on currentFile changes

src/app/tabs/compileTab/compilerContainer.js

@@ -31,6 +31,15 @@ class CompilerContainer {
     this.listenToEvents()
   }
 
+  /**
+   * Update the compilation button with the name of the current file
+   */
+  set currentFile(name) {
+    if (!this._view.compilationButton) return
+    const button = this.compilationButton(name.split('/').pop())
+    yo.update(this._view.compilationButton, button)
+  }
+
   listenToEvents () {
     this.editor.event.register('contentChanged', this.scheduleCompilation.bind(this))
     this.editor.event.register('sessionSwitched', this.scheduleCompilation.bind(this))
@@ -80,6 +89,20 @@ class CompilerContainer {
     })
   }
 
+  /**************
+   * SUBCOMPONENT
+   */
+  compilationButton(name) {
+    console.log({name})
+    return yo`
+    <div class="${css.compilerArticle}">
+      <button class="btn btn-primary btn-block" title="Compile" onclick="${this.compile.bind(this)}">
+        <span>${this._view.compileIcon} Compile ${name}</span>
+      </button>
+    </div>`
+  }
+
+
   render () {
     this.compileTabLogic.compiler.event.register('compilerLoaded', (version) => this.setVersionText(version))
     this.fetchAllVersion((allversions, selectedVersion) => {
@@ -90,7 +113,6 @@ class CompilerContainer {
 
     this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
     this._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
-    this._view.compileButton = yo`<div class="${css.compileButton}" onclick=${this.compile.bind(this)} id="compile" title="Compile source code">${this._view.compileIcon} Start to compile (Ctrl-S)</div>`
     this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" type="checkbox" title="Auto compile">`
     this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
     if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')
@@ -100,37 +122,47 @@ class CompilerContainer {
     if (this.compileTabLogic.optimize) this._view.optimize.setAttribute('checked', '')
 
     this._view.versionSelector = yo`
-      <select onchange=${this.onchangeLoadVersion.bind(this)} class="${css.select}" id="versionSelector" disabled>
+      <select onchange="${this.onchangeLoadVersion.bind(this)}" class="custom-select" id="versionSelector" disabled>
         <option disabled selected>Select new compiler version</option>
       </select>`
     this._view.version = yo`<span id="version"></span>`
 
+    this._view.compilationButton = this.compilationButton()
+
     this._view.compileContainer = yo`
-      <div class="${css.compileContainer}">
-        <div class="${css.info}">
-          <span>Current version:</span> ${this._view.version}
-          <div class="${css.crow}">
-            ${this._view.versionSelector}
-          </div>
-          <div class="${css.compileButtons}">
-            <div class=${css.checkboxes}>
-              <div class="${css.autocompileContainer}">
-                ${this._view.autoCompile}
-                <label for="autoCompile" class="${css.autocompileText}">Auto compile</label>
-              </div>
-              <div class="${css.optimizeContainer}">
-                <div>${this._view.optimize}</div>
-                <label for="optimize" class="${css.checkboxText}">Enable Optimization</label>
-              </div>
-              <div class=${css.hideWarningsContainer}>
-                ${this._view.hideWarningsBox}
-                <label for="hideWarningsBox" class="${css.autocompileText}">Hide warnings</label>
-              </div>
+      <section>
+        <header class="navbar navbar-dark bg-dark">
+          <h2 class="navbar-brand">Solidity Compiler</h2>
+        </header>
+        <!-- Select Compiler Version -->
+        <article>
+          <header class="navbar navbar-light bg-light input-group mb-3">
+            <div class="input-group-prepend">
+              <label class="input-group-text" for="versionSelector">Compiler</label>
             </div>
-            ${this._view.compileButton}
-          </div>
-        </div>
-      </div>`
+            ${this._view.versionSelector}
+          </header>
+          ${this._view.compilationButton}
+        </article>
+        <!-- Config -->
+        <article>
+          <small>Compiler Configuration</small>
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item form-group ${css.compilerConfig}">
+              ${this._view.autoCompile}
+              <label for="autoCompile">Auto compile</label>
+            </li>
+            <li class="list-group-item form-group ${css.compilerConfig}">
+              ${this._view.optimize}
+              <label for="optimize">Enable Optimization</label>
+            </li>
+            <li class="list-group-item form-group ${css.compilerConfig}">
+              ${this._view.hideWarningsBox}
+              <label for="hideWarningsBox">Hide warnings</label>
+            </li>
+          </ul>
+        </article>
+      </section>`
 
     return this._view.compileContainer
   }
@@ -160,14 +192,18 @@ class CompilerContainer {
 
   _updateVersionSelector () {
     this._view.versionSelector.innerHTML = ''
-    this._view.versionSelector.appendChild(yo`<option disabled selected>Select new compiler version</option>`)
-    this.data.allversions.forEach(build => this._view.versionSelector.appendChild(yo`<option value=${build.path}>${build.longVersion}</option>`))
+    this.data.allversions.forEach(build => {
+      const option = build.path === this.data.selectedVersion 
+        ? yo`<option value="${build.path}" selected>${build.longVersion}</option>`
+        : yo`<option value="${build.path}">${build.longVersion}</option>`
+      this._view.versionSelector.appendChild(option)
+    })
     this._view.versionSelector.removeAttribute('disabled')
     this.queryParams.update({ version: this.data.selectedVersion })
-    var url
+    let url
     if (this.data.selectedVersion === 'builtin') {
-      var location = window.document.location
-      location = location.protocol + '//' + location.host + '/' + location.pathname
+      let location = window.document.location
+      location = `${location.protocol}//${location.host}/${location.pathname}`
       if (location.endsWith('index.html')) location = location.substring(0, location.length - 10)
       if (!location.endsWith('/')) location += '/'
       url = location + 'soljson.js'
@@ -177,7 +213,7 @@ class CompilerContainer {
       }
       url = `${this.data.baseurl}/${this.data.selectedVersion}`
     }
-    var isFirefox = typeof InstallTrigger !== 'undefined'
+    const isFirefox = typeof InstallTrigger !== 'undefined'
     if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) {
       // Workers cannot load js on "file:"-URLs and we get a
       // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,