Eth work Compiler Plugin UI update

src/app/components/side-panel.js

@@ -23,9 +23,9 @@ const css = csjs`
     font-size: 14px;
   }
   .swapitHeader {
-    height: 35px;
     display: flex;
     align-items: center;
+    padding: 16px 24px 15px;
   }
   .icons i {
     height: 80%;
@@ -128,7 +128,7 @@ export class SidePanel extends AbstractPanel {
     }
 
     const header = yo`
-      <header class="${css.swapitHeader} px-3">
+      <header class="${css.swapitHeader}">
         <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
         ${docLink}
         ${versionWarning}

src/app/tabs/compileTab/compilerContainer.js

@@ -121,16 +121,11 @@ class CompilerContainer {
   compilationButton (name = '') {
     const displayed = name || '<no file selected>'
     const disabled = name && this.isSolFileSelected() ? '' : 'disabled'
-    const compileBtn = yo`
-      <button id="compileBtn" data-id="compilerContainerCompileBtn" class="btn btn-primary btn-block ${disabled}" title="Compile" onclick="${this.compile.bind(this)}">
+    return yo`
+      <button id="compileBtn" data-id="compilerContainerCompileBtn" class="btn btn-primary btn-block ${disabled} mt-3" title="Compile" onclick="${this.compile.bind(this)}">
         <span>${this._view.compileIcon} Compile ${displayed}</span>
       </button>
     `
-    return yo`
-      <div class="px-2 mt-2 pb-0 d-flex">
-        ${compileBtn}
-      </div>
-    `
   }
 
   _disableCompileBtn (shouldDisable) {
@@ -189,12 +184,12 @@ class CompilerContainer {
 
     this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>`
     this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>`
-    this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" data-id="compilerContainerAutoCompile" 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">`
+    this._view.autoCompile = yo`<input class="${css.autocompile} custom-control-input" onchange=${this.updateAutoCompile.bind(this)} data-id="compilerContainerAutoCompile" id="autoCompile" type="checkbox" title="Auto compile">`
+    this._view.hideWarningsBox = yo`<input class="${css.autocompile} custom-control-input" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
     if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')
     if (this.data.hideWarnings) this._view.hideWarningsBox.setAttribute('checked', '')
 
-    this._view.optimize = yo`<input onchange=${this.onchangeOptimize.bind(this)} id="optimize" type="checkbox">`
+    this._view.optimize = yo`<input onchange=${this.onchangeOptimize.bind(this)} class="custom-control-input" id="optimize" type="checkbox">`
     if (this.compileTabLogic.optimize) this._view.optimize.setAttribute('checked', '')
 
     this._view.versionSelector = yo`
@@ -238,67 +233,51 @@ class CompilerContainer {
     this._view.compilationButton = this.compilationButton()
 
     this._view.includeNightlies = yo`
-      <input class="mr-0 ml-1" id="nightlies" type="checkbox" onchange=${() => this._updateVersionSelector()}>
+      <input class="mr-2 custom-control-input" id="nightlies" type="checkbox" onchange=${() => this._updateVersionSelector()}>
     `
     this._view.compileContainer = yo`
       <section>
         <!-- Select Compiler Version -->
         <article>
-          <header class="navbar navbar-light p-2 bg-light">
-            <div class="row w-100 no-gutters mb-2">
-              <div class="col-sm-4">
-                <div class="d-flex flex-row justify-content-end">
-                  <label class="${css.compilerLabel} form-check-label input-group-text pr-0 border-0 w-100" for="versionSelector">
-                    <button class="far fa-plus-square border-0 p-0 mx-2 btn-sm" onclick="${(e) => this.promtCompiler(e)}" title="Add a custom compiler with URL"></button>
-                    Compiler
-                  </label>
-                </div>
-              </div>
-              <div class="col-sm-8">
-                ${this._view.versionSelector}
-                <div class="pt-0 ${css.nightlyBuilds}">
-                  <label for="nightlies" class="text-dark p-0 m-0 form-check-label">Include nightly builds</label>
-                  ${this._view.includeNightlies}
-                </div>
-              </div>
+          <header class="${css.compilerSection} border-bottom">
+            <div class="mb-2">
+              <label class="${css.compilerLabel} form-check-label" for="versionSelector">
+                Compiler
+                <button class="far fa-plus-square border-0 p-0 mx-2 btn-sm" onclick="${(e) => this.promtCompiler(e)}" title="Add a custom compiler with URL"></button>
+              </label>
+              ${this._view.versionSelector}
             </div>
-            <div class="row w-100 no-gutters mb-2">
-              <div class="col-sm-4">
-                <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
-              </div>
-              <div class="col-sm-8">
-                ${this._view.languageSelector}
-              </div>
+            <div class="mb-2 ${css.nightlyBuilds} custom-control custom-checkbox">
+              ${this._view.includeNightlies}
+              <label for="nightlies" class="form-check-label custom-control-label">Include nightly builds</label>
+            </div>
+            <div class="mb-2">
+              <label class="${css.compilerLabel} form-check-label" for="compilierLanguageSelector">Language</label>
+              ${this._view.languageSelector}
+            </div>
+            <div class="mb-2">
+              <label class="${css.compilerLabel} form-check-label" for="evmVersionSelector">EVM Version</label>
+              ${this._view.evmVersionSelector}
             </div>
-            <div class="row w-100 no-gutters">
-              <div class="col-sm-4">
-                <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label>
+            <div class="mt-3">
+              <p class="mt-2 ${css.compilerLabel}">Compiler Configuration</p>
+              <div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
+                ${this._view.autoCompile}
+                <label class="form-check-label custom-control-label" for="autoCompile">Auto compile</label>
               </div>
-              <div class="col-sm-8">
-                ${this._view.evmVersionSelector}
+              <div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
+                ${this._view.optimize}
+                <label class="form-check-label custom-control-label" for="optimize">Enable optimization</label>
+              </div>
+              <div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
+                ${this._view.hideWarningsBox}
+                <label class="form-check-label custom-control-label" for="hideWarningsBox">Hide warnings</label>
               </div>
             </div>
+            ${this._view.compilationButton}
           </header>
-          ${this._view.compilationButton}
         </article>
         <!-- Config -->
-        <article class="p-2">
-          <small class="${css.compilerSm}">Compiler Configuration</small>
-          <ul class="list-group list-group-flush">
-            <li class="list-group-item form-group ${css.compilerConfig}">
-              ${this._view.autoCompile}
-              <label class="form-check-label" for="autoCompile">Auto compile</label>
-            </li>
-            <li class="list-group-item form-group ${css.compilerConfig}">
-              ${this._view.optimize}
-              <label class="form-check-label" for="optimize">Enable optimization</label>
-            </li>
-            <li class="list-group-item form-group ${css.compilerConfig}">
-              ${this._view.hideWarningsBox}
-              <label class="form-check-label" for="hideWarningsBox">Hide warnings</label>
-            </li>
-          </ul>
-        </article>
       </section>`
 
     return this._view.compileContainer

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

@@ -37,8 +37,6 @@ const css = csjs`
   .nightlyBuilds {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
-    align-content: center;
     align-items: center;
   }
   .autocompileContainer {
@@ -71,11 +69,20 @@ const css = csjs`
   .compilerConfig label {
     margin: 0;
   }
-  .compilerSm {
-    padding-left: 1.25rem;
+  .compilerSection {
+    padding: 12px 24px 16px;
   }
   .compilerLabel {
-    direction: rtl;
+    margin-bottom: 2px;
+    font-size: 11px;
+    line-height: 12px;
+    text-transform: uppercase;
+  }
+  .copyButton {
+    padding: 6px;
+    font-weight: bold;
+    font-size: 11px;
+    line-height: 15px;
   }
   .name {
     display: flex;
@@ -107,7 +114,7 @@ const css = csjs`
     align-items: center;
   }
   .contractHelperButtons {
-    margin-top: 10px;
+    margin-top: 6px;
     display: flex;
     align-items: center;
     justify-content: space-between;

src/app/tabs/theme-module.js

@@ -4,8 +4,8 @@ import * as packageJson from '../../../package.json'
 import yo from 'yo-yo'
 
 const themes = [
-  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/remix-dark-theme_w5nghe.css'},
-  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/light-theme_fswxxf.css'},
+  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'},
+  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584966540/remix-light_t0c780.css'},
 
   {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
   {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},

test-browser/commands/verifyContracts.js

@@ -16,9 +16,9 @@ function getCompiledContracts (browser, opts, callback) {
   browser
   .clickLaunchIcon('solidity')
   .pause(opts.wait)
-  .waitForElementPresent('#compileTabView select#compiledContracts option')
+  .waitForElementPresent('*[data-id="compiledContracts"] option')
   .execute(function () {
-    var contracts = document.querySelectorAll('#compileTabView select#compiledContracts option')
+    var contracts = document.querySelectorAll('*[data-id="compiledContracts"] option')
     if (!contracts) {
       return null
     } else {

test-browser/helpers/init.js

@@ -7,7 +7,11 @@ module.exports = function (browser, callback, url, preloadPlugins = true) {
       browser.resizeWindow(2560, 1440, () => {
         if (preloadPlugins) {
           initModules(browser, () => {
-            browser.clickLaunchIcon('solidity').click('#autoCompile')
+            browser.clickLaunchIcon('solidity')
+            .pause(2000)
+            .execute(() => {
+              document.getElementById('autoCompile').click()
+            })
             .perform(function () {
               callback()
             })