From 61a25ee819dc85e3c686c3400f537bf1aec7e609 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 3 Apr 2025 17:30:56 +0200
Subject: [PATCH] ui: change jump button display, longTask time definition

---
 .../shared/DevTools/JumpButton/JumpButton.tsx          | 10 +++++-----
 frontend/app/player/web/types/longTask.ts              |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
index 1e14336bf..99b87dd9e 100644
--- a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
+++ b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
@@ -13,6 +13,11 @@ function JumpButton(props: Props) {
   const { tooltip } = props;
   return (
     <div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
+      {props.time ? (
+        <div className="block mr-2 text-sm">
+          {shortDurationFromMs(props.time)}
+        </div>
+      ) : null}
       <Tooltip title={tooltip} disabled={!tooltip}>
         <Button
           type="default"
@@ -27,11 +32,6 @@ function JumpButton(props: Props) {
         >
           JUMP
         </Button>
-        {props.time ? (
-          <div className="block group-hover:hidden mr-2 text-sm">
-            {shortDurationFromMs(props.time)}
-          </div>
-        ) : null}
       </Tooltip>
     </div>
   );
diff --git a/frontend/app/player/web/types/longTask.ts b/frontend/app/player/web/types/longTask.ts
index de5d05360..bb3909a89 100644
--- a/frontend/app/player/web/types/longTask.ts
+++ b/frontend/app/player/web/types/longTask.ts
@@ -6,6 +6,7 @@ export interface ILongAnimationTask {
   blockingDuration: number;
   firstUIEventTimestamp: number;
   startTime: number;
+  time: number;
   scripts: [
     {
       name: string;
@@ -36,6 +37,7 @@ export const getLongTask = (msg: LongAnimationTask): ILongAnimationTask => {
     firstUIEventTimestamp: msg.firstUIEventTimestamp,
     startTime: msg.startTime,
     scripts,
-    isRed: msg.blockingDuration > 50
+    isRed: msg.blockingDuration > 50,
+    time: msg.startTime,
   });
 }