mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #1466 from ethereum/cleantabsContent

Browse Source 
Clean support tab content
pull/1/head
yann300 6 years ago committed by GitHub
parent 62dc31dd77 953ec99c81
commit 6e31383f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 315 additions and 186 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 17
      src/app/panels/righthand-panel.js
  2. 151
      src/app/tabs/compile-tab.js
  3. 256
      src/app/tabs/settings-tab.js
  4. 60
      src/app/tabs/support-tab.js
  5. 5
      src/app/ui/styles-guide/style-guide.js
  6. 12
      src/app/ui/styles-guide/styleGuideDark.js

17
src/app/panels/righthand-panel.js
Unescape View File

@ -15,10 +15,8 @@ const SupportTab = require('../tabs/support-tab')
const PluginTab = require('../tabs/plugin-tab') const PluginTab = require('../tabs/plugin-tab')
const TestTab = require('../tabs/test-tab') const TestTab = require('../tabs/test-tab')
const RunTab = require('../tabs/run-tab') const RunTab = require('../tabs/run-tab')
const plugins = require('../plugin/plugins')
const DraggableContent = require('../ui/draggableContent') const DraggableContent = require('../ui/draggableContent')
var toolTip = require('../ui/tooltip')
const EventManager = remixLib.EventManager const EventManager = remixLib.EventManager
const styles = styleguide.chooser() const styles = styleguide.chooser()
@ -71,23 +69,10 @@ module.exports = class RighthandPanel {
test: new TestTab(self._components.registry) test: new TestTab(self._components.registry)
} }
self.event.register('plugin-loadRequest', json => { self._components.settings.event.register('plugin-loadRequest', json => {
self.loadPlugin(json) self.loadPlugin(json)
}) })
self.event.register('plugin-name-loadRequest', name => {
var plugin = plugins[name]
if (plugin) {
if (!self._components.pluginManager.plugins[plugin.title]) {
self.loadPlugin(plugin)
} else {
toolTip(name + ' already loaded')
}
} else {
toolTip('unknown plugin ' + name)
}
})
self.loadPlugin = function (json) { self.loadPlugin = function (json) {
var modal = new DraggableContent(() => { var modal = new DraggableContent(() => {
self._components.pluginManager.unregister(json) self._components.pluginManager.unregister(json)

151
src/app/tabs/compile-tab.js
Unescape View File

@ -1,7 +1,10 @@
/* global Worker */
const yo = require('yo-yo') const yo = require('yo-yo')
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
const copy = require('clipboard-copy') const copy = require('clipboard-copy')
var minixhr = require('minixhr')
var tooltip = require('../ui/tooltip')
var QueryParams = require('../../lib/query-params')
var globalRegistry = require('../../global/registry') var globalRegistry = require('../../global/registry')
const TreeView = require('../ui/TreeView') const TreeView = require('../ui/TreeView')
const modalDialog = require('../ui/modaldialog') const modalDialog = require('../ui/modaldialog')
@ -11,6 +14,7 @@ const styleGuide = require('../ui/styles-guide/theme-chooser')
const parseContracts = require('../contract/contractParser') const parseContracts = require('../contract/contractParser')
const publishOnSwarm = require('../contract/publishOnSwarm') const publishOnSwarm = require('../contract/publishOnSwarm')
const addTooltip = require('../ui/tooltip') const addTooltip = require('../ui/tooltip')
var helper = require('../../lib/helper')
const styles = styleGuide.chooser() const styles = styleGuide.chooser()
@ -27,10 +31,15 @@ module.exports = class CompileTab {
errorContainer: null, errorContainer: null,
errorContainerHead: null, errorContainerHead: null,
contractNames: null, contractNames: null,
contractEl: null contractEl: null,
config: {
solidity: null
},
optimize: null
} }
self._components = {} self._components = {}
self._components.registry = localRegistry || globalRegistry self._components.registry = localRegistry || globalRegistry
self._components.queryParams = new QueryParams()
// dependencies // dependencies
self._deps = { self._deps = {
app: self._components.registry.get('app').api, app: self._components.registry.get('app').api,
@ -47,8 +56,15 @@ module.exports = class CompileTab {
compileTimeout: null, compileTimeout: null,
contractsDetails: {}, contractsDetails: {},
maxTime: 1000, maxTime: 1000,
timeout: 300 timeout: 300,
allversions: null,
selectedVersion: null,
baseurl: 'https://solc-bin.ethereum.org/bin'
} }
self.data.optimize = !!self._components.queryParams.get().optimize
self._components.queryParams.update({ optimize: self.data.optimize })
self._deps.compiler.setOptimize(self.data.optimize)
self._deps.editor.event.register('contentChanged', scheduleCompilation) self._deps.editor.event.register('contentChanged', scheduleCompilation)
self._deps.editor.event.register('sessionSwitched', scheduleCompilation) self._deps.editor.event.register('sessionSwitched', scheduleCompilation)
function scheduleCompilation () { function scheduleCompilation () {
@ -149,6 +165,44 @@ module.exports = class CompileTab {
render () { render () {
const self = this const self = this
if (self._view.el) return self._view.el if (self._view.el) return self._view.el
function onchangeLoadVersion (event) {
self.data.selectedVersion = self._view.versionSelector.value
self._updateVersionSelector()
}
function onchangeOptimize (event) {
self.data.optimize = !!self._view.optimize.checked
self._components.queryParams.update({ optimize: self.data.optimize })
self._deps.compiler.setOptimize(self.data.optimize)
self._deps.app.runCompiler()
}
self._deps.compiler.event.register('compilerLoaded', (version) => self.setVersionText(version))
self.fetchAllVersion((allversions, selectedVersion) => {
self.data.allversions = allversions
self.data.selectedVersion = selectedVersion
if (self._view.versionSelector) self._updateVersionSelector()
})
self._view.optimize = yo`<input onchange=${onchangeOptimize} id="optimize" type="checkbox">`
if (self.data.optimize) self._view.optimize.setAttribute('checked', '')
self._view.versionSelector = yo`
<select onchange=${onchangeLoadVersion} class="${css.select}" id="versionSelector" disabled>
<option disabled selected>Select new compiler version</option>
</select>`
if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector()
self._view.version = yo`<span id="version"></span>`
self._view.config.solidity = yo`
<div class="${css.info}">
<span>Current version:</span> ${self._view.version}
<div class="${css.crow}">
${self._view.versionSelector}
</div>
</div>`
self._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>` self._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
self._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>` self._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
self._view.compileButton = yo`<div class="${css.compileButton}" onclick=${compile} id="compile" title="Compile source code">${self._view.compileIcon} Start to compile</div>` self._view.compileButton = yo`<div class="${css.compileButton}" onclick=${compile} id="compile" title="Compile source code">${self._view.compileIcon} Start to compile</div>`
@ -158,13 +212,18 @@ module.exports = class CompileTab {
if (self.data.hideWarnings) self._view.hideWarningsBox.setAttribute('checked', '') if (self.data.hideWarnings) self._view.hideWarningsBox.setAttribute('checked', '')
self._view.compileContainer = yo` self._view.compileContainer = yo`
<div class="${css.compileContainer}"> <div class="${css.compileContainer}">
${self._view.config.solidity}
<div class="${css.compileButtons}"> <div class="${css.compileButtons}">
${self._view.compileButton} ${self._view.compileButton}
${self._view.warnCompilationSlow}
<div class="${css.autocompileContainer}"> <div class="${css.autocompileContainer}">
${self._view.autoCompile} ${self._view.autoCompile}
<span class="${css.autocompileText}">Auto compile</span> <span class="${css.autocompileText}">Auto compile</span>
</div> </div>
${self._view.warnCompilationSlow} <div class="${css.crow}">
<div>${self._view.optimize}</div>
<span class="${css.checkboxText}">Enable Optimization</span>
</div>
<div class=${css.hideWarningsContainer}> <div class=${css.hideWarningsContainer}>
${self._view.hideWarningsBox} ${self._view.hideWarningsBox}
<span class="${css.autocompileText}">Hide warnings</span> <span class="${css.autocompileText}">Hide warnings</span>
@ -324,9 +383,93 @@ module.exports = class CompileTab {
} }
return self._view.el return self._view.el
} }
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 (self.data.selectedVersion === 'builtin') {
var location = window.document.location
location = location.protocol + '//' + location.host + '/' + location.pathname
if (location.endsWith('index.html')) location = location.substring(0, location.length - 10)
if (!location.endsWith('/')) location += '/'
url = location + 'soljson.js'
} else {
if (self.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(self.data.selectedVersion)) {
return console.log('loading ' + self.data.selectedVersion + ' not allowed')
}
url = `${self.data.baseurl}/${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.
self._deps.compiler.loadVersion(true, url)
self.setVersionText('(loading using worker)')
} else {
self._deps.compiler.loadVersion(false, url)
self.setVersionText('(loading)')
}
}
fetchAllVersion (callback) {
var self = this
minixhr(`${self.data.baseurl}/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)
})
}
} }
const css = csjs` const css = csjs`
.crow {
display: flex;
overflow: auto;
clear: both;
padding: .2em;
}
.checkboxText {
font-weight: normal;
}
.crow label {
cursor:pointer;
}
.crowNoFlex {
overflow: auto;
clear: both;
}
.select {
font-weight: bold;
margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler};
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
margin-bottom: 1em;
word-break: break-word;
}
.compileTabView { .compileTabView {
padding: 2%; padding: 2%;
} }

256
src/app/tabs/settings-tab.js
Unescape View File

@ -1,17 +1,12 @@
/* global Worker */
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var minixhr = require('minixhr')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
const defaultPlugins = require('../plugin/plugins')
var globalRegistry = require('../../global/registry') var globalRegistry = require('../../global/registry')
var QueryParams = require('../../lib/query-params')
var helper = require('../../lib/helper')
var modal = require('../ui/modal-dialog-custom')
var tooltip = require('../ui/tooltip') var tooltip = require('../ui/tooltip')
var copyToClipboard = require('../ui/copy-to-clipboard') var copyToClipboard = require('../ui/copy-to-clipboard')
var styleGuide = require('../ui/styles-guide/theme-chooser') var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser() var styles = styleGuide.chooser()
var Storage = remixLib.Storage var Storage = remixLib.Storage
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
@ -31,33 +26,19 @@ module.exports = class SettingsTab {
} }
self._view = { /* eslint-disable */ self._view = { /* eslint-disable */
el: null, el: null,
optionVM: null, personal: null, optimize: null, warnPersonalMode: null, optionVM: null, personal: null, warnPersonalMode: null,
pluginInput: null, versionSelector: null, version: null, pluginInput: null, versionSelector: null, version: null,
theme: { dark: null, light: null }, theme: { dark: null, light: null },
plugins: {},
config: { config: {
solidity: null, general: null, themes: null, general: null, themes: null,
plugin: null, remixd: null, localremixd: null plugin: null
} }
} /* eslint-enable */ } /* eslint-enable */
self.data = { self.data = {}
allversions: null,
selectedVersion: null,
baseurl: 'https://solc-bin.ethereum.org/bin'
}
self.event = new EventManager() self.event = new EventManager()
self._components.queryParams = new QueryParams()
self._components.themeStorage = new Storage('style:') self._components.themeStorage = new Storage('style:')
self.data.optimize = !!self._components.queryParams.get().optimize
self._components.queryParams.update({ optimize: self.data.optimize })
self._deps.compiler.setOptimize(self.data.optimize)
self.data.currentTheme = self._components.themeStorage.get('theme') || 'light' self.data.currentTheme = self._components.themeStorage.get('theme') || 'light'
self._deps.compiler.event.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 () { render () {
const self = this const self = this
@ -75,8 +56,6 @@ module.exports = class SettingsTab {
if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '') if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '')
self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">` self._view.personal = yo`<input onchange=${onchangePersonal} id="personal" type="checkbox">`
if (self._deps.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '') if (self._deps.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. 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. 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, ...). Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
@ -84,23 +63,11 @@ module.exports = class SettingsTab {
Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ') Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
self._view.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>` self._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
self._view.versionSelector = yo`
<select onchange=${onchangeLoadVersion} class="${css.select}" id="versionSelector" disabled>
<option disabled selected>Select new compiler version</option>
</select>`
if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector()
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">` self._view.theme.light = yo`<input onchange=${onswitch2lightTheme} class="${css.col1}" name="theme" id="themeLight" type="radio">`
self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">` self._view.theme.dark = yo`<input onchange=${onswitch2darkTheme} class="${css.col1}" name="theme" id="themeDark" type="radio">`
self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked') 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> ${self._view.version}
<div class="${css.crow}">
${self._view.versionSelector}
</div>
</div>`
self._view.config.general = yo` self._view.config.general = yo`
<div class="${css.info}"> <div class="${css.info}">
<div class=${css.title}>General settings</div> <div class=${css.title}>General settings</div>
@ -112,10 +79,6 @@ module.exports = class SettingsTab {
<div><input id="editorWrap" type="checkbox" onchange=${function () { self._deps.editor.resize(this.checked) }}></div> <div><input id="editorWrap" type="checkbox" onchange=${function () { self._deps.editor.resize(this.checked) }}></div>
<span class="${css.checkboxText}">Text Wrap</span> <span class="${css.checkboxText}">Text Wrap</span>
</div> </div>
<div class="${css.crow}">
<div>${self._view.optimize}</div>
<span class="${css.checkboxText}">Enable Optimization</span>
</div>
<div class="${css.crow}"> <div class="${css.crow}">
<div>${self._view.personal}></div> <div>${self._view.personal}></div>
<span class="${css.checkboxText}">Enable Personal Mode ${self._view.warnPersonalMode}></span> <span class="${css.checkboxText}">Enable Personal Mode ${self._view.warnPersonalMode}></span>
@ -146,67 +109,75 @@ module.exports = class SettingsTab {
<label for="themeDark">Dark Theme</label> <label for="themeDark">Dark Theme</label>
</div> </div>
</div>` </div>`
self._view.config.plugins = yo`<div></div>`
self._view.config.plugin = yo` self._view.config.plugin = yo`
<div class="${css.info}"> <div class="${css.info}">
<div class=${css.title}>Plugin</div> <div class=${css.title}>Plugin</div>
<div class="${css.crowNoFlex}"> <div class="${css.crowNoFlex}">
<input onclick=${() => { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}">
<input onclick=${() => { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}">
<div>Load plugin from JSON description: </div> <div>Load plugin from JSON description: </div>
${self._view.pluginInput} ${self._view.pluginInput}
<input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}"> <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.initPlugin}">
</div> ${self._view.config.plugins}
</div>`
self._view.config.remixd = yo`
<div class="${css.info}">
<div class=${css.title}>Remixd</div>
<div class="${css.crow}">
Remixd is a tool which allow Remix IDE to access files located in your local computer.
it can also be used to setup a development environment.
</div> </div>
<div class="${css.crow}">More infos:</div>
<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="https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem">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>`
self._view.config.localremixd = yo`
<div class="${css.info}">
<div class=${css.title}>Running Remix locally</div>
<div class="${css.crow}">
as a NPM module:
</div>
<a target="_blank" href="https://www.npmjs.com/package/remix-ide">https://www.npmjs.com/package/remix-ide</a>
<pre class=${css.remixdinstallation}>npm install remix-ide -g</pre>
<div class="${css.crow}">
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>`
self._view.el = yo` self._view.el = yo`
<div class="${css.settingsTabView} "id="settingsView"> <div class="${css.settingsTabView}" id="settingsView">
${self._view.config.solidity}
${self._view.config.general} ${self._view.config.general}
${self._view.config.plugin}
${self._view.gistToken} ${self._view.gistToken}
${self._view.config.themes} ${self._view.config.themes}
${self._view.config.plugin}
${self._view.config.remixd}
${self._view.config.localremixd}
</div>` </div>`
function onchangeOption (event) {
self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm')) function loadPlugins (plugins, opt) {
for (var k in plugins) {
var plugin = plugins[k]
if (!self._view.plugins[plugin.title]) self._view.plugins[plugin.title] = {}
self._view.plugins[plugin.title].json = plugin
self._view.plugins[plugin.title].el = yo`<div title=${plugin.title} class="${css.pluginLoad}">
<div class="${css.aPlugin}" onclick=${() => { onLoadPlugin(plugin.title) }}>${plugin.title}</div>
${opt.removable ? yo`<span class="${css.removePlugin}" onclick=${() => { onRemovePlugin(plugin.title) }}><i class="fa fa-close"></i></span>` : yo`<span></span>`}
</div>`
self._view.config.plugins.appendChild(self._view.plugins[plugin.title].el)
}
}
function getSavedPlugin () {
var savedPlugin = self._deps.config.get('settings/plugins-list')
return savedPlugin ? JSON.parse(savedPlugin) : {}
} }
function setSavedPlugin (savedPlugins) {
self._deps.config.set('settings/plugins-list', JSON.stringify(savedPlugins))
}
loadPlugins(defaultPlugins, {removable: false})
loadPlugins(getSavedPlugin(), {removable: true})
function onLoadPlugin (name) { function onLoadPlugin (name) {
// @TODO: BAD! REFACTOR: no module should trigger events of another modules emitter self.event.trigger('plugin-loadRequest', [self._view.plugins[name].json])
self._deps.righthandpanel.event.trigger('plugin-name-loadRequest', [name]) }
function onRemovePlugin (name) {
var savedPlugin = getSavedPlugin()
delete savedPlugin[name]
setSavedPlugin(savedPlugin)
if (self._view.plugins[name]) {
self._view.plugins[name].el.parentNode.removeChild(self._view.plugins[name].el)
delete self._view.plugins[name]
}
} }
function onloadPluginJson (event) { function onloadPluginJson (event) {
try { try {
var json = JSON.parse(self._view.pluginInput.value) var json = JSON.parse(self._view.pluginInput.value)
} catch (e) { } catch (e) {
return modal.alert('cannot parse the plugin definition to JSON') return tooltip('cannot parse the plugin definition to JSON')
} }
// @TODO: BAD! REFACTOR: no module should trigger events of another modules emitter var savedPlugin = getSavedPlugin()
self._deps.righthandpanel.event.trigger('plugin-loadRequest', [json]) if (self._view.plugins[json.title]) return tooltip('Plugin already loaded')
savedPlugin[json.title] = json
setSavedPlugin(savedPlugin)
loadPlugins([json], {removable: true})
}
function onchangeOption (event) {
self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm'))
} }
function onswitch2darkTheme (event) { function onswitch2darkTheme (event) {
styleGuide.switchTheme('dark') styleGuide.switchTheme('dark')
@ -216,79 +187,11 @@ module.exports = class SettingsTab {
styleGuide.switchTheme('light') styleGuide.switchTheme('light')
window.location.reload() window.location.reload()
} }
function onchangeOptimize (event) {
self.data.optimize = !!self._view.optimize.checked
self._components.queryParams.update({ optimize: self.data.optimize })
self._deps.compiler.setOptimize(self.data.optimize)
self._deps.app.runCompiler()
}
function onchangeLoadVersion (event) {
self.data.selectedVersion = self._view.versionSelector.value
self._updateVersionSelector()
}
function onchangePersonal (event) { function onchangePersonal (event) {
self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode')) self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode'))
} }
return self._view.el return self._view.el
} }
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 (self.data.selectedVersion === 'builtin') {
var location = window.document.location
location = location.protocol + '//' + location.host + '/' + location.pathname
if (location.endsWith('index.html')) location = location.substring(0, location.length - 10)
if (!location.endsWith('/')) location += '/'
url = location + 'soljson.js'
} else {
if (self.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(self.data.selectedVersion)) {
return console.log('loading ' + self.data.selectedVersion + ' not allowed')
}
url = `${self.data.baseurl}/${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.
self._deps.compiler.loadVersion(true, url)
self.setVersionText('(loading using worker)')
} else {
self._deps.compiler.loadVersion(false, url)
self.setVersionText('(loading)')
}
}
fetchAllVersion (callback) {
var self = this
minixhr(`${self.data.baseurl}/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)
})
}
} }
const css = csjs` const css = csjs`
@ -297,7 +200,7 @@ const css = csjs`
display: flex; display: flex;
} }
.info { .info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo} ${styles.rightPanel.settingsTab.box_SolidityVersionInfo};
margin-bottom: 1em; margin-bottom: 1em;
word-break: break-word; word-break: break-word;
} }
@ -327,11 +230,6 @@ const css = csjs`
padding: .5em; padding: .5em;
font-weight: bold; font-weight: bold;
} }
.select {
font-weight: bold;
margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler};
}
.heading { .heading {
margin-bottom: 0; margin-bottom: 0;
} }
@ -356,18 +254,48 @@ const css = csjs`
width: inherit; width: inherit;
display: inline-block; display: inline-block;
} }
.initPlugin {
vertical-align: top;
${styles.rightPanel.settingsTab.button_initPlugin};
width: inherit;
display: block;
max-height: inherit;
padding:7px;
}
.removePlugin {
cursor: pointer;
}
i.warnIt { i.warnIt {
color: ${styles.appProperties.warningText_Color}; color: ${styles.appProperties.warningText_Color};
} }
.icon { .icon {
margin-right: .5em; margin-right: .5em;
} }
.remixdinstallation {
padding: 3px;
border-radius: 2px;
margin-left: 5px;
}
.savegisttoken { .savegisttoken {
margin-left: 5px; margin-left: 5px;
} }
.aPlugin {
display: inline-block;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 6px;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
}
.pluginLoad {
vertical-align: top;
max-height: inherit;
margin: 2px;
}
.removePlugin{
padding-left: 7px;
padding-right: 7px;
border-left: 2px solid ${styles.appProperties.primary_BackgroundColor};
margin-left: 10px;
}
` `

60
src/app/tabs/support-tab.js
Unescape View File

@ -11,7 +11,7 @@ module.exports = class SupportTab {
constructor (localRegistry) { constructor (localRegistry) {
const self = this const self = this
self.event = new EventManager() self.event = new EventManager()
self._view = { el: null, gitterIframe: '' } self._view = { el: null, gitterIframe: '', config: {} }
self.data = { gitterIsLoaded: false } self.data = { gitterIsLoaded: false }
self._components = {} self._components = {}
self._components.registry = localRegistry || globalRegistry self._components.registry = localRegistry || globalRegistry
@ -33,6 +33,31 @@ module.exports = class SupportTab {
const self = this const self = this
if (self._view.el) return self._view.el if (self._view.el) return self._view.el
self._view.gitterIframe = yo`<div></div>` self._view.gitterIframe = yo`<div></div>`
self._view.config.remixd = yo`
<div class="${css.info}">
<div class=${css.title}>Accessing local files</div>
<div class="${css.crow}">
Remixd is a tool which allow Remix IDE to access files located in your local computer.
it can also be used to setup a development environment.
</div>
<div class="${css.crow}">More infos:</div>
<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="https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem">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>`
self._view.config.localremixd = yo`
<div class="${css.info}">
<div class=${css.title}>Running Remix locally</div>
<div class="${css.crow}">
as a NPM module:
</div>
<a target="_blank" href="https://www.npmjs.com/package/remix-ide">https://www.npmjs.com/package/remix-ide</a>
<pre class=${css.remixdinstallation}>npm install remix-ide -g</pre>
<div class="${css.crow}">
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>`
self._view.el = yo` self._view.el = yo`
<div class="${css.supportTabView}" id="supportView"> <div class="${css.supportTabView}" id="supportView">
<div class="${css.infoBox}"> <div class="${css.infoBox}">
@ -47,6 +72,8 @@ module.exports = class SupportTab {
</div> </div>
${self._view.gitterIframe} ${self._view.gitterIframe}
</div> </div>
${self._view.config.remixd}
${self._view.config.localremixd}
</div>` </div>`
return self._view.el return self._view.el
function openLink () { window.open('https://gitter.im/ethereum/remix') } function openLink () { window.open('https://gitter.im/ethereum/remix') }
@ -55,12 +82,13 @@ module.exports = class SupportTab {
const css = csjs` const css = csjs`
.supportTabView { .supportTabView {
height: 100vh; height: 100%;
padding: 2%; padding: 2%;
padding-bottom: 3em; padding-bottom: 3em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
overflow-y: auto;
} }
.chat { .chat {
${styles.rightPanel.supportTab.box_IframeContainer} ${styles.rightPanel.supportTab.box_IframeContainer}
@ -102,4 +130,32 @@ const css = csjs`
.infoBox { .infoBox {
${styles.rightPanel.supportTab.box_SupportInfo} ${styles.rightPanel.supportTab.box_SupportInfo}
} }
.remixdinstallation {
padding: 3px;
border-radius: 2px;
margin-left: 5px;
}
.info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo};
margin-top: 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;
}
.crow label {
cursor:pointer;
}
.crowNoFlex {
overflow: auto;
clear: both;
}
` `

5
src/app/ui/styles-guide/style-guide.js
Unescape View File

@ -701,6 +701,11 @@ function styleGuide () {
BackgroundColor: appProperties.secondaryButton_BackgroundColor, BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor, BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor Color: appProperties.secondaryButton_TextColor
}),
button_initPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}) })
}, },

12
src/app/ui/styles-guide/styleGuideDark.js
Unescape View File

@ -684,6 +684,18 @@ function styleGuideDark () {
BackgroundColor: appProperties.dropdown_BackgroundColor, BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor, BorderColor: appProperties.dropdown_BorderColor,
Color: appProperties.dropdown_TextColor Color: appProperties.dropdown_TextColor
}),
button_LoadPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.secondaryButton_BackgroundColor,
BorderColor: appProperties.secondaryButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}),
button_initPlugin: appProperties.uiElements.button({
BackgroundColor: appProperties.transactButton_BackgroundColor,
BorderColor: appProperties.transactButton_BorderColor,
Color: appProperties.secondaryButton_TextColor
}) })
}, },

Write Preview
Loading…
Cancel
Save