From 10ef8c04872dae525fd394b956c4233d273c09a9 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 27 Sep 2022 22:17:42 +0100
Subject: [PATCH] finish adding tooltips to debugger

---
 .../lib/button-navigator/button-navigator.tsx | 94 +++++++++++++++++--
 1 file changed, 86 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
index 2db94f72cc..a17f090ed4 100644
--- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react' // eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './button-navigator.css'
 
 export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward, stepOverForward, jumpOut, jumpPreviousBreakpoint, jumpNextBreakpoint, jumpToException, revertedReason, stepState, jumpOutDisabled }) => {
@@ -53,19 +54,96 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
   return (
     <div className="buttons">
       <div className="stepButtons btn-group py-1">
-        <button id='overback' className='btn btn-primary btn-sm navigator stepButton fas fa-reply' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} ></button>
-        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton fas fa-level-up-alt' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}></button>
-        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton fas fa-level-down-alt' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}></button>
-        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton fas fa-share' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}></button>
+        <button id='overback' className='btn btn-primary btn-sm navigator stepButton' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} >
+          <OverlayTrigger
+            placement="top-start"
+            overlay={
+              <Tooltip className="text-nowrap" id="overbackTooltip">
+                <span>Step over back</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-reply"></span>
+          </OverlayTrigger>
+        </button>
+        <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}>
+          <OverlayTrigger
+            placement="top-start"
+            overlay={
+              <Tooltip className="text-nowrap" id="intobackTooltip">
+                <span>Step back</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-level-up-alt"></span>
+          </OverlayTrigger>
+        </button>
+        <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}>
+          <OverlayTrigger
+            placement="top-start"
+            overlay={
+              <Tooltip className="text-nowrap" id="intoforwardTooltip">
+                <span>Step into</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-level-down-alt"></span>
+          </OverlayTrigger>
+        </button>
+        <button id='overforward' className='btn btn-primary btn-sm navigator stepButton' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip className="text-nowrap" id="overforwardTooltip">
+                <span>Step into</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-share"></span>
+          </OverlayTrigger>
+        </button>
       </div>
 
       <div className="jumpButtons btn-group py-1">
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-step-backward' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}></button>
-        <button className='btn btn-primary btn-sm navigator jumpButton fas fa-eject' id='jumpout' title='Jump out' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}></button>
-        <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>
+        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumppreviousbreakpointTooltip" className="text-nowrap">
+                <span>{'Jump to the previous breakpoint'}</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-step-backward"></span>
+          </OverlayTrigger>
+        </button>
+        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumpoutTooltip" className="text-nowrap">
+                <span>{'Jump out'}</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-eject"></span>
+          </OverlayTrigger>
+        </button>
+        <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}>
+          <OverlayTrigger
+            placement="top-end"
+            overlay={
+              <Tooltip id="jumpnextbreakpointTooltip" className="text-nowrap">
+                <span>{'Jump to the next breakpoint'}</span>
+              </Tooltip>
+            }
+          >
+            <span className="fas fa-step-forward"></span>
+          </OverlayTrigger>
+        </button>
       </div>
       <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
-        <span className='text-warning'>This call has reverted, state changes made during the call will be reverted.</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 data-id="debugGoToRevert" className="cursorPointerRemixDebugger" role="button" onClick={() => { jumpToException && jumpToException() }}>here</u> to jump where the call reverted.</div>