debugger redesign improvements

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)

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) => {

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

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

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

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

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}

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

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

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

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