Merge pull request #2028 from ethereum/toaster_l

makes tooltip work with DOM element as an inpput

package.json

@@ -156,7 +156,7 @@
     "remix-ide": "./bin/remix-ide"
   },
   "scripts": {
-    "setupremix": "npm run linkremixdebug && npm run linkremixlib && npm run linkremixsolidity && npm run linkremixsimulator && npm run linkremixtests",
+    "setupremix": "npm run linkremixdebug && npm run linkremixlib && npm run linkremixsolidity && npm run linkremixanalyzer && npm run linkremixtests",
     "pullremix": "git clone https://github.com/ethereum/remix",
     "linkremixlib": "cd node_modules && rm -rf remix-lib && ln -s ../../remix/remix-lib remix-lib && cd ..",
     "linkremixsolidity": "cd node_modules && rm -rf remix-solidity && ln -s ../../remix/remix-solidity remix-solidity && cd ..",

src/app/files/fileManager.js

@@ -149,7 +149,13 @@ class FileManager extends FileSystemApi {
         }}>Save As Copy</button>
         </div>`
       }
-      await toaster(yo`<div><i class="fas fa-exclamation-triangle text-info mr-1"></i><span class="text-primary">${this.currentRequest.from}</span> is modyfing <span class="text-primary">${path}</span></div>`, actions, { time: 4000 })
+      await toaster(yo`
+        <div>
+          <i class="fas fa-exclamation-triangle text-danger mr-1"></i>
+          <span>
+            ${this.currentRequest.from}<span class="text-danger"> is modyfing </span>${path}
+          </span>
+        </div>`, actions, { time: 4000 })
       if (reject) throw new Error(`set file operation on ${path} aborted by user.`)
       if (savedAsAnotherFile) return
     }

src/app/panels/styles/terminal-styles.js

@@ -128,6 +128,9 @@ var css = csjs`
     border-left       : 1px solid var(--secondary)
     height            : 65%;
   }
+  .listenOnNetworkLabel {
+    white-space       : nowrap;
+  }
   .pendingTx {
     border-radius     : 50%;
     margin-right      : 30px;

src/app/panels/terminal.js

@@ -152,7 +152,7 @@ class Terminal extends BaseApi {
               title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
             >
             <label
-              class="form-check-label"
+              class="${css.listenOnNetworkLabel} form-check-label"
               title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
               for="listenNetworkCheck"
             >

src/app/ui/styles/tooltip-styles.js

@@ -15,6 +15,7 @@ var css = csjs`
     font-size: 14px;
     text-align: center;
     bottom: 0;
+    flex-direction: row;
   }
   @-webkit-keyframes animatebottom  {
     0% {bottom: -300px}

src/app/ui/tooltip.js

@@ -1,3 +1,4 @@
+/* global Element */
 var yo = require('yo-yo')
 var css = require('./styles/tooltip-styles')
 var modal = require('./modal-dialog-custom')
@@ -24,33 +25,44 @@ class Toaster {
   }
   render (tooltipText, action, opts) {
     opts = defaultOptions(opts)
-
-    if (typeof tooltipText === 'object') {
-      if (tooltipText.message) {
-        tooltipText = tooltipText.message
-      } else {
-        try {
-          tooltipText = JSON.stringify(tooltipText)
-        } catch (e) {
+    let canShorten = true
+    if (tooltipText instanceof Element) {
+      canShorten = false
+    } else {
+      if (typeof tooltipText === 'object') {
+        if (tooltipText.message) {
+          tooltipText = tooltipText.message
+        } else {
+          try {
+            tooltipText = JSON.stringify(tooltipText)
+          } catch (e) {
+          }
         }
       }
     }
 
     return new Promise((resolve, reject) => {
-      const shortTooltipText = tooltipText.length > 201 ? tooltipText.substring(0, 200) + '...' : tooltipText
+      const shortTooltipText = (canShorten && tooltipText.length > 201) ? tooltipText.substring(0, 200) + '...' : tooltipText
 
       let button = tooltipText.length > 201 ? yo`
-      <button class="btn btn-secondary btn-sm" onclick=${() => { modal.alert(tooltipText) }}>show full message</button>
+      <button class="btn btn-secondary btn-sm mx-3" style="white-space: nowrap;" onclick=${() => { modal.alert(tooltipText) }}>Show full message</button>
       ` : ``
 
       this.tooltip = yo`
-    <div class="${css.tooltip} alert alert-info" onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
-      <span>
-        ${shortTooltipText}
-        ${button}
-      </span>
-      ${action}
-    </div>`
+        <div class="${css.tooltip} alert alert-info p-2"  onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}>
+          <span class="px-2">
+            ${shortTooltipText}
+            ${button}
+            ${action}
+          </span>
+          <span style="align-self: baseline;">
+            <button class="fas fa-times btn-info mx-1 p-0" onclick=${() => {
+              this.hide()
+              over()
+              resolve()
+            }}></button>
+          </span>
+        </div>`
       let timeOut = () => {
         return setTimeout(() => {
           if (this.id) {