Skip to content

B
baas-ide
Commit c1e4a962 authored by yann300's avatar yann300
Browse files
Options

improve ui

parent 4262ccc7
Show whitespace changes
Inline Side-by-side
Showing with 68 additions and 50 deletions
package.json
View file @ c1e4a962
......@@ -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",
......
src/helpers/ui.js
View file @ c1e4a962
......@@ -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) {
......
src/ui/CodeListView.js
View file @ c1e4a962
......@@ -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`<li key=${i} value=${i}><span>${item}</span></li>`
return yo`<div key=${i} value=${i}><span>${item}</span></div>`
})
return yo`<ul id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
return yo`<div id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
${codeView}
</ul>`
</div>`
}
}
......
src/ui/DropdownPanel.js
View file @ c1e4a962
......@@ -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`<div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '10%'})} >${k}</div><div style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '50%'})} >${this.data[k]}</div></div>`)
var content = typeof this.data[k] === 'string' ? this.data[k] : JSON.stringify(this.data[k])
div.appendChild(yo`<div><div title=${k} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '10%'})} >${k}</div><div title=${content} style=${ui.formatCss(basicStyles.truncate, {display: 'inline-block', 'width': '78%'})} >${content}</div></div>`)
}
}
this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(div)
this.view.querySelector('.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`<div>
<div style=${ui.formatCss(styleDropdown.title)}>
<div onclick=${function () { self.toggle() }} style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div>
<div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
<div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div>
</div>
<div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
<button style=${ui.formatCss(style.button, styleDropdown.copyBtn)} class="btn" type="button">
Copy to clipboard
<button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} class="btn" type="button">
Raw
</button>
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><div>Empty</div></div>
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div>
</div>
</div>`
if (!this.view) {
......@@ -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 === '') {
......
src/ui/Ethdebugger.js
View file @ c1e4a962
......@@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) {
Ethdebugger.prototype.render = function () {
var view = yo`<div style=${ui.formatCss(style.font)}>
<div style='margin: auto; width: 61%'>
<div style=${ui.formatCss({'max-width': '51%'}, style.innerShift)}>
${this.txBrowser.render()}
${this.stepManager.render()}
</div>
......
src/ui/StepDetail.js
View file @ c1e4a962
......@@ -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': '-'
}
}
src/ui/styles/basicStyles.js
View file @ c1e4a962
......@@ -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'
......
src/ui/styles/dropdownPanel.js
View file @ c1e4a962
......@@ -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',
......
test-browser/init.js
View file @ c1e4a962
......@@ -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
}
......
test-browser/vmdebugger.js
View file @ c1e4a962
......@@ -38,7 +38,9 @@ function loadTraceNotFound (browser) {
.clearValue('#txinput')
.setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
.click('#load')
.assert.attributeContains('#txinfo .dropdownpanel button', 'data-clipboard-text', '<not found>')
.click('#txinfo .title')
.click('#txinfo .dropdownpanel .btn')
.expect.element('#txinfo .dropdownpanel .dropdownrawcontent').text.to.contain('<not found>')
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment