From b59895c966e6105df4e4c040e9f9e0e7458db391 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 28 Aug 2020 17:24:32 +0100 Subject: [PATCH] Dropdown panel refactor --- .../src/app/tabs/debugger/debuggerUI.js | 10 +- .../button-navigator.spec.tsx | 11 -- libs/debugger-ui/src/lib/slider/slider.css | 0 .../src/lib/slider/slider.spec.tsx | 11 -- .../src/lib/step-manager/step-manager.css | 0 .../lib/step-manager/step-manager.spec.tsx | 11 -- .../src/lib/step-manager/step-manager.tsx | 1 - .../src/lib/tx-browser/tx-browser.css | 24 +++ .../src/lib/tx-browser/tx-browser.tsx | 82 ++++++++ .../src/lib/vm-debugger/code-list-view.tsx | 21 +++ .../src/lib/vm-debugger/dropdown-panel.tsx | 178 ++++++++++++++++++ .../lib/vm-debugger/styles/code-list-view.css | 4 + .../lib/vm-debugger/styles/dropdown-panel.css | 44 +++++ .../src/lib/vm-debugger/vm-debugger.tsx | 16 ++ 14 files changed, 374 insertions(+), 39 deletions(-) delete mode 100644 libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx delete mode 100644 libs/debugger-ui/src/lib/slider/slider.css delete mode 100644 libs/debugger-ui/src/lib/slider/slider.spec.tsx delete mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.css delete mode 100644 libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx create mode 100644 libs/debugger-ui/src/lib/tx-browser/tx-browser.css create mode 100644 libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx create mode 100644 libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css create mode 100644 libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css create mode 100644 libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index 96b2ca6280..03417c5c3d 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom' import { StepManager } from '@remix-project/debugger-ui' var TxBrowser = require('./debuggerUI/TxBrowser') -var StepManagerUI = require('./debuggerUI/StepManager') +// var StepManagerUI = require('./debuggerUI/StepManager') var VmDebugger = require('./debuggerUI/VmDebugger') var toaster = require('../../ui/tooltip') @@ -61,7 +61,7 @@ class DebuggerUI { this.sourceHighlighter = new SourceHighlighter() this.startTxBrowser() - this.stepManager = null + // this.stepManager = null this.statusMessage = '' this.currentReceipt @@ -187,7 +187,7 @@ class DebuggerUI { this.listenToEvents() this.debugger.debug(blockNumber, txNumber, tx, () => { - this.stepManager = new StepManagerUI(this.debugger.step_manager) + // this.stepManager = new StepManagerUI(this.debugger.step_manager) this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) this.renderDebugger() @@ -259,10 +259,10 @@ class DebuggerUI { yo.update(this.debuggerPanelsView, yo`
`) yo.update(this.stepManagerView, yo`
`) if (this.vmDebugger) this.vmDebugger.remove() - if (this.stepManager) this.stepManager.remove() + // if (this.stepManager) this.stepManager.remove() if (this.txBrowser) this.txBrowser.setState({debugging: false}) this.vmDebugger = null - this.stepManager = null + // this.stepManager = null if (this.debugger) delete this.debugger this.event.trigger('traceUnloaded') } diff --git a/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx b/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx deleted file mode 100644 index ed9b896f47..0000000000 --- a/libs/debugger-ui/src/lib/button-navigator/button-navigator.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import ButtonNavigation from './button-navigator'; - -describe(' ButtonNavigation', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/slider/slider.css b/libs/debugger-ui/src/lib/slider/slider.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/debugger-ui/src/lib/slider/slider.spec.tsx b/libs/debugger-ui/src/lib/slider/slider.spec.tsx deleted file mode 100644 index da80d95d45..0000000000 --- a/libs/debugger-ui/src/lib/slider/slider.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import Slider from './slider'; - -describe(' Slider', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.css b/libs/debugger-ui/src/lib/step-manager/step-manager.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx deleted file mode 100644 index bea258b802..0000000000 --- a/libs/debugger-ui/src/lib/step-manager/step-manager.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; - -import StepManager from './step-manager'; - -describe(' StepManager', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx index f8007a7493..018c1d57c3 100644 --- a/libs/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import './step-manager.css' import Slider from '../slider/slider' import ButtonNavigator from '../button-navigator/button-navigator' diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.css b/libs/debugger-ui/src/lib/tx-browser/tx-browser.css new file mode 100644 index 0000000000..3f50123101 --- /dev/null +++ b/libs/debugger-ui/src/lib/tx-browser/tx-browser.css @@ -0,0 +1,24 @@ +.container { + display: flex; + flex-direction: column; +} +.txContainer { + display: flex; + flex-direction: column; +} +.txinput { + width: inherit; + font-size: small; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.txbutton { + width: inherit; +} +.txbutton:hover { +} +.vmargin { + margin-top: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx b/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx new file mode 100644 index 0000000000..a84161c3f1 --- /dev/null +++ b/libs/debugger-ui/src/lib/tx-browser/tx-browser.tsx @@ -0,0 +1,82 @@ +import React, { useState } from 'react' +import './tx-browser.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' + +export const TxBrowser = () => { + const event = new EventManager() + const [state, setState] = useState({ + txNumber: undefined, + debugging: false + }) + + const handleSubmit = () => { + if (state.debugging) { + unload() + } else { + event.trigger('requestDebug', [undefined, state.txNumber]) + } + } + + const unload = () => { + event.trigger('unloadRequested', []) + } + + const updateTxN = (ev) => { + setState(prevState => { + return { + ...prevState, + txNumber: ev.target.value + } + }) + } + + const txInputChanged = (e) => { + // todo check validation of txnumber in the input element, use + // required + // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')" + // pattern="^0[x,X]+[0-9a-fA-F]{22}" + // this.state.txNumberInput.setCustomValidity('') + + setState(prevState => { + return { + ...prevState, + txNumber: e.target.value + } + }) + } + + return ( +
+
+
+ +
+
+ +
+
+ +
+ ) +} + +export default TxBrowser diff --git a/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx new file mode 100644 index 0000000000..a3b6031edc --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -0,0 +1,21 @@ +import React, { useState } from 'react' +import './styles/code-list-view.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' + +export const VmDebugger = ({ vmDebuggerLogic }) => { + const event = new EventManager() + const [state, setState] = useState({ + code: '', + address: '', + itemSelected: null, + + }) + + return ( +
+

Welcome to vmDebugger!

+
+ ) +} + +export default VmDebugger diff --git a/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx new file mode 100644 index 0000000000..97934dd710 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx @@ -0,0 +1,178 @@ +import React, { useState, useRef } from 'react' +import './styles/dropdown-panel.css' +import EventManager from '../../../../../apps/remix-ide/src/lib/events' +import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView' +import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard' + +export const DropdownPanel = ({ name, opts, node }) => { + const event = new EventManager() + const treeView = new TreeView(opts) + const [state, setState] = useState({ + header: '', + json: opts.json, + displayContentOnly: opts.displayContentOnly, + toggleDropdown: false, + message: { + innerText: '', + display: 'none' + }, + dropdownContent: { + innerText: '', + display: 'none' + }, + dropdownRawContent: { + innerText: '', + display: 'none' + }, + title: { + innerText: '', + display: 'none' + }, + showRefreshIcon: false + }) + const dropdownRawEl = useRef(null) + + const handleToggle = () => { + setState(prevState => { + if (prevState.toggleDropdown) event.trigger('hide', []) + else event.trigger('show', []) + return { + ...prevState, + toggleDropdown: !prevState.toggleDropdown + } + }) + } + + const copyClipboard = () => { + return dropdownRawEl.current.innerText ? dropdownRawEl.current.innerText : dropdownRawEl.current.textContent + } + + const message = (message) => { + setState(state => { + return { + ...state, + message: { + innerText: message, + display: message ? 'block' : '' + }, + dropdownRawContent: { + ...state.dropdownRawContent, + display: 'none' + }, + dropdownContent: { + ...state.dropdownContent, + display: 'none' + }, + showRefreshIcon: false + } + }) + } + + const setLoading = () => { + setState(prevState => { + return { + ...prevState, + message: { + innerText: '', + display: 'none' + }, + dropdownRawContent: { + ...prevState.dropdownRawContent, + display: 'none' + }, + dropdownContent: { + ...prevState.dropdownContent, + display: 'none' + }, + showRefreshIcon: true + } + }) + } + + const update = function (data, header) { + setState(prevState => { + return { + ...prevState, + showRefreshIcon: false, + dropdownContent: { + ...prevState.dropdownContent, + display: 'none' + }, + dropdownRawContent: { + innerText: JSON.stringify(data, null, '\t'), + display: 'block' + } + } + }) + if (!this.displayContentOnly) { + // this.view.querySelector('.title i.fa-copy').style.display = 'block' + setState(prevState => { + return { + ...prevState, + title: { + innerText: header || '', + display: 'block' + } + } + }) + } + message('') + if (state.json) { + treeView.update(data) + } + } + + const hide = () => { + setState(prevState => { + return { + ...prevState, + toggleDropdown: false + } + }) + event.trigger('hide', []) + } + + const show = () => { + setState(prevState => { + return { + ...prevState, + toggleDropdown: true + } + }) + event.trigger('show', []) + } + + let content =
Empty
+ if (state.json) { + content = treeView.render({}, null) + } + const title = !state.displayContentOnly ? +
+
+
{name}
+ {copyToClipboard(() => copyClipboard())} +
:
+ + if (state.displayContentOnly) { + setState(prevState => { + return { + ...prevState, + toggleDropdown: true + } + }) + } + + return ( +
+ { title } +
+ +
{node || content }
+
+
+
+
+ ) +} + +export default DropdownPanel \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css b/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css new file mode 100644 index 0000000000..44a5b020a7 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/styles/code-list-view.css @@ -0,0 +1,4 @@ +.instructions { + overflow-y: scroll; + max-height: 130px; +} \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css b/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css new file mode 100644 index 0000000000..4a87d06280 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/styles/dropdown-panel.css @@ -0,0 +1,44 @@ +.title { + display: flex; + align-items: center; + } + .name { + font-weight: bold; + } + .nameDetail { + font-weight: bold; + margin-left: 3px; + } + .icon { + margin-right: 5%; + } + .eyeButton { + margin: 3px; + } + .dropdownpanel { + width: 100%; + word-break: break-word; + } + .dropdownrawcontent { + padding: 2px; + word-break: break-word; + } + .message { + padding: 2px; + word-break: break-word; + } + .refresh { + display: none; + margin-left: 4px; + margin-top: 4px; + animation: spin 2s linear infinite; + } + @-moz-keyframes spin { + to { -moz-transform: rotate(359deg); } + } + @-webkit-keyframes spin { + to { -webkit-transform: rotate(359deg); } + } + @keyframes spin { + to {transform:rotate(359deg);} + } \ No newline at end of file diff --git a/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx new file mode 100644 index 0000000000..67ac48c9e5 --- /dev/null +++ b/libs/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import './vm-debugger.css'; + +export const VmDebugger = ({ vmDebuggerLogic }) => { + const [state, setState] = useState({ + asmCode + }) + + return ( +
+

Welcome to vmDebugger!

+
+ ); +}; + +export default VmDebugger;