debuger UI

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

@@ -17,3 +17,7 @@
 .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)
+  }, [])
+
+
   useEffect(() => {
     return unLoad()
   }, [])
@@ -288,6 +310,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         })
       }
     }, 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">
             <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,10 +380,12 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           </span>
         </div> }
         { state.debugging && <StepManager stepManager={ stepManager } /> }
-        { state.debugging && <VmDebuggerHead vmDebugger={ vmDebugger } /> }
       </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>
+    </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} />