Skip to content

B
baas-ide
Commit bd8f5715 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #548 from ethereum/restylingDebugger

Styling cleanup in debugger
parents c39f83ff 584bf3ff
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 41 deletions
.gitignore
View file @ bd8f5715
...@@ -6,3 +6,4 @@ lint.xml ...@@ -6,3 +6,4 @@ lint.xml
test-browser/reports/* test-browser/reports/*
babelify-src babelify-src
docs/_build docs/_build
package-lock.json
package.json
View file @ bd8f5715
...@@ -100,4 +100,4 @@ ...@@ -100,4 +100,4 @@
["babelify", { "presets": ["es2015"] }] ["babelify", { "presets": ["es2015"] }]
] ]
} }
} }
\ No newline at end of file
src/ui/ButtonNavigator.js
View file @ bd8f5715
...@@ -4,6 +4,38 @@ var style = require('./styles/basicStyles') ...@@ -4,6 +4,38 @@ var style = require('./styles/basicStyles')
var ui = require('../helpers/ui') var ui = require('../helpers/ui')
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('./styles/style-guide')
var styles = styleGuide()
var css = csjs`
.buttons {
display: flex;
flex-wrap: wrap;
}
.stepButtons {
width: 100%;
display: flex;
justify-content: center
}
.stepButton extends ${styles.button} {
width: 25%;
min-width: 30px;
}
.jumpButtons {
width: 100%;
display: flex;
justify-content: center
}
.jumpButton extends ${styles.button} {
width: 33%;
min-width: 30px;
}
.navigator:hover {
color: ${styles.colors.black}
}
`
function ButtonNavigator (_parent, _traceManager) { function ButtonNavigator (_parent, _traceManager) {
this.event = new EventManager() this.event = new EventManager()
this.intoBackDisabled = true this.intoBackDisabled = true
...@@ -59,23 +91,21 @@ module.exports = ButtonNavigator ...@@ -59,23 +91,21 @@ module.exports = ButtonNavigator
ButtonNavigator.prototype.render = function () { ButtonNavigator.prototype.render = function () {
var self = this var self = this
var view = yo`<div> var view = yo`<div class="${css.buttons}">
<button id='overback' title='step over back' class='fa fa-angle-double-left' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} > <div class="${css.stepButtons}">
</button> <button id='overback' title='Step over backward' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
<button id='intoback' title='step into back' class='fa fa-angle-left' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} > <button id='intoforward' title='Step into' class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
</button> <button id='intoback' title='Step out' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
<button id='intoforward' title='step into forward' class='fa fa-angle-right' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} > <button id='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
</button> </div>
<button id='overforward' title='step over forward' class='fa fa-angle-double-right' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} >
</button> <div class="${css.jumpButtons}">
<button id='jumpout' title='jump out' class='fa fa-share' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} > <button id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
</button> <button id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
<button id='jumppreviousbreakpoint' title='jump to the previous breakpoint' class='fa fa-step-backward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} > <button id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
</button> </div>
<button id='jumpnextbreakpoint' title='jump to the next breakpoint' class='fa fa-step-forward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} >
</button>
<div id='reverted' style="display:none"> <div id='reverted' style="display:none">
<button id='jumptoexception' title='jump to exception' class='fa fa-exclamation-triangle' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpToException', [self.revertionPoint]) }} disabled=${this.jumpOutDisabled} > <button id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException', [self.revertionPoint]) }} disabled=${this.jumpOutDisabled} >
</button> </button>
<span>State changes made during this call will be reverted.</span> <span>State changes made during this call will be reverted.</span>
<span id='outofgas' style="display:none">This call will run out of gas.</span> <span id='outofgas' style="display:none">This call will run out of gas.</span>
......
src/ui/TxBrowser.js
View file @ bd8f5715
var style = require('./styles/basicStyles')
var util = require('../helpers/global') var util = require('../helpers/global')
var EventManager = require('../lib/eventManager') var EventManager = require('../lib/eventManager')
var traceHelper = require('../helpers/traceHelper') var traceHelper = require('../helpers/traceHelper')
...@@ -6,7 +5,43 @@ var yo = require('yo-yo') ...@@ -6,7 +5,43 @@ var yo = require('yo-yo')
var ui = require('../helpers/ui') var ui = require('../helpers/ui')
var init = require('../helpers/init') var init = require('../helpers/init')
var DropdownPanel = require('./DropdownPanel') var DropdownPanel = require('./DropdownPanel')
var style = require('./styles/basicStyles')
var csjs = require('csjs-inject')
var styleGuide = require('./styles/style-guide')
var styles = styleGuide()
var css = csjs`
.container {
display: flex;
flex-direction: column;
}
.txContainer {
display: flex;
flex-direction: column;
}
.txinputs {
width: 100%;
display: flex;
justify-content: center;
}
.txinput extends ${styles.inputField} {
width: 50%;
min-width: 30px;
margin: 3px;
}
.txbuttons {
width: 100%;
display: flex;
justify-content: center;
}
.txbutton extends ${styles.button} {
width: 50%;
min-width: 30px;
}
.txbutton:hover {
color: ${styles.colors.black};
}
`
function TxBrowser (_parent) { function TxBrowser (_parent) {
this.event = new EventManager() this.event = new EventManager()
...@@ -145,13 +180,18 @@ TxBrowser.prototype.connectionSetting = function () { ...@@ -145,13 +180,18 @@ TxBrowser.prototype.connectionSetting = function () {
TxBrowser.prototype.render = function () { TxBrowser.prototype.render = function () {
var self = this var self = this
var view = yo`<div> var view = yo`<div class="${css.container}">
${this.connectionSetting()} ${this.connectionSetting()}
<input onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} /> <div class="${css.txContainer}">
<input id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} /> <div class="${css.txinputs}">
<button id='load' class='fa fa-play' title='start debugging' onclick=${function () { self.submit() }} style=${ui.formatCss(style.button)}> <input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
</button> <input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
<button id='unload' class='fa fa-stop' title='stop debugging' onclick=${function () { self.unload() }} style=${ui.formatCss(style.button)}></button> </div>
<div class="${css.txbuttons}">
<button id='load' class='fa fa-play ${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}></button>
<button id='unload' class='fa fa-stop ${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}></button>
</div>
</div>
<span id='error'></span> <span id='error'></span>
<div style=${ui.formatCss(style.transactionInfo)} id='txinfo'> <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
${this.basicPanel.render()} ${this.basicPanel.render()}
......
src/ui/styles/basicStyles.js
View file @ bd8f5715
...@@ -65,18 +65,20 @@ module.exports = { ...@@ -65,18 +65,20 @@ module.exports = {
'margin-bottom': '10px' 'margin-bottom': '10px'
}, },
button: { button: {
'-moz-box-shadow': 'inset 0px 1px 0px 0px #ffffff', 'border-color' : 'transparent',
'-webkit-box-shadow': 'inset 0px 1px 0px 0px #ffffff', 'border-radius' : '3px',
'box-shadow': 'inset 0px 1px 0px 0px #ffffff', 'border' : '.3px solid ${colors.veryLightGrey}',
'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0)", // eslint-disable-line 'cursor' : 'pointer',
'-moz-border-radius': '6px', 'min-height' : '25px',
'-webkit-border-radius': '6px', 'max-height' : '25px',
'border-radius': '6px', 'padding' : '3px',
'border': '1px solid #dcdcdc', 'min-width' : '100px',
'display': 'inline-block', 'font-size' : '12px',
'cursor': 'pointer', 'overflow' : 'hidden',
'color': '#666666', 'word-break' : 'normal',
'text-decoration': 'none', 'background-color' : 'hsla(0, 0%, 40%, .2)',
'text-shadow': '0px 1px 0px #ffffff' 'color' : 'hsla(0, 0%, 40%, 1)',
'margin' : '3px',
'text-decoration' : 'none'
} }
} }
src/ui/styles/dropdownPanel.js
View file @ bd8f5715
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
module.exports = { module.exports = {
title: { title: {
'border': '1px solid #dadada', 'border': '1px solid #dadada',
'background-color': '#eeeeee', 'background-color': 'white',
'width': '100%', 'width': '100%',
'color': '#363f47', 'color': '#363f47',
'margin-top': '5px', 'margin-top': '5px',
...@@ -25,6 +25,7 @@ module.exports = { ...@@ -25,6 +25,7 @@ module.exports = {
'margin-top': '3px' 'margin-top': '3px'
}, },
caret: { caret: {
'margin-left': '5px' 'margin-left': '10px',
'margin-right': '10px'
} }
} }
src/ui/styles/style-guide.js 0 → 100644
View file @ bd8f5715
var csjs = require('csjs-inject')
module.exports = styleGuide
function styleGuide () {
/* --------------------------------------------------------------------------
COLORS
-------------------------------------------------------------------------- */
var colors = {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent',
white: 'hsl(0, 0%, 100%)',
black: 'hsl(0, 0%, 0%)',
opacityBlack: 'hsla(0, 0%, 0%, .4)',
// BLUE
blue: 'hsla(229, 75%, 87%, 1)',
lightBlue: 'hsla(229, 75%, 87%, .5)',
backgroundBlue: 'hsla(229, 100%, 97%, 1)',
// GREY
grey: 'hsla(0, 0%, 40%, 1)',
lightGrey: 'hsla(0, 0%, 40%, .5)',
veryLightGrey: 'hsla(0, 0%, 40%, .2)',
// RED
red: 'hsla(0, 82%, 82%, 1)',
lightRed: 'hsla(0, 82%, 82%, .5)',
// GREEN
green: 'hsla(141, 75%, 84%, 1)',
lightGreen: 'hsla(141, 75%, 84%, .5)',
// PINK
pink: 'hsla(300, 69%, 76%, 1)',
lightPink: 'hsla(300, 69%, 76%, .5)',
// YELLOW
orange: 'hsla(44, 100%, 50%, 1)',
lightOrange: 'hsla(44, 100%, 50%, .5)',
// VIOLET
violet: 'hsla(240, 64%, 68%, 1)'
}
/* --------------------------------------------------------------------------
BUTTONSsss
-------------------------------------------------------------------------- */
var buttons = csjs`
.button {
border-color : transparent;
border-radius : 3px;
border : .3px solid ${colors.veryLightGrey};
cursor : pointer;
min-height : 25px;
max-height : 25px;
padding : 3px;
min-width : 100px;
font-size : 12px;
overflow : hidden;
word-break : normal;
background-color : ${colors.veryLightGrey};
color : ${colors.grey};
margin : 3px;
}
`
var textBoxes = csjs`
.input {
border : 1px solid ${colors.lightGrey}; // light-grey
margin : .3em;
height : 25px;
font-size : 10px;
border-radius : 3px;
padding : 0 8px;
overflow : hidden;
word-break : normal;
}
`
return {
button: buttons['button'],
colors: colors,
inputField: textBoxes['input']
}
}
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