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 @@ ...@@ -18,7 +18,6 @@
}, },
"devDependencies": { "devDependencies": {
"browserify": "^13.0.1", "browserify": "^13.0.1",
"clipboard": "^1.5.12",
"ethereumjs-util": "^4.5.0", "ethereumjs-util": "^4.5.0",
"http-server": "^0.9.0", "http-server": "^0.9.0",
"nightwatch": "^0.9.5", "nightwatch": "^0.9.5",
......
src/helpers/ui.js
View file @ c1e4a962
...@@ -33,6 +33,17 @@ module.exports = { ...@@ -33,6 +33,17 @@ module.exports = {
return ret 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) { formatCss: function (css1, css2) {
var ret = '' var ret = ''
for (var arg in arguments) { for (var arg in arguments) {
......
src/ui/CodeListView.js
View file @ c1e4a962
...@@ -11,7 +11,7 @@ function CodeListView (_parent, _codeManager) { ...@@ -11,7 +11,7 @@ function CodeListView (_parent, _codeManager) {
this.address this.address
this.codeView this.codeView
this.itemSelected this.itemSelected
this.basicPanel = new DropdownPanel('Assembly', true) this.basicPanel = new DropdownPanel('Instructions', true)
this.init() this.init()
} }
...@@ -60,11 +60,11 @@ CodeListView.prototype.changed = function (code, address, index) { ...@@ -60,11 +60,11 @@ CodeListView.prototype.changed = function (code, address, index) {
CodeListView.prototype.renderAssemblyItems = function () { CodeListView.prototype.renderAssemblyItems = function () {
if (this.code) { if (this.code) {
var codeView = this.code.map(function (item, i) { 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} ${codeView}
</ul>` </div>`
} }
} }
......
src/ui/DropdownPanel.js
View file @ c1e4a962
...@@ -2,18 +2,12 @@ ...@@ -2,18 +2,12 @@
var yo = require('yo-yo') var yo = require('yo-yo')
var ui = require('../helpers/ui') var ui = require('../helpers/ui')
var styleDropdown = require('./styles/dropdownPanel') var styleDropdown = require('./styles/dropdownPanel')
var style = require('./styles/basicStyles')
var basicStyles = require('./styles/basicStyles') var basicStyles = require('./styles/basicStyles')
var Clipboard
if (ui.runInBrowser()) {
Clipboard = require('clipboard')
}
function DropdownPanel (_name, _raw) { function DropdownPanel (_name, _raw) {
this.data this.data
this.name = _name this.name = _name
this.view this.view
this.clipboard
_raw = _raw === undefined ? false : _raw _raw = _raw === undefined ? false : _raw
this.raw = _raw this.raw = _raw
} }
...@@ -38,17 +32,16 @@ DropdownPanel.prototype.update = function (_data) { ...@@ -38,17 +32,16 @@ DropdownPanel.prototype.update = function (_data) {
}) })
} else { } else {
for (var k in this.data) { 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('.dropdownpanel div.dropdowncontent').appendChild(div)
this.view.querySelector('.btn').setAttribute('data-clipboard-text', data) this.view.querySelector('.dropdownpanel button.btn').style.display = 'block'
if (Clipboard && !this.clipboard) { this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = data
this.clipboard = new Clipboard(this.view.querySelector('.btn'))
}
} else { } else {
this.view.querySelector('.dropdownpanel div.dropdowncontent').appendChild(this.data) 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) { ...@@ -56,14 +49,15 @@ DropdownPanel.prototype.render = function (overridestyle) {
overridestyle === undefined ? {} : overridestyle overridestyle === undefined ? {} : overridestyle
var self = this var self = this
var view = yo`<div> var view = yo`<div>
<div style=${ui.formatCss(styleDropdown.title)}> <div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
<div onclick=${function () { self.toggle() }} style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div> <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div>
</div> </div>
<div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'> <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
<button style=${ui.formatCss(style.button, styleDropdown.copyBtn)} class="btn" type="button"> <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} class="btn" type="button">
Copy to clipboard Raw
</button> </button>
<div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><div>Empty</div></div> <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>
</div>` </div>`
if (!this.view) { if (!this.view) {
...@@ -72,6 +66,13 @@ DropdownPanel.prototype.render = function (overridestyle) { ...@@ -72,6 +66,13 @@ DropdownPanel.prototype.render = function (overridestyle) {
return view return view
} }
DropdownPanel.prototype.toggleRaw = function () {
var raw = this.view.querySelector('.dropdownpanel .dropdownrawcontent')
var formatted = this.view.querySelector('.dropdownpanel .dropdowncontent')
raw.style.display = raw.style.display === 'none' ? 'block' : 'none'
formatted.style.display = formatted.style.display === 'none' ? 'block' : 'none'
}
DropdownPanel.prototype.toggle = function () { DropdownPanel.prototype.toggle = function () {
var el = this.view.querySelector('.dropdownpanel') var el = this.view.querySelector('.dropdownpanel')
if (el.style.display === '') { if (el.style.display === '') {
......
src/ui/Ethdebugger.js
View file @ c1e4a962
...@@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) { ...@@ -81,7 +81,7 @@ Ethdebugger.prototype.debug = function (tx) {
Ethdebugger.prototype.render = function () { Ethdebugger.prototype.render = function () {
var view = yo`<div style=${ui.formatCss(style.font)}> 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.txBrowser.render()}
${this.stepManager.render()} ${this.stepManager.render()}
</div> </div>
......
src/ui/StepDetail.js
View file @ c1e4a962
...@@ -32,14 +32,14 @@ StepDetail.prototype.init = function () { ...@@ -32,14 +32,14 @@ StepDetail.prototype.init = function () {
this.parent.register('indexChanged', this, function (index) { this.parent.register('indexChanged', this, function (index) {
if (index < 0) return if (index < 0) return
self.detail.vmTraceStep = index self.detail['vm trace step'] = index
self.traceManager.getCurrentStep(index, function (error, step) { self.traceManager.getCurrentStep(index, function (error, step) {
if (error) { if (error) {
console.log(error) console.log(error)
self.detail.step = '-' self.detail['execution step'] = '-'
} else { } else {
self.detail.step = step self.detail['execution step'] = step
} }
self.basicPanel.update(self.detail) self.basicPanel.update(self.detail)
}) })
...@@ -47,9 +47,9 @@ StepDetail.prototype.init = function () { ...@@ -47,9 +47,9 @@ StepDetail.prototype.init = function () {
self.traceManager.getMemExpand(index, function (error, addmem) { self.traceManager.getMemExpand(index, function (error, addmem) {
if (error) { if (error) {
console.log(error) console.log(error)
self.detail.addmemory = '-' self.detail['add memory'] = '-'
} else { } else {
self.detail.addmemory = addmem self.detail['add memory'] = addmem
} }
self.basicPanel.update(self.detail) self.basicPanel.update(self.detail)
}) })
...@@ -67,9 +67,9 @@ StepDetail.prototype.init = function () { ...@@ -67,9 +67,9 @@ StepDetail.prototype.init = function () {
self.traceManager.getCurrentCalledAddressAt(index, function (error, address) { self.traceManager.getCurrentCalledAddressAt(index, function (error, address) {
if (error) { if (error) {
console.log(error) console.log(error)
self.detail.loadedAddress = '-' self.detail['loaded address'] = '-'
} else { } else {
self.detail.loadedAddress = address self.detail['loaded address'] = address
} }
self.basicPanel.update(self.detail) self.basicPanel.update(self.detail)
}) })
...@@ -77,9 +77,9 @@ StepDetail.prototype.init = function () { ...@@ -77,9 +77,9 @@ StepDetail.prototype.init = function () {
self.traceManager.getRemainingGas(index, function (error, remaingas) { self.traceManager.getRemainingGas(index, function (error, remaingas) {
if (error) { if (error) {
console.log(error) console.log(error)
self.detail.remainingGas = '-' self.detail['remaining gas'] = '-'
} else { } else {
self.detail.remainingGas = remaingas self.detail['remaining gas'] = remaingas
} }
self.basicPanel.update(self.detail) self.basicPanel.update(self.detail)
}) })
...@@ -90,11 +90,11 @@ module.exports = StepDetail ...@@ -90,11 +90,11 @@ module.exports = StepDetail
function initDetail () { function initDetail () {
return { return {
vmTraceStep: '-', 'vm trace step': '-',
step: '-', 'execution step': '-',
addmemory: '', 'add memory': '',
gas: '', 'gas': '',
remainingGas: '-', 'remaining gas': '-',
loadedAddress: '-' 'loaded address': '-'
} }
} }
src/ui/styles/basicStyles.js
View file @ c1e4a962
...@@ -9,6 +9,10 @@ module.exports = { ...@@ -9,6 +9,10 @@ module.exports = {
font: { font: {
'font-family': 'arial,sans-serif' 'font-family': 'arial,sans-serif'
}, },
innerShift: {
'padding': '2px',
'margin-left': '10px'
},
container: { container: {
'margin': '10px', 'margin': '10px',
'padding': '5px' 'padding': '5px'
...@@ -20,11 +24,10 @@ module.exports = { ...@@ -20,11 +24,10 @@ module.exports = {
'font-style': 'italic' 'font-style': 'italic'
}, },
instructionsList: { instructionsList: {
'width': '72%', 'width': '52%',
'overflow-y': 'scroll', 'overflow-y': 'scroll',
'list-style-type': 'none', 'max-height': '500px',
'margin': 'auto', 'margin': '0'
'max-height': '500px'
}, },
transactionInfo: { transactionInfo: {
'margin-top': '5px' 'margin-top': '5px'
......
src/ui/styles/dropdownPanel.js
View file @ c1e4a962
...@@ -6,20 +6,20 @@ module.exports = { ...@@ -6,20 +6,20 @@ module.exports = {
'width': '100%', 'width': '100%',
'color': '#363f47', 'color': '#363f47',
'margin-top': '5px', 'margin-top': '5px',
'font-style': 'italic' 'cursor': 'pointer'
}, },
titleInner: { titleInner: {
'display': 'inline-block', 'display': 'inline-block'
'cursor': 'pointer'
}, },
content: { content: {
'color': '#9b9b9b', 'color': '#111111',
'width': '100%', 'width': '100%',
'font-family': 'monospace' 'font-family': 'monospace'
}, },
inner: { inner: {
'padding': '2px', 'padding': '2px',
'margin-left': '10px' 'margin-left': '10px',
'word-break': 'break-all'
}, },
copyBtn: { copyBtn: {
'float': 'right', 'float': 'right',
......
test-browser/init.js
View file @ c1e4a962
...@@ -13,7 +13,7 @@ module.exports = function (browser, callback) { ...@@ -13,7 +13,7 @@ module.exports = function (browser, callback) {
function extendBrowser (browser) { function extendBrowser (browser) {
browser.assertCurrentSelectedItem = function (expected) { browser.assertCurrentSelectedItem = function (expected) {
browser.execute(function (id) { 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 return node.innerText
}, [''], function (returnValue) { }, [''], function (returnValue) {
browser.assert.equal(returnValue.value, expected) browser.assert.equal(returnValue.value, expected)
...@@ -32,7 +32,7 @@ function extendBrowser (browser) { ...@@ -32,7 +32,7 @@ function extendBrowser (browser) {
} }
browser.assertStepDetail = function (vmtracestepinfo, stepinfo, addmemoryinfo, gasinfo, remaininggasinfo, 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]) assertPanel('#stepdetail', browser, ['vmtracestep' + vmtracestepinfo, 'executionstep' + stepinfo, 'addmemory' + addmemoryinfo, 'gas' + gasinfo, 'remaininggas' + remaininggasinfo, 'loadedaddress' + loadedaddressinfo])
return browser return browser
} }
......
test-browser/vmdebugger.js
View file @ c1e4a962
...@@ -38,7 +38,9 @@ function loadTraceNotFound (browser) { ...@@ -38,7 +38,9 @@ function loadTraceNotFound (browser) {
.clearValue('#txinput') .clearValue('#txinput')
.setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51') .setValue('#txinput', '0x20ef65b8b186ca942zcccd634f37074dde49b541c27994fc7596740ef44cfd51')
.click('#load') .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 return browser
} }
...@@ -47,7 +49,9 @@ function loadTrace (browser) { ...@@ -47,7 +49,9 @@ function loadTrace (browser) {
.clearValue('#txinput') .clearValue('#txinput')
.setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51') .setValue('#txinput', '0x20ef65b8b186ca942fcccd634f37074dde49b541c27994fc7596740ef44cfd51')
.click('#load') .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') browser.click('#unload')
.waitForElementNotVisible('#vmdebugger', 1000) .waitForElementNotVisible('#vmdebugger', 1000)
return browser 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