disable start debug, Swap title style

src/app/components/side-panel.js

@@ -10,6 +10,8 @@ const css = csjs`
   .swapitTitle {
     text-transform: uppercase;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .swapitTitle i{
     padding-left: 6px;
@@ -21,6 +23,7 @@ const css = csjs`
     display: flex;
     justify-content: space-between;
     align-items: center;
+    justify-content: flex-start;
   }
   .swapitHeader h6 {
     margin: 0;
@@ -33,6 +36,9 @@ const css = csjs`
     height: calc(100% - 35px);
     overflow: auto;
   }
+  .titleInfo {
+    padding-left: 10px;
+  }
 `
 
 const options = {
@@ -56,22 +62,23 @@ export class SidePanel extends AbstractPanel {
     yo.update(this.header, this.renderHeader())
   }
 
-  /** The header of the swap panel */
+  /** The header of the side panel */
   renderHeader () {
     let name = ' - '
     let docLink = ''
     if (this.active) {
       const { profile } = this.store.getOne(this.active)
       name = profile.displayName ? profile.displayName : profile.name
       const docsRoot = 'https://remix.readthedocs.io/en/latest/'
-      docLink = profile.documentation ? yo`<a href="${docsRoot}${profile.documentation}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
+      docLink = profile.documentation ? yo`<a href="${docsRoot}${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
     }
 
     return yo`
-    <header class="${css.swapitHeader}">
-  <h6 class="${css.swapitTitle}">${name}${docLink}</h6>
-      </div>
-    </header>`
+      <header class="${css.swapitHeader}">
+        <h6 class="${css.swapitTitle}">${name}</h6>
+        ${docLink}
+      </header>
+    `
   }
 
   render () {

src/app/components/vertical-icons.js

@@ -78,7 +78,7 @@ export class VerticalIcons {
     this.icons[name] = yo`
       <div
         class="${css.icon}"
-        onclick="${() => { this._iconClick(name) }}"
+        onclick="${() => { this.toggle(name) }}"
         plugin="${name}"
         title="${title}">
         <img class="image" src="${icon}" alt="${name}" />
@@ -196,9 +196,22 @@ export class VerticalIcons {
    * @param {string} name Name of profile of the module to activate
    */
   select (name) {
+    this.updateActivations(name)
+    this.events.emit('showContent', name)
+  }
+
+  /**
+   * Toggles the side panel for plugin
+   * @param {string} name Name of profile of the module to activate
+   */
+  toggle (name) {
+    this.updateActivations(name)
+    this.events.emit('toggleContent', name)
+  }
+
+  updateActivations (name) {
     this.removeActive()
     this.addActive(name)
-    this.events.emit('showContent', name)
   }
 
   onThemeChanged (themeType) {
@@ -210,18 +223,19 @@ export class VerticalIcons {
     }
   }
 
-  _iconClick (name) {
-    this.removeActive()
-    this.addActive(name)
-    this.events.emit('toggleContent', name)
+  /**
+   * Show the home page
+   */
+  showHome () {
+    globalRegistry.get('appmanager').api.ensureActivated('home')
   }
 
   render () {
     let home = yo`
     <div
       class="${css.homeIcon}"
       onclick="${(e) => {
-        globalRegistry.get('appmanager').api.ensureActivated('home')
+        this.showHome()
       }}"
       plugin="${this.homeProfile.name}" title="${this.homeProfile.displayName}"
     >
@@ -345,15 +359,15 @@ export class VerticalIcons {
 
     this.view = yo`
       <div class=${css.icons}>
-      ${home}
-      ${this.iconKind['fileexplorer']}
-      ${this.iconKind['compile']}
-      ${this.iconKind['run']}
-      ${this.iconKind['testing']}
-      ${this.iconKind['analysis']}
-      ${this.iconKind['debugging']}
-      ${this.iconKind['other']}
-      ${this.iconKind['settings']}
+        ${home}
+        ${this.iconKind['fileexplorer']}
+        ${this.iconKind['compile']}
+        ${this.iconKind['run']}
+        ${this.iconKind['testing']}
+        ${this.iconKind['analysis']}
+        ${this.iconKind['debugging']}
+        ${this.iconKind['other']}
+        ${this.iconKind['settings']}
       </div>
     `
     return this.view

src/app/debugger/debuggerUI/TxBrowser.js

@@ -94,7 +94,7 @@ TxBrowser.prototype.render = function () {
             />
           </div>
           <div class="${css.txbuttons} btn-group p-1">
-            <button class='btn btn-primary btn-sm ${css.txbutton}' id='load' title='${this.state.debugging ? 'Stop' : 'Start'} debugging' onclick=${function () { self.submit() }}>${this.state.debugging ? 'Stop' : 'Start'} debugging</button>
+            <button class='btn btn-primary btn-sm ${css.txbutton}' disabled="${this.state.txNumber ? 'false' : 'true'}" id='load' title='${this.state.debugging ? 'Stop' : 'Start'} debugging' onclick=${function () { self.submit() }}>${this.state.debugging ? 'Stop' : 'Start'} debugging</button>
           </div>
         </div>
         <span id='error'></span>

src/app/files/file-explorer.js

@@ -522,12 +522,12 @@ fileExplorer.prototype.renderMenuItems = function () {
     items = this.menuItems.map(({action, title, icon}) => {
       if (action === 'uploadFile') {
         return yo`
-          <label class="${icon} ${css.newFile}"  title="${title}">
+          <span class="${icon} ${css.newFile}"  title="${title}">
             <input type="file" onchange=${(event) => {
               event.stopPropagation()
               this.uploadFile(event)
             }} multiple />
-          </label>
+          </span>
         `
       } else {
         return yo`

src/app/tabs/run-tab.js

@@ -18,7 +18,7 @@ import { BaseApi } from 'remix-plugin'
 
 const profile = {
   name: 'run',
-  displayName: 'Deploy and run transactions',
+  displayName: 'Deploy & run transactions',
   methods: [],
   events: [],
   icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzFfY29weSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ig0KCSB5PSIwcHgiIHdpZHRoPSI3NDIuNTQ1cHgiIGhlaWdodD0iNjc2Ljg4NnB4IiB2aWV3Qm94PSIwIC0wLjIwNCA3NDIuNTQ1IDY3Ni44ODYiDQoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAtMC4yMDQgNzQyLjU0NSA2NzYuODg2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwb2x5Z29uIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjI5NS45MTEsMC43MTEgNDg4LjkxMSwzMDQuMTg2IDQ4OC45MTEsMzk3LjE4MSAyOTMuOTExLDY3Ni41NTYgDQoJCTc0MS43ODYsMzQ5Ljk0MyAJIi8+DQoJPHBvbHlnb24gc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDE3LjA4Myw0MDYuNTg5IDIwOS43OTEsNTE5LjQ5NCAxLjg0Niw0MDYuMjM0IDIwOS43OTEsNjc1Ljg2MyAJIi8+DQoJPHBvbHlnb24gc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNDE3LjA4MywzMTguNzA3IDIwOS43OTEsMC43MTEgMS44NDYsMzE4LjQyOCAyMDkuNzkxLDQzMS42ODkgCSIvPg0KPC9nPg0KPC9zdmc+DQo=',

src/app/ui/landing-page/landing-page.js

@@ -96,9 +96,12 @@ export class LandingPage extends BaseApi {
     let load = function (service, item, examples, info) {
       let compilerImport = new CompilerImport()
       let fileProviders = globalRegistry.get('fileproviders').api
-      const msg = yo`<div class="p-2"><span>Enter the ${item} you would like to load.</span>
-      <div>${info}</div>
-      <div>e.g ${examples.map((url) => { return yo`<div class="p-1"><a>${url}</a></div>` })}</div></div>`
+      const msg = yo`
+        <div class="p-2">
+          <span>Enter the ${item} you would like to load.</span>
+          <div>${info}</div>
+          <div>e.g ${examples.map((url) => { return yo`<div class="p-1"><a>${url}</a></div>` })}</div>
+        </div>`
 
       modalDialogCustom.prompt(`Import from ${service}`, msg, null, (target) => {
         if (target !== '') {

src/app/ui/tooltip.js

@@ -23,7 +23,7 @@ class Toaster {
     }, 2000)
     animation(this.tooltip, css.animateTop.className)
   }
-  render (tooltipText, action, opts) {
+  render (tooltipText, actionElement, opts) {
     opts = defaultOptions(opts)
     let canShorten = true
     if (tooltipText instanceof Element) {
@@ -53,7 +53,7 @@ class Toaster {
           <span class="px-2">
             ${shortTooltipText}
             ${button}
-            ${action}
+            ${actionElement}
           </span>
           <span style="align-self: baseline;">
             <button class="fas fa-times btn-info mx-1 p-0" onclick=${() => {

src/framingService.js

@@ -11,7 +11,7 @@ export default {
     })
 
     verticalIcon.select('fileExplorers')
-    mainPanel.showContent('home')
+    verticalIcon.showHome()
 
     document.addEventListener('keypress', (e) => {
       if (e.shiftKey && e.ctrlKey) {

src/universal-dapp-ui.js

@@ -73,12 +73,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
       <div class="input-group ${css.nameNbuts}">
         <div class="${css.titleText} input-group-prepend"><span class="input-group-text ${css.spanTitleText}"> ${contractName} at ${shortAddress} (${context})</span></div>
         <div class="btn-group">
-          <button class="btn p-2 btn-secondary">${copyToClipboard(() => address)}</button>
+          <button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button>
         </div>
       </div>
   </div>`
 
-  var close = yo`<button class="${css.udappClose} p-2 btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i></button>`
+  var close = yo`<button class="${css.udappClose} p-1 btn btn-secondary" onclick=${remove} title="Remove from the list"><i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i></button>`
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`