From 355a6d1de31ac6abbf74feda7e213b752df78167 Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 20 Aug 2018 20:25:02 +0200 Subject: [PATCH] reorg debug panel --- .../remix-debugger/src/ui/CodeListView.js | 5 +-- .../remix-debugger/src/ui/DropdownPanel.js | 37 ++++++++++------- .../remix-debugger/src/ui/Ethdebugger.js | 1 + .../remix-debugger/src/ui/SolidityLocals.js | 4 ++ .../remix-debugger/src/ui/StackPanel.js | 2 +- .../remix-debugger/src/ui/StepDetail.js | 2 +- .../remix-debugger/src/ui/StepManager.js | 7 ---- .../remix-debugger/src/ui/TxBrowser.js | 12 ------ .../remix-debugger/src/ui/VmDebugger.js | 40 ++++++++++++++++--- 9 files changed, 65 insertions(+), 45 deletions(-) diff --git a/src/app/debugger/remix-debugger/src/ui/CodeListView.js b/src/app/debugger/remix-debugger/src/ui/CodeListView.js index d3e98948f8..797f2a3832 100644 --- a/src/app/debugger/remix-debugger/src/ui/CodeListView.js +++ b/src/app/debugger/remix-debugger/src/ui/CodeListView.js @@ -11,9 +11,8 @@ var styles = styleGuide.chooser() var css = csjs` .instructions { ${styles.rightPanel.debuggerTab.box_Debugger} - width: 75%; overflow-y: scroll; - max-height: 250px; + max-height: 100px; } ` function CodeListView (_parent, _codeManager) { @@ -24,7 +23,7 @@ function CodeListView (_parent, _codeManager) { this.address this.codeView this.itemSelected - this.basicPanel = new DropdownPanel('Instructions', {json: false}) + this.basicPanel = new DropdownPanel('Instructions', {json: false, displayContentOnly: true}) this.basicPanel.event.register('hide', () => { this.event.trigger('hide', []) }) diff --git a/src/app/debugger/remix-debugger/src/ui/DropdownPanel.js b/src/app/debugger/remix-debugger/src/ui/DropdownPanel.js index 853beec3b0..860cfde7fd 100644 --- a/src/app/debugger/remix-debugger/src/ui/DropdownPanel.js +++ b/src/app/debugger/remix-debugger/src/ui/DropdownPanel.js @@ -61,6 +61,7 @@ function DropdownPanel (_name, _opts) { this.name = _name this.header = '' this.json = _opts.json + this.displayContentOnly = _opts.displayContentOnly if (this.json) { this.treeView = new TreeView(_opts) } @@ -97,8 +98,10 @@ DropdownPanel.prototype.update = function (_data, _header) { this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block' 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('.title div.btn').style.display = 'block' - this.view.querySelector('.title span').innerText = _header || ' ' + if (!this.displayContentOnly) { + this.view.querySelector('.title div.btn').style.display = 'block' + this.view.querySelector('.title span').innerText = _header || ' ' + } this.message('') if (this.json) { this.treeView.update(_data) @@ -120,6 +123,18 @@ DropdownPanel.prototype.render = function (overridestyle) { } overridestyle === undefined ? {} : overridestyle var self = this + var title = !self.displayContentOnly ? yo`
+
+
${this.name}
+
+
` : yo`
` + + var contentNode = yo`` var view = yo`
-
-
-
${this.name}
-
-
- + ${title} + ${contentNode}
` if (!this.view) { this.view = view } + if (self.displayContentOnly) contentNode.style.display = 'block' return view } @@ -171,7 +178,7 @@ DropdownPanel.prototype.toggle = function () { } DropdownPanel.prototype.hide = function () { - if (this.view) { + if (this.view && !this.displayContentOnly) { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = 'none' @@ -181,7 +188,7 @@ DropdownPanel.prototype.hide = function () { } DropdownPanel.prototype.show = function () { - if (this.view) { + if (this.view && !this.displayContentOnly) { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = '' diff --git a/src/app/debugger/remix-debugger/src/ui/Ethdebugger.js b/src/app/debugger/remix-debugger/src/ui/Ethdebugger.js index 936eeb31bf..3323551d06 100644 --- a/src/app/debugger/remix-debugger/src/ui/Ethdebugger.js +++ b/src/app/debugger/remix-debugger/src/ui/Ethdebugger.js @@ -133,6 +133,7 @@ Ethdebugger.prototype.render = function () { var view = yo`
${this.txBrowser.render()} + ${this.vmDebugger.renderHead()} ${this.stepManager.render()}
${this.statusMessage}
diff --git a/src/app/debugger/remix-debugger/src/ui/SolidityLocals.js b/src/app/debugger/remix-debugger/src/ui/SolidityLocals.js index 3b8f6d91e0..aaa5334c20 100644 --- a/src/app/debugger/remix-debugger/src/ui/SolidityLocals.js +++ b/src/app/debugger/remix-debugger/src/ui/SolidityLocals.js @@ -49,6 +49,7 @@ class SolidityLocals { } function decode (self, sourceLocation) { + self.basicPanel.setMessage('') self.traceManager.waterfall([ self.traceManager.getStackAt, self.traceManager.getMemoryAt, @@ -68,6 +69,9 @@ function decode (self, sourceLocation) { if (!locals.error) { self.basicPanel.update(locals) } + if (!Object.keys(locals).length) { + self.basicPanel.setMessage('no locals') + } }) } catch (e) { self.basicPanel.setMessage(e.message) diff --git a/src/app/debugger/remix-debugger/src/ui/StackPanel.js b/src/app/debugger/remix-debugger/src/ui/StackPanel.js index de768dc616..e13eee96cf 100644 --- a/src/app/debugger/remix-debugger/src/ui/StackPanel.js +++ b/src/app/debugger/remix-debugger/src/ui/StackPanel.js @@ -5,7 +5,7 @@ var yo = require('yo-yo') function StackPanel (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new DropdownPanel('Stack', {json: true}) + this.basicPanel = new DropdownPanel('Stack', {json: true, displayContentOnly: false}) this.init() } diff --git a/src/app/debugger/remix-debugger/src/ui/StepDetail.js b/src/app/debugger/remix-debugger/src/ui/StepDetail.js index 88950e4e93..7e19f0d941 100644 --- a/src/app/debugger/remix-debugger/src/ui/StepDetail.js +++ b/src/app/debugger/remix-debugger/src/ui/StepDetail.js @@ -6,7 +6,7 @@ function StepDetail (_parent, _traceManager) { this.parent = _parent this.traceManager = _traceManager - this.basicPanel = new DropdownPanel('Step detail', {json: true}) + this.basicPanel = new DropdownPanel('Step detail', {json: true, displayContentOnly: true}) this.detail = initDetail() this.view diff --git a/src/app/debugger/remix-debugger/src/ui/StepManager.js b/src/app/debugger/remix-debugger/src/ui/StepManager.js index 040c9dff2f..2dc218986d 100644 --- a/src/app/debugger/remix-debugger/src/ui/StepManager.js +++ b/src/app/debugger/remix-debugger/src/ui/StepManager.js @@ -33,13 +33,6 @@ function StepManager (_parent, _traceManager) { }) this.parent.callTree.event.register('callTreeReady', () => { - this.solidityMode = true - this.parent.vmDebugger.asmCode.event.register('hide', () => { - this.solidityMode = this.parent.callTree.reducedTrace.length !== 0 - }) - this.parent.vmDebugger.asmCode.event.register('show', () => { - this.solidityMode = false - }) if (this.parent.callTree.functionCallStack.length) { this.jumpTo(this.parent.callTree.functionCallStack[0]) } diff --git a/src/app/debugger/remix-debugger/src/ui/TxBrowser.js b/src/app/debugger/remix-debugger/src/ui/TxBrowser.js index a70622321f..f2d6a00aa1 100644 --- a/src/app/debugger/remix-debugger/src/ui/TxBrowser.js +++ b/src/app/debugger/remix-debugger/src/ui/TxBrowser.js @@ -4,7 +4,6 @@ var EventManager = remixLib.EventManager var traceHelper = remixLib.helpers.trace var yo = require('yo-yo') var init = remixLib.init -var DropdownPanel = require('./DropdownPanel') var csjs = require('csjs-inject') var styleGuide = require('../../../../ui/styles-guide/theme-chooser') var styles = styleGuide.chooser() @@ -39,9 +38,6 @@ var css = csjs` .txbutton:hover { color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; } - .txinfo { - margin-top: 5px; - } .vmargin { margin-top: 10px; margin-bottom: 10px; @@ -54,8 +50,6 @@ function TxBrowser (_parent) { this.txNumber this.view this.displayConnectionSetting = true - this.basicPanel = new DropdownPanel('Transaction', {json: true}) - this.basicPanel.data = {} var self = this _parent.event.register('providerChanged', this, function (provider) { self.displayConnectionSetting = provider === 'INTERNAL' @@ -74,8 +68,6 @@ function TxBrowser (_parent) { TxBrowser.prototype.setDefaultValues = function () { this.connectInfo = '' - this.basicPanel.update({}) - this.basicPanel.hide() if (this.view) { yo.update(this.view, this.render()) } @@ -124,7 +116,6 @@ TxBrowser.prototype.update = function (error, tx) { this.view.querySelector('#error').innerHTML = 'Cannot find transaction with reference. Block number: ' + this.blockNumber + '. Transaction index/hash: ' + this.txNumber } } - this.basicPanel.update(info) } TxBrowser.prototype.updateWeb3Url = function (newhost) { @@ -198,9 +189,6 @@ TxBrowser.prototype.render = function () {
-
- ${this.basicPanel.render()} -
` if (!this.view) { this.view = view diff --git a/src/app/debugger/remix-debugger/src/ui/VmDebugger.js b/src/app/debugger/remix-debugger/src/ui/VmDebugger.js index c372c7b9f5..9e8be588b7 100644 --- a/src/app/debugger/remix-debugger/src/ui/VmDebugger.js +++ b/src/app/debugger/remix-debugger/src/ui/VmDebugger.js @@ -1,4 +1,5 @@ 'use strict' +var csjs = require('csjs-inject') var CodeListView = require('./CodeListView') var CalldataPanel = require('./CalldataPanel') var MemoryPanel = require('./MemoryPanel') @@ -14,6 +15,16 @@ var remixCore = require('remix-core') var StorageResolver = remixCore.storage.StorageResolver var yo = require('yo-yo') +var css = csjs` + .asmCode { + float: left; + width: 250px; + } + .stepDetail { + float: right; + } +` + function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _callTree) { this.asmCode = new CodeListView(_parent, _codeManager) this.stackPanel = new StackPanel(_parent, _traceManager) @@ -50,33 +61,50 @@ function VmDebugger (_parent, _traceManager, _codeManager, _solidityProxy, _call self.solidityState.storageResolver = storageResolver self.solidityLocals.storageResolver = storageResolver self.fullStoragesChangesPanel.storageResolver = storageResolver + self.headView.style.display = 'block' self.view.style.display = 'block' }) _parent.event.register('traceUnloaded', this, function () { + self.headView.style.display = 'none' self.view.style.display = 'none' }) _parent.callTree.event.register('callTreeReady', () => { + self.asmCode.basicPanel.show() if (_parent.callTree.reducedTrace.length) { self.solidityLocals.basicPanel.show() self.solidityState.basicPanel.show() - } else { - self.asmCode.basicPanel.show() } + self.stackPanel.basicPanel.show() + self.storagePanel.basicPanel.show() + self.memoryPanel.basicPanel.show() + self.calldataPanel.basicPanel.show() + self.callstackPanel.basicPanel.show() }) } +VmDebugger.prototype.renderHead = function () { + var headView = yo`` + if (!this.headView) { + this.headView = headView + } + return headView +} + VmDebugger.prototype.render = function () { var view = yo`