mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fix dubugging navigation buttons

Browse Source
pull/2949/head
Joseph Izang 2 years ago
parent d5dd106ce4
commit 67bc220421
2 changed files with 20 additions and 15 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
  2. 33
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

2
libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
Unescape View File

@ -6,6 +6,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} }
.stepButton { .stepButton {
} }
@ -13,6 +14,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
} }
.jumpButton { .jumpButton {
} }

33
libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
Unescape View File

@ -62,8 +62,10 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { stepOverBack && stepOverBack() }}> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverBack && stepOverBack() }}
<button id='overback' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}> style={{ backgroundColor: state.overBackDisabled ? '#005e80' : '#007aa6', borderColor: state.overBackDisabled ? '#005e80' : '#007aa6', opacity: state.overBackDisabled && 0.65 }}
>
<button id='overback' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-reply"></span> <span className="fas fa-reply"></span>
</button> </button>
</div> </div>
@ -76,8 +78,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer" style={{ backgroundColor: state.intoBackDisabled ? '#005e80' : '#007aa6', borderColor: state.intoBackDisabled ? '#005e80' : '#007aa6', opacity: state.intoBackDisabled && 0.65 }}>
<button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}> <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-level-up-alt"></span> <span className="fas fa-level-up-alt"></span>
</button> </button>
</div> </div>
@ -86,12 +88,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
placement="top-start" placement="top-start"
overlay={ overlay={
<Tooltip className="text-nowrap" id="intoforwardTooltip"> <Tooltip className="text-nowrap" id="intoforwardTooltip">
<span>Step into</span> <span>Step over forward</span>
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer" style={{ backgroundColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', opacity: state.intoForwardDisabled && 0.65}}>
<button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled} <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
> >
<span className="fas fa-level-down-alt"></span> <span className="fas fa-level-down-alt"></span>
@ -106,8 +108,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer" style={{ backgroundColor: state.overForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.overForwardDisabled ? '#005e80' : '#007aa6', opacity: state.overForwardDisabled && 0.65}}>
<button id='overforward' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}> <button id='overforward' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-share"></span> <span className="fas fa-share"></span>
</button> </button>
</div> </div>
@ -123,8 +125,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint" style={{ backgroundColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpPreviousBreakpointDisabled && 0.65}}>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}> <button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-step-backward"></span> <span className="fas fa-step-backward"></span>
</button> </button>
</div> </div>
@ -137,8 +139,9 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer" style={{ backgroundColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', opacity: state.jumpOutDisabled && 0.65
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }} data-id="buttonNavigatorJumpOut"> }}>
<button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }} data-id="buttonNavigatorJumpOut">
<span className="fas fa-eject"></span> <span className="fas fa-eject"></span>
</button> </button>
</div> </div>
@ -151,8 +154,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer"> <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer" style={{ backgroundColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpNextBreakpointDisabled && 0.65}}>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}> <button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-step-forward"></span> <span className="fas fa-step-forward"></span>
</button> </button>
</div> </div>

Write Preview
Loading…
Cancel
Save