refactor settings tab

src/app/tabs/settings-tab.js

@@ -1,50 +1,98 @@
-/* global Option, Worker */
+/* global Worker */
-var $ = require('jquery')
 var yo = require('yo-yo')
-var request = require('request')
+var csjs = require('csjs-inject')
-var QueryParams = require('../../lib/query-params')
+var minixhr = require('minixhr')
 var remixLib = require('remix-lib')
-var Storage = remixLib.Storage
+var QueryParams = require('../../lib/query-params')
-var styleGuide = require('../ui/styles-guide/theme-chooser')
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 var tooltip = require('../ui/tooltip')
 var copyToClipboard = require('../ui/copy-to-clipboard')
+var styleGuide = require('../ui/styles-guide/theme-chooser')
 
-var css = require('./styles/settings-tab-styles')
+var styles = styleGuide.chooser()
-
+var Storage = remixLib.Storage
-function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
+var EventManager = remixLib.EventManager
-  var queryParams = new QueryParams()
+
+module.exports = class SettingsTab {
+  constructor (api = {}, events = {}, opts = {}) {
+    const self = this
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self._components = {}
+    self._view = { /* eslint-disable */
+      el: null,
+      optionVM: null, personal: null, optimize: null, warnPersonalMode: null,
+      pluginInput: null, versionSelector: null, version: null,
+      theme: { dark: null, light: null },
+      config: {
+        solidity: null, general: null, themes: null,
+        plugin: null, remixd: null, localremixd: null
+      }
+    } /* eslint-enable */
+    self.data = { allversions: null, selectedVersion: null }
+    self.event = new EventManager()
+    self._components.queryParams = new QueryParams()
+    self._components.themeStorage = new Storage('style:')
+    self.data.optimize = !!self._components.queryParams.get().optimize
+    self._components.queryParams.update({ optimize: self.data.optimize })
+    self._api.setOptimize(self.data.optimize, false)
+    self.data.currentTheme = self._components.themeStorage.get('theme') || 'light'
+    self._events.compiler.register('compilerLoaded', (version) => self.setVersionText(version))
+    self.fetchAllVersion((allversions, selectedVersion) => {
+      self.data.allversions = allversions
+      self.data.selectedVersion = selectedVersion
+      if (self._view.versionSelector) self._updateVersionSelector()
+    })
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
 
-  var optionVM = yo`<input id="alwaysUseVM" type="checkbox">`
+    // Gist settings
-  var personal = yo`<input id="personal" type="checkbox">`
+    var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
+    var token = self._api.config.get('settings/gist-access-token')
+    if (token) gistAccessToken.value = token
+    var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { self._api.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; self._api.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    self._view.gistToken = yo`<div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => self._api.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>`
+    //
+    self._view.optionVM = yo`<input onchange=${onchangeOption} id="alwaysUseVM" type="checkbox">`
+    if (self._api.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
+    self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">`
+    if (self._api.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '')
+    self._view.optimize = yo`<input onchange=${onchangeOptimize} id="optimize" type="checkbox">`
+    if (self.data.optimize) self._view.optimize.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.`
+    Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
-  var warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>`
+    self._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle" aria-hidden="true"></i>`
-
+    self._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
-   // Gist settings
+    self._view.versionSelector = yo`
-  var gistAccessToken = yo`<input id="gistaccesstoken" type="password">`
+      <select onchange=${onchangeLoadVersion} class="${css.select}" id="versionSelector" disabled>
-  var token = appAPI.config.get('settings/gist-access-token')
+        <option disabled selected>Select new compiler version</option>
-  if (token) gistAccessToken.value = token
+      </select>`
-  var gistAddToken = yo`<input class="${css.savegisttoken}" id="savegisttoken" onclick=${() => { appAPI.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`
+    if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector()
-  var gistRemoveToken = yo`<input id="removegisttoken" onclick=${() => { gistAccessToken.value = ''; appAPI.config.set('settings/gist-access-token', ''); tooltip('Access token removed') }} value="Remove" type="button">`
+    self._view.version = yo`<span id="version"></span>`
-
+    self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="${css.col1}" name="theme" id="themeLight" type="radio">`
-  var el = yo`
+    self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">`
-    <div class="${css.settingsTabView} "id="settingsView">
+    self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked')
+    self._view.config.solidity = yo`
       <div class="${css.info}">
         <div class=${css.title}>Solidity version</div>
-        <span>Current version:</span> <span id="version"></span>
+        <span>Current version:</span> ${self._view.version}
         <div class="${css.crow}">
-          <select class="${css.select}" id="versionSelector"></select>
+          ${self._view.versionSelector}
-        </div>
         </div>
+      </div>`
+    self._view.config.general = yo`
       <div class="${css.info}">
         <div class=${css.title}>General settings</div>
           <div class="${css.crow}">
-          <div>${optionVM}</div>
+            <div>${self._view.optionVM}</div>
             <span class="${css.checkboxText}">Always use Ethereum VM at Load</span>
           </div>
           <div class="${css.crow}">
@@ -52,12 +100,12 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
             <span class="${css.checkboxText}">Text Wrap</span>
           </div>
           <div class="${css.crow}">
-          <div><input id="optimize" type="checkbox"></div>
+            <div>${self._view.optimize}</div>
             <span class="${css.checkboxText}">Enable Optimization</span>
           </div>
           <div class="${css.crow}">
-          <div>${personal}</div>
+            <div>${self._view.personal}></div>
-          <span class="${css.checkboxText}">Enable Personal Mode ${warnPersonalMode}</span>
+            <span class="${css.checkboxText}">Enable Personal Mode ${self._view.warnPersonalMode}></span>
           </div>
         </div>
       <div class="${css.info}">
@@ -66,9 +114,10 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
         <div class="${css.crowNoFlex}">Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission.</div>
         <div class="${css.crowNoFlex}"><a target="_blank" href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></div>
         <div class="${css.crowNoFlex}">
-          <div class="${css.checkboxText}">${gistAccessToken}${copyToClipboard(() => appAPI.config.get('settings/gist-access-token'))}${gistAddToken}${gistRemoveToken}</div>
+          ${self._view.gistToken}
-        </div>
         </div>
+      </div>`
+    self._view.config.themes = yo`
       <div class="${css.info}">
         <div class=${css.title}>Themes</div>
         <div class=${css.attention}>
@@ -76,14 +125,15 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
           <span>Selecting a theme will trigger a page reload</span>
         </div>
         <div class="${css.crow}">
-          <input class="${css.col1}" name="theme" id="themeLight" type="checkbox">
+          ${self._view.theme.light}
           <label for="themeLight">Light Theme</label>
         </div>
         <div class="${css.crow}">
-          <input class="${css.col1}" name="theme" id="themeDark" type="checkbox">
+          ${self._view.theme.dark}
           <label for="themeDark">Dark Theme</label>
         </div>
-      </div>
+      </div>`
+    self._view.config.plugin = yo`
       <div class="${css.info}">
         <div class=${css.title}>Plugin</div>
         <div class="${css.crowNoFlex}">
@@ -92,11 +142,12 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
             <span> Do not use this alpha feature if you are not sure what you are doing!</span>
           </div>
           <div>
-            <textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>
+            ${self._view.pluginInput}
-            <input onclick=${loadPlugin} type="button" value="Load" class="${css.pluginLoad}">
+            <input onclick=${onloadPlugin} type="button" value="Load" class="${css.pluginLoad}">
-            </div>
           </div>
         </div>
+      </div>`
+    self._view.config.remixd = yo`
       <div class="${css.info}">
         <div class=${css.title}>Remixd</div>
         <div class="${css.crow}">
@@ -107,7 +158,8 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
         <div class="${css.crow}"><a target="_blank" href="https://github.com/ethereum/remixd"> https://github.com/ethereum/remixd</a></div>
         <div class="${css.crow}"><a target="_blank" href="http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html</a></div>
         <div class="${css.crow}">Installation: <pre class=${css.remixdinstallation}>npm install remixd -g</pre></div>
-      </div>
+      </div>`
+    self._view.config.localremixd = yo`
       <div class="${css.info}">
         <div class=${css.title}>Running Remix locally</div>
         <div class="${css.crow}">
@@ -119,163 +171,180 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
           as an electron app:
         </div>
         <a target="_blank" href="https://github.com/horizon-games/remix-app">https://github.com/horizon-games/remix-app</a>
-      </div>
+      </div>`
-     </div>
+    self._view.el = yo`
-  `
+      <div class="${css.settingsTabView} "id="settingsView">
-
+        ${self._view.config.solidity}
-  function loadPlugin () {
+        ${self._view.config.general}
-    var json = el.querySelector('#plugininput').value
+        ${self._view.config.themes}
+        ${self._view.config.plugin}
+        ${self._view.config.remixd}
+        ${self._view.config.localremixd}
+      </div>`
+    function onchangeOption (event) {
+      self._api.config.set('settings/always-use-vm', !self._api.config.get('settings/always-use-vm'))
+    }
+    function onloadPlugin (event) {
       try {
-      json = JSON.parse(json)
+        var json = JSON.parse(self._view.pluginInput.value)
       } catch (e) {
-      modal.alert('cannot parse the plugin definition to JSON')
+        return modal.alert('cannot parse the plugin definition to JSON')
-      return
       }
-    appEvents.rhp.trigger('plugin-loadRequest', [json])
+      // @TODO: BAD! REFACTOR: no module should trigger events of another modules emitter
-  }
+      self._events.rhp.trigger('plugin-loadRequest', [json])
-
-  appEvents.compiler.register('compilerLoaded', (version) => {
-    setVersionText(version, el)
-  })
-
-  optionVM.checked = appAPI.config.get('settings/always-use-vm') || false
-  optionVM.addEventListener('change', event => {
-    appAPI.config.set('settings/always-use-vm', !appAPI.config.get('settings/always-use-vm'))
-  })
-
-  personal.checked = appAPI.config.get('settings/personal-mode') || false
-  personal.addEventListener('change', event => {
-    appAPI.config.set('settings/personal-mode', !appAPI.config.get('settings/personal-mode'))
-  })
-
-  var optimize = el.querySelector('#optimize')
-  if ((queryParams.get().optimize === 'true')) {
-    optimize.setAttribute('checked', true)
-    appAPI.setOptimize(true, false)
-  } else {
-    queryParams.update({ optimize: false })
-    appAPI.setOptimize(false, false)
     }
-
+    function onswitch2darkTheme (event) {
-  optimize.addEventListener('change', function () {
-    var optimize = this.checked
-    queryParams.update({ optimize: optimize })
-    appAPI.setOptimize(optimize, true)
-  })
-
-  var themeStorage = new Storage('style:')
-  var currTheme = themeStorage.get('theme')
-  var themeDark = el.querySelector('#themeDark')
-  var themeLight = el.querySelector('#themeLight')
-
-  if (currTheme === 'dark') {
-    themeDark.setAttribute('checked', 'checked')
-  } else {
-    themeLight.setAttribute('checked', 'checked')
-  }
-
-  themeDark.addEventListener('change', function () {
-    console.log('change dark theme')
       styleGuide.switchTheme('dark')
       window.location.reload()
-  })
+    }
-
+    function onswitch2lightTheme (event) {
-  themeLight.addEventListener('change', function () {
-    console.log('change to light theme')
       styleGuide.switchTheme('light')
       window.location.reload()
-  })
-
-  // ----------------- version selector-------------
-
-  // clear and disable the version selector
-  var versionSelector = el.querySelector('#versionSelector')
-  versionSelector.innerHTML = ''
-  versionSelector.setAttribute('disabled', true)
-
-  // load the new version upon change
-  versionSelector.addEventListener('change', function () {
-    loadVersion(versionSelector.value, queryParams, opts.compiler, el)
-  })
-
-  var header = new Option('Select new compiler version')
-  header.disabled = true
-  header.selected = true
-  versionSelector.appendChild(header)
-
-  request.get({
-    url: 'https://solc-bin.ethereum.org/bin/list.json',
-    json: true
-  }, (error, response, data) => {
-    if (error || !data) {
-      tooltip('Cannot load compiler version list. It might have been blocked by an advertisement blocker. Please try deactivating any of them from this page and reload.')
-
-      // loading failed for some reason, fall back to local compiler
-      versionSelector.append(new Option('latest local version', 'builtin'))
-      loadVersion('builtin', queryParams, opts.compiler, el)
-      return
     }
-
+    function onchangeOptimize (event) {
-    // populate version dropdown with all available compiler versions (descending order)
+      self.data.optimize = !!self._view.optimize.checked
-    $.each(data.builds.slice().reverse(), function (i, build) {
+      self._components.queryParams.update({ optimize: self.data.optimize })
-      versionSelector.appendChild(new Option(build.longVersion, build.path))
+      self._api.setOptimize(self.data.optimize, true)
-    })
-
-    versionSelector.removeAttribute('disabled')
-
-    // always include the local version
-    versionSelector.appendChild(new Option('latest local version', 'builtin'))
-
-    // find latest release
-    var selectedVersion = data.releases[data.latestRelease]
-
-    // override with the requested version
-    if (queryParams.get().version) {
-      selectedVersion = queryParams.get().version
     }
-
+    function onchangeLoadVersion (event) {
-    loadVersion(selectedVersion, queryParams, opts.compiler, el)
+      self.data.selectedVersion = self._view.versionSelector.value
-  })
+      self._updateVersionSelector()
-
-  return { render () { return el } }
     }
-
+    function onchangePersonal (event) {
-function setVersionText (text, el) {
+      self._api.config.set('settings/personal-mode', !self._api.config.get('settings/personal-mode'))
-  el.querySelector('#version').innerText = text
     }
-
+    return self._view.el
-function loadVersion (version, queryParams, compiler, el) {
+  }
-  queryParams.update({ version: version })
+  setVersionText (text) {
+    const self = this
+    self.data.version = text
+    if (self._view.version) self._view.version.innerText = text
+  }
+  _updateVersionSelector () {
+    const self = this
+    self._view.versionSelector.innerHTML = ''
+    self._view.versionSelector.appendChild(yo`<option disabled selected>Select new compiler version</option>`)
+    self.data.allversions.forEach(build => self._view.versionSelector.appendChild(yo`<option value=${build.path}>${build.longVersion}</option>`))
+    self._view.versionSelector.removeAttribute('disabled')
+    self._components.queryParams.update({ version: self.data.selectedVersion })
     var url
-  if (version === 'builtin') {
+    if (self.data.selectedVersion === 'builtin') {
       var location = window.document.location
       location = location.protocol + '//' + location.host + '/' + location.pathname
-    if (location.endsWith('index.html')) {
+      if (location.endsWith('index.html')) location = location.substring(0, location.length - 10)
-      location = location.substring(0, location.length - 10)
+      if (!location.endsWith('/')) location += '/'
-    }
-    if (!location.endsWith('/')) {
-      location += '/'
-    }
-
       url = location + 'soljson.js'
     } else {
-    if (version.indexOf('soljson') !== 0 || helper.checkSpecialChars(version)) {
+      if (self.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(self.data.selectedVersion)) {
-      console.log('loading ' + version + ' not allowed')
+        return console.log('loading ' + self.data.selectedVersion + ' not allowed')
-      return
       }
-    url = 'https://solc-bin.ethereum.org/bin/' + version
+      url = 'https://ethereum.github.io/solc-bin/bin/' + self.data.selectedVersion
     }
     var isFirefox = typeof InstallTrigger !== 'undefined'
     if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) {
       // Workers cannot load js on "file:"-URLs and we get a
       // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,
       // resort to non-worker version in that case.
-    compiler.loadVersion(true, url)
+      self._opts.compiler.loadVersion(true, url)
-    setVersionText('(loading using worker)', el)
+      self.setVersionText('(loading using worker)')
     } else {
-    compiler.loadVersion(false, url)
+      self._opts.compiler.loadVersion(false, url)
-    setVersionText('(loading)', el)
+      self.setVersionText('(loading)')
+    }
+  }
+  fetchAllVersion (callback) {
+    var self = this
+    minixhr('https://ethereum.github.io/solc-bin/bin/list.json', function (json, event) {
+      // @TODO: optimise and cache results to improve app loading times
+      var allversions, selectedVersion
+      if (event.type !== 'error') {
+        try {
+          const data = JSON.parse(json)
+          allversions = data.builds.slice().reverse()
+          selectedVersion = data.releases[data.latestRelease]
+          if (self._components.queryParams.get().version) selectedVersion = self._components.queryParams.get().version
+        } catch (e) {
+          tooltip('Cannot load compiler version list. It might have been blocked by an advertisement blocker. Please try deactivating any of them from this page and reload.')
+        }
+      } else {
+        allversions = [{ path: 'builtin', longVersion: 'latest local version' }]
+        selectedVersion = 'builtin'
+      }
+      callback(allversions, selectedVersion)
+    })
   }
 }
 
-module.exports = SettingsTab
+const css = csjs`
+  .settingsTabView {
+    padding: 2%;
+    display: flex;
+  }
+  .info {
+    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
+    margin-bottom: 1em;
+    word-break: break-word;
+  }
+  .title {
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-bottom: 1em;
+  }
+  .crow {
+    display: flex;
+    overflow: auto;
+    clear: both;
+    padding: .2em;
+  }
+  .checkboxText {
+    font-weight: normal;
+  }
+  .crow label {
+    cursor:pointer;
+  }
+  .crowNoFlex {
+    overflow: auto;
+    clear: both;
+  }
+  .attention {
+    margin-bottom: 1em;
+    padding: .5em;
+    font-weight: bold;
+  }
+  .select {
+    font-weight: bold;
+    margin-top: 1em;
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+  }
+  .heading {
+    margin-bottom: 0;
+  }
+  .explaination {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+  input {
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  input[type=radio] {
+    margin-top: 2px;
+  }
+  .pluginTextArea {
+    font-family: unset;
+  }
+  .pluginLoad {
+    vertical-align: top;
+  }
+  i.warnIt {
+    color: ${styles.appProperties.warningText_Color};
+  }
+  .icon {
+    margin-right: .5em;
+  }
+  .remixdinstallation {
+    padding: 3px;
+    border-radius: 2px;
+    margin-left: 5px;
+  }
+`