grid view for the debugger

apps/debugger/src/app/debugger-api.ts

@@ -154,6 +154,10 @@ export const DebuggerApiMixin = (Base) => class extends Base {
   }
 
   showMessage (title: string, message: string) {}
+
+  onStartDebugging () {
+    this.call('layout', 'maximiseSidePanel')
+  }
 }
 
 export class CompilerAbstract implements CompilationOutput { // this is a subset of /remix-ide/src/app/compiler/compiler-abstract.js

apps/remix-ide/src/app/panels/layout.ts

@@ -6,7 +6,7 @@ import { QueryParams } from '@remix-project/remix-lib'
 const profile: Profile = {
   name: 'layout',
   description: 'layout',
-  methods: ['minimize']
+  methods: ['minimize', 'maximiseSidePanel']
 }
 
 interface panelState {
@@ -92,4 +92,8 @@ export class Layout extends Plugin {
     this.panels[name].minimized = minimized
     this.event.emit('change', null)
   }
+
+  maximiseSidePanel () {
+    this.event.emit('maximisesidepanel')
+  }
 }

libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx

@@ -7,6 +7,7 @@ interface IRemixDragBarUi {
   setHideStatus: (hide: boolean) => void;
   hidden: boolean
   minWidth: number
+  resizeTo?: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
@@ -17,7 +18,7 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
-  }, [props.hidden, offset])
+  }, [props.hidden, offset, props.resizeTo])
 
   const handleResize = () => {
     setOffSet(props.refObject.current.offsetLeft)

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

@@ -17,6 +17,7 @@ interface IRemixAppUi {
 const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
+  const [resizeSidePanel, setResizeSidePanel] = useState<number>(0)
   const sidePanelRef = useRef(null)
 
   useEffect(() => {
@@ -48,6 +49,10 @@ const RemixApp = (props: IRemixAppUi) => {
         setHideSidePanel(true)
       }, 1000)
     })
+
+    props.app.layout.events.on('maximisesidepanel', () => {
+      setResizeSidePanel(600)
+    })
   }
 
   const value = {
@@ -66,7 +71,7 @@ const RemixApp = (props: IRemixAppUi) => {
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
         <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light">{props.app.menuicons.render()}</div>
         <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>{props.app.sidePanel.render()}</div>
-        <DragBar minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
+        <DragBar resizeTo={resizeSidePanel} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>

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

@@ -282,35 +282,36 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
 
     setTimeout(async() => {
-      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()
+    try {
+      debuggerModule.onStartDebugging()
+      await debuggerInstance.debug(blockNumber, txNumber, tx, () => {
+        listenToEvents(debuggerInstance, currentReceipt)
         setState(prevState => {
           return {
             ...prevState,
-            validationError: error.message || error
+            blockNumber,
+            txNumber,
+            debugging: true,
+            currentReceipt,
+            currentBlock,
+            currentTransaction,
+            debugger: debuggerInstance,
+            toastMessage: `debugging ${txNumber}`,
+            validationError: ''
           }
         })
-      }
-    }, 300)
-    handleResize()
+      })
+    } catch (error) {
+      unLoad()
+      setState(prevState => {
+        return {
+          ...prevState,
+          validationError: error.message || error
+        }
+      })
+    }
+  }, 300)
+  handleResize()
   }
 
   const debug = (txHash, web3?) => {

libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts

@@ -63,6 +63,7 @@ export interface IDebuggerApi {
     getDebugWeb3: () => any // returns an instance of web3.js, if applicable (mainet, goerli, ...) it returns a reference to a node from devops (so we are sure debug endpoint is available)
     web3: () => any // returns an instance of web3.js
     showMessage (title: string, message: string): void
+    onStartDebugging (): void // called when debug starts
 }
 
 export interface DebuggerUIProps {

libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx

@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const CalldataPanel = ({ calldata }) => {
+export const CalldataPanel = ({ calldata, className }) => {
   return (
-    <div id='calldatapanel'>
+    <div id='calldatapanel' className={className}>
       <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx

@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const CallstackPanel = ({ calldata }) => {
+export const CallstackPanel = ({ calldata, className }) => {
   return (
-    <div id='callstackpanel'>
+    <div id='callstackpanel' className={className}>
       <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import { default as deepequal } from 'deep-equal' // eslint-disable-line
 
-export const FunctionPanel = ({ data }) => {
+export const FunctionPanel = ({ data, className }) => {
   const [calldata, setCalldata] = useState(null)
 
   useEffect(() => {
@@ -10,7 +10,7 @@ export const FunctionPanel = ({ data }) => {
   }, [data])
 
   return (
-    <div id='FunctionPanel' data-id='functionPanel'>
+    <div id='FunctionPanel' className={className} data-id='functionPanel'>
       <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import { BN } from 'ethereumjs-util'
 import Web3 from 'web3'
 
-export const GlobalVariables = ({ block, receipt, tx }) => {
+export const GlobalVariables = ({ block, receipt, tx, className }) => {
   // see https://docs.soliditylang.org/en/latest/units-and-global-variables.html#block-and-transaction-properties
   const globals = {
     'block.chainid': tx.chainId,
@@ -22,7 +22,7 @@ export const GlobalVariables = ({ block, receipt, tx }) => {
   }
 
   return (
-    <div id='globalvariable' data-id='globalvariable'>
+    <div id='globalvariable' data-id='globalvariable' className={className}>
       <DropdownPanel hexHighlight={false} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Global Variables' calldata={globals || {}} />
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx

@@ -1,9 +1,11 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const MemoryPanel = ({ calldata }) => {
+export const MemoryPanel = ({ calldata, className}) => {
   return (
-    <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Memory' calldata={calldata || {}} />
+    <div className={className} >
+      <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Memory' calldata={calldata || {}} />
+    </div>
   )
 }
 

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import { extractData } from '../../utils/solidityTypeFormatter' // eslint-disable-line
 import { ExtractData } from '../../types' // eslint-disable-line
 
-export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) => {
+export const SolidityLocals = ({ data, message, registerEvent, triggerEvent, className }) => {
   const [calldata, setCalldata] = useState(null)
 
   useEffect(() => {
@@ -43,7 +43,7 @@ export const SolidityLocals = ({ data, message, registerEvent, triggerEvent }) =
   }
 
   return (
-    <div id='soliditylocals' data-id="solidityLocals">
+    <div id='soliditylocals' data-id="solidityLocals" className="col">
       <DropdownPanel
         dropdownName='Solidity Locals'
         dropdownMessage={message}

libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx

@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 import { extractData } from '../../utils/solidityTypeFormatter'
 import { ExtractData } from '../../types' // eslint-disable-line
 
-export const SolidityState = ({ calldata, message }) => {
+export const SolidityState = ({ calldata, message, className }) => {
   const formatSelf = (key: string, data: ExtractData) => {
     try {
       let color = 'var(--primary)'
@@ -38,7 +38,7 @@ export const SolidityState = ({ calldata, message }) => {
   }
 
   return (
-    <div id='soliditystate' data-id='soliditystate'>
+    <div id='soliditystate' data-id='soliditystate' className={className}>
       {
         <DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} />
       }

libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx

@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StackPanel = ({ calldata }) => {
+export const StackPanel = ({ calldata, className }) => {
   return (
-    <div id='stackpanel'>
+    <div id='stackpanel' className={className}>
       <DropdownPanel hexHighlight={true} bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Stack' calldata={calldata || {}} />
     </div>
   )

libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx

@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StoragePanel = ({ calldata, header }) => {
+export const StoragePanel = ({ calldata, header, className }) => {
   return (
-    <div id='storagepanel'>
+    <div id='storagepanel' className={className}>
       <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
     </div>
   )

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

@@ -100,13 +100,15 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   return (
     <div id='vmheadView' className="mt-1 px-2">
       <div className='d-flex flex-column'>
-        <div className='w-100'>
-          <FunctionPanel data={functionPanel} />
-          <SolidityLocals data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
-          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
+        <div className='w-100 row align-items-center'>
+          <FunctionPanel className="col" data={functionPanel} />
+          <SolidityLocals className="col"  data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
+          <SolidityState className="col" calldata={solidityState.calldata} message={solidityState.message} />
+        </div>
+        <div className='w-100 row align-items-center'>
+          <div className='col'><CodeListView registerEvent={registerEvent} /></div>
+          <div className='col'><StepDetail stepDetail={stepDetail} /></div>
         </div>
-        <div className='w-100'><CodeListView registerEvent={registerEvent} /></div>
-        <div className='w-100'><StepDetail stepDetail={stepDetail} /></div>
       </div>
     </div>
   )

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

@@ -53,15 +53,17 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
 
   return (
     <div id='vmdebugger' className="px-2">
-      <div>
-        <StackPanel calldata={stackPanel} />
-        <MemoryPanel calldata={memoryPanel} />
-        <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
-        <CallstackPanel calldata={callStackPanel} />
-        <CalldataPanel calldata={calldataPanel} />
-        <GlobalVariables block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
-        <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
-        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
+      <div className='row align-items-center'>
+        <StackPanel className="col" calldata={stackPanel} />
+        <MemoryPanel className="col" calldata={memoryPanel} />
+        <StoragePanel className="col" calldata={storagePanel.calldata} header={storagePanel.header} />
+        <CallstackPanel className="col" calldata={callStackPanel} />
+        <CalldataPanel className="col" calldata={calldataPanel} />
+        <GlobalVariables className="col" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
+        <div className='col align-items-center'>
+          <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
+          <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
+        </div>
       </div>
     </div>
   )