mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Styling cleanup in debugger

Browse Source
pull/7/head
ninabreznik 7 years ago
parent c39f83ff73
commit 21a0b5880f
7 changed files with 4357 additions and 55 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4133
      package-lock.json
  2. 50
      package.json
  3. 62
      src/ui/ButtonNavigator.js
  4. 56
      src/ui/TxBrowser.js
  5. 28
      src/ui/styles/basicStyles.js
  6. 5
      src/ui/styles/dropdownPanel.js
  7. 78
      src/ui/styles/style-guide.js

4133
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

50
package.json
Unescape View File

@ -14,6 +14,8 @@
],
"main": "./src/index.js",
"dependencies": {
"bignumber.js": "^4.0.2",
"csjs-inject": "^1.0.1",
"which": "^1.2.10"
},
"devDependencies": {
@ -83,21 +85,37 @@
},
"browserify": {
"transform": [
["babelify", {
"plugins": [
["fast-async", {
"runtimePatten": null,
"compiler": {
"promises": true,
"es7": true,
"noRuntime": true,
"wrapAwait": true
}
}], "transform-object-assign"
]
}],
["yo-yoify"],
["babelify", { "presets": ["es2015"] }]
[
"babelify",
{
"plugins": [
[
"fast-async",
{
"runtimePatten": null,
"compiler": {
"promises": true,
"es7": true,
"noRuntime": true,
"wrapAwait": true
}
}
],
"transform-object-assign"
]
}
],
[
"yo-yoify"
],
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
}
}
}

62
src/ui/ButtonNavigator.js
Unescape View File

@ -4,6 +4,38 @@ var style = require('./styles/basicStyles')
var ui = require('../helpers/ui')
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: space-between;
}
.stepButton extends ${styles.button} {
width: 23%;
min-width: 30px;
}
.jumpButtons {
width: 100%;
display: flex;
justify-content: space-between;
}
.jumpButton extends ${styles.button} {
width: 32%;
min-width: 30px;
}
.navigator:hover {
color: ${styles.colors.black}
}
`
function ButtonNavigator (_parent, _traceManager) {
this.event = new EventManager()
this.intoBackDisabled = true
@ -59,23 +91,21 @@ module.exports = ButtonNavigator
ButtonNavigator.prototype.render = function () {
var self = this
var view = yo`<div>
<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} >
</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>
<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>
<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>
<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>
<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>
<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>
var view = yo`<div class="${css.buttons}">
<div class="${css.stepButtons}">
<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='intoforward' title='Step into' class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></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='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
</div>
<div class="${css.jumpButtons}">
<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 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='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>
</div>
<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>
<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>

56
src/ui/TxBrowser.js
Unescape View File

@ -1,4 +1,3 @@
var style = require('./styles/basicStyles')
var util = require('../helpers/global')
var EventManager = require('../lib/eventManager')
var traceHelper = require('../helpers/traceHelper')
@ -6,7 +5,43 @@ var yo = require('yo-yo')
var ui = require('../helpers/ui')
var init = require('../helpers/init')
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) {
this.event = new EventManager()
@ -145,13 +180,18 @@ TxBrowser.prototype.connectionSetting = function () {
TxBrowser.prototype.render = function () {
var self = this
var view = yo`<div>
var view = yo`<div class="${css.container}">
${this.connectionSetting()}
<input onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
<input id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
<button id='load' class='fa fa-play' title='start debugging' onclick=${function () { self.submit() }} style=${ui.formatCss(style.button)}>
</button>
<button id='unload' class='fa fa-stop' title='stop debugging' onclick=${function () { self.unload() }} style=${ui.formatCss(style.button)}></button>
<div class="${css.txContainer}">
<div class="${css.txinputs}">
<input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
<input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
</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>
<div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
${this.basicPanel.render()}

28
src/ui/styles/basicStyles.js
Unescape View File

@ -65,18 +65,20 @@ module.exports = {
'margin-bottom': '10px'
},
button: {
'-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',
'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0)", // eslint-disable-line
'-moz-border-radius': '6px',
'-webkit-border-radius': '6px',
'border-radius': '6px',
'border': '1px solid #dcdcdc',
'display': 'inline-block',
'cursor': 'pointer',
'color': '#666666',
'text-decoration': 'none',
'text-shadow': '0px 1px 0px #ffffff'
'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' : 'hsla(0, 0%, 40%, .2)',
'color' : 'hsla(0, 0%, 40%, 1)',
'margin' : '3px',
'text-decoration' : 'none'
}
}

5
src/ui/styles/dropdownPanel.js
Unescape View File

@ -2,7 +2,7 @@
module.exports = {
title: {
'border': '1px solid #dadada',
'background-color': '#eeeeee',
'background-color': 'white',
'width': '100%',
'color': '#363f47',
'margin-top': '5px',
@ -25,6 +25,7 @@ module.exports = {
'margin-top': '3px'
},
caret: {
'margin-left': '5px'
'margin-left': '10px',
'margin-right': '10px'
}
}

78
src/ui/styles/style-guide.js
Unescape View File

@ -0,0 +1,78 @@
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']
}
}
Write Preview
Loading…
Cancel
Save