yann300
8 years ago
parent
037d201605
commit
9d03238bd1
@ -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,78 @@ |
|||||||
|
'use strict' |
||||||
|
var yo = require('yo-yo') |
||||||
|
var ui = require('../helpers/ui') |
||||||
|
var styleDropdown = require('./styles/dropdownPanel') |
||||||
|
var style = require('./styles/basicStyles') |
||||||
|
var basicStyles = require('./styles/basicStyles') |
||||||
|
var Clipboard |
||||||
|
if (ui.runInBrowser()) { |
||||||
|
Clipboard = require('clipboard') |
||||||
|
} |
||||||
|
|
||||||
|
function DropdownPanel (_name, _raw) { |
||||||
|
this.data |
||||||
|
this.name = _name |
||||||
|
this.view |
||||||
|
this.clipboard |
||||||
|
_raw = _raw === undefined ? false : _raw |
||||||
|
this.raw = _raw |
||||||
|
} |
||||||
|
|
||||||
|
DropdownPanel.prototype.update = function () { |
||||||
|
this.view.querySelector('.dropdownpanel div').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><span>${item}</span></div>`) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
for (var k in this.data) { |
||||||
|
div.appendChild(yo`<div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '100px'})} >${k}</div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '355px'})} >${this.data[k]}</div></div>`) |
||||||
|
} |
||||||
|
} |
||||||
|
this.view.querySelector('.dropdownpanel div').appendChild(div) |
||||||
|
this.view.querySelector('.btn').setAttribute('data-clipboard-text', data) |
||||||
|
if (Clipboard && !this.clipboard) { |
||||||
|
this.clipboard = new Clipboard(this.view.querySelector('.btn')) |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.view.querySelector('.dropdownpanel div').appendChild(this.data) |
||||||
|
this.view.querySelector('.btn').style.display = 'none' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
DropdownPanel.prototype.render = function (overridestyle) { |
||||||
|
overridestyle === undefined ? {} : overridestyle |
||||||
|
var self = this |
||||||
|
var view = yo`<div>
|
||||||
|
<div style=${ui.formatCss(styleDropdown.title)}> |
||||||
|
<div onclick=${function () { self.toggle() }} style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div> |
||||||
|
</div> |
||||||
|
<div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'> |
||||||
|
<button style=${ui.formatCss(style.button, styleDropdown.copyBtn)} class="btn" type="button"> |
||||||
|
Copy to clipboard |
||||||
|
</button> |
||||||
|
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)}><span>Empty</span></div> |
||||||
|
</div> |
||||||
|
</div>` |
||||||
|
if (!this.view) { |
||||||
|
this.view = view |
||||||
|
} |
||||||
|
return view |
||||||
|
} |
||||||
|
|
||||||
|
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,65 @@ |
|||||||
|
'use strict' |
||||||
|
var style = require('./styles/basicStyles') |
||||||
|
var yo = require('yo-yo') |
||||||
|
var ui = require('../helpers/ui') |
||||||
|
var DropdownPanel = require('./DropdownPanel') |
||||||
|
|
||||||
|
function ListView (_parent, _codeManager) { |
||||||
|
this.parent = _parent |
||||||
|
this.codeManager = _codeManager |
||||||
|
this.code |
||||||
|
this.address |
||||||
|
this.codeView |
||||||
|
this.itemSelected |
||||||
|
this.basicPanel = new DropdownPanel('Assembly', true) |
||||||
|
this.init() |
||||||
|
} |
||||||
|
|
||||||
|
ListView.prototype.render = function () { |
||||||
|
return yo`<div id='asmcodes' >${this.basicPanel.render({height: style.instructionsList.height})}</div>` |
||||||
|
} |
||||||
|
|
||||||
|
ListView.prototype.init = function () { |
||||||
|
var self = this |
||||||
|
this.codeManager.register('changed', this, this.changed) |
||||||
|
this.parent.register('traceUnloaded', this, function () { |
||||||
|
self.changed([], '', -1) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
ListView.prototype.indexChanged = function (index) { |
||||||
|
if (index >= 0) { |
||||||
|
if (this.itemSelected) { |
||||||
|
this.itemSelected.removeAttribute('style') |
||||||
|
this.itemSelected.firstChild.removeAttribute('style') |
||||||
|
} |
||||||
|
this.itemSelected = this.codeView.children[index] |
||||||
|
this.itemSelected.setAttribute('style', ui.formatCss({'background-color': '#eeeeee'})) |
||||||
|
this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'})) |
||||||
|
this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.style.height.replace('px', '')) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ListView.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) |
||||||
|
} |
||||||
|
|
||||||
|
ListView.prototype.renderAssemblyItems = function () { |
||||||
|
if (this.code) { |
||||||
|
var codeView = this.code.map(function (item, i) { |
||||||
|
return yo`<li key=${i} value=${i}><span>${item}</span></li>` |
||||||
|
}) |
||||||
|
return yo`<ul id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
|
||||||
|
${codeView} |
||||||
|
</ul>` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = ListView |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
'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='sticker' >${this.basicPanel.render()}</div>` |
||||||
|
} |
||||||
|
|
||||||
|
StepDetail.prototype.init = function () { |
||||||
|
var self = this |
||||||
|
this.parent.register('traceUnloaded', this, function () { |
||||||
|
self.detail = initDetail() |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
this.parent.register('newTraceLoaded', this, function () { |
||||||
|
self.detail = initDetail() |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
this.parent.register('indexChanged', this, function (index) { |
||||||
|
if (index < 0) return |
||||||
|
|
||||||
|
self.detail.vmTraceStep = index |
||||||
|
|
||||||
|
self.traceManager.getCurrentStep(index, function (error, step) { |
||||||
|
if (error) { |
||||||
|
console.log(error) |
||||||
|
self.detail.step = '-' |
||||||
|
} else { |
||||||
|
self.detail.step = step |
||||||
|
} |
||||||
|
self.basicPanel.data = self.detail |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
self.traceManager.getMemExpand(index, function (error, addmem) { |
||||||
|
if (error) { |
||||||
|
console.log(error) |
||||||
|
self.detail.addmemory = '-' |
||||||
|
} else { |
||||||
|
self.detail.addmemory = addmem |
||||||
|
} |
||||||
|
self.basicPanel.data = self.detail |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
self.traceManager.getStepCost(index, function (error, gas) { |
||||||
|
if (error) { |
||||||
|
console.log(error) |
||||||
|
self.detail.gas = '-' |
||||||
|
} else { |
||||||
|
self.detail.gas = gas |
||||||
|
} |
||||||
|
self.basicPanel.data = self.detail |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { |
||||||
|
if (error) { |
||||||
|
console.log(error) |
||||||
|
self.detail.loadedAddress = '-' |
||||||
|
} else { |
||||||
|
self.detail.loadedAddress = address |
||||||
|
} |
||||||
|
self.basicPanel.data = self.detail |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
|
||||||
|
self.traceManager.getRemainingGas(index, function (error, remaingas) { |
||||||
|
if (error) { |
||||||
|
console.log(error) |
||||||
|
self.detail.remainingGas = '-' |
||||||
|
} else { |
||||||
|
self.detail.remainingGas = remaingas |
||||||
|
} |
||||||
|
self.basicPanel.data = self.detail |
||||||
|
self.basicPanel.update() |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = StepDetail |
||||||
|
|
||||||
|
function initDetail () { |
||||||
|
return { |
||||||
|
vmTraceStep: '-', |
||||||
|
step: '-', |
||||||
|
addmemory: '', |
||||||
|
gas: '', |
||||||
|
remainingGas: '-', |
||||||
|
loadedAddress: '-' |
||||||
|
} |
||||||
|
} |
||||||
@ -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 |
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,28 @@ |
|||||||
|
'use strict' |
||||||
|
module.exports = { |
||||||
|
title: { |
||||||
|
'border': '1px solid #dadada', |
||||||
|
'background-color': '#eeeeee', |
||||||
|
'width': '100%', |
||||||
|
'color': '#363f47', |
||||||
|
'margin-top': '5px', |
||||||
|
'font-style': 'italic' |
||||||
|
}, |
||||||
|
titleInner: { |
||||||
|
'display': 'inline-block', |
||||||
|
'cursor': 'pointer' |
||||||
|
}, |
||||||
|
content: { |
||||||
|
'color': '#9b9b9b', |
||||||
|
'width': '100%', |
||||||
|
'font-family': 'monospace' |
||||||
|
}, |
||||||
|
inner: { |
||||||
|
'padding': '2px', |
||||||
|
'margin-left': '10px' |
||||||
|
}, |
||||||
|
copyBtn: { |
||||||
|
'float': 'right', |
||||||
|
'margin-top': '3px' |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue