fix displaying reverted calls in debugger

libs/remix-debug/src/debugger/stepManager.ts

@@ -51,15 +51,18 @@ export class DebuggerStepManager {
       this.traceManager.buildCallPath(index).then((callsPath) => {
         this.currentCall = callsPath[callsPath.length - 1]
         if (this.currentCall.reverted) {
-          const revertedReason = this.currentCall.outofgas ? 'outofgas' : ''
+          const revertedReason = this.currentCall.outofgas ? 'outofgas' : 'reverted'
           this.revertionPoint = this.currentCall.return
-          return this.event.trigger('revertWarning', [revertedReason])
+          this.event.trigger('revertWarning', [revertedReason])
+          return 
         }
         for (let k = callsPath.length - 2; k >= 0; k--) {
           const parent = callsPath[k]
-          if (!parent.reverted) continue
-          this.revertionPoint = parent.return
-          this.event.trigger('revertWarning', ['parenthasthrown'])
+          if (parent.reverted) {
+            this.revertionPoint = parent.return
+            this.event.trigger('revertWarning', ['parenthasthrown'])
+            return
+          }
         }
         this.event.trigger('revertWarning', [''])
       }).catch((error) => {

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css

@@ -19,4 +19,8 @@
 .navigator {
 }
 .navigator:hover {
+}
+
+.cursorPointerRemixDebugger {
+    cursor: pointer;
 }

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -65,11 +65,10 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
         <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}></button>
       </div>
       <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
-        <button id='jumptoexception' title='Jump to exception' className='btn btn-danger btn-sm navigator button fas fa-exclamation-triangle' onClick={() => { jumpToException && jumpToException() }} disabled={state.jumpOutDisabled}>
-        </button>
-        <span>State changes made during this call will be reverted.</span>
-        <span id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>
-        <span id='parenthasthrown' style={{ display: revertedReason === 'parenthasthrown' ? 'inline' : 'none' }}>The parent call will throw an exception</span>
+        <span className='text-warning'>This call has reverted, state changes made during the call will be reverted.</span>        
+        <span className='text-warning' id='outofgas' style={{ display: revertedReason === 'outofgas' ? 'inline' : 'none' }}>This call will run out of gas.</span>
+        <span className='text-warning' id='parenthasthrown' style={{ display: revertedReason === 'parenthasthrown' ? 'inline' : 'none' }}>The parent call will throw an exception</span>
+        <div className='text-warning'>Click <u className="cursorPointerRemixDebugger" role="button" onClick={() => { jumpToException && jumpToException() }}>here</u> to jump where the call reverted.</div>
       </div>
     </div>
   )