From ab36e992dd2349dd17e51192e6a29a476e1b200a Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 15 Jan 2018 16:20:41 +0100 Subject: [PATCH 1/4] 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 +++--- remix-lib/src/ui/style-guide.js | 10 ++++-- remix-lib/src/ui/styleGuideDark.js | 10 ++++-- 9 files changed, 92 insertions(+), 43 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 '' diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index cf3ba423c4..057ae37487 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/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({ diff --git a/remix-lib/src/ui/styleGuideDark.js b/remix-lib/src/ui/styleGuideDark.js index 4dcba54fc4..db94501de2 100644 --- a/remix-lib/src/ui/styleGuideDark.js +++ b/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({ From 95619a384b24b7b516ff60394e564ca78667701c Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Mon, 15 Jan 2018 17:02:36 +0100 Subject: [PATCH 2/4] updating DropdownPanel --- remix-debugger/src/ui/DropdownPanel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/remix-debugger/src/ui/DropdownPanel.js b/remix-debugger/src/ui/DropdownPanel.js index 99c6817fdf..5d56b3aa74 100644 --- a/remix-debugger/src/ui/DropdownPanel.js +++ b/remix-debugger/src/ui/DropdownPanel.js @@ -44,6 +44,7 @@ var css = csjs` 'word-break': 'break-all' } .refresh { + display: 'none'; margin-left: 4px; margin-top: 4px; animation: spin 2s linear infinite; @@ -84,7 +85,7 @@ DropdownPanel.prototype.setLoading = function () { DropdownPanel.prototype.setUpdating = function () { if (this.view) { - this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.additionalText_Color + this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.greyedText_color } } From d55677da285a00421256ae78ae798b1beb8ff95d Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 16 Jan 2018 11:43:43 +0100 Subject: [PATCH 3/4] fix standard js errs --- remix-debugger/src/ui/DropdownPanel.js | 11 +++++------ remix-debugger/src/ui/TreeView.js | 2 -- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/remix-debugger/src/ui/DropdownPanel.js b/remix-debugger/src/ui/DropdownPanel.js index 5d56b3aa74..74decc4a20 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 styleDropdown = require('./styles/dropdownPanel') var TreeView = require('./TreeView') var EventManager = remixLib.EventManager @@ -36,15 +35,15 @@ var css = csjs` width: 100%; } .dropdownrawcontent { - 'padding': '2px', - 'word-break': 'break-all' + padding: 2px; + word-break: break-all; } .message { - 'padding': '2px', - 'word-break': 'break-all' + padding: 2px; + word-break: break-all; } .refresh { - display: 'none'; + display: none; margin-left: 4px; margin-top: 4px; animation: spin 2s linear infinite; diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js index 42d22f4515..d29a461909 100644 --- a/remix-debugger/src/ui/TreeView.js +++ b/remix-debugger/src/ui/TreeView.js @@ -1,8 +1,6 @@ 'use strict' var yo = require('yo-yo') var csjs = require('csjs-inject') -var style = require('./styles/treeView') -var remixLib = require('remix-lib') var css = csjs` .li_tv { list-style-type: none; From 870699643a096d89b1fc130394be4386ad2b05ba Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Tue, 16 Jan 2018 13:02:58 +0100 Subject: [PATCH 4/4] style-guide update for std err --- remix-lib/src/ui/style-guide.js | 2 +- remix-lib/src/ui/styleGuideDark.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/remix-lib/src/ui/style-guide.js b/remix-lib/src/ui/style-guide.js index 057ae37487..52e4f1cdbd 100644 --- a/remix-lib/src/ui/style-guide.js +++ b/remix-lib/src/ui/style-guide.js @@ -656,7 +656,7 @@ function styleGuide () { debuggerTab: { text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, - text_BgHighlight: appProperties.highlight_BackgroundColor, + text_BgHighlight: appProperties.highlight_BackgroundColor, box_Debugger: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor, diff --git a/remix-lib/src/ui/styleGuideDark.js b/remix-lib/src/ui/styleGuideDark.js index db94501de2..53170c9e30 100644 --- a/remix-lib/src/ui/styleGuideDark.js +++ b/remix-lib/src/ui/styleGuideDark.js @@ -668,7 +668,7 @@ function styleGuideDark () { debuggerTab: { text_Primary: appProperties.mainText_Color, text_Secondary: appProperties.supportText_Color, - text_BgHighlight: appProperties.highlight_BackgroundColor, + text_BgHighlight: appProperties.highlight_BackgroundColor, box_Debugger: appProperties.uiElements.solidBorderBox({ BackgroundColor: appProperties.solidBorderBox_BackgroundColor,