chriseth
8 years ago
committed by
GitHub
commit
99e9baaed6
@ -1,55 +0,0 @@ |
||||
'use strict' |
||||
var style = require('./styles/basicStyles') |
||||
var yo = require('yo-yo') |
||||
var ui = require('../helpers/ui') |
||||
|
||||
function ASMCode (_parent, _codeManager) { |
||||
this.parent = _parent |
||||
this.codeManager = _codeManager |
||||
this.code |
||||
this.address |
||||
this.codeView |
||||
|
||||
this.init() |
||||
} |
||||
|
||||
ASMCode.prototype.render = function () { |
||||
var view = ( |
||||
yo`<select size='10' id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
|
||||
${this.codeView} |
||||
</select>` |
||||
) |
||||
if (!this.view) { |
||||
this.view = view |
||||
} |
||||
return view |
||||
} |
||||
|
||||
ASMCode.prototype.init = function () { |
||||
this.codeManager.register('changed', this, this.changed) |
||||
} |
||||
|
||||
ASMCode.prototype.indexChanged = function (index) { |
||||
document.getElementById('asmitems').value = index |
||||
} |
||||
|
||||
ASMCode.prototype.changed = function (code, address, index) { |
||||
if (this.address !== address) { |
||||
this.code = code |
||||
this.address = address |
||||
this.renderAssemblyItems() |
||||
yo.update(this.view, this.render()) |
||||
} |
||||
this.indexChanged(index) |
||||
} |
||||
|
||||
ASMCode.prototype.renderAssemblyItems = function () { |
||||
if (this.code) { |
||||
this.codeView = this.code.map(function (item, i) { |
||||
return yo`<option key=${i} value=${i}>${item}</option>` |
||||
}) |
||||
return this.codeView |
||||
} |
||||
} |
||||
|
||||
module.exports = ASMCode |
||||
@ -0,0 +1,71 @@ |
||||
'use strict' |
||||
var style = require('./styles/basicStyles') |
||||
var yo = require('yo-yo') |
||||
var ui = require('../helpers/ui') |
||||
var DropdownPanel = require('./DropdownPanel') |
||||
|
||||
function CodeListView (_parent, _codeManager) { |
||||
this.parent = _parent |
||||
this.codeManager = _codeManager |
||||
this.code |
||||
this.address |
||||
this.codeView |
||||
this.itemSelected |
||||
this.basicPanel = new DropdownPanel('Instructions', true) |
||||
this.init() |
||||
} |
||||
|
||||
CodeListView.prototype.render = function () { |
||||
return yo`<div id='asmcodes' >${this.basicPanel.render({height: style.instructionsList.height})}</div>` |
||||
} |
||||
|
||||
CodeListView.prototype.init = function () { |
||||
var self = this |
||||
this.codeManager.register('changed', this, this.changed) |
||||
this.parent.register('traceUnloaded', this, function () { |
||||
self.changed([], '', -1) |
||||
}) |
||||
} |
||||
|
||||
CodeListView.prototype.indexChanged = function (index) { |
||||
if (index >= 0) { |
||||
if (this.itemSelected) { |
||||
this.itemSelected.removeAttribute('selected') |
||||
this.itemSelected.removeAttribute('style') |
||||
if (this.itemSelected.firstChild) { |
||||
this.itemSelected.firstChild.removeAttribute('style') |
||||
} |
||||
} |
||||
this.itemSelected = this.codeView.children[index] |
||||
this.itemSelected.setAttribute('style', ui.formatCss({'background-color': '#eeeeee'})) |
||||
this.itemSelected.setAttribute('selected', 'selected') |
||||
if (this.itemSelected.firstChild) { |
||||
this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'})) |
||||
} |
||||
this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetHeight) |
||||
} |
||||
} |
||||
|
||||
CodeListView.prototype.changed = function (code, address, index) { |
||||
if (this.address !== address) { |
||||
this.code = code |
||||
this.address = address |
||||
this.codeView = this.renderAssemblyItems() |
||||
this.basicPanel.data = this.codeView |
||||
this.basicPanel.update() |
||||
} |
||||
this.indexChanged(index) |
||||
} |
||||
|
||||
CodeListView.prototype.renderAssemblyItems = function () { |
||||
if (this.code) { |
||||
var codeView = this.code.map(function (item, i) { |
||||
return yo`<div key=${i} value=${i}><span>${item}</span></div>` |
||||
}) |
||||
return yo`<div id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
|
||||
${codeView} |
||||
</div>` |
||||
} |
||||
} |
||||
|
||||
module.exports = CodeListView |
||||
@ -0,0 +1,85 @@ |
||||
'use strict' |
||||
var yo = require('yo-yo') |
||||
var ui = require('../helpers/ui') |
||||
var styleDropdown = require('./styles/dropdownPanel') |
||||
var basicStyles = require('./styles/basicStyles') |
||||
|
||||
function DropdownPanel (_name, _raw) { |
||||
this.data |
||||
this.name = _name |
||||
this.view |
||||
_raw = _raw === undefined ? false : _raw |
||||
this.raw = _raw |
||||
} |
||||
|
||||
DropdownPanel.prototype.update = function (_data) { |
||||
if (!this.view) { |
||||
return |
||||
} |
||||
if (_data) { |
||||
this.data = _data |
||||
} |
||||
this.view.querySelector('.dropdownpanel div.dropdowncontent').innerHTML = '' |
||||
if (!this.raw) { |
||||
var data = JSON.stringify(this.data, null, '\t') |
||||
if (!this.data || data === '[]' || data === '{}') { |
||||
this.data = ['Empty'] |
||||
} |
||||
var div = document.createElement('div') |
||||
if (Array.isArray(this.data)) { |
||||
this.data.map(function (item, i) { |
||||
div.appendChild(yo`<div>${item}</div>`) |
||||
}) |
||||
} else { |
||||
for (var k in this.data) { |
||||
var content = typeof this.data[k] === 'string' ? this.data[k] : JSON.stringify(this.data[k]) |
||||
div.appendChild(yo`<div><div title=${k} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '10%'})} >${k}</div><div title=${content} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '78%'})} >${content}</div></div>`) |
||||
} |
||||
} |
||||
this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(div) |
||||
this.view.querySelector('.dropdownpanel button.btn').style.display = 'block' |
||||
this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = data |
||||
} else { |
||||
this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(this.data) |
||||
this.view.querySelector('.dropdownpanel button.btn').style.display = 'none' |
||||
} |
||||
} |
||||
|
||||
DropdownPanel.prototype.render = function (overridestyle) { |
||||
overridestyle === undefined ? {} : overridestyle |
||||
var self = this |
||||
var view = yo`<div>
|
||||
<div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}> |
||||
<div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div> |
||||
</div> |
||||
<div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'> |
||||
<button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} class="btn" type="button"> |
||||
Raw |
||||
</button> |
||||
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><div>Empty</div></div> |
||||
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div> |
||||
</div> |
||||
</div>` |
||||
if (!this.view) { |
||||
this.view = view |
||||
} |
||||
return view |
||||
} |
||||
|
||||
DropdownPanel.prototype.toggleRaw = function () { |
||||
var raw = this.view.querySelector('.dropdownpanel .dropdownrawcontent') |
||||
var formatted = this.view.querySelector('.dropdownpanel .dropdowncontent') |
||||
raw.style.display = raw.style.display === 'none' ? 'block' : 'none' |
||||
formatted.style.display = formatted.style.display === 'none' ? 'block' : 'none' |
||||
} |
||||
|
||||
DropdownPanel.prototype.toggle = function () { |
||||
var el = this.view.querySelector('.dropdownpanel') |
||||
if (el.style.display === '') { |
||||
el.style.display = 'none' |
||||
} else { |
||||
el.style.display = '' |
||||
} |
||||
} |
||||
|
||||
module.exports = DropdownPanel |
||||
@ -0,0 +1,100 @@ |
||||
'use strict' |
||||
var yo = require('yo-yo') |
||||
var DropdownPanel = require('./DropdownPanel') |
||||
|
||||
function StepDetail (_parent, _traceManager) { |
||||
this.parent = _parent |
||||
this.traceManager = _traceManager |
||||
|
||||
this.basicPanel = new DropdownPanel('Step detail') |
||||
|
||||
this.detail = initDetail() |
||||
this.view |
||||
this.init() |
||||
} |
||||
|
||||
StepDetail.prototype.render = function () { |
||||
return yo`<div id='stepdetail' >${this.basicPanel.render()}</div>` |
||||
} |
||||
|
||||
StepDetail.prototype.init = function () { |
||||
var self = this |
||||
this.parent.register('traceUnloaded', this, function () { |
||||
self.detail = initDetail() |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
this.parent.register('newTraceLoaded', this, function () { |
||||
self.detail = initDetail() |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
this.parent.register('indexChanged', this, function (index) { |
||||
if (index < 0) return |
||||
|
||||
self.detail['vm trace step'] = index |
||||
|
||||
self.traceManager.getCurrentStep(index, function (error, step) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.detail['execution step'] = '-' |
||||
} else { |
||||
self.detail['execution step'] = step |
||||
} |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
self.traceManager.getMemExpand(index, function (error, addmem) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.detail['add memory'] = '-' |
||||
} else { |
||||
self.detail['add memory'] = addmem |
||||
} |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
self.traceManager.getStepCost(index, function (error, gas) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.detail.gas = '-' |
||||
} else { |
||||
self.detail.gas = gas |
||||
} |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.detail['loaded address'] = '-' |
||||
} else { |
||||
self.detail['loaded address'] = address |
||||
} |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
|
||||
self.traceManager.getRemainingGas(index, function (error, remaingas) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.detail['remaining gas'] = '-' |
||||
} else { |
||||
self.detail['remaining gas'] = remaingas |
||||
} |
||||
self.basicPanel.update(self.detail) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
module.exports = StepDetail |
||||
|
||||
function initDetail () { |
||||
return { |
||||
'vm trace step': '-', |
||||
'execution step': '-', |
||||
'add memory': '', |
||||
'gas': '', |
||||
'remaining gas': '-', |
||||
'loaded address': '-' |
||||
} |
||||
} |
||||
@ -1,150 +0,0 @@ |
||||
'use strict' |
||||
var yo = require('yo-yo') |
||||
|
||||
function Sticker (_parent, _traceManager) { |
||||
this.parent = _parent |
||||
this.traceManager = _traceManager |
||||
|
||||
this.vmTraceStep = '-' |
||||
this.step = '-' |
||||
this.addmemory = '-' |
||||
this.gas = '-' |
||||
this.remainingGas = '-' |
||||
this.loadedAddress = '-' |
||||
this.hide = true |
||||
|
||||
this.view |
||||
this.init() |
||||
} |
||||
|
||||
Sticker.prototype.render = function () { |
||||
var view = yo`<div style=${this.hide ? 'display: none' : 'display: block'}>
|
||||
<table> |
||||
<tbody> |
||||
<tr key='vmtracestep'> |
||||
<td> |
||||
VMtracestep: |
||||
</td> |
||||
<td id='vmtracestepinfo' > |
||||
${this.vmTraceStep} |
||||
</td> |
||||
</tr> |
||||
<tr key='step'> |
||||
<td> |
||||
Step: |
||||
</td> |
||||
<td id='stepinfo'> |
||||
${this.step} |
||||
</td> |
||||
</tr> |
||||
<tr key='addmemory'> |
||||
<td> |
||||
Add memory: |
||||
</td> |
||||
<td id='addmemoryinfo'> |
||||
${this.addmemory} |
||||
</td> |
||||
</tr> |
||||
<tr key='gas'> |
||||
<td> |
||||
Gas: |
||||
</td> |
||||
<td id='gasinfo'> |
||||
${this.gas} |
||||
</td> |
||||
</tr> |
||||
<tr key='remaininggas'> |
||||
<td> |
||||
Remaining gas: |
||||
</td> |
||||
<td id='remaininggasinfo'> |
||||
${this.remainingGas} |
||||
</td> |
||||
</tr> |
||||
<tr key='loadedaddress'> |
||||
<td> |
||||
Loaded address: |
||||
</td> |
||||
<td id='loadedaddressinfo'> |
||||
${this.loadedAddress} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div>` |
||||
if (!this.view) { |
||||
this.view = view |
||||
} |
||||
return view |
||||
} |
||||
|
||||
Sticker.prototype.init = function () { |
||||
var self = this |
||||
this.parent.register('traceUnloaded', this, function () { |
||||
self.hide = true |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
this.parent.register('newTraceLoaded', this, function () { |
||||
self.hide = false |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
this.parent.register('indexChanged', this, function (index) { |
||||
if (index < 0) return |
||||
|
||||
self.vmTraceStep = index |
||||
|
||||
self.traceManager.getCurrentStep(index, function (error, step) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.step = '-' |
||||
} else { |
||||
self.step = step |
||||
} |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
self.traceManager.getMemExpand(index, function (error, addmem) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.addmemory = '-' |
||||
} else { |
||||
self.addmemory = addmem |
||||
} |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
self.traceManager.getStepCost(index, function (error, gas) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.gas = '-' |
||||
} else { |
||||
self.gas = gas |
||||
} |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.loadedAddress = '-' |
||||
} else { |
||||
self.loadedAddress = address |
||||
} |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
|
||||
self.traceManager.getRemainingGas(index, function (error, remaingas) { |
||||
if (error) { |
||||
console.log(error) |
||||
self.remainingGas = '-' |
||||
} else { |
||||
self.remainingGas = remaingas |
||||
} |
||||
yo.update(self.view, self.render()) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
module.exports = Sticker |
||||
@ -0,0 +1,28 @@ |
||||
'use strict' |
||||
module.exports = { |
||||
title: { |
||||
'border': '1px solid #dadada', |
||||
'background-color': '#eeeeee', |
||||
'width': '100%', |
||||
'color': '#363f47', |
||||
'margin-top': '5px', |
||||
'cursor': 'pointer' |
||||
}, |
||||
titleInner: { |
||||
'display': 'inline-block' |
||||
}, |
||||
content: { |
||||
'color': '#111111', |
||||
'width': '100%', |
||||
'font-family': 'monospace' |
||||
}, |
||||
inner: { |
||||
'padding': '2px', |
||||
'margin-left': '10px', |
||||
'word-break': 'break-all' |
||||
}, |
||||
copyBtn: { |
||||
'float': 'right', |
||||
'margin-top': '3px' |
||||
} |
||||
} |
||||
@ -1,16 +1,6 @@ |
||||
'use strict' |
||||
module.exports = { |
||||
rule: { |
||||
'width': '600px' |
||||
}, |
||||
runner: { |
||||
'position': 'absolute', |
||||
'width': '16px', |
||||
'height': '16px', |
||||
'margin': '0', |
||||
'padding': '0', |
||||
'overflow': 'hidden', |
||||
'border': '1px solid #a4bed4', |
||||
'background-color': '#f1f7ff' |
||||
'width': '98%' |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,77 @@ |
||||
function loadJSON (url, callback) { |
||||
var xobj = new XMLHttpRequest() |
||||
xobj.overrideMimeType('application/json') |
||||
xobj.open('GET', url, true) |
||||
xobj.onreadystatechange = function () { |
||||
if (xobj.readyState == 4 && xobj.status == '200') { |
||||
callback(xobj.responseText) |
||||
} |
||||
} |
||||
xobj.send(null) |
||||
} |
||||
|
||||
function loadTestWeb3 (data) { |
||||
var container = document.getElementById('app') |
||||
var vmdebugger = container.debugger |
||||
var uiTestweb3 = {} |
||||
uiTestweb3.eth = {} |
||||
uiTestweb3.debug = {} |
||||
uiTestweb3.eth.getCode = function (address, callback) { |
||||
if (callback) { |
||||
callback(null, data.testCodes[address]) |
||||
} else { |
||||
return data.testCodes[address] |
||||
} |
||||
} |
||||
|
||||
uiTestweb3.debug.traceTransaction = function (txHash, options, callback) { |
||||
callback(null, data.testTraces[txHash]) |
||||
} |
||||
|
||||
uiTestweb3.debug.storageAt = function (blockNumber, txIndex, address, callback) { |
||||
callback(null, {}) |
||||
} |
||||
|
||||
uiTestweb3.eth.getTransaction = function (txHash, callback) { |
||||
if (callback) { |
||||
callback(null, data.testTxs[txHash]) |
||||
} else { |
||||
return data.testTxs[txHash] |
||||
} |
||||
} |
||||
|
||||
uiTestweb3.eth.getTransactionFromBlock = function (blockNumber, txIndex, callback) { |
||||
if (callback) { |
||||
callback(null, data.testTxsByBlock[blockNumber + '-' + txIndex]) |
||||
} else { |
||||
return data.testTxsByBlock[blockNumber + '-' + txIndex] |
||||
} |
||||
} |
||||
|
||||
uiTestweb3.eth.getBlockNumber = function (callback) { callback(null, 'web3 modified for testing purposes :)') } |
||||
|
||||
uiTestweb3.providers = { 'HttpProvider': function (url) {} } |
||||
|
||||
uiTestweb3.setProvider = function (provider) {} |
||||
|
||||
uiTestweb3.currentProvider = {host: 'web3 modified for testing purposes :)'}
|
||||
vmdebugger.addProvider('TEST', uiTestweb3) |
||||
vmdebugger.switchProvider('TEST') |
||||
} |
||||
|
||||
function waitForRemix (data) { |
||||
setTimeout(function () { |
||||
if (!document.getElementById('app').debugger) { |
||||
waitForRemix(data) |
||||
} else { |
||||
loadTestWeb3(data) |
||||
} |
||||
}, 500) |
||||
} |
||||
|
||||
loadJSON('/test/resources/testWeb3.json', function (result) { |
||||
var data = JSON.parse(result) |
||||
waitForRemix(data) |
||||
}) |
||||
|
||||
|
||||
Loading…
Reference in new issue