modalPrompt, modalConfirm

src/app/files/chromeCloudStorageSync.js

@@ -1,5 +1,6 @@
-/* global confirm, chrome */
+/* global chrome */
 'use strict'
+var modalDialogCustom = require('../ui/modal-dialog-custom')
 
 module.exports = function (filesProviders) {
   if (typeof chrome === 'undefined' || !chrome || !chrome.storage || !chrome.storage.sync) {
@@ -13,19 +14,27 @@ module.exports = function (filesProviders) {
   function check (key) {
     chrome.storage.sync.get(key, function (resp) {
       console.log('comparing to cloud', key, resp)
-      if (typeof resp[key] !== 'undefined' && obj[key] !== resp[key] && confirm('Overwrite "' + key + '"? Click Ok to overwrite local file with file from cloud. Cancel will push your local file to the cloud.')) {
-        console.log('Overwriting', key)
-        filesProviders['browser'].set(key, resp[key])
-      } else {
-        console.log('add to obj', obj, key)
-        filesProviders['browser'].get(key, (error, content) => {
-          if (error) {
-            console.log(error)
-          } else {
-            obj[key] = content
-          }
-        })
+
+      function confirmDialog (callback) {
+        modalDialogCustom.confirm('', 'Overwrite "' + key + '"? Click Ok to overwrite local file with file from cloud. Cancel will push your local file to the cloud.', () => { callback(true) }, () => { callback(false) })
       }
+
+      confirmDialog(function (theResult) {
+        if (typeof resp[key] !== 'undefined' && obj[key] !== resp[key] && theResult) {
+          console.log('Overwriting', key)
+          filesProviders['browser'].set(key, resp[key])
+        } else {
+          console.log('add to obj', obj, key)
+          filesProviders['browser'].get(key, (error, content) => {
+            if (error) {
+              console.log(error)
+            } else {
+              obj[key] = content
+            }
+          })
+        }
+      })
+
       done++
       if (done >= count) {
         chrome.storage.sync.set(obj, function () {

src/app/files/file-explorer.js

@@ -1,4 +1,4 @@
-/* global FileReader, confirm */
+/* global FileReader */
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var Treeview = require('ethereum-remix').ui.TreeView
@@ -133,8 +133,7 @@ function fileExplorer (appAPI, files) {
   this.events = events
   var api = {}
   api.addFile = function addFile (file) {
-    var name = files.type + '/' + file.name
-    if (!files.exists(name) || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) {
+    function loadFile () {
       var fileReader = new FileReader()
       fileReader.onload = function (event) {
         var success = files.set(name, event.target.result)
@@ -143,6 +142,13 @@ function fileExplorer (appAPI, files) {
       }
       fileReader.readAsText(file)
     }
+
+    var name = files.type + '/' + file.name
+    if (!files.exists(name)) {
+      loadFile()
+    } else {
+      modalDialogCustom.confirm(null, `The file ${name} already exists! Would you like to overwrite it?`, () => { loadFile() })
+    }
   }
   this.api = api
 
@@ -193,10 +199,10 @@ function fileExplorer (appAPI, files) {
     var path = label.dataset.path
     var isFolder = !!~label.className.indexOf('folder')
     if (isFolder) path += '/'
-    if (confirm(`Do you really want to delete "${path}" ?`)) {
+    modalDialogCustom.confirm(null, `Do you really want to delete "${path}" ?`, () => {
       li.parentElement.removeChild(li)
       removeSubtree(files, path, isFolder)
-    }
+    })
   }
 
   function editModeOn (event) {
@@ -213,31 +219,38 @@ function fileExplorer (appAPI, files) {
 
   function editModeOff (event) {
     var label = this
+    function rename () {
+      var newPath = label.dataset.path
+      newPath = newPath.split('/')
+      newPath[newPath.length - 1] = label.innerText
+      newPath = newPath.join('/')
+      if (label.innerText === '') {
+        modalDialogCustom.alert('File name cannot be empty')
+        label.innerText = textUnderEdit
+      } else if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) {
+        modalDialogCustom.alert('Special characters are not allowed')
+        label.innerText = textUnderEdit
+      } else if (!files.exists(newPath)) {
+        files.rename(label.dataset.path, newPath, isFolder)
+      } else {
+        modalDialogCustom.alert('File already exists.')
+        label.innerText = textUnderEdit
+      }
+    }
+
+    function cancelRename () {
+      label.innerText = textUnderEdit
+      label.removeAttribute('contenteditable')
+      label.classList.remove(css.rename)
+    }
+
     if (event.which === 13) event.preventDefault()
     if ((event.type === 'blur' || event.which === 27 || event.which === 13) && label.getAttribute('contenteditable')) {
       var isFolder = label.className.indexOf('folder') !== -1
       var save = textUnderEdit !== label.innerText
-      if (save && event.which !== 13) save = confirm('Do you want to rename?')
-      if (save) {
-        var newPath = label.dataset.path
-        newPath = newPath.split('/')
-        newPath[newPath.length - 1] = label.innerText
-        newPath = newPath.join('/')
-        if (label.innerText === '') {
-          modalDialogCustom.alert('File name cannot be empty')
-          label.innerText = textUnderEdit
-        } else if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) {
-          modalDialogCustom.alert('Special characters are not allowed')
-          label.innerText = textUnderEdit
-        } else if (!files.exists(newPath)) {
-          files.rename(label.dataset.path, newPath, isFolder)
-        } else {
-          modalDialogCustom.alert('File already exists.')
-          label.innerText = textUnderEdit
-        }
-      } else label.innerText = textUnderEdit
-      label.removeAttribute('contenteditable')
-      label.classList.remove(css.rename)
+      if (save && event.which !== 13) {
+        modalDialogCustom.confirm(null, `Do you want to rename?`, () => { rename() }, () => { cancelRename() })
+      }
     }
   }
 

src/app/panels/file-panel.js

@@ -1,4 +1,3 @@
-/* global confirm, prompt */
 var async = require('async')
 var $ = require('jquery')
 var csjs = require('csjs-inject')
@@ -314,13 +313,15 @@ function filepanel (appAPI, filesProvider) {
         modalDialogCustom.alert('Failed to create gist: ' + (data || 'Unknown transport error'))
       } else {
         data = JSON.parse(data)
-        if (data.html_url && confirm('Created a gist at ' + data.html_url + ' Would you like to open it in a new window?')) {
-          window.open(data.html_url, '_blank')
+        if (data.html_url) {
+          modalDialogCustom.confirm(null, `Created a gist at ${data.html_url}. Would you like to open it in a new window?`, () => {
+            window.open(data.html_url, '_blank')
+          })
         }
       }
     }
-    if (confirm('Are you sure you want to publish all your files anonymously as a public gist on github.com?')) {
-      // package only files from the browser storage.
+
+    function toGist () {
       packageFiles(filesProvider['browser'], (error, packaged) => {
         if (error) {
           console.log(error)
@@ -339,30 +340,31 @@ function filepanel (appAPI, filesProvider) {
         }
       })
     }
+    modalDialogCustom.confirm(null, `Are you very sure you want to publish all your files anonymously as a public gist on github.com?`, () => {
+      toGist()
+    })
   }
 
   // ------------------ copy files --------------
 
   function copyFiles () {
-    var target = prompt(
-      'To which other browser-solidity instance do you want to copy over all files?',
-      'https://ethereum.github.io/browser-solidity/'
-    )
-    if (target === null) {
-      return
-    }
-    // package only files from the browser storage.
-    packageFiles(filesProvider['browser'], (error, packaged) => {
-      if (error) {
-        console.log(error)
-      } else {
-        $('<iframe/>', {
-          src: target,
-          style: 'display:none;',
-          load: function () { this.contentWindow.postMessage(['loadFiles', packaged], '*') }
-        }).appendTo('body')
-      }
+    modalDialogCustom.prompt(null, 'To which other browser-solidity instance do you want to copy over all files?', 'https://ethereum.github.io/browser-solidity/', (target) => {
+      doCopy(target)
     })
+    function doCopy (target) {
+      // package only files from the browser storage.
+      packageFiles(filesProvider['browser'], (error, packaged) => {
+        if (error) {
+          console.log(error)
+        } else {
+          $('<iframe/>', {
+            src: target,
+            style: 'display:none;',
+            load: function () { this.contentWindow.postMessage(['loadFiles', packaged], '*') }
+          }).appendTo('body')
+        }
+      })
+    }
   }
 }
 

src/app/tabs/run-tab.js

@@ -199,9 +199,11 @@ function runTab (container, appAPI, appEvents, opts) {
   // DROPDOWN
   var selectExEnv = el.querySelector('#selectExEnvOptions')
   selectExEnv.addEventListener('change', function (event) {
-    if (!executionContext.executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value)) {
+    executionContext.executionContextChange(selectExEnv.options[selectExEnv.selectedIndex].value, null, () => {
       selectExEnv.value = executionContext.getProvider()
-    }
+      console.log('came back neg')
+    })
+
     fillAccountsList(appAPI, el)
     instanceContainer.innerHTML = '' // clear the instances list
     noInstancesText.style.display = 'block'

src/app/ui/modal-dialog-custom.js

@@ -1,7 +1,35 @@
 var modal = require('./modaldialog.js')
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .prompt_text {
+    width: 300px;
+  }
+`
 module.exports = {
   alert: function (text) {
     modal('', yo`<div>${text}</div>`, null, { label: null })
+  },
+  prompt: function (title, text, inputValue, ok, cancel) {
+    modal(title,
+  yo`<div>${text}<div><input type='text' name='prompt_text' id='prompt_text' class="${css['prompt_text']}" value='${inputValue}' ></div></div>`,
+      {
+        fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }
+      },
+      {
+        fn: () => { if (typeof cancel === 'function') cancel() }
+      }
+    )
+  },
+  confirm: function (title, text, ok, cancel) {
+    modal(title, yo`<div>${text}</div>`,
+      {
+        fn: () => { if (typeof ok === 'function') ok() }
+      },
+      {
+        fn: () => { if (typeof cancel === 'function') cancel() }
+      }
+    )
   }
 }

src/app/ui/modaldialog.js

@@ -79,10 +79,36 @@ var css = csjs`
 
 module.exports = (title, content, ok, cancel) => {
   var container = document.querySelector(`.${css.modal}`)
+  console.log('top of export')
+  // this should check to see if the child has been appended
   if (!container) {
+  // if (!document.querySelector(`.${css.modalBody}`)) {
+    console.log('no container')
     document.querySelector('body').appendChild(html())
     container = document.querySelector(`.${css.modal}`)
+    // container.style.display = 'block'
+    // console.log('LOOK HERE' + document.querySelector(`.${css.modal}`).innerHTML)
+    // console.log('HEHE ' + container.style.display)
+    // console.log('HOHO ' + document.querySelector(`.${css.modal}`).style.display)
+  } else {
+    console.log('container exists and is ' + JSON.stringify(container))
+    if (!container.innerHTML) {
+      document.querySelector('body').appendChild(html())
+      container = document.querySelector(`.${css.modal}`)
+      // console.log('container now is ' + JSON.stringify(container))
+      console.log('no display style' + container.innerHTML)
+    } else {
+      console.log('yes display style' + container.innerHTML)
+      console.log('and and console logs style' + container.style.display)
+    }
+    // but this container could just be {}
+    // document.querySelector('body').appendChild(html())
+    // container = document.querySelector(`.${css.modal}`)
+    // okDiv.addEventListener('click', okListener)
+    // cancelDiv.addEventListener('click', cancelListener)
+    // closeDiv.addEventListener('click', cancelListener)
   }
+
   var closeDiv = document.getElementById('modal-close')
 
   var okDiv = document.getElementById('modal-footer-ok')
@@ -100,35 +126,53 @@ module.exports = (title, content, ok, cancel) => {
   modal.innerHTML = ''
   if (content) modal.appendChild(content)
 
-  container.style.display = container.style.display === 'block' ? hide() : show()
+  // why the flip of display here? - when this script runs it needs to turn off or on the modal - so I guess that is the reason
+  // I don't understand the next line
+  // container.style.display = container.style.display === 'block' ? hide() : show()
+
+  // if (container.style.display === 'block') {
+  //   // container.style.display = 'none'
+  //   hide()
+  // } else {
+  //   // container.style.display = 'block'
+  //   show()
+  // }
+  show()
 
   function okListener () {
+    console.log('OK OK OK')
+    removeEventListener()
     hide()
     if (ok && ok.fn) ok.fn()
-    removeEventListener()
   }
 
   function cancelListener () {
-    hide()
     if (cancel && cancel.fn) cancel.fn()
+    hide()
     removeEventListener()
   }
 
   function hide () {
+    console.log('hit hide')
     container.style.display = 'none'
-    container.parentElement.removeChild(container)
+    // container.parentElement.removeChild(container)
+    // The next line I commented out because it made an error when okListener ran
+    // document.querySelector('body').removeChild(container)
   }
 
   function show () {
+    console.log('hit show')
     container.style.display = 'block'
+    // document.getElementById('modal-dialog').style.display = 'block'
   }
 
   function removeEventListener () {
+    console.log('removing event listeners')
     okDiv.removeEventListener('click', okListener)
     cancelDiv.removeEventListener('click', cancelListener)
     closeDiv.removeEventListener('click', cancelListener)
   }
-
+  console.log('time to add the listeners')
   okDiv.addEventListener('click', okListener)
   cancelDiv.addEventListener('click', cancelListener)
   closeDiv.addEventListener('click', cancelListener)

src/execution-context.js

@@ -1,4 +1,3 @@
-/* global confirm, prompt */
 'use strict'
 
 var Web3 = require('web3')
@@ -9,6 +8,7 @@ var StateManager = require('ethereumjs-vm/lib/stateManager')
 var remix = require('ethereum-remix')
 var Web3VMProvider = remix.web3.web3VMProvider
 var rlp = ethUtil.rlp
+var modalDialogCustom = require('./app/ui/modal-dialog-custom')
 
 var injectedProvider
 
@@ -111,32 +111,39 @@ function ExecutionContext () {
     this.executionContextChange(context, endPointUrl)
   }
 
-  this.executionContextChange = function (context, endPointUrl) {
-    if (context === 'web3' && !confirm('Are you sure you want to connect to an ethereum node?')) {
-      return false
+  this.executionContextChange = function (context, endPointUrl, cb) {
+    function runPrompt () {
+      console.log('runPrompt')
+      executionContext = context
+      if (!endPointUrl) {
+        endPointUrl = 'http://localhost:8545'
+      }
+      modalDialogCustom.prompt(null, 'Web3 Provider Endpoint', endPointUrl, (target) => {
+        setProviderFromEndpoint(target)
+        self.event.trigger('contextChanged', ['web3'])
+      })
+    }
+
+    if (context === 'web3') {
+      modalDialogCustom.confirm(null, 'Are you sure you want to connect to an ethereum node?',
+        () => { runPrompt(endPointUrl) }, () => { cb() }
+      )
     } else if (context === 'injected' && injectedProvider === undefined) {
-      return false
+      cb()
     } else {
-      if (context === 'web3') {
-        executionContext = context
-        if (!endPointUrl) {
-          endPointUrl = 'http://localhost:8545'
-        }
-        endPointUrl = prompt('Web3 Provider Endpoint', endPointUrl)
-        setProviderFromEndpoint(endPointUrl)
-        self.event.trigger('contextChanged', ['web3'])
-      } else if (context === 'injected') {
+      if (context === 'injected') {
         executionContext = context
         web3.setProvider(injectedProvider)
         self.event.trigger('contextChanged', ['injected'])
+        console.log('injected')
       } else if (context === 'vm') {
+        console.log('vm!!')
         executionContext = context
         vm.stateManager.revert(function () {
           vm.stateManager.checkpoint()
         })
         self.event.trigger('contextChanged', ['vm'])
       }
-      return true
     }
   }
 

src/lib/gist-handler.js

@@ -1,5 +1,5 @@
 'use strict'
-
+var modalDialogCustom = require('../app/ui/modal-dialog-custom')
 // Allowing window to be overriden for testing
 function GistHandler (_window) {
   if (_window === undefined) _window = window
@@ -8,11 +8,12 @@ function GistHandler (_window) {
     var loadingFromGist = false
     var gistId
     if (params['gist'] === '') {
-      var str = _window.prompt('Enter the URL or ID of the Gist you would like to load.')
-      if (str !== '') {
-        gistId = getGistId(str)
-        loadingFromGist = !!gistId
-      }
+      modalDialogCustom.prompt(null, 'Enter the URL or ID of the Gist you would like to load.', null, (target) => {
+        if (target !== '') {
+          gistId = getGistId(target)
+          loadingFromGist = !!gistId
+        }
+      })
     } else {
       gistId = params['gist']
       loadingFromGist = !!gistId