diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index b47df1ba66..0fe01f072e 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -1,7 +1,5 @@ var yo = require('yo-yo') var EventManager = require('../../lib/events') -var globalRegistry = require('../../global/registry') -var executionContext = require('../../execution-context') var Card = require('../ui/card') var css = require('./styles/run-tab-styles') @@ -17,125 +15,132 @@ var RecorderUI = require('./runTab/recorder.js') class RunTab { constructor (udapp, udappUI, config, fileManager, editor, logCallback, filePanel, pluginManager, compilersArtefacts) { - var self = this this.event = new EventManager() - this._view = {} - this.registry = globalRegistry + this.renderInstanceContainer() + this.renderSettings(udapp) + this.renderDropdown(udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) + this.renderRecorder(udapp, udappUI, fileManager, config, logCallback) + this.renderRecorderCard() + this.renderContainer() + } + + renderContainer () { + this.container = yo`
` - self._view.recorderCount = yo`0` - self._view.instanceContainer = yo`
` - self._view.clearInstanceElement = yo` - self.event.trigger('clearInstance', [])} - title="Clear instances list and reset recorder" aria-hidden="true"> - ` - self._view.instanceContainerTitle = yo` + var el = yo` +
+ ${this.settingsUI.render()} + ${this.contractDropdownUI.render()} + ${this.recorderCard.render()} + ${this.instanceContainer} +
+ ` + this.container.appendChild(el) + } + + renderInstanceContainer () { + this.instanceContainer = yo`
` + + const instanceContainerTitle = yo`
Deployed Contracts - ${self._view.clearInstanceElement} + this.event.trigger('clearInstance', [])} + title="Clear instances list and reset recorder" aria-hidden="true"> +
` - self._view.noInstancesText = yo` + + this.noInstancesText = yo`
Currently you have no contract instances to interact with.
` - var container = yo`
` + this.event.register('clearInstance', () => { + this.instanceContainer.innerHTML = '' // clear the instances list + this.instanceContainer.appendChild(instanceContainerTitle) + this.instanceContainer.appendChild(this.noInstancesText) + }) - var recorder = new Recorder(udapp, fileManager, config) - recorder.event.register('newTxRecorded', (count) => { - this._view.recorderCount.innerText = count + this.instanceContainer.appendChild(instanceContainerTitle) + this.instanceContainer.appendChild(this.noInstancesText) + } + + renderSettings (udapp) { + var settings = new Settings(udapp) + this.settingsUI = new SettingsUI(settings) + + this.settingsUI.event.register('clearInstance', () => { + this.event.trigger('clearInstance', []) + }) + } + + renderDropdown (udappUI, fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel, logCallback) { + var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel) + this.contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback) + + this.contractDropdownUI.event.register('clearInstance', () => { + var noInstancesText = this.noInstancesText + if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } }) - recorder.event.register('cleared', () => { - this._view.recorderCount.innerText = 0 + this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { + this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address)) }) - executionContext.event.register('contextChanged', recorder.clearAll.bind(recorder)) - self.event.register('clearInstance', recorder.clearAll.bind(recorder)) + this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { + this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value)) + }) + } - var recorderInterface = new RecorderUI(recorder, logCallback) + renderRecorder (udapp, udappUI, fileManager, config, logCallback) { + this.recorderCount = yo`0` - recorderInterface.event.register('newScenario', (abi, address, contractName) => { - var noInstancesText = this._view.noInstancesText + var recorder = new Recorder(udapp, fileManager, config) + recorder.event.register('recorderCountChange', (count) => { + this.recorderCount.innerText = count + }) + this.event.register('clearInstance', recorder.clearAll.bind(recorder)) + + this.recorderInterface = new RecorderUI(recorder, logCallback) + + this.recorderInterface.event.register('newScenario', (abi, address, contractName) => { + var noInstancesText = this.noInstancesText if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - this._view.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName)) + this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, contractName)) }) - recorderInterface.render() + this.recorderInterface.render() + } - self._view.collapsedView = yo` + renderRecorderCard () { + const collapsedView = yo`
-
${self._view.recorderCount}
+
${this.recorderCount}
` - self._view.expandedView = yo` + const expandedView = yo`
All transactions (deployed contracts and function executions) in this environment can be saved and replayed in another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
- ${recorderInterface.recordButton} - ${recorderInterface.runButton} + ${this.recorderInterface.recordButton} + ${this.recorderInterface.runButton}
` - self.recorderOpts = { - title: 'Transactions recorded:', - collapsedView: self._view.collapsedView - } - - var recorderCard = new Card({}, {}, self.recorderOpts) - recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { + this.recorderCard = new Card({}, {}, { title: 'Transactions recorded:', collapsedView: collapsedView }) + this.recorderCard.event.register('expandCollapseCard', (arrow, body, status) => { body.innerHTML = '' status.innerHTML = '' if (arrow === 'down') { - status.appendChild(self._view.collapsedView) - body.appendChild(self._view.expandedView) + status.appendChild(collapsedView) + body.appendChild(expandedView) } else if (arrow === 'up') { - status.appendChild(self._view.collapsedView) + status.appendChild(collapsedView) } }) - - var settings = new Settings(udapp) - var settingsUI = new SettingsUI(settings) - - self.event.register('clearInstance', () => { - this._view.instanceContainer.innerHTML = '' // clear the instances list - this._view.instanceContainer.appendChild(self._view.instanceContainerTitle) - this._view.instanceContainer.appendChild(self._view.noInstancesText) - }) - settingsUI.event.register('clearInstance', () => { - this.event.trigger('clearInstance', []) - }) - - var dropdownLogic = new DropdownLogic(fileManager, pluginManager, compilersArtefacts, null, config, editor, udapp, filePanel) - var contractDropdownUI = new ContractDropdownUI(dropdownLogic, logCallback) - - contractDropdownUI.event.register('clearInstance', () => { - var noInstancesText = this._view.noInstancesText - if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } - }) - contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { - this._view.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address)) - }) - contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => { - this._view.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value)) - }) - - this._view.instanceContainer.appendChild(this._view.instanceContainerTitle) - this._view.instanceContainer.appendChild(this._view.noInstancesText) - - var el = yo` -
- ${settingsUI.render()} - ${contractDropdownUI.render()} - ${recorderCard.render()} - ${self._view.instanceContainer} -
- ` - container.appendChild(el) - this.container = container } render () { diff --git a/src/app/tabs/runTab/model/dropdownlogic.js b/src/app/tabs/runTab/model/dropdownlogic.js index afc8685760..57a28c61e6 100644 --- a/src/app/tabs/runTab/model/dropdownlogic.js +++ b/src/app/tabs/runTab/model/dropdownlogic.js @@ -9,10 +9,9 @@ var CompilerAbstract = require('../../../compiler/compiler-abstract') var EventManager = remixLib.EventManager class DropdownLogic { - constructor (fileManager, pluginManager, compilersArtefacts, compiler, config, editor, udapp, filePanel) { + constructor (fileManager, pluginManager, compilersArtefacts, config, editor, udapp, filePanel) { this.pluginManager = pluginManager this.compilersArtefacts = compilersArtefacts - this.compiler = compiler this.config = config this.editor = editor this.udapp = udapp diff --git a/src/app/tabs/runTab/model/recorder.js b/src/app/tabs/runTab/model/recorder.js index 2f8a7a67e4..9875c4ad35 100644 --- a/src/app/tabs/runTab/model/recorder.js +++ b/src/app/tabs/runTab/model/recorder.js @@ -80,6 +80,13 @@ class Recorder { this.data._createdContracts[address] = timestamp this.data._createdContractsReverse[timestamp] = address }) + executionContext.event.register('contextChanged', this.clearAll.bind(this)) + this.event.register('newTxRecorded', (count) => { + this.event.trigger('recorderCountChange', [count]) + }) + this.event.register('cleared', () => { + this.event.trigger('recorderCountChange', [0]) + }) } /**