removing old remixLib.helpers.ui to make debugger work with csjs

pull/7/head
Rob Stupay 7 years ago
parent 20a8742899
commit ab36e992dd
  1. 2
      remix-debugger/src/ui/ButtonNavigator.js
  2. 5
      remix-debugger/src/ui/CodeListView.js
  3. 39
      remix-debugger/src/ui/DropdownPanel.js
  4. 18
      remix-debugger/src/ui/Ethdebugger.js
  5. 4
      remix-debugger/src/ui/Slider.js
  6. 38
      remix-debugger/src/ui/TreeView.js
  7. 9
      remix-debugger/src/ui/TxBrowser.js
  8. 10
      remix-lib/src/ui/style-guide.js
  9. 10
      remix-lib/src/ui/styleGuideDark.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};

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

@ -1,7 +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 +25,29 @@ 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 {
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.additionalText_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) {

@ -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) {

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

@ -1,18 +1,38 @@
'use strict'
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var style = require('./styles/treeView')
var remixLib = require('remix-lib')
var ui = remixLib.helpers.ui
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 +62,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 +82,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) {

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

@ -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({

@ -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({

Loading…
Cancel
Save