resize when switching out of the debugger

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 {

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
   }
 }

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])