From 9d03238bd1d4d516c3bc97a15a2e02f6b2f39eb4 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 6 Oct 2016 18:45:03 +0200 Subject: [PATCH 1/4] gui changes --- package.json | 1 + src/code/opcodes.js | 78 ++++++++--------- src/helpers/traceHelper.js | 4 + src/helpers/ui.js | 8 +- src/trace/traceAnalyser.js | 2 +- src/trace/traceManager.js | 6 +- src/ui/ASMCode.js | 55 ------------ src/ui/ButtonNavigator.js | 12 +-- src/ui/CalldataPanel.js | 16 +--- src/ui/CallstackPanel.js | 16 +--- src/ui/DropdownPanel.js | 78 +++++++++++++++++ src/ui/Ethdebugger.js | 10 +-- src/ui/FullStoragesChanges.js | 24 ++---- src/ui/ListView.js | 65 ++++++++++++++ src/ui/MemoryPanel.js | 6 +- src/ui/StackPanel.js | 10 +-- src/ui/StepDetail.js | 105 +++++++++++++++++++++++ src/ui/StepManager.js | 4 +- src/ui/Sticker.js | 150 --------------------------------- src/ui/StoragePanel.js | 16 +--- src/ui/TxBrowser.js | 74 ++++++---------- src/ui/VmDebugger.js | 72 +++++----------- src/ui/img/play-arrow.png | Bin 0 -> 1492 bytes src/ui/styles/basicStyles.js | 36 +++++++- src/ui/styles/dropdownPanel.js | 28 ++++++ 25 files changed, 448 insertions(+), 428 deletions(-) delete mode 100644 src/ui/ASMCode.js create mode 100644 src/ui/DropdownPanel.js create mode 100644 src/ui/ListView.js create mode 100644 src/ui/StepDetail.js delete mode 100644 src/ui/Sticker.js create mode 100644 src/ui/img/play-arrow.png create mode 100644 src/ui/styles/dropdownPanel.js diff --git a/package.json b/package.json index f4318b021d..897b47627e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "devDependencies": { "browserify": "^13.0.1", + "clipboard": "^1.5.12", "ethereumjs-util": "^4.5.0", "http-server": "^0.9.0", "nightwatch": "^0.9.5", diff --git a/src/code/opcodes.js b/src/code/opcodes.js index dd51c2bb20..021a3686f3 100644 --- a/src/code/opcodes.js +++ b/src/code/opcodes.js @@ -102,45 +102,45 @@ var codes = { 0x7e: ['PUSH', 3, 0, 1, false], 0x7f: ['PUSH', 3, 0, 1, false], - 0x80: ['DUP', 3, 0, 1, false], - 0x81: ['DUP', 3, 0, 1, false], - 0x82: ['DUP', 3, 0, 1, false], - 0x83: ['DUP', 3, 0, 1, false], - 0x84: ['DUP', 3, 0, 1, false], - 0x85: ['DUP', 3, 0, 1, false], - 0x86: ['DUP', 3, 0, 1, false], - 0x87: ['DUP', 3, 0, 1, false], - 0x88: ['DUP', 3, 0, 1, false], - 0x89: ['DUP', 3, 0, 1, false], - 0x8a: ['DUP', 3, 0, 1, false], - 0x8b: ['DUP', 3, 0, 1, false], - 0x8c: ['DUP', 3, 0, 1, false], - 0x8d: ['DUP', 3, 0, 1, false], - 0x8e: ['DUP', 3, 0, 1, false], - 0x8f: ['DUP', 3, 0, 1, false], - - 0x90: ['SWAP', 3, 0, 0, false], - 0x91: ['SWAP', 3, 0, 0, false], - 0x92: ['SWAP', 3, 0, 0, false], - 0x93: ['SWAP', 3, 0, 0, false], - 0x94: ['SWAP', 3, 0, 0, false], - 0x95: ['SWAP', 3, 0, 0, false], - 0x96: ['SWAP', 3, 0, 0, false], - 0x97: ['SWAP', 3, 0, 0, false], - 0x98: ['SWAP', 3, 0, 0, false], - 0x99: ['SWAP', 3, 0, 0, false], - 0x9a: ['SWAP', 3, 0, 0, false], - 0x9b: ['SWAP', 3, 0, 0, false], - 0x9c: ['SWAP', 3, 0, 0, false], - 0x9d: ['SWAP', 3, 0, 0, false], - 0x9e: ['SWAP', 3, 0, 0, false], - 0x9f: ['SWAP', 3, 0, 0, false], - - 0xa0: ['LOG', 375, 2, 0, false], - 0xa1: ['LOG', 375, 3, 0, false], - 0xa2: ['LOG', 375, 4, 0, false], - 0xa3: ['LOG', 375, 5, 0, false], - 0xa4: ['LOG', 375, 6, 0, false], + 0x80: ['DUP1', 3, 0, 1, false], + 0x81: ['DUP2', 3, 0, 1, false], + 0x82: ['DUP3', 3, 0, 1, false], + 0x83: ['DUP4', 3, 0, 1, false], + 0x84: ['DUP5', 3, 0, 1, false], + 0x85: ['DUP6', 3, 0, 1, false], + 0x86: ['DUP7', 3, 0, 1, false], + 0x87: ['DUP8', 3, 0, 1, false], + 0x88: ['DUP9', 3, 0, 1, false], + 0x89: ['DUP10', 3, 0, 1, false], + 0x8a: ['DUP11', 3, 0, 1, false], + 0x8b: ['DUP12', 3, 0, 1, false], + 0x8c: ['DUP13', 3, 0, 1, false], + 0x8d: ['DUP14', 3, 0, 1, false], + 0x8e: ['DUP15', 3, 0, 1, false], + 0x8f: ['DUP16', 3, 0, 1, false], + + 0x90: ['SWAP1', 3, 0, 0, false], + 0x91: ['SWAP2', 3, 0, 0, false], + 0x92: ['SWAP3', 3, 0, 0, false], + 0x93: ['SWAP4', 3, 0, 0, false], + 0x94: ['SWAP5', 3, 0, 0, false], + 0x95: ['SWAP6', 3, 0, 0, false], + 0x96: ['SWAP7', 3, 0, 0, false], + 0x97: ['SWAP8', 3, 0, 0, false], + 0x98: ['SWAP9', 3, 0, 0, false], + 0x99: ['SWAP10', 3, 0, 0, false], + 0x9a: ['SWAP11', 3, 0, 0, false], + 0x9b: ['SWAP12', 3, 0, 0, false], + 0x9c: ['SWAP13', 3, 0, 0, false], + 0x9d: ['SWAP14', 3, 0, 0, false], + 0x9e: ['SWAP15', 3, 0, 0, false], + 0x9f: ['SWAP16', 3, 0, 0, false], + + 0xa0: ['LOG0', 375, 2, 0, false], + 0xa1: ['LOG1', 375, 3, 0, false], + 0xa2: ['LOG2', 375, 4, 0, false], + 0xa3: ['LOG3', 375, 5, 0, false], + 0xa4: ['LOG4', 375, 6, 0, false], // '0xf0' range - closures 0xf0: ['CREATE', 32000, 3, 1, true], diff --git a/src/helpers/traceHelper.js b/src/helpers/traceHelper.js index 4243cbd17a..dee13c88e9 100644 --- a/src/helpers/traceHelper.js +++ b/src/helpers/traceHelper.js @@ -25,6 +25,10 @@ module.exports = { return step.op === 'RETURN' }, + isStopInstruction: function (step) { + return step.op === 'STOP' + }, + isSSTOREInstruction: function (step) { return step.op === 'SSTORE' }, diff --git a/src/helpers/ui.js b/src/helpers/ui.js index acdf14f5d5..2860d2da44 100644 --- a/src/helpers/ui.js +++ b/src/helpers/ui.js @@ -1,7 +1,7 @@ 'use strict' module.exports = { formatMemory: function (mem, width) { - var ret = '' + var ret = {} if (!mem) { return ret } @@ -13,7 +13,7 @@ module.exports = { for (var k = 0; k < mem.length; k += (width * 2)) { var memory = mem.substr(k, width * 2) var content = this.tryConvertAsciiFormat(memory) - ret += '0x' + (k / 2).toString(16) + '\t\t' + content.raw + '\t' + content.ascii + '\n' + ret['0x' + (k / 2).toString(16)] = content.raw + '\t' + content.ascii } return ret }, @@ -51,5 +51,9 @@ module.exports = { } hex = hex.replace(/^0+/, '') return '0x' + hex + }, + + runInBrowser: function () { + return typeof window !== 'undefined' } } diff --git a/src/trace/traceAnalyser.js b/src/trace/traceAnalyser.js index fbeafabb4e..cdc3839545 100644 --- a/src/trace/traceAnalyser.js +++ b/src/trace/traceAnalyser.js @@ -118,7 +118,7 @@ TraceAnalyser.prototype.buildDepth = function (index, step, tx, callStack, conte this.traceCache.pushSteps(index, context.currentCallIndex) context.lastCallIndex = context.currentCallIndex context.currentCallIndex = 0 - } else if (traceHelper.isReturnInstruction(step)) { + } else if (traceHelper.isReturnInstruction(step) || traceHelper.isStopInstruction(step)) { if (index + 1 < this.trace.length) { callStack.pop() this.traceCache.pushCallChanges(step, index + 1) diff --git a/src/trace/traceManager.js b/src/trace/traceManager.js index 2be9a48c1c..56e535efc0 100644 --- a/src/trace/traceManager.js +++ b/src/trace/traceManager.js @@ -222,7 +222,11 @@ TraceManager.prototype.getReturnValue = function (stepIndex, callback) { if (check) { return callback(check, null) } - callback(null, this.traceCache.returnValues[stepIndex]) + if (!this.traceCache.returnValues[stepIndex]) { + callback('current step is not a return step') + } else { + callback(null, this.traceCache.returnValues[stepIndex]) + } } TraceManager.prototype.getCurrentStep = function (stepIndex, callback) { diff --git a/src/ui/ASMCode.js b/src/ui/ASMCode.js deleted file mode 100644 index c53fe59453..0000000000 --- a/src/ui/ASMCode.js +++ /dev/null @@ -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`` - ) - 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`` - }) - return this.codeView - } -} - -module.exports = ASMCode diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js index 8a60f1a861..570010e304 100644 --- a/src/ui/ButtonNavigator.js +++ b/src/ui/ButtonNavigator.js @@ -1,6 +1,8 @@ 'use strict' var util = require('../helpers/global') var EventManager = require('../lib/eventManager') +var style = require('./styles/basicStyles') +var ui = require('../helpers/ui') var yo = require('yo-yo') function ButtonNavigator (_traceManager) { @@ -21,19 +23,19 @@ module.exports = ButtonNavigator ButtonNavigator.prototype.render = function () { var self = this var view = yo`
- - - - -
` diff --git a/src/ui/CalldataPanel.js b/src/ui/CalldataPanel.js index e798ebb0f3..fdd0c43e43 100644 --- a/src/ui/CalldataPanel.js +++ b/src/ui/CalldataPanel.js @@ -1,11 +1,11 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') function CalldataPanel (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new BasicPanel('Call Data') + this.basicPanel = new DropdownPanel('Call Data') this.init() } @@ -21,22 +21,14 @@ CalldataPanel.prototype.init = function () { self.traceManager.getCallDataAt(index, function (error, calldata) { if (error) { - self.basicPanel.data = '' + self.basicPanel.data = {} console.log(error) } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = self.format(calldata) + self.basicPanel.data = calldata } self.basicPanel.update() }) }) } -CalldataPanel.prototype.format = function (calldata) { - var ret = '' - for (var key in calldata) { - ret += calldata[key] + '\n' - } - return ret -} - module.exports = CalldataPanel diff --git a/src/ui/CallstackPanel.js b/src/ui/CallstackPanel.js index 31e38361dc..89b0821074 100644 --- a/src/ui/CallstackPanel.js +++ b/src/ui/CallstackPanel.js @@ -1,11 +1,11 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') function CallstackPanel (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new BasicPanel('Call Stack') + this.basicPanel = new DropdownPanel('Call Stack') this.init() } @@ -22,21 +22,13 @@ CallstackPanel.prototype.init = function () { self.traceManager.getCallStackAt(index, function (error, callstack) { if (error) { console.log(error) - self.basicPanel.data = '' + self.basicPanel.data = {} } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = self.format(callstack) + self.basicPanel.data = callstack } self.basicPanel.update() }) }) } -CallstackPanel.prototype.format = function (callstack) { - var ret = '' - for (var key in callstack) { - ret += callstack[key] + '\n' - } - return ret -} - module.exports = CallstackPanel diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js new file mode 100644 index 0000000000..bff418f4da --- /dev/null +++ b/src/ui/DropdownPanel.js @@ -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`
${item}
`) + }) + } else { + for (var k in this.data) { + div.appendChild(yo`
${k}
${this.data[k]}
`) + } + } + 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`
+
+
${this.name}
+
+
+ +
Empty
+
+
` + 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 diff --git a/src/ui/Ethdebugger.js b/src/ui/Ethdebugger.js index 84e4f70e3f..bc7d20404d 100644 --- a/src/ui/Ethdebugger.js +++ b/src/ui/Ethdebugger.js @@ -3,7 +3,6 @@ var TxBrowser = require('./TxBrowser') var StepManager = require('./StepManager') var TraceManager = require('../trace/traceManager') var VmDebugger = require('./VmDebugger') -var Sticker = require('./Sticker') var style = require('./styles/basicStyles') var util = require('../helpers/global') var EventManager = require('../lib/eventManager') @@ -49,7 +48,6 @@ function Ethdebugger () { self.stepChanged(stepIndex) }) this.vmDebugger = new VmDebugger(this, this.traceManager, this.codeManager) - this.sticker = new Sticker(this, this.traceManager) } Ethdebugger.prototype.web3 = function () { @@ -83,14 +81,10 @@ Ethdebugger.prototype.debug = function (tx) { Ethdebugger.prototype.render = function () { var view = yo`
-

VM Debugger

-
+
${this.txBrowser.render()} ${this.stepManager.render()}
-
- ${this.sticker.render()} -
${this.statusMessage}
${this.vmDebugger.render()}
` @@ -121,7 +115,7 @@ Ethdebugger.prototype.startDebugging = function (blockNumber, txIndex, tx) { this.tx = tx var self = this this.traceManager.resolveTrace(tx, function (error, result) { - console.log('trace loaded ' + result + ' ' + error) + console.log('trace loaded ' + result) if (result) { self.statusMessage = '' yo.update(self.view, self.render()) diff --git a/src/ui/FullStoragesChanges.js b/src/ui/FullStoragesChanges.js index 3ddf9f0dbb..d78847d0fe 100644 --- a/src/ui/FullStoragesChanges.js +++ b/src/ui/FullStoragesChanges.js @@ -1,5 +1,5 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') function FullStoragesChanges (_parent, _traceManager) { @@ -8,7 +8,7 @@ function FullStoragesChanges (_parent, _traceManager) { this.addresses = [] this.view this.traceLength - this.basicPanel = new BasicPanel('Full Storages Changes', '1205px', '100px') + this.basicPanel = new DropdownPanel('Full Storages Changes') this.init() } @@ -20,14 +20,6 @@ FullStoragesChanges.prototype.render = function () { return view } -FullStoragesChanges.prototype.hide = function () { - this.view.style.display = 'none' -} - -FullStoragesChanges.prototype.show = function () { - this.view.style.display = 'block' -} - FullStoragesChanges.prototype.init = function () { var self = this this.parent.register('newTraceLoaded', this, function (length) { @@ -35,9 +27,8 @@ FullStoragesChanges.prototype.init = function () { self.traceManager.getAddresses(function (error, addresses) { if (!error) { self.addresses = addresses - self.basicPanel.data = '' - yo.update(self.view, self.render()) - self.hide() + self.basicPanel.data = {} + self.basicPanel.update() } }) @@ -58,14 +49,11 @@ FullStoragesChanges.prototype.init = function () { self.traceManager.getStorageAt(index, null, function (error, result) { if (!error) { storageJSON[self.addresses[k]] = result - self.basicPanel.data = JSON.stringify(storageJSON, null, '\t') - yo.update(self.view, self.render()) - self.show() + self.basicPanel.data = storageJSON + self.basicPanel.update() } }, self.addresses[k]) } - } else { - self.hide() } }) } diff --git a/src/ui/ListView.js b/src/ui/ListView.js new file mode 100644 index 0000000000..89a364d48b --- /dev/null +++ b/src/ui/ListView.js @@ -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`
${this.basicPanel.render({height: style.instructionsList.height})}
` +} + +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`
  • ${item}
    • ` + }) + return yo`` + } +} + +module.exports = ListView diff --git a/src/ui/MemoryPanel.js b/src/ui/MemoryPanel.js index 0a7e6a8ef7..369d0cc63b 100644 --- a/src/ui/MemoryPanel.js +++ b/src/ui/MemoryPanel.js @@ -1,12 +1,12 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var util = require('../helpers/ui') var yo = require('yo-yo') function MemoryPanel (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new BasicPanel('Memory') + this.basicPanel = new DropdownPanel('Memory') this.init() } @@ -23,7 +23,7 @@ MemoryPanel.prototype.init = function () { self.traceManager.getMemoryAt(index, function (error, memory) { if (error) { console.log(error) - self.basicPanel.data = '' + self.basicPanel.data = {} } else if (self.parent.currentStepIndex === index) { self.basicPanel.data = util.formatMemory(memory, 16) } diff --git a/src/ui/StackPanel.js b/src/ui/StackPanel.js index 956ea1fb65..e2afa43e23 100644 --- a/src/ui/StackPanel.js +++ b/src/ui/StackPanel.js @@ -1,12 +1,12 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var ui = require('../helpers/ui') var yo = require('yo-yo') function StackPanel (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new BasicPanel('Stack') + this.basicPanel = new DropdownPanel('Stack') this.init() } @@ -22,7 +22,7 @@ StackPanel.prototype.init = function () { self.traceManager.getStackAt(index, function (error, stack) { if (error) { - self.basicPanel.data = '' + self.basicPanel.data = {} console.log(error) } else if (self.parent.currentStepIndex === index) { self.basicPanel.data = self.format(stack) @@ -33,10 +33,10 @@ StackPanel.prototype.init = function () { } StackPanel.prototype.format = function (stack) { - var ret = '' + var ret = [] for (var key in stack) { var hex = ui.normalizeHex(stack[key]) - ret += hex + '\n' + ret.push(hex) } return ret } diff --git a/src/ui/StepDetail.js b/src/ui/StepDetail.js new file mode 100644 index 0000000000..b0bc4f04a4 --- /dev/null +++ b/src/ui/StepDetail.js @@ -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`
    ${this.basicPanel.render()}
    ` +} + +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: '-' + } +} diff --git a/src/ui/StepManager.js b/src/ui/StepManager.js index bb7763e824..bcb3c6089c 100644 --- a/src/ui/StepManager.js +++ b/src/ui/StepManager.js @@ -1,11 +1,9 @@ 'use strict' var ButtonNavigator = require('./ButtonNavigator') var Slider = require('./Slider') -var style = require('./styles/basicStyles') var util = require('../helpers/global') var EventManager = require('../lib/eventManager') var yo = require('yo-yo') -var ui = require('../helpers/ui') function StepManager (_parent, _traceManager) { util.extend(this, new EventManager()) @@ -49,7 +47,7 @@ function StepManager (_parent, _traceManager) { StepManager.prototype.render = function () { return ( - yo`
    + yo`
    ${this.slider.render()} ${this.buttonNavigator.render()}
    ` diff --git a/src/ui/Sticker.js b/src/ui/Sticker.js deleted file mode 100644 index e32f76b11d..0000000000 --- a/src/ui/Sticker.js +++ /dev/null @@ -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`
    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - VMtracestep: - - ${this.vmTraceStep} -
    - Step: - - ${this.step} -
    - Add memory: - - ${this.addmemory} -
    - Gas: - - ${this.gas} -
    - Remaining gas: - - ${this.remainingGas} -
    - Loaded address: - - ${this.loadedAddress} -
    -
    ` - 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 diff --git a/src/ui/StoragePanel.js b/src/ui/StoragePanel.js index abe41e5b73..d4fde442d3 100644 --- a/src/ui/StoragePanel.js +++ b/src/ui/StoragePanel.js @@ -1,11 +1,11 @@ 'use strict' -var BasicPanel = require('./BasicPanel') +var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') function StoragePanel (_parent, _traceManager, _address) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new BasicPanel('Storage Changes') + this.basicPanel = new DropdownPanel('Storage Changes') this.address = _address this.init() this.disabled = false @@ -25,21 +25,13 @@ StoragePanel.prototype.init = function () { self.traceManager.getStorageAt(index, self.parent.tx, function (error, storage) { if (error) { console.log(error) - self.basicPanel.data = self.formatStorage(storage) + self.basicPanel.data = {} } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = self.formatStorage(storage) + self.basicPanel.data = storage } self.basicPanel.update() }, self.address) }) } -StoragePanel.prototype.formatStorage = function (storage) { - var ret = '' - for (var key in storage) { - ret += key + ' ' + storage[key] + '\n' - } - return ret -} - module.exports = StoragePanel diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index a4d18413f9..6362d228ea 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -5,17 +5,17 @@ var traceHelper = require('../helpers/traceHelper') var yo = require('yo-yo') var ui = require('../helpers/ui') var init = require('../helpers/init') +var DropdownPanel = require('./DropdownPanel') function TxBrowser (_parent) { util.extend(this, new EventManager()) this.blockNumber this.txNumber - this.hash - this.from - this.to this.view this.displayConnectionSetting = true + this.basicPanel = new DropdownPanel('Transaction') + this.basicPanel.data = {} var self = this _parent.register('providerChanged', this, function (provider) { self.displayConnectionSetting = provider === 'INTERNAL' @@ -33,12 +33,11 @@ function TxBrowser (_parent) { // invokation: 0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51 TxBrowser.prototype.setDefaultValues = function () { - this.from = ' - ' - this.to = ' - ' - this.hash = ' - ' this.blockNumber = null this.txNumber = '' this.connectInfo = '' + this.basicPanel.data = {} + this.basicPanel.update() this.updateWeb3Url(util.web3.currentProvider.host) } @@ -57,23 +56,24 @@ TxBrowser.prototype.submit = function () { } catch (e) { console.log(e) } - console.log(JSON.stringify(tx)) + var info = {} if (tx) { if (!tx.to) { tx.to = traceHelper.contractCreationToken('0') } - this.from = tx.from - this.to = tx.to - this.hash = tx.hash + info.from = tx.from + info.to = tx.to + info.hash = tx.hash this.trigger('newTraceRequested', [this.blockNumber, this.txNumber, tx]) } else { var mes = '' - this.from = mes - this.to = mes - this.hash = mes + info.from = mes + info.to = mes + info.hash = mes console.log('cannot find ' + this.blockNumber + ' ' + this.txNumber) } - yo.update(this.view, this.render()) + this.basicPanel.data = info + this.basicPanel.update() } TxBrowser.prototype.updateWeb3Url = function (newhost) { @@ -110,13 +110,16 @@ TxBrowser.prototype.updateTxN = function (ev) { TxBrowser.prototype.load = function (txHash) { this.txNumber = txHash - yo.update(this.view, this.render()) this.submit() } +TxBrowser.prototype.unload = function (txHash) { + this.trigger('unloadRequested') + this.init() +} + TxBrowser.prototype.init = function (ev) { this.setDefaultValues() - yo.update(this.view, this.render()) } TxBrowser.prototype.connectionSetting = function () { @@ -131,43 +134,16 @@ TxBrowser.prototype.connectionSetting = function () { TxBrowser.prototype.render = function () { var self = this - var view = yo`
    + var view = yo`
    ${this.connectionSetting()} - - - - +
    - - - - - - - - - - - - - - - -
    - Hash: - - ${this.hash} -
    - From: - - ${this.from} -
    - To: - - ${this.to} -
    + ${this.basicPanel.render()}
    ` if (!this.view) { diff --git a/src/ui/VmDebugger.js b/src/ui/VmDebugger.js index e8236ab2ae..08a5a05210 100644 --- a/src/ui/VmDebugger.js +++ b/src/ui/VmDebugger.js @@ -1,39 +1,36 @@ 'use strict' -var style = require('./styles/basicStyles') -var ASMCode = require('./ASMCode') +var ListView = require('./ListView') var CalldataPanel = require('./CalldataPanel') var MemoryPanel = require('./MemoryPanel') var CallstackPanel = require('./CallstackPanel') var StackPanel = require('./StackPanel') var StoragePanel = require('./StoragePanel') -var BasicPanel = require('./BasicPanel') var FullStoragesChangesPanel = require('./FullStoragesChanges') +var StepDetail = require('./StepDetail') +var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') -var ui = require('../helpers/ui') function VmDebugger (_parent, _traceManager, _codeManager) { - this.asmCode = new ASMCode(_parent, _codeManager) + this.asmCode = new ListView(_parent, _codeManager) this.stackPanel = new StackPanel(_parent, _traceManager) this.storagePanel = new StoragePanel(_parent, _traceManager) this.memoryPanel = new MemoryPanel(_parent, _traceManager) this.calldataPanel = new CalldataPanel(_parent, _traceManager) this.callstackPanel = new CallstackPanel(_parent, _traceManager) + this.stepDetail = new StepDetail(_parent, _traceManager) /* Return values - */ - this.returnValuesPanel = new BasicPanel('Return Value', '1205px', '100px') + this.returnValuesPanel = new DropdownPanel('Return Value') + this.returnValuesPanel.data = {} _parent.register('indexChanged', this.returnValuesPanel, function (index) { var self = this _traceManager.getReturnValue(index, function (error, returnValue) { if (error) { - console.log(error) - self.data = '' + self.data = [error] } else if (_parent.currentStepIndex === index) { - self.data = returnValue + self.data = [returnValue] } self.update() - if (!returnValue) { - self.hide() - } }) }) /* Return values - */ @@ -52,45 +49,18 @@ function VmDebugger (_parent, _traceManager, _codeManager) { VmDebugger.prototype.render = function () { var view = yo`
    ` if (!this.view) { diff --git a/src/ui/Ethdebugger.js b/src/ui/Ethdebugger.js index bc7d20404d..c7f8a07b70 100644 --- a/src/ui/Ethdebugger.js +++ b/src/ui/Ethdebugger.js @@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) { Ethdebugger.prototype.render = function () { var view = yo`
    -
    +
    ${this.txBrowser.render()} ${this.stepManager.render()}
    diff --git a/src/ui/FullStoragesChanges.js b/src/ui/FullStoragesChanges.js index d78847d0fe..512448bcb5 100644 --- a/src/ui/FullStoragesChanges.js +++ b/src/ui/FullStoragesChanges.js @@ -27,8 +27,7 @@ FullStoragesChanges.prototype.init = function () { self.traceManager.getAddresses(function (error, addresses) { if (!error) { self.addresses = addresses - self.basicPanel.data = {} - self.basicPanel.update() + self.basicPanel.update({}) } }) @@ -49,8 +48,7 @@ FullStoragesChanges.prototype.init = function () { self.traceManager.getStorageAt(index, null, function (error, result) { if (!error) { storageJSON[self.addresses[k]] = result - self.basicPanel.data = storageJSON - self.basicPanel.update() + self.basicPanel.update(storageJSON) } }, self.addresses[k]) } diff --git a/src/ui/MemoryPanel.js b/src/ui/MemoryPanel.js index 369d0cc63b..cd6161109f 100644 --- a/src/ui/MemoryPanel.js +++ b/src/ui/MemoryPanel.js @@ -23,11 +23,10 @@ MemoryPanel.prototype.init = function () { self.traceManager.getMemoryAt(index, function (error, memory) { if (error) { console.log(error) - self.basicPanel.data = {} + self.basicPanel.update({}) } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = util.formatMemory(memory, 16) + self.basicPanel.update(util.formatMemory(memory, 16)) } - self.basicPanel.update() }) }) } diff --git a/src/ui/StackPanel.js b/src/ui/StackPanel.js index e2afa43e23..927af283a7 100644 --- a/src/ui/StackPanel.js +++ b/src/ui/StackPanel.js @@ -22,22 +22,21 @@ StackPanel.prototype.init = function () { self.traceManager.getStackAt(index, function (error, stack) { if (error) { - self.basicPanel.data = {} + self.basicPanel.update({}) console.log(error) } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = self.format(stack) + self.basicPanel.update(self.format(stack)) } - self.basicPanel.update() }) }) } StackPanel.prototype.format = function (stack) { var ret = [] - for (var key in stack) { - var hex = ui.normalizeHex(stack[key]) + stack.map(function (item, i) { + var hex = ui.normalizeHex(item) ret.push(hex) - } + }) return ret } diff --git a/src/ui/StepDetail.js b/src/ui/StepDetail.js index b0bc4f04a4..e2a1ae1cc7 100644 --- a/src/ui/StepDetail.js +++ b/src/ui/StepDetail.js @@ -14,19 +14,19 @@ function StepDetail (_parent, _traceManager) { } StepDetail.prototype.render = function () { - return yo`
    ${this.basicPanel.render()}
    ` + return yo`
    ${this.basicPanel.render()}
    ` } StepDetail.prototype.init = function () { var self = this this.parent.register('traceUnloaded', this, function () { self.detail = initDetail() - self.basicPanel.update() + self.basicPanel.update(self.detail) }) this.parent.register('newTraceLoaded', this, function () { self.detail = initDetail() - self.basicPanel.update() + self.basicPanel.update(self.detail) }) this.parent.register('indexChanged', this, function (index) { @@ -41,8 +41,7 @@ StepDetail.prototype.init = function () { } else { self.detail.step = step } - self.basicPanel.data = self.detail - self.basicPanel.update() + self.basicPanel.update(self.detail) }) self.traceManager.getMemExpand(index, function (error, addmem) { @@ -52,8 +51,7 @@ StepDetail.prototype.init = function () { } else { self.detail.addmemory = addmem } - self.basicPanel.data = self.detail - self.basicPanel.update() + self.basicPanel.update(self.detail) }) self.traceManager.getStepCost(index, function (error, gas) { @@ -63,8 +61,7 @@ StepDetail.prototype.init = function () { } else { self.detail.gas = gas } - self.basicPanel.data = self.detail - self.basicPanel.update() + self.basicPanel.update(self.detail) }) self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { @@ -74,8 +71,7 @@ StepDetail.prototype.init = function () { } else { self.detail.loadedAddress = address } - self.basicPanel.data = self.detail - self.basicPanel.update() + self.basicPanel.update(self.detail) }) self.traceManager.getRemainingGas(index, function (error, remaingas) { @@ -85,8 +81,7 @@ StepDetail.prototype.init = function () { } else { self.detail.remainingGas = remaingas } - self.basicPanel.data = self.detail - self.basicPanel.update() + self.basicPanel.update(self.detail) }) }) } diff --git a/src/ui/StoragePanel.js b/src/ui/StoragePanel.js index d4fde442d3..454f0aac9b 100644 --- a/src/ui/StoragePanel.js +++ b/src/ui/StoragePanel.js @@ -25,11 +25,10 @@ StoragePanel.prototype.init = function () { self.traceManager.getStorageAt(index, self.parent.tx, function (error, storage) { if (error) { console.log(error) - self.basicPanel.data = {} + self.basicPanel.update({}) } else if (self.parent.currentStepIndex === index) { - self.basicPanel.data = storage + self.basicPanel.update(storage) } - self.basicPanel.update() }, self.address) }) } diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index 6362d228ea..be734871d7 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -136,13 +136,13 @@ TxBrowser.prototype.render = function () { var self = this var view = yo`
    ${this.connectionSetting()} - - + + -
    +
    ${this.basicPanel.render()}
    ` diff --git a/src/ui/VmDebugger.js b/src/ui/VmDebugger.js index 08a5a05210..303df0206a 100644 --- a/src/ui/VmDebugger.js +++ b/src/ui/VmDebugger.js @@ -1,5 +1,5 @@ 'use strict' -var ListView = require('./ListView') +var CodeListView = require('./CodeListView') var CalldataPanel = require('./CalldataPanel') var MemoryPanel = require('./MemoryPanel') var CallstackPanel = require('./CallstackPanel') @@ -11,7 +11,7 @@ var DropdownPanel = require('./DropdownPanel') var yo = require('yo-yo') function VmDebugger (_parent, _traceManager, _codeManager) { - this.asmCode = new ListView(_parent, _codeManager) + this.asmCode = new CodeListView(_parent, _codeManager) this.stackPanel = new StackPanel(_parent, _traceManager) this.storagePanel = new StoragePanel(_parent, _traceManager) this.memoryPanel = new MemoryPanel(_parent, _traceManager) @@ -49,8 +49,7 @@ function VmDebugger (_parent, _traceManager, _codeManager) { VmDebugger.prototype.render = function () { var view = yo`` if (!this.view) { this.view = view diff --git a/src/ui/styles/basicStyles.js b/src/ui/styles/basicStyles.js index cf1b93869d..eb6c91c5c3 100644 --- a/src/ui/styles/basicStyles.js +++ b/src/ui/styles/basicStyles.js @@ -21,10 +21,10 @@ module.exports = { }, instructionsList: { 'width': '72%', - 'height': '330px', 'overflow-y': 'scroll', 'list-style-type': 'none', - 'margin': 'auto' + 'margin': 'auto', + 'max-height': '500px' }, transactionInfo: { 'margin-top': '5px' @@ -32,10 +32,10 @@ module.exports = { panel: { container: { 'border': '1px solid', - 'width': '600px' + 'width': '70%' }, tableContainer: { - 'height': '300px', + 'height': '50%', 'overflow-y': 'auto' }, table: { @@ -52,10 +52,6 @@ module.exports = { display: { 'display': 'block' }, - sticker: { - 'vertical-align': 'top', - 'margin': '5px' - }, inline: { 'display': 'inline-block' }, diff --git a/src/ui/styles/sliderStyles.js b/src/ui/styles/sliderStyles.js index b559d69149..208e6602ad 100644 --- a/src/ui/styles/sliderStyles.js +++ b/src/ui/styles/sliderStyles.js @@ -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%' } } diff --git a/test-browser/init.js b/test-browser/init.js index 11a014f8a2..b39a74cd25 100644 --- a/test-browser/init.js +++ b/test-browser/init.js @@ -1,87 +1,38 @@ -var init = require('../test/init') module.exports = function (browser, callback) { extendBrowser(browser) browser .url('http://127.0.0.1:8080') - .waitForElementPresent('#app div', 1000) - injectScript('./test/resources/testWeb3.json', browser, function () { - callback() - }) -} - -function injectScript (file, browser, callback) { - init.readFile(file, function (error, result) { - if (!error) { - browser.execute(function (data) { - var vmdebugger = document.getElementById('app').vmdebugger - data = JSON.parse(data) - 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.eth.providers = { 'HttpProvider': function (url) {} } - - uiTestweb3.eth.setProvider = function (provider) {} - - uiTestweb3.currentProvider = {host: 'web3 modified for testing purposes :)'} - - vmdebugger.addProvider('TEST', uiTestweb3) - vmdebugger.switchProvider('TEST') - }, [result], function () { + .injectScript('test/resources/insertTestWeb3.js', function () { + // wait for the script to load test web3... + setTimeout(function () { callback() - }) - } - }) + }, 5000) + }) } function extendBrowser (browser) { browser.assertCurrentSelectedItem = function (expected) { - browser.getValue('#asmitems', function (result) { - browser.expect.element('#asmitems option[value="' + result.value + '"]').text.to.equal(expected) + browser.execute(function (id) { + var node = document.querySelector('#asmcodes ul li[selected="selected"] span') + return node.innerText + }, [''], function (returnValue) { + browser.assert.equal(returnValue.value, expected) + }) + return browser + } + + browser.retrieveInnerText = function (selector, callback) { + browser.execute(function (selector) { + var node = document.querySelector(selector) + return node ? node.innerText : '' + }, [selector], function (returnValue) { + callback(returnValue.value) }) return browser } - browser.assertSticker = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) { - browser.expect.element('#vmtracestepinfo').text.to.equal(vmtracestepinfo) - browser.expect.element('#stepinfo').text.to.equal(stepinfo) - browser.expect.element('#addmemoryinfo').text.to.equal(addmemoryinfo) - browser.expect.element('#gasinfo').text.to.equal(gasinfo) - browser.expect.element('#remaininggasinfo').text.to.equal(remaininggasinfo) - browser.expect.element('#loadedaddressinfo').text.to.equal(loadedaddressinfo) + browser.assertStepDetail = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) { + assertPanel('#stepdetail', browser, ['vmTraceStep' + vmtracestepinfo, 'step' + stepinfo, 'addmemory' + addmemoryinfo, 'gas' + gasinfo, 'remainingGas' + remaininggasinfo, 'loadedAddress' + loadedaddressinfo]) return browser } @@ -177,29 +128,31 @@ browser.fireEvent = function (el, key, times, callback) { } function assertPanel (id, browser, value) { - browser.expect.element(id + ' #basicpanel').text.to.equal(value) - return browser -} - -function assertPanelValue (id, browser, index, value) { - getInnerText(id + ' #basicpanel', browser, function (result) { - var values - if (result.value.indexOf('\r\n') !== -1) { - values = result.value.split('\r\n') - } else if (result.value.indexOf('\n') !== -1) { - values = result.value.split('\n') - } else if (result.value.indexOf('\r') !== -1) { - values = result.value.split('\r') + var selector = id + ' .dropdownpanel div div' + browser.execute(function (id) { + var node = document.querySelector(id) + var ret = [] + for (var k in node.children) { + if (node.children[k].innerText) { + ret.push(node.children[k].innerText) + } } - browser.assert.equal(values[index], value) + return ret + }, [selector], function (returnValues) { + value.map(function (item, index) { + browser.assert.equal(returnValues.value[index], value[index]) + }) }) return browser } -function getInnerText (id, browser, callback) { - browser.execute(function (data) { - return document.querySelector(data).innerText - }, [id], function (result) { - callback(result) +function assertPanelValue (id, browser, index, value) { + var selector = id + ' .dropdownpanel div div' + browser.execute(function (id, index) { + var node = document.querySelector(id) + return node.children[index].innerText + }, [selector, index], function (returnValues) { + browser.assert.equal(returnValues.value, value) }) + return browser } diff --git a/test-browser/vmdebugger.js b/test-browser/vmdebugger.js index 507bac135b..8ae1a6999f 100644 --- a/test-browser/vmdebugger.js +++ b/test-browser/vmdebugger.js @@ -5,7 +5,9 @@ var sauce = require('./sauce') module.exports = { beforeEach: function (browser, done) { try { - init(browser, done) + init(browser, function () { + done() + }) } catch (e) { var mes = 'error ' + e.message console.log(mes) @@ -14,42 +16,38 @@ module.exports = { }, 'vmdebugger': function (browser) { - loadTrace(browser) - browser.click('#unload') loadTraceNotFound(browser) - browser.click('#unload') + .click('#unload') + loadTrace(browser) + .click('#unload') panels(browser) - browser.click('#unload') + .click('#unload') slider(browser) - browser.click('#unload') + .click('#unload') stepping(browser) - browser.click('#unload') - sticker(browser) - browser.end() + .click('#unload') + stepdetail(browser) + .end() }, tearDown: sauce } -function loadTrace (browser) { +function loadTraceNotFound (browser) { browser .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .assert.containsText('#txhash', '') + .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '') return browser } -function loadTraceNotFound (browser) { +function loadTrace (browser) { browser .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .waitForElementVisible('#vmdebugger', 1000) - .expect.element('#txhash').text.to.equal('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') - browser.expect.element('#txfrom').text.to.equal('0x00101c5bfa3fc8bad02c9f5fd65b069306251915') - browser.expect.element('#txto').text.to.equal('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') - browser.expect.element('#txto').text.to.equal('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') + .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') browser.click('#unload') .waitForElementNotVisible('#vmdebugger', 1000) return browser @@ -60,22 +58,21 @@ function panels (browser) { .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .waitForElementVisible('#vmdebugger', 1000) .click('#nextcall') - .assertStack('0x\n0x60\n0x65\n0x38\n0x55\n0x60fe47b1') - .assertStorageChanges('0x00 0x38') - .assertCallData('0x60fe47b10000000000000000000000000000000000000000000000000000000000000038') - .assertCallStack('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') + .assertStack(['0x', '0x60', '0x65', '0x38', '0x55', '0x60fe47b1']) + .assertStorageChanges(['0x000x38']) + .assertCallData(['0x60fe47b10000000000000000000000000000000000000000000000000000000000000038']) + .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5']) .assertStackValue(1, '0x60') - .assertMemoryValue(6, '0x60\t\t60606040526040516020806045833981\t????R??Q????E?9?') - .assertMemoryValue(7, '0x70\t\t01604052808051906020019091905050\t???R??Q???????PP') - .assertMemoryValue(8, '0x80\t\t5b806001016000600050819055505b50\t?????????P??UP?P') + .assertMemoryValue(6, '0x6060606040526040516020806045833981\t????R??Q????E?9?') + .assertMemoryValue(7, '0x7001604052808051906020019091905050\t???R??Q???????PP') + .assertMemoryValue(8, '0x805b806001016000600050819055505b50\t?????????P??UP?P') .click('#intoforward') // CREATE - .assertStack('') - .assertStorageChanges('') - .assertMemory('') - .assertCallData('0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055') - .assertCallStack('0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5\n(Contract Creation - Step 63)') + .assertStack(['Empty']) + .assertStorageChanges(['Empty']) + .assertMemory(['Empty']) + .assertCallData(['0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055']) + .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5', '(Contract Creation - Step 63)']) return browser } @@ -84,7 +81,6 @@ function slider (browser) { .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .waitForElementVisible('#vmdebugger', 1000) .click('#intoforward') .click('#intoforward') .click('#intoforward') @@ -114,7 +110,6 @@ function stepping (browser) { .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .waitForElementVisible('#vmdebugger', 1000) .click('#intoforward') .click('#intoforward') .assertCurrentSelectedItem('004 MSTORE') @@ -136,12 +131,11 @@ function stepping (browser) { return browser } -function sticker (browser) { +function stepdetail (browser) { browser .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .waitForElementVisible('#vmdebugger', 1000) .click('#intoforward') .click('#intoforward') .click('#intoforward') @@ -161,13 +155,13 @@ function sticker (browser) { .end() }) */ - .assertSticker('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') + .assertStepDetail('6', '6', '', '3', '84476', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') .click('#nextcall') - .assertSticker('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') + .assertStepDetail('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') .click('#intoforward') .click('#overforward') - .assertSticker('108', '44', '', '0', '27145', '(Contract Creation - Step 63)') + .assertStepDetail('108', '44', '', '0', '27145', '(Contract Creation - Step 63)') .click('#intoforward') - .assertSticker('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') + .assertStepDetail('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') return browser } diff --git a/test/resources/insertTestWeb3.js b/test/resources/insertTestWeb3.js new file mode 100644 index 0000000000..f475de6329 --- /dev/null +++ b/test/resources/insertTestWeb3.js @@ -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) +}) + + From 4262ccc7bd232d5add6c74be2b83bde9db3fe4ad Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 17 Oct 2016 13:01:46 +0200 Subject: [PATCH 3/4] fix ie/safari ui tests --- ci/browser_tests.sh | 18 +++++++--- nightwatch.js | 5 ++- src/code/opcodes.js | 66 +++++++++++++++++------------------ src/helpers/ui.js | 6 +++- src/ui/CodeListView.js | 8 +++-- src/ui/DropdownPanel.js | 8 ++--- src/ui/Ethdebugger.js | 2 +- src/ui/TxBrowser.js | 1 - src/ui/img/play-arrow.png | Bin 1492 -> 0 bytes src/ui/styles/basicStyles.js | 7 +--- test-browser/init.js | 19 +++++----- test-browser/vmdebugger.js | 10 +++--- 12 files changed, 84 insertions(+), 66 deletions(-) delete mode 100644 src/ui/img/play-arrow.png diff --git a/ci/browser_tests.sh b/ci/browser_tests.sh index efc435e945..658337b521 100755 --- a/ci/browser_tests.sh +++ b/ci/browser_tests.sh @@ -17,18 +17,28 @@ while [ ! -f $SAUCECONNECT_READYFILE ]; do sleep .5 done -npm run nightwatch_remote_safari -echo $? +npm run nightwatch_remote_firefox +if [ $? -eq 1 ] +then + TEST_EXITCODE=1 +fi + +npm run nightwatch_remote_chrome if [ $? -eq 1 ] then - TEST_EXITCODE = 1 + TEST_EXITCODE=1 fi +npm run nightwatch_remote_safari +if [ $? -eq 1 ] +then + TEST_EXITCODE=1 +fi npm run nightwatch_remote_ie if [ $? -eq 1 ] then - TEST_EXITCODE = 1 + TEST_EXITCODE=1 fi node ci/sauceDisconnect.js $SAUCECONNECT_USERNAME $SAUCECONNECT_ACCESSKEY $SAUCECONNECT_JOBIDENTIFIER diff --git a/nightwatch.js b/nightwatch.js index c21e2a7282..3a817bf5de 100644 --- a/nightwatch.js +++ b/nightwatch.js @@ -62,7 +62,8 @@ module.exports = { 'desiredCapabilities': { 'browserName': 'safari', 'javascriptEnabled': true, - 'platform': 'MAC', + 'platform': 'OS X 10.11', + 'version': '9.0', 'acceptSslCerts': true, 'build': 'build-' + TRAVIS_JOB_NUMBER, 'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER @@ -74,6 +75,8 @@ module.exports = { 'browserName': 'internet explorer', 'javascriptEnabled': true, 'acceptSslCerts': true, + 'platform': 'WIN8.1', + 'version': '11', 'build': 'build-' + TRAVIS_JOB_NUMBER, 'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER } diff --git a/src/code/opcodes.js b/src/code/opcodes.js index 021a3686f3..9506bf1e29 100644 --- a/src/code/opcodes.js +++ b/src/code/opcodes.js @@ -102,39 +102,39 @@ var codes = { 0x7e: ['PUSH', 3, 0, 1, false], 0x7f: ['PUSH', 3, 0, 1, false], - 0x80: ['DUP1', 3, 0, 1, false], - 0x81: ['DUP2', 3, 0, 1, false], - 0x82: ['DUP3', 3, 0, 1, false], - 0x83: ['DUP4', 3, 0, 1, false], - 0x84: ['DUP5', 3, 0, 1, false], - 0x85: ['DUP6', 3, 0, 1, false], - 0x86: ['DUP7', 3, 0, 1, false], - 0x87: ['DUP8', 3, 0, 1, false], - 0x88: ['DUP9', 3, 0, 1, false], - 0x89: ['DUP10', 3, 0, 1, false], - 0x8a: ['DUP11', 3, 0, 1, false], - 0x8b: ['DUP12', 3, 0, 1, false], - 0x8c: ['DUP13', 3, 0, 1, false], - 0x8d: ['DUP14', 3, 0, 1, false], - 0x8e: ['DUP15', 3, 0, 1, false], - 0x8f: ['DUP16', 3, 0, 1, false], - - 0x90: ['SWAP1', 3, 0, 0, false], - 0x91: ['SWAP2', 3, 0, 0, false], - 0x92: ['SWAP3', 3, 0, 0, false], - 0x93: ['SWAP4', 3, 0, 0, false], - 0x94: ['SWAP5', 3, 0, 0, false], - 0x95: ['SWAP6', 3, 0, 0, false], - 0x96: ['SWAP7', 3, 0, 0, false], - 0x97: ['SWAP8', 3, 0, 0, false], - 0x98: ['SWAP9', 3, 0, 0, false], - 0x99: ['SWAP10', 3, 0, 0, false], - 0x9a: ['SWAP11', 3, 0, 0, false], - 0x9b: ['SWAP12', 3, 0, 0, false], - 0x9c: ['SWAP13', 3, 0, 0, false], - 0x9d: ['SWAP14', 3, 0, 0, false], - 0x9e: ['SWAP15', 3, 0, 0, false], - 0x9f: ['SWAP16', 3, 0, 0, false], + 0x80: ['DUP', 3, 0, 1, false], + 0x81: ['DUP', 3, 0, 1, false], + 0x82: ['DUP', 3, 0, 1, false], + 0x83: ['DUP', 3, 0, 1, false], + 0x84: ['DUP', 3, 0, 1, false], + 0x85: ['DUP', 3, 0, 1, false], + 0x86: ['DUP', 3, 0, 1, false], + 0x87: ['DUP', 3, 0, 1, false], + 0x88: ['DUP', 3, 0, 1, false], + 0x89: ['DUP', 3, 0, 1, false], + 0x8a: ['DUP', 3, 0, 1, false], + 0x8b: ['DUP', 3, 0, 1, false], + 0x8c: ['DUP', 3, 0, 1, false], + 0x8d: ['DUP', 3, 0, 1, false], + 0x8e: ['DUP', 3, 0, 1, false], + 0x8f: ['DUP', 3, 0, 1, false], + + 0x90: ['SWAP', 3, 0, 0, false], + 0x91: ['SWAP', 3, 0, 0, false], + 0x92: ['SWAP', 3, 0, 0, false], + 0x93: ['SWAP', 3, 0, 0, false], + 0x94: ['SWAP', 3, 0, 0, false], + 0x95: ['SWAP', 3, 0, 0, false], + 0x96: ['SWAP', 3, 0, 0, false], + 0x97: ['SWAP', 3, 0, 0, false], + 0x98: ['SWAP', 3, 0, 0, false], + 0x99: ['SWAP', 3, 0, 0, false], + 0x9a: ['SWAP', 3, 0, 0, false], + 0x9b: ['SWAP', 3, 0, 0, false], + 0x9c: ['SWAP', 3, 0, 0, false], + 0x9d: ['SWAP', 3, 0, 0, false], + 0x9e: ['SWAP', 3, 0, 0, false], + 0x9f: ['SWAP', 3, 0, 0, false], 0xa0: ['LOG0', 375, 2, 0, false], 0xa1: ['LOG1', 375, 3, 0, false], diff --git a/src/helpers/ui.js b/src/helpers/ui.js index 2860d2da44..16f2dd99a6 100644 --- a/src/helpers/ui.js +++ b/src/helpers/ui.js @@ -38,7 +38,11 @@ module.exports = { for (var arg in arguments) { for (var k in arguments[arg]) { if (arguments[arg][k] && ret.indexOf(k) === -1) { - ret += k + ':' + arguments[arg][k] + ';' + if (k.indexOf('*') === 0) { + ret += arguments[arg][k] + } else { + ret += k + ':' + arguments[arg][k] + ';' + } } } } diff --git a/src/ui/CodeListView.js b/src/ui/CodeListView.js index 0cf400799f..0e000c212f 100644 --- a/src/ui/CodeListView.js +++ b/src/ui/CodeListView.js @@ -32,12 +32,16 @@ CodeListView.prototype.indexChanged = function (index) { if (this.itemSelected) { this.itemSelected.removeAttribute('selected') this.itemSelected.removeAttribute('style') - this.itemSelected.firstChild.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') - this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'})) + if (this.itemSelected.firstChild) { + this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'})) + } this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetHeight) } } diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 5d2bba56be..b4c3d2cfce 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -25,7 +25,7 @@ DropdownPanel.prototype.update = function (_data) { if (_data) { this.data = _data } - this.view.querySelector('.dropdownpanel div').innerHTML = '' + this.view.querySelector('.dropdownpanel div.dropdowncontent').innerHTML = '' if (!this.raw) { var data = JSON.stringify(this.data, null, '\t') if (!this.data || data === '[]' || data === '{}') { @@ -41,13 +41,13 @@ DropdownPanel.prototype.update = function (_data) { div.appendChild(yo`
    ${k}
    ${this.data[k]}
    `) } } - this.view.querySelector('.dropdownpanel div').appendChild(div) + this.view.querySelector('.dropdownpanel div.dropdowncontent').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('.dropdownpanel div.dropdowncontent').appendChild(this.data) this.view.querySelector('.btn').style.display = 'none' } } @@ -63,7 +63,7 @@ DropdownPanel.prototype.render = function (overridestyle) { -
    Empty
    +
    Empty
    ` if (!this.view) { diff --git a/src/ui/Ethdebugger.js b/src/ui/Ethdebugger.js index c7f8a07b70..341dfebbb9 100644 --- a/src/ui/Ethdebugger.js +++ b/src/ui/Ethdebugger.js @@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) { Ethdebugger.prototype.render = function () { var view = yo`
    -
    +
    ${this.txBrowser.render()} ${this.stepManager.render()}
    diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index be734871d7..058b80413a 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -34,7 +34,6 @@ function TxBrowser (_parent) { TxBrowser.prototype.setDefaultValues = function () { this.blockNumber = null - this.txNumber = '' this.connectInfo = '' this.basicPanel.data = {} this.basicPanel.update() diff --git a/src/ui/img/play-arrow.png b/src/ui/img/play-arrow.png deleted file mode 100644 index 3414a07289398e3a90b6a939bd93ab261166b1da..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1492 zcmWlZe>Bs37{|xVhQ^Jdd^Mt6E5ELe`I&qDh#?xvukM|lnEY7ix|c27yR{T*j=F0# zR7x06a{F7!(9Y?8m^b1e0D4*GBoI1nR!C7v#3^jAl-d9}@mX{0b!@Nkc%jD=vL$8(!uYa7p9yx^} z9na}k^xmo1)}Q$_*F20AYNmg+ydKQu3^)C`yzue)x2fWe?q!Nyuf=eI)w0y@zumL5 zeWx#~@zf1+f9c1*U|U~l$0dUSgEPp(vsj@i#w3eMD}=J%rG{EYM7V|%RF0w=0Oq^VgrEqqzKc|*y2P`hgQiTO zlBQ+yY+RsDNCY)A1f~3Q9Bi;)ee*VY_!fB55RY_P@bo9|1B0AJd5sI6#Ye=3K<2JY-ZoCX|5xK`-rcv;!Ot@*>Kr1xsu@k{ctRiQ;tlv#iiX|f3xfCvP*7?C}u@m+6 zmi*V-_>+iozir0B`3y#KIR$+&W_b zZ=S3Y>Xe_U(Un`A1 zS31s`g@1hOBgms4J9RdDG}5!oc(Ai2+TPnn`!29Ek8X3ke*KrWNQFEEI;KnscycxJSyBPKH4-yP zCn!8+7Y==bs~frWjXE5mJJULbLe#^LC02jp#{r7H1Vz_HK=Ct- zBtVf4V-Q$FV&MblEmT%B$yp-UIjj$7_fw$l9lIi&^>{E*>j4^Vx)4z8B9I?Kb!u>3jhEB diff --git a/src/ui/styles/basicStyles.js b/src/ui/styles/basicStyles.js index eb6c91c5c3..1002aeb7ac 100644 --- a/src/ui/styles/basicStyles.js +++ b/src/ui/styles/basicStyles.js @@ -63,12 +63,7 @@ module.exports = { '-moz-box-shadow': 'inset 0px 1px 0px 0px #ffffff', '-webkit-box-shadow': 'inset 0px 1px 0px 0px #ffffff', 'box-shadow': 'inset 0px 1px 0px 0px #ffffff', - 'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9))', // eslint-disable-line - 'background': '-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%)', // eslint-disable-line - 'background': '-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%)', // eslint-disable-line - 'background': '-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%)', // eslint-disable-line - 'background': '-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%)', // eslint-disable-line - 'background': 'linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%)', // eslint-disable-line + '*background': 'background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);;background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);', // eslint-disable-line 'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0)", // eslint-disable-line 'background-color': '#f9f9f9', '-moz-border-radius': '6px', diff --git a/test-browser/init.js b/test-browser/init.js index b39a74cd25..642c4661dd 100644 --- a/test-browser/init.js +++ b/test-browser/init.js @@ -128,31 +128,34 @@ browser.fireEvent = function (el, key, times, callback) { } function assertPanel (id, browser, value) { - var selector = id + ' .dropdownpanel div div' - browser.execute(function (id) { - var node = document.querySelector(id) + var selector = '.dropdownpanel div.dropdowncontent div' + browser.execute(function (id, selector) { + var el = document.getElementById(id.replace('#', '').replace('.', '')) + var node = el.querySelector(selector) var ret = [] - for (var k in node.children) { + for (var k = 0; k < node.children.length; k++) { if (node.children[k].innerText) { ret.push(node.children[k].innerText) } } return ret - }, [selector], function (returnValues) { + }, [id, selector], function (returnValues) { value.map(function (item, index) { - browser.assert.equal(returnValues.value[index], value[index]) + var testValue = returnValues.value[index].replace(/\r\n/g, '').replace(/\t/g, '').replace(/\s/g, '') + browser.assert.equal(testValue, value[index]) }) }) return browser } function assertPanelValue (id, browser, index, value) { - var selector = id + ' .dropdownpanel div div' + var selector = id + ' .dropdownpanel .dropdowncontent div' browser.execute(function (id, index) { var node = document.querySelector(id) return node.children[index].innerText }, [selector, index], function (returnValues) { - browser.assert.equal(returnValues.value, value) + var testValue = returnValues.value.replace(/\r\n/g, '').replace(/\t/g, '').replace(/\s/g, '') + browser.assert.equal(testValue, value) }) return browser } diff --git a/test-browser/vmdebugger.js b/test-browser/vmdebugger.js index 8ae1a6999f..861f51098c 100644 --- a/test-browser/vmdebugger.js +++ b/test-browser/vmdebugger.js @@ -64,15 +64,15 @@ function panels (browser) { .assertCallData(['0x60fe47b10000000000000000000000000000000000000000000000000000000000000038']) .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5']) .assertStackValue(1, '0x60') - .assertMemoryValue(6, '0x6060606040526040516020806045833981\t????R??Q????E?9?') - .assertMemoryValue(7, '0x7001604052808051906020019091905050\t???R??Q???????PP') - .assertMemoryValue(8, '0x805b806001016000600050819055505b50\t?????????P??UP?P') + .assertMemoryValue(6, '0x6060606040526040516020806045833981????R??Q????E?9?') + .assertMemoryValue(7, '0x7001604052808051906020019091905050???R??Q???????PP') + .assertMemoryValue(8, '0x805b806001016000600050819055505b50?????????P??UP?P') .click('#intoforward') // CREATE .assertStack(['Empty']) .assertStorageChanges(['Empty']) .assertMemory(['Empty']) .assertCallData(['0x0000000000000000000000000000000000000000000000000000000000000000000000000000006060606040526040516020806045833981016040528080519060200190919050505b806001016000600050819055']) - .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5', '(Contract Creation - Step 63)']) + .assertCallStack(['0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5', '(ContractCreation-Step63)']) return browser } @@ -160,7 +160,7 @@ function stepdetail (browser) { .assertStepDetail('63', '63', '', '32000', '79283', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') .click('#intoforward') .click('#overforward') - .assertStepDetail('108', '44', '', '0', '27145', '(Contract Creation - Step 63)') + .assertStepDetail('108', '44', '', '0', '27145', '(ContractCreation-Step63)') .click('#intoforward') .assertStepDetail('109', '64', '', '3', '25145', '0x0d3a18d64dfe4f927832ab58d6451cecc4e517c5') return browser From c1e4a962c3716ecf4b30c74911c7d8e8f9bc125f Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 18 Oct 2016 13:35:42 +0200 Subject: [PATCH 4/4] improve ui --- package.json | 1 - src/helpers/ui.js | 11 +++++++++++ src/ui/CodeListView.js | 8 ++++---- src/ui/DropdownPanel.js | 33 +++++++++++++++++---------------- src/ui/Ethdebugger.js | 2 +- src/ui/StepDetail.js | 30 +++++++++++++++--------------- src/ui/styles/basicStyles.js | 11 +++++++---- src/ui/styles/dropdownPanel.js | 10 +++++----- test-browser/init.js | 4 ++-- test-browser/vmdebugger.js | 8 ++++++-- 10 files changed, 68 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 897b47627e..f4318b021d 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ }, "devDependencies": { "browserify": "^13.0.1", - "clipboard": "^1.5.12", "ethereumjs-util": "^4.5.0", "http-server": "^0.9.0", "nightwatch": "^0.9.5", diff --git a/src/helpers/ui.js b/src/helpers/ui.js index 16f2dd99a6..492ae252a0 100644 --- a/src/helpers/ui.js +++ b/src/helpers/ui.js @@ -33,6 +33,17 @@ module.exports = { return ret }, + /** + * format @args css1, css2, css3 to css inline style + * + * @param {Object} css1 - css inline declaration + * @param {Object} css2 - css inline declaration + * @param {Object} css3 - css inline declaration + * @param {Object} ... + * @return {String} css inline style + * if the key start with * the value is direcly appended to the inline style (which should be already inline style formatted) + * used if multiple occurences of the same key is needed + */ formatCss: function (css1, css2) { var ret = '' for (var arg in arguments) { diff --git a/src/ui/CodeListView.js b/src/ui/CodeListView.js index 0e000c212f..22b9ca79e3 100644 --- a/src/ui/CodeListView.js +++ b/src/ui/CodeListView.js @@ -11,7 +11,7 @@ function CodeListView (_parent, _codeManager) { this.address this.codeView this.itemSelected - this.basicPanel = new DropdownPanel('Assembly', true) + this.basicPanel = new DropdownPanel('Instructions', true) this.init() } @@ -60,11 +60,11 @@ CodeListView.prototype.changed = function (code, address, index) { CodeListView.prototype.renderAssemblyItems = function () { if (this.code) { var codeView = this.code.map(function (item, i) { - return yo`
  • ${item}
    • ` + return yo`
    ${item}
    ` }) - return yo`
      + return yo`
      ${codeView} -
    ` +
    ` } } diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index b4c3d2cfce..d999a3b5ff 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -2,18 +2,12 @@ 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 } @@ -38,17 +32,16 @@ DropdownPanel.prototype.update = function (_data) { }) } else { for (var k in this.data) { - div.appendChild(yo`
    ${k}
    ${this.data[k]}
    `) + var content = typeof this.data[k] === 'string' ? this.data[k] : JSON.stringify(this.data[k]) + div.appendChild(yo`
    ${k}
    ${content}
    `) } } this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(div) - this.view.querySelector('.btn').setAttribute('data-clipboard-text', data) - if (Clipboard && !this.clipboard) { - this.clipboard = new Clipboard(this.view.querySelector('.btn')) - } + 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('.btn').style.display = 'none' + this.view.querySelector('.dropdownpanel button.btn').style.display = 'none' } } @@ -56,14 +49,15 @@ DropdownPanel.prototype.render = function (overridestyle) { overridestyle === undefined ? {} : overridestyle var self = this var view = yo`
    -
    -
    ${this.name}
    +
    +
    ${this.name}
    -
    Empty
    +
    ` if (!this.view) { @@ -72,6 +66,13 @@ DropdownPanel.prototype.render = function (overridestyle) { 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 === '') { diff --git a/src/ui/Ethdebugger.js b/src/ui/Ethdebugger.js index 341dfebbb9..fc828a904e 100644 --- a/src/ui/Ethdebugger.js +++ b/src/ui/Ethdebugger.js @@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) { Ethdebugger.prototype.render = function () { var view = yo`
    -
    +
    ${this.txBrowser.render()} ${this.stepManager.render()}
    diff --git a/src/ui/StepDetail.js b/src/ui/StepDetail.js index e2a1ae1cc7..ab1feeaa79 100644 --- a/src/ui/StepDetail.js +++ b/src/ui/StepDetail.js @@ -32,14 +32,14 @@ StepDetail.prototype.init = function () { this.parent.register('indexChanged', this, function (index) { if (index < 0) return - self.detail.vmTraceStep = index + self.detail['vm trace step'] = index self.traceManager.getCurrentStep(index, function (error, step) { if (error) { console.log(error) - self.detail.step = '-' + self.detail['execution step'] = '-' } else { - self.detail.step = step + self.detail['execution step'] = step } self.basicPanel.update(self.detail) }) @@ -47,9 +47,9 @@ StepDetail.prototype.init = function () { self.traceManager.getMemExpand(index, function (error, addmem) { if (error) { console.log(error) - self.detail.addmemory = '-' + self.detail['add memory'] = '-' } else { - self.detail.addmemory = addmem + self.detail['add memory'] = addmem } self.basicPanel.update(self.detail) }) @@ -67,9 +67,9 @@ StepDetail.prototype.init = function () { self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { if (error) { console.log(error) - self.detail.loadedAddress = '-' + self.detail['loaded address'] = '-' } else { - self.detail.loadedAddress = address + self.detail['loaded address'] = address } self.basicPanel.update(self.detail) }) @@ -77,9 +77,9 @@ StepDetail.prototype.init = function () { self.traceManager.getRemainingGas(index, function (error, remaingas) { if (error) { console.log(error) - self.detail.remainingGas = '-' + self.detail['remaining gas'] = '-' } else { - self.detail.remainingGas = remaingas + self.detail['remaining gas'] = remaingas } self.basicPanel.update(self.detail) }) @@ -90,11 +90,11 @@ module.exports = StepDetail function initDetail () { return { - vmTraceStep: '-', - step: '-', - addmemory: '', - gas: '', - remainingGas: '-', - loadedAddress: '-' + 'vm trace step': '-', + 'execution step': '-', + 'add memory': '', + 'gas': '', + 'remaining gas': '-', + 'loaded address': '-' } } diff --git a/src/ui/styles/basicStyles.js b/src/ui/styles/basicStyles.js index 1002aeb7ac..ca043366ab 100644 --- a/src/ui/styles/basicStyles.js +++ b/src/ui/styles/basicStyles.js @@ -9,6 +9,10 @@ module.exports = { font: { 'font-family': 'arial,sans-serif' }, + innerShift: { + 'padding': '2px', + 'margin-left': '10px' + }, container: { 'margin': '10px', 'padding': '5px' @@ -20,11 +24,10 @@ module.exports = { 'font-style': 'italic' }, instructionsList: { - 'width': '72%', + 'width': '52%', 'overflow-y': 'scroll', - 'list-style-type': 'none', - 'margin': 'auto', - 'max-height': '500px' + 'max-height': '500px', + 'margin': '0' }, transactionInfo: { 'margin-top': '5px' diff --git a/src/ui/styles/dropdownPanel.js b/src/ui/styles/dropdownPanel.js index 72fedb1f38..b3c6ec5d87 100644 --- a/src/ui/styles/dropdownPanel.js +++ b/src/ui/styles/dropdownPanel.js @@ -6,20 +6,20 @@ module.exports = { 'width': '100%', 'color': '#363f47', 'margin-top': '5px', - 'font-style': 'italic' + 'cursor': 'pointer' }, titleInner: { - 'display': 'inline-block', - 'cursor': 'pointer' + 'display': 'inline-block' }, content: { - 'color': '#9b9b9b', + 'color': '#111111', 'width': '100%', 'font-family': 'monospace' }, inner: { 'padding': '2px', - 'margin-left': '10px' + 'margin-left': '10px', + 'word-break': 'break-all' }, copyBtn: { 'float': 'right', diff --git a/test-browser/init.js b/test-browser/init.js index 642c4661dd..59d837f754 100644 --- a/test-browser/init.js +++ b/test-browser/init.js @@ -13,7 +13,7 @@ module.exports = function (browser, callback) { function extendBrowser (browser) { browser.assertCurrentSelectedItem = function (expected) { browser.execute(function (id) { - var node = document.querySelector('#asmcodes ul li[selected="selected"] span') + var node = document.querySelector('#asmcodes div div[selected="selected"] span') return node.innerText }, [''], function (returnValue) { browser.assert.equal(returnValue.value, expected) @@ -32,7 +32,7 @@ function extendBrowser (browser) { } browser.assertStepDetail = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, loadedaddressinfo) { - assertPanel('#stepdetail', browser, ['vmTraceStep' + vmtracestepinfo, 'step' + stepinfo, 'addmemory' + addmemoryinfo, 'gas' + gasinfo, 'remainingGas' + remaininggasinfo, 'loadedAddress' + loadedaddressinfo]) + assertPanel('#stepdetail', browser, ['vmtracestep' + vmtracestepinfo, 'executionstep' + stepinfo, 'addmemory' + addmemoryinfo, 'gas' + gasinfo, 'remaininggas' + remaininggasinfo, 'loadedaddress' + loadedaddressinfo]) return browser } diff --git a/test-browser/vmdebugger.js b/test-browser/vmdebugger.js index 861f51098c..ab8cc8e261 100644 --- a/test-browser/vmdebugger.js +++ b/test-browser/vmdebugger.js @@ -38,7 +38,9 @@ function loadTraceNotFound (browser) { .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '') + .click('#txinfo .title') + .click('#txinfo .dropdownpanel .btn') + .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('') return browser } @@ -47,7 +49,9 @@ function loadTrace (browser) { .clearValue('#txinput') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .click('#load') - .assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') + .click('#txinfo .title') + .click('#txinfo .dropdownpanel .btn') + .expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') browser.click('#unload') .waitForElementNotVisible('#vmdebugger', 1000) return browser