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