From bb3c6d36f4e267f3f1b09c88a3b9f95195743308 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 10 Aug 2022 12:24:06 +0200
Subject: [PATCH 01/20] 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>
   )

From 3b8cf88ebe87d6976a1867619ec3f58031c50d86 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 10:44:59 +0200
Subject: [PATCH 02/20] fix UI grid

---
 .../src/lib/vm-debugger/solidity-locals.tsx   |  2 +-
 .../src/lib/vm-debugger/vm-debugger-head.tsx  | 20 +++++++---------
 .../src/lib/vm-debugger/vm-debugger.tsx       | 24 +++++++++----------
 3 files changed, 22 insertions(+), 24 deletions(-)

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 9bd8cadf5c..e201255520 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
@@ -43,7 +43,7 @@ export const SolidityLocals = ({ data, message, registerEvent, triggerEvent, cla
   }
 
   return (
-    <div id='soliditylocals' data-id="solidityLocals" className="col">
+    <div id='soliditylocals' data-id="solidityLocals">
       <DropdownPanel
         dropdownName='Solidity Locals'
         dropdownMessage={message}
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 df07ccfcec..47f7b18631 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
@@ -98,17 +98,15 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   }, [registerEvent])
 
   return (
-    <div id='vmheadView' className="mt-1 px-2">
-      <div className='d-flex flex-column'>
-        <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 id='vmheadView' className="mt-1 px-2 d-flex">
+      <div className='d-flex flex-column pr-2' style={{ flex:1 }}>
+        <FunctionPanel className="" data={functionPanel} />
+        <SolidityLocals className=""  data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
+        <SolidityState className="" calldata={solidityState.calldata} message={solidityState.message} />
+      </div>
+      <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
+        <CodeListView registerEvent={registerEvent} />
+        <StepDetail stepDetail={stepDetail} />
       </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 32c61930c2..31d04d94f8 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
@@ -52,18 +52,18 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
   }, [registerEvent])
 
   return (
-    <div id='vmdebugger' className="px-2">
-      <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 id='vmdebugger' className="d-flex">
+      <div className='d-flex flex-column pr-2' style={{ flex:1 }}>
+        <CallstackPanel className="" calldata={callStackPanel} />
+        <StackPanel className="" calldata={stackPanel} />
+        <MemoryPanel className="" calldata={memoryPanel} />
+        <StoragePanel className="" calldata={storagePanel.calldata} header={storagePanel.header} />        
+      </div>
+      <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
+        <CalldataPanel className="" calldata={calldataPanel} />
+        <GlobalVariables className="" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
+        <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
+        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
       </div>
     </div>
   )

From d21d80e23f268acbd444203155150b6f03e4ca66 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 11:37:51 +0200
Subject: [PATCH 03/20] resize when debug starts

---
 .../src/lib/remix-app/components/dragbar/dragbar.tsx | 12 ++++++++++--
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx    | 10 ++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

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 ecad78451c..61a43a32eb 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,7 +7,7 @@ interface IRemixDragBarUi {
   setHideStatus: (hide: boolean) => void;
   hidden: boolean
   minWidth: number
-  resizeTo?: number
+  maximiseTrigger: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
@@ -18,7 +18,15 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
-  }, [props.hidden, offset, props.resizeTo])
+  }, [props.hidden, offset])
+
+  useEffect(() => {
+    if (props.maximiseTrigger > 0) {
+      const width =  0.4 * window.innerWidth
+      props.refObject.current.style.width = width + 'px'
+      setDragBarPosX(offset + width)  
+    }
+  }, [props.maximiseTrigger])
 
   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 be753dbc89..df4c8cf944 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,7 +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 [maximiseTrigger, setMaximiseTrigger] = useState<number>(0)
   const sidePanelRef = useRef(null)
 
   useEffect(() => {
@@ -50,8 +50,10 @@ const RemixApp = (props: IRemixAppUi) => {
       }, 1000)
     })
 
-    props.app.layout.events.on('maximisesidepanel', () => {
-      setResizeSidePanel(600)
+    props.app.layout.event.on('maximisesidepanel', () => {
+      setMaximiseTrigger(prev => {
+        return prev + 1
+      })
     })
   }
 
@@ -71,7 +73,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 resizeTo={resizeSidePanel} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
+        <DragBar maximiseTrigger={maximiseTrigger} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>

From c2d5f50d7416986f599b135c64f54fccd7890109 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 11:38:10 +0200
Subject: [PATCH 04/20] panel is open by default

---
 .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
index 207e99ea74..468dbe744a 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
@@ -54,7 +54,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   }
   const [state, setState] = useState({
     header: '',
-    toggleDropdown: false,
+    toggleDropdown: true,
     message: {
       innerText: 'No data available.',
       display: 'block'
@@ -163,7 +163,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
           display: isEmpty ? 'block' : 'none'
         },
         updating: false,
-        toggleDropdown: !isEmpty,
+        toggleDropdown: true,
         data: calldata
       }
     })

From 5b9d3f1503804fe84220a2f3a9ec965b8f4cd0da Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 11:46:29 +0200
Subject: [PATCH 05/20] reset side panel width when stops debugging

---
 apps/debugger/src/app/debugger-api.ts                    | 4 ++++
 apps/debugger/src/app/debugger.ts                        | 2 ++
 apps/remix-ide/src/app/panels/layout.ts                  | 6 +++++-
 .../app/src/lib/remix-app/components/dragbar/dragbar.tsx | 8 ++++++++
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx        | 9 ++++++++-
 libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx        | 1 +
 libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts       | 1 +
 7 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/debugger/src/app/debugger-api.ts b/apps/debugger/src/app/debugger-api.ts
index a908eafa56..838a2eae23 100644
--- a/apps/debugger/src/app/debugger-api.ts
+++ b/apps/debugger/src/app/debugger-api.ts
@@ -158,6 +158,10 @@ export const DebuggerApiMixin = (Base) => class extends Base {
   onStartDebugging () {
     this.call('layout', 'maximiseSidePanel')
   }
+
+  onStopDebugging () {
+    this.call('layout', 'resetSidePanel')
+  }  
 }
 
 export class CompilerAbstract implements CompilationOutput { // this is a subset of /remix-ide/src/app/compiler/compiler-abstract.js
diff --git a/apps/debugger/src/app/debugger.ts b/apps/debugger/src/app/debugger.ts
index 6255a52205..102b99f3f9 100644
--- a/apps/debugger/src/app/debugger.ts
+++ b/apps/debugger/src/app/debugger.ts
@@ -26,5 +26,7 @@ export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
   setFile: (path: string, content: string) => Promise<void>
   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
+  onStartDebugging: () => void // called when debug starts
+  onStopDebugging: () => void // called when debug starts
 }
 
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index dc05543c0d..2f93c719bd 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', 'maximiseSidePanel']
+  methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel']
 }
 
 interface panelState {
@@ -96,4 +96,8 @@ export class Layout extends Plugin {
   maximiseSidePanel () {
     this.event.emit('maximisesidepanel')
   }
+
+  resetSidePanel () {
+    this.event.emit('resetsidepanel')
+  }
 }
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 61a43a32eb..f63aea276a 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
@@ -8,6 +8,7 @@ interface IRemixDragBarUi {
   hidden: boolean
   minWidth: number
   maximiseTrigger: number
+  resetTrigger: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
@@ -28,6 +29,13 @@ const DragBar = (props: IRemixDragBarUi) => {
     }
   }, [props.maximiseTrigger])
 
+  useEffect(() => {
+    if (props.maximiseTrigger > 0) {
+      props.refObject.current.style.width = props.minWidth + 'px'
+      setDragBarPosX(offset + props.minWidth)  
+    }
+  }, [props.resetTrigger])
+
   const handleResize = () => {
     setOffSet(props.refObject.current.offsetLeft)
     setDragBarPosX(props.refObject.current.offsetLeft + props.refObject.current.offsetWidth)
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 df4c8cf944..21b6da8ba7 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
@@ -18,6 +18,7 @@ const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const [maximiseTrigger, setMaximiseTrigger] = useState<number>(0)
+  const [resetTrigger, setResetTrigger] = useState<number>(0)
   const sidePanelRef = useRef(null)
 
   useEffect(() => {
@@ -55,6 +56,12 @@ const RemixApp = (props: IRemixAppUi) => {
         return prev + 1
       })
     })
+
+    props.app.layout.event.on('resetsidepanel', () => {
+      setResetTrigger(prev => {
+        return prev + 1
+      })
+    })
   }
 
   const value = {
@@ -73,7 +80,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 maximiseTrigger={maximiseTrigger} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
+        <DragBar resetTrigger={resetTrigger} maximiseTrigger={maximiseTrigger} 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 a731412551..c9ac0749b1 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -191,6 +191,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
   }
 
   const unLoad = () => {
+    debuggerModule.onStopDebugging()
     if (state.debugger) state.debugger.unload()
     setState(prevState => {
       return {
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 9c4cf5d88b..e6deeb297d 100644
--- a/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
+++ b/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
@@ -64,6 +64,7 @@ export interface IDebuggerApi {
     web3: () => any // returns an instance of web3.js
     showMessage (title: string, message: string): void
     onStartDebugging (): void // called when debug starts
+    onStopDebugging (): void // called when debug stops
 }
 
 export interface DebuggerUIProps {

From 2cea779c93a0c3f3848f25fbcf1eb8705950dc96 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 16:25:39 +0200
Subject: [PATCH 06/20] remove uneeded

---
 apps/debugger/src/app/debugger.ts                  | 2 --
 libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts | 2 --
 2 files changed, 4 deletions(-)

diff --git a/apps/debugger/src/app/debugger.ts b/apps/debugger/src/app/debugger.ts
index 102b99f3f9..50f1208340 100644
--- a/apps/debugger/src/app/debugger.ts
+++ b/apps/debugger/src/app/debugger.ts
@@ -12,8 +12,6 @@ export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
   }
 
   offsetToLineColumnConverter: IDebuggerApi['offsetToLineColumnConverter']
-  debugHash: string
-  debugHashRequest: number
   removeHighlights: boolean
   onBreakpointCleared: (listener: onBreakpointClearedListener) => void
   onBreakpointAdded: (listener: onBreakpointAddedListener) => void
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 e6deeb297d..bfc2925509 100644
--- a/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
+++ b/libs/remix-ui/debugger-ui/src/lib/idebugger-api.ts
@@ -46,8 +46,6 @@ export type onEnvChangedListener = (provider: string) => void
 
 export interface IDebuggerApi {
     offsetToLineColumnConverter: { offsetToLineColumn: (sourceLocation: RawLocation, file: number, contents: Sources, asts: Asts) => Promise<LineColumnLocation> }
-    debugHash: string
-    debugHashRequest: number
     removeHighlights: boolean
     onRemoveHighlights: (listener: VoidFunction) => void
     onDebugRequested: (listener: onDebugRequested) => void

From b47f1456e18ee31e8bad8c6d171661c3f51ad03b Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 17:15:52 +0200
Subject: [PATCH 07/20] remove uneeded debugHash

---
 apps/debugger/src/app/debugger-api.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/debugger/src/app/debugger-api.ts b/apps/debugger/src/app/debugger-api.ts
index 838a2eae23..aa5cf58a79 100644
--- a/apps/debugger/src/app/debugger-api.ts
+++ b/apps/debugger/src/app/debugger-api.ts
@@ -8,8 +8,6 @@ export const DebuggerApiMixin = (Base) => class extends Base {
   initialWeb3
 
   initDebuggerApi () {
-    this.debugHash = null
-        
     const self = this
     this.web3Provider = {
       sendAsync (payload, callback) {
@@ -132,7 +130,6 @@ export const DebuggerApiMixin = (Base) => class extends Base {
     } catch (e) {
       console.error(e)
     }
-    this.debugHash = hash
     if (web3) this._web3 = web3
     else this._web3 = this.initialWeb3
     remixDebug.init.extendWeb3(this._web3)
@@ -161,7 +158,7 @@ export const DebuggerApiMixin = (Base) => class extends Base {
 
   onStopDebugging () {
     this.call('layout', 'resetSidePanel')
-  }  
+  }
 }
 
 export class CompilerAbstract implements CompilationOutput { // this is a subset of /remix-ide/src/app/compiler/compiler-abstract.js

From 261f4fb28900d1aec2beaefaab1877c098e00f25 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 17:16:40 +0200
Subject: [PATCH 08/20] resize when switching out of the debugger

---
 .../src/app/components/side-panel.tsx          |  2 +-
 apps/remix-ide/src/app/panels/layout.ts        | 18 ++++++++++++++++--
 .../remix-app/components/dragbar/dragbar.tsx   | 10 ++++++----
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide/src/app/components/side-panel.tsx b/apps/remix-ide/src/app/components/side-panel.tsx
index 54e56dd210..3558fc4d86 100644
--- a/apps/remix-ide/src/app/components/side-panel.tsx
+++ b/apps/remix-ide/src/app/components/side-panel.tsx
@@ -12,7 +12,7 @@ const sidePanel = {
   displayName: 'Side Panel',
   description: 'Remix IDE side panel',
   version: packageJson.version,
-  methods: ['addView', 'removeView']
+  methods: ['addView', 'removeView', 'currentFocus']
 }
 
 export class SidePanel extends AbstractPanel {
diff --git a/apps/remix-ide/src/app/panels/layout.ts b/apps/remix-ide/src/app/panels/layout.ts
index 2f93c719bd..a88fb97584 100644
--- a/apps/remix-ide/src/app/panels/layout.ts
+++ b/apps/remix-ide/src/app/panels/layout.ts
@@ -30,8 +30,10 @@ export type PanelConfiguration = {
 export class Layout extends Plugin {
   event: any
   panels: panels
+  maximised: { [key: string]: boolean }
   constructor () {
     super(profile)
+    this.maximised = {}
     this.event = new EventEmitter()
   }
 
@@ -64,6 +66,14 @@ export class Layout extends Plugin {
           break
       }
     })
+    this.on('sidePanel', 'focusChanged', async (name) => {
+      const current = await this.call('sidePanel', 'currentFocus')
+      if (this.maximised[current]) {
+        this.event.emit('maximisesidepanel')
+      } else {
+        this.event.emit('resetsidepanel')
+      }
+    })
     document.addEventListener('keypress', e => {
       if (e.shiftKey && e.ctrlKey) {
         if (e.code === 'KeyF') {
@@ -93,11 +103,15 @@ export class Layout extends Plugin {
     this.event.emit('change', null)
   }
 
-  maximiseSidePanel () {
+  async maximiseSidePanel () {
     this.event.emit('maximisesidepanel')
+    const current = await this.call('sidePanel', 'currentFocus')
+    this.maximised[current] = true
   }
 
-  resetSidePanel () {
+  async resetSidePanel () {
     this.event.emit('resetsidepanel')
+    const current = await this.call('sidePanel', 'currentFocus')
+    this.maximised[current] = false
   }
 }
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 f63aea276a..952ea8ee48 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
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import Draggable from 'react-draggable'
 import './dragbar.css'
 
@@ -15,6 +15,7 @@ const DragBar = (props: IRemixDragBarUi) => {
   const [dragState, setDragState] = useState<boolean>(false)
   const [dragBarPosX, setDragBarPosX] = useState<number>(0)
   const [offset, setOffSet] = useState<number>(0)
+  const initialWidth = useRef<number>(props.minWidth)
   const nodeRef = React.useRef(null) // fix for strictmode
 
   useEffect(() => {
@@ -22,8 +23,9 @@ const DragBar = (props: IRemixDragBarUi) => {
   }, [props.hidden, offset])
 
   useEffect(() => {
+    initialWidth.current = props.refObject.current.clientWidth
     if (props.maximiseTrigger > 0) {
-      const width =  0.4 * window.innerWidth
+      const width =  0.4 * window.innerWidth      
       props.refObject.current.style.width = width + 'px'
       setDragBarPosX(offset + width)  
     }
@@ -31,8 +33,8 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     if (props.maximiseTrigger > 0) {
-      props.refObject.current.style.width = props.minWidth + 'px'
-      setDragBarPosX(offset + props.minWidth)  
+      props.refObject.current.style.width = initialWidth.current + 'px'
+      setDragBarPosX(offset + initialWidth.current)  
     }
   }, [props.resetTrigger])
 

From d8a6280855a403deb24e9f153482abb33f3f7b44 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Mon, 15 Aug 2022 10:02:29 +0200
Subject: [PATCH 09/20] debugger redesign improvements

---
 .../src/tests/solidityUnittests.test.ts       |  1 -
 .../src/lib/vm-debugger/assembly-items.tsx    |  5 +++--
 .../src/lib/vm-debugger/calldata-panel.tsx    |  2 +-
 .../src/lib/vm-debugger/code-list-view.tsx    |  4 ++--
 .../src/lib/vm-debugger/dropdown-panel.tsx    |  4 ++--
 .../lib/vm-debugger/full-storages-changes.tsx |  4 ++--
 .../src/lib/vm-debugger/solidity-locals.tsx   |  4 ++--
 .../src/lib/vm-debugger/step-detail.tsx       |  4 ++--
 .../src/lib/vm-debugger/vm-debugger-head.tsx  | 10 +++++-----
 .../src/lib/vm-debugger/vm-debugger.tsx       | 20 +++++++++----------
 libs/remix-ui/debugger-ui/src/types/index.ts  |  1 +
 11 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/solidityUnittests.test.ts b/apps/remix-ide-e2e/src/tests/solidityUnittests.test.ts
index a62a2fe932..8c8a65b7f6 100644
--- a/apps/remix-ide-e2e/src/tests/solidityUnittests.test.ts
+++ b/apps/remix-ide-e2e/src/tests/solidityUnittests.test.ts
@@ -287,7 +287,6 @@ module.exports = {
       .waitForElementContainsText('*[data-id="sidePanelSwapitTitle"]', 'DEBUGGER', 60000)
       .waitForElementContainsText('*[data-id="functionPanel"]', 'checkWinningProposalFailed()', 60000)
       .waitForElementVisible('*[data-id="dropdownPanelSolidityLocals"]').pause(1000)
-      .click('*[data-id="dropdownPanelSolidityLocals"]')
       .waitForElementContainsText('*[data-id="solidityLocals"]', 'no locals', 60000)
       .goToVMTraceStep(316)
       .waitForElementContainsText('*[data-id="functionPanel"]', 'checkWinningProposalFailed()', 60000)
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx
index b32b229f0b..815681529b 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx
@@ -122,9 +122,10 @@ export const AssemblyItems = ({ registerEvent }) => {
   }
 
   return (
-    <div className="border rounded px-1 mt-1 bg-light">
+    <div className="h-100 border rounded px-1 mt-1 bg-light">
       <div className='dropdownpanel'>
-        <div className='dropdowncontent'>
+        <div className='dropdowncontent pb-2'>
+          { assemblyItems.display.length == 0 && <div>No data available</div> }
           <div className="pl-2 my-1 small instructions" data-id="asmitems" id='asmitems' ref={asmItemsRef}>
             {
               assemblyItems.display.map((item, i) => {
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 a8d5e5a736..c33dce048b 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,7 +1,7 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const CalldataPanel = ({ calldata, className }) => {
+export const CalldataPanel = ({ calldata, className = "" }) => {
   return (
     <div id='calldatapanel' className={className}>
       <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx
index 59df67d5ee..657f5b6f07 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react' // eslint-disable-line
 import AssemblyItems from './assembly-items' // eslint-disable-line
 
-export const CodeListView = ({ registerEvent }) => {
+export const CodeListView = ({ registerEvent, className = ""}) => {
   return (
-    <div id='asmcodes'>
+    <div className={className} id='asmcodes'>
       <AssemblyItems registerEvent={registerEvent} />
     </div>
   )
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
index 468dbe744a..5b1b5115cb 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
@@ -194,7 +194,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   const uniquePanelName = dropdownName.split(' ').join('')
 
   return (
-    <div className="border rounded px-1 mt-1 bg-light">
+    <div className={props.className + " border rounded px-1 mt-1 bg-light"}>
       <div className="py-0 px-1 title" style={headStyle}>
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
         <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span>
@@ -202,7 +202,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
       </div>
       <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
         <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
-        <div className='dropdowncontent' style={{ display: state.dropdownContent.display, ...bodyStyle }}>
+        <div className='dropdowncontent pb-2' style={{ display: state.dropdownContent.display, ...bodyStyle }}>
           {
             state.data &&
             <TreeView id="treeView">
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
index c7aa2e14da..acfe871891 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import { DropdownPanel } from './dropdown-panel' // eslint-disable-line
 
-export const FullStoragesChanges = ({ calldata }) => {
+export const FullStoragesChanges = ({ calldata, className = "" }) => {
   return (
-    <div id='fullstorageschangespanel'>
+    <div className={className} id='fullstorageschangespanel'>
       <DropdownPanel dropdownName='Full Storage Changes' 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 e201255520..51913796af 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, className }) => {
+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, cla
   }
 
   return (
-    <div id='soliditylocals' data-id="solidityLocals">
+    <div className={className} id='soliditylocals' data-id="solidityLocals">
       <DropdownPanel
         dropdownName='Solidity Locals'
         dropdownMessage={message}
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
index f4669baebc..2bb6fe86d0 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
@@ -1,9 +1,9 @@
 import React from 'react' // eslint-disable-line
 import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
-export const StepDetail = ({ stepDetail }) => {
+export const StepDetail = ({ stepDetail, className = "" }) => {
   return (
-    <div id='stepdetail' data-id='stepdetail'>
+    <div className={className} id='stepdetail' data-id='stepdetail'>
       <DropdownPanel hexHighlight={false} dropdownName='Step details' calldata={stepDetail || {}} />
     </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 47f7b18631..0c96ccfcb8 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,13 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
   return (
     <div id='vmheadView' className="mt-1 px-2 d-flex">
       <div className='d-flex flex-column pr-2' style={{ flex:1 }}>
-        <FunctionPanel className="" data={functionPanel} />
-        <SolidityLocals className=""  data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
-        <SolidityState className="" calldata={solidityState.calldata} message={solidityState.message} />
+        <FunctionPanel className="pb-1" data={functionPanel} />
+        <SolidityLocals className="pb-1"  data={solidityLocals.calldata} message={solidityLocals.message} registerEvent={registerEvent} triggerEvent={triggerEvent} />
+        <CodeListView className="pb-2 flex-grow-1" registerEvent={registerEvent} />
       </div>
       <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
-        <CodeListView registerEvent={registerEvent} />
-        <StepDetail stepDetail={stepDetail} />
+        <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />     
+        <StepDetail className="pb-1" stepDetail={stepDetail} />
       </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 31d04d94f8..9ef337123b 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,17 +53,17 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
 
   return (
     <div id='vmdebugger' className="d-flex">
-      <div className='d-flex flex-column pr-2' style={{ flex:1 }}>
-        <CallstackPanel className="" calldata={callStackPanel} />
-        <StackPanel className="" calldata={stackPanel} />
-        <MemoryPanel className="" calldata={memoryPanel} />
-        <StoragePanel className="" calldata={storagePanel.calldata} header={storagePanel.header} />        
+      <div className='d-flex flex-column pr-2' style={{ flex: 1 }}>
+        <CallstackPanel className="pb-1" calldata={callStackPanel} />
+        <StackPanel className="pb-1" calldata={stackPanel} />
+        <MemoryPanel className="pb-1" calldata={memoryPanel} />
+        <StoragePanel className="pb-1" calldata={storagePanel.calldata} header={storagePanel.header} />
       </div>
-      <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
-        <CalldataPanel className="" calldata={calldataPanel} />
-        <GlobalVariables className="" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
-        <ReturnValuesPanel dropdownName='Return Value' calldata={returnValuesPanel || {}} />
-        <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
+      <div className='d-flex flex-column pl-2' style={{ flex: 1 }}>
+        <CalldataPanel className="pb-1" calldata={calldataPanel} />
+        <GlobalVariables className="pb-1" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
+        <ReturnValuesPanel className="pb-1" dropdownName='Return Value' calldata={returnValuesPanel || {}} />
+        <FullStoragesChangesPanel className="pb-1" calldata={fullStoragesChangesPanel} />
       </div>
     </div>
   )
diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts
index 5168102bb5..a319e354be 100644
--- a/libs/remix-ui/debugger-ui/src/types/index.ts
+++ b/libs/remix-ui/debugger-ui/src/types/index.ts
@@ -20,6 +20,7 @@ export type RegisterEventType = (type: string, listener: any) => void // listene
 export type TriggerEventType = (type: string, payload: Array<any>) => void
 export interface DropdownPanelProps {
     dropdownName: string,
+    className?: string,
     dropdownMessage?: string,
     calldata?: {
         [key: string]: string

From 10449eeb3f77810d4aa9ebe05ec3f15a978d5dab Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 15 Aug 2022 14:57:13 +0200
Subject: [PATCH 10/20] animate when width changes

---
 libs/remix-ui/app/src/lib/remix-app/style/remix-app.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
index 65508171e4..f7c67ee3cb 100644
--- a/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
+++ b/libs/remix-ui/app/src/lib/remix-app/style/remix-app.css
@@ -31,7 +31,8 @@ pre {
 .sidepanel           {
   display            : flex;
   flex-direction     : row-reverse;
-  width: 320px;
+  width              : 320px;
+  transition         : width 1s;
 }
 
 .highlightcode       {

From 1cf484afcc375bffa09db65c0b34822309003968 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 15 Aug 2022 15:23:13 +0200
Subject: [PATCH 11/20] fix jumpTo

---
 apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts |  1 +
 libs/remix-debug/src/debugger/stepManager.ts       | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
index 5a3ae6ae82..54d8ab64dc 100644
--- a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
+++ b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
@@ -11,6 +11,7 @@ class GoToVmTraceStep extends EventEmitter {
 
 function goToVMtraceStep (browser: NightwatchBrowser, step: number, incr: number, done: VoidFunction) {
   browser.execute(function (step) { (document.getElementById('slider') as HTMLInputElement).value = (step - 1).toString() }, [step])
+    .waitForElementVisible('*[data-id="slider"]')
     .setValue('*[data-id="slider"]', new Array(1).fill(browser.Keys.RIGHT_ARROW))
     .execute((step) => {
       (document.querySelector('*[data-id="slider"]') as any).internal_onmouseup({ target: { value: step }})
diff --git a/libs/remix-debug/src/debugger/stepManager.ts b/libs/remix-debug/src/debugger/stepManager.ts
index 07693ca62f..004d1bc3f3 100644
--- a/libs/remix-debug/src/debugger/stepManager.ts
+++ b/libs/remix-debug/src/debugger/stepManager.ts
@@ -15,7 +15,7 @@ export class DebuggerStepManager {
     this.event = new EventManager()
     this.debugger = _debugger
     this.traceManager = traceManager
-    this.currentStepIndex = 0
+    this.currentStepIndex = -1
     this.traceLength = 0
     this.codeTraceLength = 0
     this.revertionPoint = null
@@ -34,13 +34,18 @@ export class DebuggerStepManager {
           this.traceLength = newLength
           this.codeTraceLength = this.calculateCodeLength()
         }
-        this.jumpTo(0)
+        setTimeout(() => {
+          this.jumpTo(0) // wait for the ui to render
+        }, 500)
+        
       })
     })
 
     this.debugger.callTree.event.register('callTreeReady', () => {
       if (this.debugger.callTree.functionCallStack.length) {
-        this.jumpTo(this.debugger.callTree.functionCallStack[0])
+        setTimeout(() => {
+          this.jumpTo(this.debugger.callTree.functionCallStack[0]) // wait for the ui to be render
+        }, 500)
       }
     })
 

From 05caa316949eff7a2d460795cf47f7f09c12c006 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 16 Aug 2022 10:04:50 +0200
Subject: [PATCH 12/20] typo

---
 apps/debugger/src/app/debugger.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/debugger/src/app/debugger.ts b/apps/debugger/src/app/debugger.ts
index 50f1208340..40f2e1b4d6 100644
--- a/apps/debugger/src/app/debugger.ts
+++ b/apps/debugger/src/app/debugger.ts
@@ -25,6 +25,6 @@ export class DebuggerClientApi extends DebuggerApiMixin(PluginClient) {
   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
   onStartDebugging: () => void // called when debug starts
-  onStopDebugging: () => void // called when debug starts
+  onStopDebugging: () => void // called when debug stops
 }
 

From 649879a18f8e7c9a4b056f8dada14c64885e89a1 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 16 Aug 2022 11:11:46 +0200
Subject: [PATCH 13/20] fix e2e

---
 apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
index 54d8ab64dc..2a76caa665 100644
--- a/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
+++ b/apps/remix-ide-e2e/src/commands/goToVMTraceStep.ts
@@ -10,8 +10,9 @@ class GoToVmTraceStep extends EventEmitter {
 }
 
 function goToVMtraceStep (browser: NightwatchBrowser, step: number, incr: number, done: VoidFunction) {
-  browser.execute(function (step) { (document.getElementById('slider') as HTMLInputElement).value = (step - 1).toString() }, [step])
-    .waitForElementVisible('*[data-id="slider"]')
+  browser.waitForElementVisible('*[data-id="slider"]')
+    .waitForElementVisible('#stepdetail')
+    .execute(function (step) { (document.getElementById('slider') as HTMLInputElement).value = (step - 1).toString() }, [step])
     .setValue('*[data-id="slider"]', new Array(1).fill(browser.Keys.RIGHT_ARROW))
     .execute((step) => {
       (document.querySelector('*[data-id="slider"]') as any).internal_onmouseup({ target: { value: step }})

From f76755a3fa0afc5890754aaaa2ffb3f2782f0fbc Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Mon, 25 Jul 2022 12:33:55 +0200
Subject: [PATCH 14/20] debuger UI

---
 libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx             | 4 ++--
 .../debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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 c9ac0749b1..3120979c2b 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -57,7 +57,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [state.debugging, state.isActive])
 
-
   useEffect(() => {
     return unLoad()
   }, [])
@@ -351,7 +350,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <Toaster message={state.toastMessage} />
       <div className="px-2" ref={debuggerTopRef}>
         <div>
-          <div className="mb-2 debuggerConfig custom-control custom-checkbox" title="Using Generated Sources lets you step into compiler outputs while debugging.">
+          <p className="my-2 debuggerLabel">Debugger Configuration</p>
+          <div className="mt-2 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 } }
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 0c96ccfcb8..4402e7a57c 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
@@ -105,8 +105,8 @@ export const VmDebuggerHead = ({ vmDebugger: { registerEvent, triggerEvent } })
         <CodeListView className="pb-2 flex-grow-1" registerEvent={registerEvent} />
       </div>
       <div className='d-flex flex-column pl-2' style={{ flex:1 }}>
-        <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />     
-        <StepDetail className="pb-1" stepDetail={stepDetail} />
+        <SolidityState className="pb-1" calldata={solidityState.calldata} message={solidityState.message} />
+        <StepDetail className="pb-1 pb-2 h-100 flex-grow-1" stepDetail={stepDetail} />
       </div>
     </div>
   )

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

---
 .../remix-app/components/dragbar/dragbar.tsx  |  2 +-
 .../debugger-ui/src/lib/debugger-ui.tsx       | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

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 952ea8ee48..942e293012 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
@@ -20,7 +20,7 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
-  }, [props.hidden, offset])
+  }, [props.hidden, offset, props.resizeTo])
 
   useEffect(() => {
     initialWidth.current = props.refObject.current.clientWidth
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 3120979c2b..18b92a4dad 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -282,36 +282,36 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     })
 
     setTimeout(async() => {
-    try {
       debuggerModule.onStartDebugging()
-      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)
-  handleResize()
+      }
+    }, 300)
+    handleResize()
   }
 
   const debug = (txHash, web3?) => {

From db50c1fbd7eaaf2dea8ddcd05b81af4f817f3e5b Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 17 Aug 2022 18:28:05 +0200
Subject: [PATCH 16/20] fixed conflicts

---
 .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx      | 4 ++--
 .../debugger-ui/src/lib/vm-debugger/step-detail.tsx         | 2 +-
 .../debugger-ui/src/lib/vm-debugger/vm-debugger.tsx         | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
index 5b1b5115cb..fe7ef47143 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
@@ -7,7 +7,7 @@ import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
   const [calldataObj, dispatch] = useReducer(reducer, initialState)
-  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent, headStyle, bodyStyle, hexHighlight } = props
+  const { dropdownName, className, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent, headStyle, bodyStyle, hexHighlight } = props
   const extractDataDefault: ExtractFunc = (item, parent?) => {
     const ret: ExtractData = {}
 
@@ -194,7 +194,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
   const uniquePanelName = dropdownName.split(' ').join('')
 
   return (
-    <div className={props.className + " border rounded px-1 mt-1 bg-light"}>
+    <div className={className + " border rounded px-1 mt-1 bg-light"}>
       <div className="py-0 px-1 title" style={headStyle}>
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
         <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span>
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
index 2bb6fe86d0..ccf0814567 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 export const StepDetail = ({ stepDetail, className = "" }) => {
   return (
     <div className={className} id='stepdetail' data-id='stepdetail'>
-      <DropdownPanel hexHighlight={false} dropdownName='Step details' calldata={stepDetail || {}} />
+      <DropdownPanel className={className} hexHighlight={false} dropdownName='Step details' calldata={stepDetail || {}} />
     </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 9ef337123b..5c7be396c5 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,16 +53,16 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
 
   return (
     <div id='vmdebugger' className="d-flex">
-      <div className='d-flex flex-column pr-2' style={{ flex: 1 }}>
+      <div className='d-flex flex-column px-2 pr-2' style={{ flex: 1 }}>
         <CallstackPanel className="pb-1" calldata={callStackPanel} />
         <StackPanel className="pb-1" calldata={stackPanel} />
         <MemoryPanel className="pb-1" calldata={memoryPanel} />
         <StoragePanel className="pb-1" calldata={storagePanel.calldata} header={storagePanel.header} />
+        <ReturnValuesPanel className="pb-1" dropdownName='Return Value' calldata={returnValuesPanel || {}} />
       </div>
-      <div className='d-flex flex-column pl-2' style={{ flex: 1 }}>
+      <div className='d-flex flex-column px-2 pl-2' style={{ flex: 1 }}>
         <CalldataPanel className="pb-1" calldata={calldataPanel} />
         <GlobalVariables className="pb-1" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
-        <ReturnValuesPanel className="pb-1" dropdownName='Return Value' calldata={returnValuesPanel || {}} />
         <FullStoragesChangesPanel className="pb-1" calldata={fullStoragesChangesPanel} />
       </div>
     </div>

From 5005fff1e08bb3f334d9ab7e4e25e678f3aaa4ec Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 18 Aug 2022 10:11:47 +0200
Subject: [PATCH 17/20] fix build

---
 .../app/src/lib/remix-app/components/dragbar/dragbar.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 942e293012..952ea8ee48 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
@@ -20,7 +20,7 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
-  }, [props.hidden, offset, props.resizeTo])
+  }, [props.hidden, offset])
 
   useEffect(() => {
     initialWidth.current = props.refObject.current.clientWidth

From 7041174286a33e4e75c5962bb9202a696a71093e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 18 Aug 2022 11:23:00 +0200
Subject: [PATCH 18/20] fix build

---
 apps/remix-ide-e2e/src/tests/debugger.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts
index e55ae8d6fd..850263fe0c 100644
--- a/apps/remix-ide-e2e/src/tests/debugger.test.ts
+++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts
@@ -241,6 +241,7 @@ module.exports = {
       .clickInstance(0)
       .clickFunction('callA - transact (not payable)')
       .debugTransaction(1)
+      .pause(2000)
       .goToVMTraceStep(79)
       .waitForElementVisible('*[data-id="debugGoToRevert"]', 60000)
       .click('*[data-id="debugGoToRevert"]')

From fc3904c05d74f27d1a7bfd41082faa2c2c4b0e2f Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 18 Aug 2022 12:33:39 +0200
Subject: [PATCH 19/20] add timeout

---
 apps/remix-ide-e2e/src/tests/debugger.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts
index 850263fe0c..f1ea5ac4e4 100644
--- a/apps/remix-ide-e2e/src/tests/debugger.test.ts
+++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts
@@ -241,7 +241,7 @@ module.exports = {
       .clickInstance(0)
       .clickFunction('callA - transact (not payable)')
       .debugTransaction(1)
-      .pause(2000)
+      .pause(4000)
       .goToVMTraceStep(79)
       .waitForElementVisible('*[data-id="debugGoToRevert"]', 60000)
       .click('*[data-id="debugGoToRevert"]')

From fb52edaa45a726b72aa000864584b955876aece2 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 18 Aug 2022 16:48:38 +0200
Subject: [PATCH 20/20] rearrangement of sections

---
 libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 5c7be396c5..333489246e 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
@@ -59,11 +59,11 @@ export const VmDebugger = ({ vmDebugger: { registerEvent }, currentBlock, curren
         <MemoryPanel className="pb-1" calldata={memoryPanel} />
         <StoragePanel className="pb-1" calldata={storagePanel.calldata} header={storagePanel.header} />
         <ReturnValuesPanel className="pb-1" dropdownName='Return Value' calldata={returnValuesPanel || {}} />
+        <GlobalVariables className="pb-1" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
       </div>
       <div className='d-flex flex-column px-2 pl-2' style={{ flex: 1 }}>
-        <CalldataPanel className="pb-1" calldata={calldataPanel} />
-        <GlobalVariables className="pb-1" block={currentBlock} receipt={currentReceipt} tx={currentTransaction} />
         <FullStoragesChangesPanel className="pb-1" calldata={fullStoragesChangesPanel} />
+        <CalldataPanel className="pb-1" calldata={calldataPanel} />
       </div>
     </div>
   )