Merge pull request #2681 from ethereum/walkT

Debuger UI

apps/remix-ide-e2e/src/tests/debugger.test.ts

@@ -205,6 +205,7 @@ module.exports = {
       .clickLaunchIcon('debugger')
       .waitForElementVisible('*[data-id="slider"]')
       .goToVMTraceStep(154)
+      .scrollInto('*[data-id="stepdetail"]')
       .waitForElementContainsText('*[data-id="stepdetail"]', 'vm trace step:\n154', 60000)
   },
 

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -51,7 +51,7 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     this.on('fetchAndCompile', 'sourceVerificationNotAvailable', () => {
       this.call('notification', 'toast', sourceVerificationNotAvailableToastMsg())
     })
-    return <div className={css.debuggerTabView} id='debugView'><DebuggerUI debuggerAPI={this} /></div>
+    return <div className="overflow-hidden px-1" id='debugView'><DebuggerUI debuggerAPI={this} /></div>
   }
 
   showMessage (title, message) {

apps/remix-ide/src/app/tabs/styles/debugger-tab-styles.js

@@ -1,9 +1,6 @@
 var csjs = require('csjs-inject')
 
 const css = csjs`
-  .debuggerTabView {
-    padding: 2%;
-  }
   .debugger {
     margin-bottom: 1%;
   }

libs/remix-ui/debugger-ui/src/lib/debugger-ui.css

@@ -16,4 +16,8 @@
 }
 .validationError {
   overflow-wrap: break-word;
+}
+.debuggerPanels {
+  overflow-y: scroll; 
+  height: fit-content;
 }

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react' // eslint-disable-line
+import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line
 import TxBrowser from './tx-browser/tx-browser' // eslint-disable-line
 import StepManager from './step-manager/step-manager' // eslint-disable-line
 import VmDebugger from './vm-debugger/vm-debugger' // eslint-disable-line
@@ -36,6 +36,28 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     sourceLocationStatus: ''
   })
 
+  const panelsRef = useRef<HTMLDivElement>(null)
+  const debuggerTopRef = useRef(null)
+
+  const handleResize = () => {
+    if (panelsRef.current && debuggerTopRef.current) {
+      panelsRef.current.style.height = (window.innerHeight - debuggerTopRef.current.clientHeight) - debuggerTopRef.current.offsetTop - 7 +'px'
+    }
+  }
+
+  useEffect(() => {
+    handleResize()
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    // TODO: not a good way to wait on the ref doms element to be rendered of course
+    setTimeout(() =>
+      handleResize(), 2000)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [state.debugging, state.isActive])
+
+
   useEffect(() => {
     return unLoad()
   }, [])
@@ -260,34 +282,35 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
 
     setTimeout(async() => {
-    try {
-      await debuggerInstance.debug(blockNumber, txNumber, tx, () => {
-        listenToEvents(debuggerInstance, currentReceipt)
+      try {
+        await debuggerInstance.debug(blockNumber, txNumber, tx, () => {
+          listenToEvents(debuggerInstance, currentReceipt)
+          setState(prevState => {
+            return {
+              ...prevState,
+              blockNumber,
+              txNumber,
+              debugging: true,
+              currentReceipt,
+              currentBlock,
+              currentTransaction,
+              debugger: debuggerInstance,
+              toastMessage: `debugging ${txNumber}`,
+              validationError: ''
+            }
+          })
+        })
+      } catch (error) {
+        unLoad()
         setState(prevState => {
           return {
             ...prevState,
-            blockNumber,
-            txNumber,
-            debugging: true,
-            currentReceipt,
-            currentBlock,
-            currentTransaction,
-            debugger: debuggerInstance,
-            toastMessage: `debugging ${txNumber}`,
-            validationError: ''
+            validationError: error.message || error
           }
         })
-      })
-    } catch (error) {
-      unLoad()
-      setState(prevState => {
-        return {
-          ...prevState,
-          validationError: error.message || error
-        }
-      })
-    }
-  }, 300)
+      }
+    }, 300)
+    handleResize()
   }
 
   const debug = (txHash, web3?) => {
@@ -315,17 +338,18 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
     registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null
   }
+
   const vmDebugger = {
     registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
     triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
   }
+
   return (
     <div>
       <Toaster message={state.toastMessage} />
-      <div className="px-2">
+      <div className="px-2" ref={debuggerTopRef}>
         <div>
-          <p className="my-2 debuggerLabel">Debugger Configuration</p>
-          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
+          <div className="mb-2 debuggerConfig custom-control custom-checkbox" title="Using Generated Sources lets you step into compiler outputs while debugging.">
             <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
                 return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
@@ -333,7 +357,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
             }} type="checkbox" title="Debug with generated sources" />
             <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (Solidity {'>='} v0.7.2)</label>
           </div>
-          { state.isLocalNodeUsed && <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
+          { state.isLocalNodeUsed && <div className="mb-2 debuggerConfig custom-control custom-checkbox">
             <input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
               setState(prevState => {
                 return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
@@ -356,9 +380,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           </span>
         </div> }
         { state.debugging && <StepManager stepManager={ stepManager } /> }
+      </div>
+      <div className="debuggerPanels" ref={panelsRef}>
         { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
+        { state.debugging && <VmDebugger vmDebugger={ vmDebugger } currentBlock={ state.currentBlock } currentReceipt={ state.currentReceipt } currentTransaction={ state.currentTransaction } /> }
       </div>
-      { state.debugging && <VmDebugger vmDebugger={ vmDebugger } currentBlock={ state.currentBlock } currentReceipt={ state.currentReceipt } currentTransaction={ state.currentTransaction } /> }
     </div>
   )
 }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx

@@ -98,7 +98,7 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   }, [registerEvent])
 
   return (
-    <div id='vmheadView' className="mt-1 px-0">
+    <div id='vmheadView' className="mt-1 px-2">
       <div className='d-flex flex-column'>
         <div className='w-100'>
           <FunctionPanel data={functionPanel} />

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -27,8 +27,8 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
   return (
     <header className='d-flex flex-column'>
       <div className="swapitHeader px-3 pt-2 pb-0 d-flex flex-row">
-        <h6 className="mb-2" data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
-        <div className="mt-2 d-flex flex-row">
+        <h6 className="mb-3" data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
+        <div className="d-flex flex-row">
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (<i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check" title="Maintained by Remix"></i>)}
           </div>