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

Merge pull request #1084 from ethereum/test-tab

Browse Source 
refactor righthandpanel
pull/1/head
yann300 7 years ago committed by GitHub
parent a73f820ef3 1487725ecf
commit 06686f7eb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 68 additions and 69 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. 4
      src/app.js
  2. 57
      src/app/panels/righthand-panel.js
  3. 5
      src/app/tabs/analysis-tab.js
  4. 18
      src/app/tabs/compile-tab.js
  5. 5
      src/app/tabs/debugger-tab.js
  6. 7
      src/app/tabs/plugin-tab.js
  7. 19
      src/app/tabs/run-tab.js
  8. 10
      src/app/tabs/settings-tab.js
  9. 5
      src/app/tabs/support-tab.js
  10. 5
      src/app/tabs/tabbed-menu.js
  11. 2
      src/pluginManager.js

4
src/app.js
Unescape View File

@ -110,7 +110,7 @@ var css = csjs`
`
class App {
constructor (opts = {}) {
constructor (api = {}, events = {}, opts = {}) {
var self = this
self._api = {}
var fileStorage = new Storage('sol:')
@ -792,7 +792,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
editor: editor.event,
staticAnalysis: staticanalysis.event
}
self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {})
self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents)
self._view.rightpanel.appendChild(self._components.righthandpanel.render())
self._components.righthandpanel.init()
self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))

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

@ -2,29 +2,30 @@ var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
var TabbedMenu = require('../tabs/tabbed-menu')
var compileTab = require('../tabs/compile-tab')
var runTab = require('../tabs/run-tab')
var settingsTab = require('../tabs/settings-tab')
var analysisTab = require('../tabs/analysis-tab')
var debuggerTab = require('../tabs/debugger-tab')
var supportTab = require('../tabs/support-tab')
var pluginTab = require('../tabs/plugin-tab')
var CompileTab = require('../tabs/compile-tab')
var RunTab = require('../tabs/run-tab')
var SettingsTab = require('../tabs/settings-tab')
var AnalysisTab = require('../tabs/analysis-tab')
var DebuggerTab = require('../tabs/debugger-tab')
var SupportTab = require('../tabs/support-tab')
var PluginTab = require('../tabs/plugin-tab')
var PluginManager = require('../../pluginManager')
var css = require('./styles/righthand-panel-styles')
function RighthandPanel (appAPI, events, opts) {
function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
var self = this
self._api = appAPI
self.event = new EventManager()
self._view = {}
var optionViews = yo`<div id="optionViews"></div>`
var options = yo`
<ul class=${css.opts}>
</ul>
`
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
// load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
var options = self._view.tabbedMenu.render()
options.classList.add(css.opts)
self._view.element = yo`
<div id="righthand-panel" class=${css.panel}>
${self._view.dragbar}
@ -40,23 +41,33 @@ function RighthandPanel (appAPI, events, opts) {
this.event.trigger('switchTab', [tabClass])
}
// load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
self._view.tabbedMenu = new TabbedMenu(options, tabEvents)
events.rhp = self.event
this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews))
this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews))
this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, events))
var compileTab = new CompileTab(appAPI, events)
optionViews.appendChild(compileTab.render())
var runTab = new RunTab(appAPI, events)
optionViews.appendChild(runTab.render())
var settingsTab = new SettingsTab(appAPI, events)
optionViews.appendChild(settingsTab.render())
var analysisTab = new AnalysisTab(appAPI, events)
optionViews.appendChild(analysisTab.render())
var debuggerTab = new DebuggerTab(appAPI, events)
optionViews.appendChild(debuggerTab.render())
var supportTab = new SupportTab(appAPI, events)
optionViews.appendChild(supportTab.render())
this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
this._view.tabbedMenu.selectTabByTitle('Compile')
self.pluginManager = new PluginManager(appAPI, events)
events.rhp.register('plugin-loadRequest', (json) => {
var content = pluginTab(optionViews, json.url)
var tab = new PluginTab(appAPI, events, json)
var content = tab.render()
optionViews.appendChild(content)
this._view.tabbedMenu.addTab(json.title, 'plugin', content)
self.pluginManager.register(json, content)
})

5
src/app/tabs/analysis-tab.js
Unescape View File

@ -1,13 +1,12 @@
var yo = require('yo-yo')
var css = require('./styles/analysis-tab-styles')
function analysisTab (container) {
function analysisTab (api = {}, events = {}, opts = {}) {
var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView">
</div>
`
container.appendChild(el)
return el
return { render () { return el } }
}
module.exports = analysisTab

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

@ -14,10 +14,7 @@ var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.themeChooser
var styles = styleGuide.chooser()
function compileTab (container, appAPI, appEvents, opts) {
if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given')
function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
// Containers
var warnCompilationSlow = yo`<i title="Copy Address" style="display:none" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
var compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
@ -115,24 +112,23 @@ function compileTab (container, appAPI, appEvents, opts) {
compileIcon.setAttribute('title', '')
})
var errorContainer = yo`<div class='error'></div>`
var el = yo`
<div class="${css.compileTabView}" id="compileTabView">
${compileContainer}
${contractNames(container, appAPI, appEvents, opts)}
<div class='error'></div>
${contractNames(appAPI, appEvents)}
${errorContainer}
</div>
`
container.appendChild(el)
/* ------------------------------------------------
section CONTRACT DROPDOWN, DETAILS AND PUBLISH
------------------------------------------------ */
function contractNames (container, appAPI, appEvents, opts) {
function contractNames (appAPI, appEvents) {
var contractsDetails = {}
appEvents.compiler.register('compilationStarted', () => {
var errorContainer = container.querySelector('.error')
errorContainer.innerHTML = ''
})
@ -148,7 +144,6 @@ function compileTab (container, appAPI, appEvents, opts) {
document.querySelector('.compileView').style.color = styles.colors.red
}
// display warning error if any
var errorContainer = container.querySelector('.error')
var error = false
if (data['error']) {
error = true
@ -171,7 +166,6 @@ function compileTab (container, appAPI, appEvents, opts) {
appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
if (count) {
var errorContainer = container.querySelector('.error')
appAPI.compilationMessage(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
type: 'warning',
click: () => appAPI.switchTab('staticanalysisView')
@ -303,7 +297,7 @@ function compileTab (container, appAPI, appEvents, opts) {
}
return el
}
return el
return { render () { return el } }
}
function detailsHelpSection () {

5
src/app/tabs/debugger-tab.js
Unescape View File

@ -1,13 +1,12 @@
var yo = require('yo-yo')
var css = require('./styles/debugger-tab-styles')
function debuggerTab (container) {
function debuggerTab (api = {}, events = {}, opts = {}) {
var el = yo`
<div class="${css.debuggerTabView} "id="debugView">
<div id="debugger" class="${css.debugger}"></div>
</div>`
container.appendChild(el)
return el
return { render () { return el } }
}
module.exports = debuggerTab

7
src/app/tabs/plugin-tab.js
Unescape View File

@ -1,13 +1,12 @@
var yo = require('yo-yo')
var css = require('./styles/plugin-tab-styles')
function plugintab (container, url) {
function plugintab (api = {}, events = {}, opts = {}) {
var el = yo`
<div class="${css.pluginTabView}" id="pluginView">
<iframe class="${css.iframe}" src="${url}/index.html"></iframe>
<iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
</div>`
container.appendChild(el)
return el
return { render () { return el } }
}
module.exports = plugintab

19
src/app/tabs/run-tab.js
Unescape View File

@ -22,14 +22,15 @@ var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instance
var pendingTxsText = yo`<span>0 pending transactions</span>`
function runTab (container, appAPI, appEvents) {
var events = new EventManager()
function runTab (appAPI = {}, appEvents = {}, opts = {}) {
var container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
var event = new EventManager()
var clearInstanceElement = yo`<i class="${css.clearinstance} ${css.icon} fa fa-trash" title="Clear Instances List" aria-hidden="true"></i>`
clearInstanceElement.addEventListener('click', () => {
events.trigger('clearInstance', [])
event.trigger('clearInstance', [])
})
var recorderInterface = makeRecorder(events, appAPI, appEvents)
var recorderInterface = makeRecorder(event, appAPI, appEvents)
var pendingTxsContainer = yo`
<div class="${css.pendingTxsContainer}">
<div class="${css.pendingTxsText}">
@ -43,9 +44,9 @@ function runTab (container, appAPI, appEvents) {
</div>`
var el = yo`
<div class="${css.runTabView}" id="runTabView">
<div>
${settings(container, appAPI, appEvents)}
${contractDropdown(events, appAPI, appEvents, instanceContainer)}
${contractDropdown(event, appAPI, appEvents, instanceContainer)}
${pendingTxsContainer}
${instanceContainer}
</div>
@ -65,7 +66,7 @@ function runTab (container, appAPI, appEvents) {
// set the final context. Cause it is possible that this is not the one we've originaly selected
selectExEnv.value = executionContext.getProvider()
fillAccountsList(appAPI, el)
events.trigger('clearInstance', [])
event.trigger('clearInstance', [])
}
selectExEnv.addEventListener('change', function (event) {
@ -95,12 +96,12 @@ function runTab (container, appAPI, appEvents) {
updatePendingTxs(container, appAPI)
}, 10000)
events.register('clearInstance', () => {
event.register('clearInstance', () => {
instanceContainer.innerHTML = '' // clear the instances list
noInstancesText.style.display = 'block'
instanceContainer.appendChild(noInstancesText)
})
return el
return { render () { return container } }
}
function fillAccountsList (appAPI, container) {

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

@ -10,10 +10,7 @@ var modal = require('../ui/modal-dialog-custom')
var css = require('./styles/settings-tab-styles')
function SettingsTab (container, appAPI, appEvents) {
if (typeof container === 'string') container = document.querySelector(container)
if (!container) throw new Error('no container given')
function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
var queryParams = new QueryParams()
var optionVM = yo`<input id="alwaysUseVM" type="checkbox">`
@ -78,7 +75,7 @@ function SettingsTab (container, appAPI, appEvents) {
<input class="${css.col1}" name="theme" id="themeDark" type="checkbox">
<label for="themeDark">Dark Theme</label>
</div>
</div>
</div>
<div class="${css.info}">
<div class=${css.title}>Plugin</div>
<div class="${css.crowNoFlex}">
@ -203,8 +200,7 @@ function SettingsTab (container, appAPI, appEvents) {
loadVersion('builtin', queryParams, appAPI, el)
})
container.appendChild(el)
return el
return { render () { return el } }
}
function setVersionText (text, el) {

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

@ -33,7 +33,7 @@ function supportTabView (gitterIframe) {
`
}
function supportTab (container, events) {
function supportTab (api = {}, events = {}, opts = {}) {
let el = supportTabView('')
let gitterIsLoaded = false
@ -47,8 +47,7 @@ function supportTab (container, events) {
gitterIsLoaded = true
})
container.appendChild(el)
return el
return { render () { return el } }
}
function openLink () {

5
src/app/tabs/tabbed-menu.js
Unescape View File

@ -4,8 +4,9 @@ var helper = require('../../lib/helper')
var css = require('./styles/tabbed-menu-styles')
class TabbedMenu {
constructor (tabView, events) {
constructor (api = {}, events = {}, opts = {}) {
var self = this
var tabView = document.createElement('ul')
this.tabView = tabView
this.events = events
this.tabs = {}
@ -19,7 +20,7 @@ class TabbedMenu {
self.selectTab(tabView.querySelector(`li.${tabName}`))
})
}
render () { return this.tabView }
selectTabByTitle (title) {
this.selectTab(this.tabs[title])
}

2
src/pluginManager.js
Unescape View File

@ -38,7 +38,7 @@
*
*/
class PluginManager {
constructor (api, events) {
constructor (api = {}, events = {}, opts = {}) {
var self = this
this.plugins = {}
this.inFocus

Write Preview
Loading…
Cancel
Save