Styling cleanup in debugger

package.json

@@ -100,4 +100,4 @@
       ["babelify", { "presets": ["es2015"] }]
     ]
   }
-}
+}

src/ui/ButtonNavigator.js

@@ -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>    
+  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">
-      <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>

src/ui/TxBrowser.js

@@ -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'} />
+        <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>
         <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
           ${this.basicPanel.render()}

src/ui/styles/basicStyles.js

@@ -65,18 +65,20 @@ module.exports = {
     'margin-bottom': '10px'
   },
   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

@@ -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'
   }
 }

src/ui/styles/style-guide.js

@@ -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']
+  }
+}