From d7dfd161d636797357b55c17364495a6f6765446 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 15 Jan 2018 16:20:41 +0100 Subject: [PATCH] removing old remixLib.helpers.ui to make debugger work with csjs --- remix-debugger/src/ui/ButtonNavigator.js | 2 +- remix-debugger/src/ui/CodeListView.js | 5 ++- remix-debugger/src/ui/DropdownPanel.js | 39 ++++++++++++++++-------- remix-debugger/src/ui/Ethdebugger.js | 18 ++++++++--- remix-debugger/src/ui/Slider.js | 4 +-- remix-debugger/src/ui/TreeView.js | 38 +++++++++++++++++------ remix-debugger/src/ui/TxBrowser.js | 9 +++--- 7 files changed, 78 insertions(+), 37 deletions(-) diff --git a/remix-debugger/src/ui/ButtonNavigator.js b/remix-debugger/src/ui/ButtonNavigator.js index 98765177b3..f438d69236 100644 --- a/remix-debugger/src/ui/ButtonNavigator.js +++ b/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}; diff --git a/remix-debugger/src/ui/CodeListView.js b/remix-debugger/src/ui/CodeListView.js index c1d01a2666..784d6cbfe4 100644 --- a/remix-debugger/src/ui/CodeListView.js +++ b/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) } diff --git a/remix-debugger/src/ui/DropdownPanel.js b/remix-debugger/src/ui/DropdownPanel.js index c898254373..99c6817fdf 100644 --- a/remix-debugger/src/ui/DropdownPanel.js +++ b/remix-debugger/src/ui/DropdownPanel.js @@ -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);} } -
-
-
${this.name}
+
+
+
${this.name}
-
+
` if (!this.view) { diff --git a/remix-debugger/src/ui/Ethdebugger.js b/remix-debugger/src/ui/Ethdebugger.js index 73450e5609..a257852411 100644 --- a/remix-debugger/src/ui/Ethdebugger.js +++ b/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`
-
+ var view = yo`
+
${this.txBrowser.render()} ${this.stepManager.render()}
-
${this.statusMessage}
+
${this.statusMessage}
${this.vmDebugger.render()}
` if (!this.view) { diff --git a/remix-debugger/src/ui/Slider.js b/remix-debugger/src/ui/Slider.js index 4491de82a2..10ca255d81 100644 --- a/remix-debugger/src/ui/Slider.js +++ b/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`
{ return this.renderObject(json[innerkey], json, innerkey, expand, innerkey) }) - return yo`
    ${children}
` + return yo`
    ${children}
` } formatData (key, data, children, expand, keyPath) { - var label = yo`
${this.formatSelf(key, data)}
` + var label = yo`
${this.formatSelf(key, data)}
` var renderedChildren = '' if (children.length) { - renderedChildren = yo`
    ${children}
` + renderedChildren = yo`
    ${children}
` 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`
  • ${label}${renderedChildren}
    • ` + return yo`
  • ${label}${renderedChildren}
    • ` } formatSelfDefault (key, data) { diff --git a/remix-debugger/src/ui/TxBrowser.js b/remix-debugger/src/ui/TxBrowser.js index 1949bd9775..2d90132d26 100644 --- a/remix-debugger/src/ui/TxBrowser.js +++ b/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`
    Node URL: + return yo`
    Node URL: ${this.connectInfo}
    ` } else { return ''