reset side panel width when stops debugging

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

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
 }
 

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')
+  }
 }

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)

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>

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 {

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 {