Skip to content

Commit a6833ea

Browse files
Aniket-EnggAniket-Engg
committed
theme colors and jump button in execution trace
1 parent d6cb9cc commit a6833ea

File tree

3 files changed

+131
-23
lines changed

3 files changed

+131
-23
lines changed

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,6 @@
116116
}
117117

118118
.debug-tab.active {
119-
background-color: var(--bs-primary);
120-
color: white;
121119
border-color: var(--bs-primary);
122120
}
123121

@@ -349,9 +347,9 @@
349347
align-items: center;
350348
justify-content: center;
351349
padding: 0;
352-
width: 20px;
353-
height: 20px;
354-
font-size: 12px;
350+
width: 24px;
351+
height: 24px;
352+
font-size: 14px;
355353
border: none;
356354
background: transparent;
357355
color: var(--text-muted);
@@ -361,8 +359,8 @@
361359
}
362360

363361
.jump-debug-btn:hover {
364-
color: var(--bs-info);
365-
background: rgba(var(--bs-info-rgb), 0.1);
362+
filter: brightness(1.5);
363+
background: rgba(128, 128, 128, 0.1);
366364
}
367365

368366
.debug-section .call-trace-type.transaction {

‎libs/remix-ui/terminal/src/lib/components/DebuggerCallStack.css‎

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,33 +55,33 @@
5555
}
5656

5757
.call-stack-type.call {
58-
background-color: rgba(59, 130, 246, 0.15);
59-
color: #3b82f6;
58+
background-color: rgba(var(--bs-info-rgb), 0.15);
59+
color: var(--bs-info);
6060
}
6161

6262
.call-stack-type.delegatecall {
63-
background-color: rgba(253, 126, 20, 0.15);
64-
color: #fd7e14;
63+
background-color: rgba(var(--bs-warning-rgb), 0.15);
64+
color: var(--bs-warning);
6565
}
6666

6767
.call-stack-type.staticcall {
68-
background-color: rgba(13, 202, 240, 0.15);
69-
color: #0dcaf0;
68+
background-color: rgba(var(--bs-cyan-rgb), 0.15);
69+
color: var(--bs-cyan);
7070
}
7171

7272
.call-stack-type.create {
73-
background-color: rgba(25, 135, 84, 0.15);
74-
color: #198754;
73+
background-color: rgba(var(--bs-success-rgb), 0.15);
74+
color: var(--bs-success);
7575
}
7676

7777
.call-stack-type.internal {
78-
background-color: rgba(66, 99, 235, 0.15);
79-
color: #4263eb;
78+
background-color: rgba(var(--bs-info-rgb), 0.15);
79+
color: var(--bs-info);
8080
}
8181

8282
.call-stack-type.external {
83-
background-color: rgba(0, 123, 255, 0.15);
84-
color: #007bff;
83+
background-color: rgba(var(--bs-info-rgb), 0.15);
84+
color: var(--bs-info);
8585
}
8686

8787
.call-stack-expand-icon {
@@ -109,26 +109,56 @@
109109
}
110110

111111
.call-stack-function .contract-name {
112-
color: #17a2b8;
112+
color: var(--bs-info);
113113
font-weight: 600;
114114
}
115115

116116
.call-stack-function .method-name {
117-
color: #e83e8c;
117+
color: var(--bs-pink);
118118
font-weight: 600;
119119
}
120120

121121
.call-stack-gas {
122122
display: flex;
123123
align-items: center;
124124
gap: 0.3rem;
125-
color: #17a2b8;
125+
color: var(--bs-info);
126126
font-size: 0.8rem;
127127
font-weight: 700;
128128
white-space: nowrap;
129129
}
130130

131131
.call-stack-gas i {
132132
font-size: 0.8rem;
133-
color: #17a2b8;
133+
color: var(--bs-info);
134+
}
135+
136+
.call-stack-actions {
137+
display: flex;
138+
align-items: center;
139+
gap: 0.25rem;
140+
margin-left: 0.5rem;
141+
transition: opacity 0.2s;
142+
flex-shrink: 0;
143+
}
144+
145+
.jump-debug-btn {
146+
display: flex;
147+
align-items: center;
148+
justify-content: center;
149+
padding: 0;
150+
width: 24px;
151+
height: 24px;
152+
font-size: 14px;
153+
border: none;
154+
background: transparent;
155+
color: var(--text-muted);
156+
transition: all 0.2s;
157+
cursor: pointer;
158+
border-radius: 3px;
159+
}
160+
161+
.jump-debug-btn:hover {
162+
filter: brightness(1.5);
163+
background: rgba(128, 128, 128, 0.1);
134164
}

‎libs/remix-ui/terminal/src/lib/components/DebuggerCallStack.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useEffect } from 'react' // eslint-disable-line
2+
import { CustomTooltip } from '@remix-ui/helper'
23
import './DebuggerCallStack.css'
34

45
interface DebuggerCallStackProps {
@@ -9,6 +10,7 @@ export const DebuggerCallStack = ({ plugin }: DebuggerCallStackProps) => {
910
const [selectedScope, setSelectedScope] = useState<any>(null)
1011
const [deployments, setDeployments] = useState<any[]>([])
1112
const [expandedScopes, setExpandedScopes] = useState<Set<string>>(new Set())
13+
const [hoveredScope, setHoveredScope] = useState<string | null>(null)
1214

1315
useEffect(() => {
1416
// Listen for scope selection from debugger UI
@@ -96,6 +98,22 @@ export const DebuggerCallStack = ({ plugin }: DebuggerCallStackProps) => {
9698
}
9799
}
98100

101+
const handleJumpTo = async (step: number) => {
102+
try {
103+
await plugin.call('debugger', 'jumpTo', step)
104+
} catch (error) {
105+
console.error('Error jumping to step:', error)
106+
}
107+
}
108+
109+
const handleJumpOut = async () => {
110+
try {
111+
await plugin.call('debugger', 'jumpOut', true)
112+
} catch (error) {
113+
console.error('Error jumping out:', error)
114+
}
115+
}
116+
99117
const renderExecutionItem = (scope: any, depth: number = 0): JSX.Element => {
100118
const opcode = scope.opcodeInfo?.op || ''
101119
// Only show 'fallback' if it's actually a fallback function (kind === 'fallback')
@@ -149,11 +167,15 @@ export const DebuggerCallStack = ({ plugin }: DebuggerCallStackProps) => {
149167
const hasChildren = scope.children && scope.children.length > 0
150168
const isExpanded = expandedScopes.has(scope.scopeId)
151169

170+
const isHovered = hoveredScope === scope.scopeId
171+
152172
return (
153173
<div key={scope.scopeId}>
154174
<div
155175
className="call-stack-item"
156176
onClick={() => handleExecutionItemClick(scope)}
177+
onMouseEnter={() => setHoveredScope(scope.scopeId)}
178+
onMouseLeave={() => setHoveredScope(null)}
157179
>
158180
<div className="call-stack-line">
159181
<span className="call-stack-step">{scope.firstStep}</span>
@@ -221,6 +243,64 @@ export const DebuggerCallStack = ({ plugin }: DebuggerCallStackProps) => {
221243
</>
222244
)}
223245
</span>
246+
{/* Jump buttons */}
247+
{(scope.firstStep !== undefined || scope.lastStep !== undefined) && (
248+
<div className="call-stack-actions" style={{ opacity: isHovered ? 1 : 0 }}>
249+
{scope.firstStep !== undefined && (
250+
<CustomTooltip tooltipText="Jump Into" tooltipId={`jump-into-exec-${scope.scopeId}`} placement="top">
251+
<button
252+
className="jump-debug-btn"
253+
onClick={(e) => {
254+
e.stopPropagation()
255+
const stepToJump = scope.functionEntryStep !== undefined ? scope.functionEntryStep : scope.firstStep
256+
handleJumpTo(stepToJump)
257+
}}
258+
>
259+
<i className="fas fa-sign-in-alt"></i>
260+
</button>
261+
</CustomTooltip>
262+
)}
263+
{scope.lastStep !== undefined && (
264+
<>
265+
<CustomTooltip tooltipText="Jump End" tooltipId={`jump-end-exec-${scope.scopeId}`} placement="top">
266+
<button
267+
className="jump-debug-btn"
268+
onClick={(e) => {
269+
e.stopPropagation()
270+
handleJumpTo(scope.lastStep)
271+
}}
272+
>
273+
<i className="fas fa-step-forward"></i>
274+
</button>
275+
</CustomTooltip>
276+
<CustomTooltip tooltipText="Jump Over" tooltipId={`jump-over-exec-${scope.scopeId}`} placement="top">
277+
<button
278+
className="jump-debug-btn"
279+
onClick={(e) => {
280+
e.stopPropagation()
281+
handleJumpTo(scope.lastStep + 1)
282+
}}
283+
>
284+
<i className="fas fa-level-down-alt"></i>
285+
</button>
286+
</CustomTooltip>
287+
</>
288+
)}
289+
{isHovered && scope.lastStep !== undefined && (
290+
<CustomTooltip tooltipText="Jump Out" tooltipId={`jump-out-exec-${scope.scopeId}`} placement="top">
291+
<button
292+
className="jump-debug-btn"
293+
onClick={(e) => {
294+
e.stopPropagation()
295+
handleJumpOut()
296+
}}
297+
>
298+
<i className="fas fa-sign-out-alt"></i>
299+
</button>
300+
</CustomTooltip>
301+
)}
302+
</div>
303+
)}
224304
<span className="call-stack-gas"><i className="fas fa-gas-pump"></i> {scope.gasCost}</span>
225305
</div>
226306
</div>

0 commit comments

Comments
 (0)