Merge pull request #661 from ethereum/debug_colors

Debug colors - to use style-guide

remix-debugger/src/ui/ButtonNavigator.js

@@ -29,7 +29,7 @@ var css = csjs`
     ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .navigator {
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    color: ${styles.rightPanel.debuggerTab.text_Primary};
   }
   .navigator:hover {
     color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};

remix-debugger/src/ui/CodeListView.js

@@ -2,7 +2,6 @@
 var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
-var ui = remixLib.helpers.ui
 var DropdownPanel = require('./DropdownPanel')
 var EventManager = remixLib.EventManager
 var csjs = require('csjs-inject')
@@ -57,10 +56,10 @@ CodeListView.prototype.indexChanged = function (index) {
       }
     }
     this.itemSelected = this.codeView.children[index]
-    this.itemSelected.setAttribute('style', ui.formatCss({'background-color': '#eeeeee'}))
+    this.itemSelected.setAttribute('style', 'background-color: ' + styles.rightPanel.debuggerTab.text_BgHighlight)
     this.itemSelected.setAttribute('selected', 'selected')
     if (this.itemSelected.firstChild) {
-      this.itemSelected.firstChild.setAttribute('style', ui.formatCss({'margin-left': '2px'}))
+      this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')
     }
     this.codeView.scrollTop = this.itemSelected.offsetTop - parseInt(this.codeView.offsetTop)
   }

remix-debugger/src/ui/DropdownPanel.js

@@ -1,8 +1,6 @@
 'use strict'
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
-var ui = remixLib.helpers.ui
-var styleDropdown = require('./styles/dropdownPanel')
 var TreeView = require('./TreeView')
 var EventManager = remixLib.EventManager
 
@@ -26,13 +24,30 @@ var css = csjs`
   }
   .eyeButton {
     ${styles.rightPanel.debuggerTab.button_Debugger}
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
     margin: 3px;
     float: right;
   }
   .eyeButton:hover {
     color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
+  .dropdownpanel {
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    width: 100%;
+  }
+  .dropdownrawcontent {
+    padding: 2px;
+    word-break: break-all;
+  }
+  .message {
+    padding: 2px;
+    word-break: break-all;
+  }
+  .refresh {
+    display: none;
+    margin-left: 4px;
+    margin-top: 4px; 
+    animation: spin 2s linear infinite;
+  }
 `
 
 function DropdownPanel (_name, _opts) {
@@ -69,7 +84,7 @@ DropdownPanel.prototype.setLoading = function () {
 
 DropdownPanel.prototype.setUpdating = function () {
   if (this.view) {
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = 'gray'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.greyedText_color
   }
 }
 
@@ -77,7 +92,7 @@ DropdownPanel.prototype.update = function (_data, _header) {
   if (this.view) {
     this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
     this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
-    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = 'black'
+    this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.mainText_Color
     this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
     this.view.querySelector('.dropdownpanel button.btn').style.display = 'block'
     this.view.querySelector('.title span').innerText = _header || ' '
@@ -115,17 +130,17 @@ DropdownPanel.prototype.render = function (overridestyle) {
         to {transform:rotate(359deg);}
       }
     </style>
-    <div class='${css.title} title' onclick=${function () { self.toggle() }}>
-      <div class='${css.icon} fa fa-caret-right'></div>
-      <div class=${css.name}>${this.name}</div><span></span>
+    <div class="${css.title} title" onclick=${function () { self.toggle() }}>
+      <div class="${css.icon} fa fa-caret-right"></div>
+      <div class="${css.name}">${this.name}</div><span></span>
     </div>
-    <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
+    <div class='dropdownpanel' style='display:none'>
       <button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
       </button>
-      <i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
-      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
-      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div>
-      <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='message' style='display:none'></div>
+      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
+      <div class='dropdowncontent'>${content}</div>
+      <div class='dropdownrawcontent' style='display:none'></div>
+      <div class='message' style='display:none'></div>
     </div>
     </div>`
   if (!this.view) {

remix-debugger/src/ui/Ethdebugger.js

@@ -4,12 +4,11 @@ var StepManager = require('./StepManager')
 var remixCore = require('remix-core')
 var TraceManager = remixCore.trace.TraceManager
 var VmDebugger = require('./VmDebugger')
-var style = require('./styles/basicStyles')
 var remixLib = require('remix-lib')
 var global = remixLib.global
 var EventManager = remixLib.EventManager
 var yo = require('yo-yo')
-var ui = remixLib.helpers.ui
+var csjs = require('csjs-inject')
 var Web3Providers = remixLib.vm.Web3Providers
 var DummyProvider = remixLib.vm.DummyProvider
 var CodeManager = remixCore.code.CodeManager
@@ -17,6 +16,15 @@ var remixSolidity = require('remix-solidity')
 var SolidityProxy = remixSolidity.SolidityProxy
 var InternalCallTree = remixSolidity.InternalCallTree
 
+var css = csjs`
+  .statusMessage {
+    margin-left: 15px;
+  }
+  .innerShift {
+    padding: 2px;
+    margin-left: 10px;
+  }
+`
 function Ethdebugger () {
   var self = this
   this.event = new EventManager()
@@ -107,12 +115,12 @@ Ethdebugger.prototype.debug = function (tx) {
 }
 
 Ethdebugger.prototype.render = function () {
-  var view = yo`<div style=${ui.formatCss(style.font)}>
-        <div style=${ui.formatCss(style.innerShift)}>
+  var view = yo`<div>
+        <div class="${css.innerShift}">
           ${this.txBrowser.render()}
           ${this.stepManager.render()}
         </div>
-        <div style=${ui.formatCss(style.statusMessage)} >${this.statusMessage}</div>
+        <div class="${css.statusMessage}" >${this.statusMessage}</div>
         ${this.vmDebugger.render()}
      </div>`
   if (!this.view) {

remix-debugger/src/ui/Slider.js

@@ -1,9 +1,7 @@
 'use strict'
-var style = require('./styles/sliderStyles')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
 var yo = require('yo-yo')
-var ui = remixLib.helpers.ui
 
 class Slider {
   constructor (_traceManager, _stepOverride) {
@@ -23,7 +21,7 @@ class Slider {
     var view = yo`<div>
         <input
           id='slider'
-          style=${ui.formatCss(style.rule)}
+          style='width: 100%'
           type='range'
           min=0
           max=${this.max}

remix-debugger/src/ui/TreeView.js

@@ -1,18 +1,36 @@
 'use strict'
 var yo = require('yo-yo')
-var style = require('./styles/treeView')
-var remixLib = require('remix-lib')
-var ui = remixLib.helpers.ui
-
+var csjs = require('csjs-inject')
+var css = csjs`
+  .li_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+    margin-left: 10px;
+  }
+  .ul_tv {
+    list-style-type: none;
+    -webkit-margin-before: 0px;
+    -webkit-margin-after: 0px;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    -webkit-padding-start: 0px;
+    margin-left: 10px;
+  }
+  .caret_tv {
+    margin-top: 3px;
+    width: 10px;
+  }
+`
 class TreeView {
 
   constructor (opts) {
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
-    this.cssLabel = ui.formatCss(opts.css || {}, style.label)
-    this.cssUl = ui.formatCss(opts.css || {}, style.cssUl)
-    this.cssLi = ui.formatCss(opts.css || {}, style.cssLi)
     this.nodeIsExpanded = {}
   }
 
@@ -42,14 +60,14 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul style=${this.cssUl}>${children}</ul>`
+    return yo`<ul class="${css.ul_tv}">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
-    var label = yo`<div style=${this.cssLabel}><div class="fa fa-caret-right" style=${ui.formatCss(style.caret)}></div><span style=${ui.formatCss(style.data)}>${this.formatSelf(key, data)}</span></div>`
+    var label = yo`<div class="${css.label_tv}"><div class="fa fa-caret-right" class="${css.caret_tv}"></div><span>${this.formatSelf(key, data)}</span></div>`
     var renderedChildren = ''
     if (children.length) {
-      renderedChildren = yo`<ul style=${this.cssUl}>${children}</ul>`
+      renderedChildren = yo`<ul class="${css.ul_tv}">${children}</ul>`
       renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
       label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       var self = this
@@ -62,7 +80,7 @@ class TreeView {
     } else {
       label.firstElementChild.style.visibility = 'hidden'
     }
-    return yo`<li style=${this.cssLi}>${label}${renderedChildren}</li>`
+    return yo`<li class="${css.li_tv}">${label}${renderedChildren}</li>`
   }
 
   formatSelfDefault (key, data) {

remix-debugger/src/ui/TxBrowser.js

@@ -3,10 +3,8 @@ var global = remixLib.global
 var EventManager = remixLib.EventManager
 var traceHelper = remixLib.helpers.trace
 var yo = require('yo-yo')
-var ui = remixLib.helpers.ui
 var init = remixLib.init
 var DropdownPanel = require('./DropdownPanel')
-var style = require('./styles/basicStyles')
 var csjs = require('csjs-inject')
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
@@ -37,7 +35,6 @@ var css = csjs`
   }
   .txbutton {
     ${styles.rightPanel.debuggerTab.button_Debugger}
-    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .txbutton:hover {
     color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
@@ -45,6 +42,10 @@ var css = csjs`
   .txinfo {
     margin-top: 5px;
   }
+  .vmargin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
 `
 function TxBrowser (_parent) {
   this.event = new EventManager()
@@ -175,7 +176,7 @@ TxBrowser.prototype.init = function (ev) {
 TxBrowser.prototype.connectionSetting = function () {
   if (this.displayConnectionSetting) {
     var self = this
-    return yo`<div style=${ui.formatCss(style.vmargin)}><span>Node URL: </span><input onkeyup=${function () { self.updateWeb3Url(arguments[0].target.value) }} value=${global.web3.currentProvider ? global.web3.currentProvider.host : ' - none - '} type='text' />
+    return yo`<div class="${css.vmargin}"><span>Node URL: </span><input onkeyup=${function () { self.updateWeb3Url(arguments[0].target.value) }} value=${global.web3.currentProvider ? global.web3.currentProvider.host : ' - none - '} type='text' />
               <span>${this.connectInfo}</span></div>`
   } else {
     return ''

remix-lib/src/ui/style-guide.js

@@ -90,6 +90,7 @@ function styleGuide () {
     dark_BackgroundColor: cssProperties.colors.black,
     light_BackgroundColor: cssProperties.colors.white,
     debuggingMode_BackgroundColor: cssProperties.colors.lightViolet,
+    highlight_BackgroundColor: cssProperties.colors.veryLightGrey,
     /* ------------------------------------------------------
                               RESIZING
     ******************************************************** */
@@ -106,17 +107,19 @@ function styleGuide () {
     specialText_Color: cssProperties.colors.greenZing,
     brightText_Color: cssProperties.colors.brightBlue,
     oppositeText_Color: cssProperties.colors.black,
-    additionalText_Color: cssProperties.colors.desatGrey,
+    additionalText_Color: cssProperties.colors.veryLightGrey,
 
     errorText_Color: cssProperties.colors.strongRed,
     warningText_Color: cssProperties.colors.orange,
     infoText_Color: cssProperties.colors.violet,
+    greyedText_color: cssProperties.colors.veryLightGrey,
     /* ------------------------------------------------------
                               ICONS
     ******************************************************** */
     icon_Color: cssProperties.colors.black,
     icon_AltColor: cssProperties.colors.white,
     icon_HoverColor: cssProperties.colors.orange,
+    icon_ConstantColor: cssProperties.colors.black,
 
     /* ------------------------------------------------------
                             MESSAGES
@@ -191,7 +194,7 @@ function styleGuide () {
           Teriary
     .................. */
     teriaryButton_TextColor: cssProperties.colors.black,
-    teriaryButton_BackgroundColor: cssProperties.colors.greyBlueMed,
+    teriaryButton_BackgroundColor: cssProperties.colors.lightGrey,
     teriaryButton_BorderColor: cssProperties.colors.veryLightGrey,
     /* .................
 
@@ -653,6 +656,7 @@ function styleGuide () {
       debuggerTab: {
         text_Primary: appProperties.mainText_Color,
         text_Secondary: appProperties.supportText_Color,
+        text_BgHighlight: appProperties.highlight_BackgroundColor,
 
         box_Debugger: appProperties.uiElements.solidBorderBox({
           BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
@@ -666,7 +670,7 @@ function styleGuide () {
           Color: appProperties.secondaryButton_TextColor
         }),
 
-        button_Debugger_icon_Color: appProperties.icon_Color,
+        button_Debugger_icon_Color: appProperties.icon_ConstantColor,
         button_Debugger_icon_HoverColor: appProperties.icon_HoverColor,
 
         dropdown_Debugger: appProperties.uiElements.dropdown({

remix-lib/src/ui/styleGuideDark.js

@@ -104,6 +104,7 @@ function styleGuideDark () {
     dark_BackgroundColor: cssProperties.colors.black,
     light_BackgroundColor: cssProperties.colors.white,
     debuggingMode_BackgroundColor: cssProperties.colors.lightViolet,
+    highlight_BackgroundColor: cssProperties.colors.greyBlueMed,
     /* ------------------------------------------------------
                               RESIZING
     ******************************************************** */
@@ -123,12 +124,14 @@ function styleGuideDark () {
     errorText_Color: cssProperties.colors.strongRed,
     warningText_Color: cssProperties.colors.orange,
     infoText_Color: cssProperties.colors.violet,
+    greyedText_color: cssProperties.colors.desatGrey,
     /* ------------------------------------------------------
                               ICONS
     ******************************************************** */
     icon_Color: cssProperties.colors.white,
     icon_AltColor: cssProperties.colors.black,
     icon_HoverColor: cssProperties.colors.orange,
+    icon_ConstantColor: cssProperties.colors.black,
 
     /* ------------------------------------------------------
                             MESSAGES
@@ -202,7 +205,7 @@ function styleGuideDark () {
     /* .................
           Teriary
     .................. */
-    teriaryButton_TextColor: cssProperties.colors.black,
+    teriaryButton_TextColor: cssProperties.colors.white,
     teriaryButton_BackgroundColor: cssProperties.colors.greyBlueMed,
     teriaryButton_BorderColor: cssProperties.colors.veryLightGrey,
     /* .................
@@ -665,6 +668,7 @@ function styleGuideDark () {
       debuggerTab: {
         text_Primary: appProperties.mainText_Color,
         text_Secondary: appProperties.supportText_Color,
+        text_BgHighlight: appProperties.highlight_BackgroundColor,
 
         box_Debugger: appProperties.uiElements.solidBorderBox({
           BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
@@ -675,10 +679,10 @@ function styleGuideDark () {
         button_Debugger: appProperties.uiElements.button({
           BackgroundColor: appProperties.teriaryButton_BackgroundColor,
           BorderColor: appProperties.secondaryButton_BorderColor,
-          Color: appProperties.secondaryButton_TextColor
+          Color: appProperties.teriaryButton_TextColor
         }),
 
-        button_Debugger_icon_Color: appProperties.icon_Color,
+        button_Debugger_icon_Color: appProperties.icon_ConstantColor,
         button_Debugger_icon_HoverColor: appProperties.icon_HoverColor,
 
         dropdown_Debugger: appProperties.uiElements.dropdown({