From 9e5410e7c42ec273a1b62d0b48daeaf5872a798f Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 10 Aug 2022 12:24:06 +0200
Subject: [PATCH] grid view for the debugger

---
 apps/debugger/src/app/debugger-api.ts         |  4 ++
 apps/remix-ide/src/app/panels/layout.ts       |  6 ++-
 .../remix-app/components/dragbar/dragbar.tsx  |  3 +-
 .../app/src/lib/remix-app/remix-app.tsx       |  7 ++-
 .../debugger-ui/src/lib/debugger-ui.tsx       | 49 ++++++++++---------
 .../debugger-ui/src/lib/idebugger-api.ts      |  1 +
 .../src/lib/vm-debugger/calldata-panel.tsx    |  4 +-
 .../src/lib/vm-debugger/callstack-panel.tsx   |  4 +-
 .../src/lib/vm-debugger/function-panel.tsx    |  4 +-
 .../src/lib/vm-debugger/global-variables.tsx  |  4 +-
 .../src/lib/vm-debugger/memory-panel.tsx      |  6 ++-
 .../src/lib/vm-debugger/solidity-locals.tsx   |  4 +-
 .../src/lib/vm-debugger/solidity-state.tsx    |  4 +-
 .../src/lib/vm-debugger/stack-panel.tsx       |  4 +-
 .../src/lib/vm-debugger/storage-panel.tsx     |  4 +-
 .../src/lib/vm-debugger/vm-debugger-head.tsx  | 14 +++---
 .../src/lib/vm-debugger/vm-debugger.tsx       | 20 ++++----
 17 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/apps/debugger/src/app/debugger-api.ts b/apps/debugger/src/app/debugger-api.ts
index 3a4a0f5145..a908eafa56 100644
--- a/apps/debugger/src/app/debugger-api.ts
+++ b/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
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 37a0ee6fe4..dc05543c0d 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/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')
+  }
 }
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
index 429e49f638..ecad78451c 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
+++ b/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)
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 8d0aeec020..be753dbc89 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/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>
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 74660fdabe..a731412551 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/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?) => {
diff --git a/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts b/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
index 86476a195d..9c4cf5d88b 100644
--- a/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
+++ b/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 {
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx
index bf9cba0173..a8d5e5a736 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx
index 9b9d9b93e9..d1d40c8dbf 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
index 0511765ec5..d3544f7cbe 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx
index cf34760ae2..2220a01fa2 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/global-variables.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
index 8e6cd8b3be..10931a103a 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
+++ b/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>
   )
 }
 
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
index 15ee3d2bb8..9bd8cadf5c 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
+++ b/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}
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx
index c30569b307..b36c8c7455 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx
+++ b/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} />
       }
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
index 0864ec035f..44ca714fe5 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx
index f7f8ce1714..38dcc90f3b 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
index 612757fe36..df07ccfcec 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
+++ b/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>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
index 5bfad2c186..32c61930c2 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx
+++ b/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>
   )