Merge pull request #1982 from ethereum/origin/master_lia

src/app/tabs/runTab/settings.js

@@ -87,7 +87,9 @@ class SettingsUI {
       <div class="${css.crow}">
         <div class="${css.col1_1}">
           Account
-          <i class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
+          <span id="remixRunPlusWraper" title="Create a new account">
+            <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i>
+          </span>
         </div>
         <div class=${css.account}>
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
@@ -194,6 +196,36 @@ class SettingsUI {
     this.event.trigger('clearInstance', [])
     this.updateNetwork()
     this.fillAccountsList()
+    this.updatePlusButton()
+  }
+
+  updatePlusButton () {
+    // enable/disable + button
+    let plusBtn = document.getElementById('remixRunPlus')
+    let plusTitle = document.getElementById('remixRunPlusWraper')
+    switch (this.selectExEnv.value) {
+      case 'injected': {
+        plusBtn.classList.add(css.disableMouseEvents)
+        plusTitle.title = "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)."
+      }
+        break
+      case 'vm': {
+        plusBtn.classList.remove(css.disableMouseEvents)
+        plusTitle.title = 'Create a new account'
+      }
+        break
+      case 'web3': {
+        if (!this._components.registry.get('config').api.get('settings/personal-mode')) {
+          plusBtn.classList.add(css.disableMouseEvents)
+          plusTitle.title = 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.'
+        } else {
+          plusBtn.classList.remove(css.disableMouseEvents)
+          plusTitle.title = 'Create a new account'
+        }
+      }
+        break
+      default:
+    }
   }
 
   newAccount () {

src/app/tabs/settings-tab.js

@@ -29,7 +29,10 @@ module.exports = class SettingsTab extends BaseApi {
     }
     this._view = { /* eslint-disable */
       el: null,
-      optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
+      optionVM: null,
+      personal: null,
+      warnPersonalMode: null,
+      generateContractMetadata: null,
       config: {
         general: null, themes: null
       }
@@ -72,12 +75,6 @@ module.exports = class SettingsTab extends BaseApi {
     if (this.config.get('settings/always-use-vm')) this._view.optionVM.setAttribute('checked', '')
     this._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox" class="align-middle form-check-input">`
     if (this.config.get('settings/personal-mode')) this._view.personal.setAttribute('checked', '')
-    var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
-    This mode allows to provide the passphrase in the Remix interface without having to unlock the account.
-    Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
-    It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM.
-    Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
-    this._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
     this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox" class="form-check-input">`
 
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')
@@ -94,6 +91,13 @@ module.exports = class SettingsTab extends BaseApi {
       <button class="btn btn-primary sm-1" onclick="${() => { window.open('https://gitter.im/ethereum/remix') }}">Gitter Channel</button>
       </div>
     </div>`
+
+    var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it.
+    This mode allows to provide the passphrase in the Remix interface without having to unlock the account.
+    Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
+    Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
+    this._view.warnPersonalMode = yo`<i class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
+
     this._view.config.general = yo`
       <div class="${css.info} card">
         <div class="card-body">
@@ -112,7 +116,7 @@ module.exports = class SettingsTab extends BaseApi {
           </div>
           <div class="form-check ${css.frow}">
             <div>${this._view.personal}></div>
-            <label class="form-check-label align-middle" for="personal">Enable Personal Mode ${this._view.warnPersonalMode}></label>
+            <label class="form-check-label align-middle" for="personal"> ${this._view.warnPersonalMode} Enable Personal Mode for web3 provider. ${warnText}></label>
           </div>
         </div>
       </div>

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

@@ -178,6 +178,9 @@ var css = csjs`
     border-radius: 3px;
     margin-left: 5px;
   }
+  .disableMouseEvents {
+    pointer-events: none;
+  }
   .icon {
     cursor: pointer;
     font-size: 12px;