Skip to content

Commit cdc621b

Browse files
Aniket-EnggAniket-Engg
committed
accordion sections
1 parent c62e17d commit cdc621b

File tree

2 files changed

+72
-33
lines changed

2 files changed

+72
-33
lines changed

‎libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@
66
}
77

88
.debug-section {
9-
border-bottom: 1px solid var(--bs-border-color);
109
display: flex;
1110
flex-direction: column;
1211
padding: 0;
1312
margin: 0;
1413
}
1514

1615
.debug-section-search {
17-
padding: 1rem;
16+
padding: 0.25rem;
1817
flex-shrink: 0;
1918
}
2019

@@ -45,7 +44,6 @@
4544
align-items: center;
4645
padding: 0;
4746
background-color: var(--custom-onsurface-layer-2);
48-
border-bottom: 1px solid var(--bs-border-color);
4947
flex-shrink: 0;
5048
width: 100%;
5149
min-height: 2rem;
@@ -71,7 +69,6 @@
7169

7270
.debug-section-content {
7371
padding: 1rem;
74-
padding-bottom: 0;
7572
}
7673

7774
.debug-section-trace .debug-section-content {

‎libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.tsx‎

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ export const DebugLayout = ({
5555
const [expandedScopes, setExpandedScopes] = useState<Set<string>>(new Set())
5656
const [selectedScope, setSelectedScope] = useState<any>(null)
5757
const [expandedObjectPaths, setExpandedObjectPaths] = useState<Set<string>>(new Set())
58+
const [expandedSections, setExpandedSections] = useState({
59+
transactionDetails: true,
60+
callTrace: true,
61+
parametersReturnValues: true
62+
})
5863

5964
// Auto-expand sender node when nestedScopes are loaded
6065
React.useEffect(() => {
@@ -63,6 +68,13 @@ export const DebugLayout = ({
6368
}
6469
}, [nestedScopes])
6570

71+
const toggleSection = (section: 'transactionDetails' | 'callTrace' | 'parametersReturnValues') => {
72+
setExpandedSections(prev => ({
73+
...prev,
74+
[section]: !prev[section]
75+
}))
76+
}
77+
6678
const formatAddress = (address: string | undefined) => {
6779
if (!address) return ''
6880
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
@@ -737,7 +749,6 @@ export const DebugLayout = ({
737749

738750
const renderObjectContent = () => {
739751
const tx = currentTransaction
740-
const receipt = currentReceipt
741752

742753
// Get input data (can be either 'data' or 'input' property)
743754
const inputData = tx?.data || tx?.input
@@ -827,7 +838,7 @@ export const DebugLayout = ({
827838
return (
828839
<div className="debug-layout">
829840
{/* Section 1: Search Bar + Transaction Global Values */}
830-
<div className="debug-section debug-section-search">
841+
<div className="debug-section debug-section-search ms-1 me-1">
831842
<SearchBar
832843
onSearch={onSearch}
833844
debugging={debugging}
@@ -857,48 +868,79 @@ export const DebugLayout = ({
857868
</span>
858869
</CustomTooltip>
859870
</div>
871+
</div>
860872

861-
<div className="mt-1 ms-3">
862-
{renderGlobalVariables()}
873+
{/* Section 2: Transaction Details */}
874+
<div className="debug-section debug-section-transaction" style={!expandedSections.transactionDetails ? { minHeight: 'auto' } : {}}>
875+
<div
876+
className="debug-section-header"
877+
onClick={() => toggleSection('transactionDetails')}
878+
style={{ cursor: 'pointer' }}
879+
>
880+
<h6 className="debug-section-title">
881+
<FormattedMessage id="debugger.transactionDetails" defaultMessage="Transaction Details" />
882+
</h6>
883+
<i className={`fas ${expandedSections.transactionDetails ? 'fa-chevron-down' : 'fa-chevron-right'}`} style={{ fontSize: '0.75rem', marginRight: '1rem', color: 'var(--bs-body-color)' }}></i>
863884
</div>
885+
{expandedSections.transactionDetails && (
886+
<div className="debug-section-content ms-3">
887+
{renderGlobalVariables()}
888+
</div>
889+
)}
864890
</div>
865891

866-
{/* Section 2: Call Trace */}
867-
<div className="debug-section debug-section-trace">
868-
<div className="debug-section-header">
892+
{/* Section 3: Call Trace */}
893+
<div className="debug-section debug-section-trace" style={!expandedSections.callTrace ? { minHeight: 'auto' } : {}}>
894+
<div
895+
className="debug-section-header"
896+
onClick={() => toggleSection('callTrace')}
897+
style={{ cursor: 'pointer' }}
898+
>
869899
<h6 className="debug-section-title">
870900
Call Trace (Trace Length: {(traceData && traceData.traceLength) || 0})
871901
</h6>
902+
<i className={`fas ${expandedSections.callTrace ? 'fa-chevron-down' : 'fa-chevron-right'}`} style={{ fontSize: '0.75rem', marginRight: '1rem', color: 'var(--bs-body-color)' }}></i>
872903
</div>
873-
<div className="debug-section-content debug-section-scrollable">
874-
{renderCallTrace()}
875-
</div>
904+
{expandedSections.callTrace && (
905+
<div className="debug-section-content debug-section-scrollable">
906+
{renderCallTrace()}
907+
</div>
908+
)}
876909
</div>
877910

878-
{/* Section 3: Parameters & Return Values */}
879-
<div className="debug-section debug-section-object">
880-
<div className="debug-section-header">
911+
{/* Section 4: Parameters & Return Values */}
912+
<div className="debug-section debug-section-object" style={!expandedSections.parametersReturnValues ? { minHeight: 'auto' } : {}}>
913+
<div
914+
className="debug-section-header"
915+
onClick={() => toggleSection('parametersReturnValues')}
916+
style={{ cursor: 'pointer' }}
917+
>
881918
<h6 className="debug-section-title">
882919
<FormattedMessage id="debugger.parametersAndReturnValues" defaultMessage="Parameters & Return Values" />
883920
</h6>
884-
<div className="debug-tabs">
885-
<button
886-
className={`debug-tab ${activeObjectTab === 'json' ? 'active' : ''}`}
887-
onClick={() => setActiveObjectTab('json')}
888-
>
889-
<FormattedMessage id="debugger.json" defaultMessage="JSON" />
890-
</button>
891-
<button
892-
className={`debug-tab ${activeObjectTab === 'raw' ? 'active' : ''}`}
893-
onClick={() => setActiveObjectTab('raw')}
894-
>
895-
<FormattedMessage id="debugger.raw" defaultMessage="Raw" />
896-
</button>
921+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
922+
<i className={`fas ${expandedSections.parametersReturnValues ? 'fa-chevron-down' : 'fa-chevron-right'}`} style={{ fontSize: '0.75rem', color: 'var(--bs-body-color)' }}></i>
923+
<div className="debug-tabs" onClick={(e) => e.stopPropagation()}>
924+
<button
925+
className={`debug-tab ${activeObjectTab === 'json' ? 'active' : ''}`}
926+
onClick={() => setActiveObjectTab('json')}
927+
>
928+
<FormattedMessage id="debugger.json" defaultMessage="JSON" />
929+
</button>
930+
<button
931+
className={`debug-tab ${activeObjectTab === 'raw' ? 'active' : ''}`}
932+
onClick={() => setActiveObjectTab('raw')}
933+
>
934+
<FormattedMessage id="debugger.raw" defaultMessage="Raw" />
935+
</button>
936+
</div>
897937
</div>
898938
</div>
899-
<div className="debug-section-content debug-section-scrollable">
900-
{renderObjectContent()}
901-
</div>
939+
{expandedSections.parametersReturnValues && (
940+
<div className="debug-section-content debug-section-scrollable">
941+
{renderObjectContent()}
942+
</div>
943+
)}
902944
</div>
903945
</div>
904946
)

0 commit comments

Comments
 (0)