feat(trace): disable/enable reset zoom (#70301)

Enable or disable the button based off the zoom state (previously always
enabled)

static/app/views/performance/newTraceDetails/index.tsx

@@ -51,7 +51,7 @@ import {
   type ViewManagerScrollAnchor,
   VirtualizedViewManager,
 } from 'sentry/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager';
-import {TraceShortcuts} from 'sentry/views/performance/newTraceDetails/traceShortcuts';
+import {TraceShortcuts} from 'sentry/views/performance/newTraceDetails/traceShortcutsModal';
 import {
   loadTraceViewPreferences,
   storeTraceViewPreferences,
@@ -865,12 +865,25 @@ function TraceResetZoomButton(props: {
   }, [props.viewManager, props.organization]);
 
   return (
-    <Button size="xs" onClick={onResetZoom}>
+    <ResetZoomButton
+      size="xs"
+      onClick={onResetZoom}
+      ref={props.viewManager.registerResetZoomRef}
+    >
       {t('Reset Zoom')}
-    </Button>
+    </ResetZoomButton>
   );
 }
 
+const ResetZoomButton = styled(Button)`
+  transition: opacity 0.2s 0.5s ease-in-out;
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+`;
+
 const TraceExternalLayout = styled('div')`
   display: flex;
   flex-direction: column;

static/app/views/performance/newTraceDetails/traceRenderers/virtualizedViewManager.tsx

@@ -87,6 +87,7 @@ export class VirtualizedViewManager {
 
   // HTML refs that we need to keep track of such
   // that rendering can be done programmatically
+  reset_zoom_button: HTMLButtonElement | null = null;
   divider: HTMLElement | null = null;
   container: HTMLElement | null = null;
   horizontal_scrollbar_container: HTMLElement | null = null;
@@ -157,6 +158,7 @@ export class VirtualizedViewManager {
       },
     };
 
+    this.registerResetZoomRef = this.registerResetZoomRef.bind(this);
     this.registerContainerRef = this.registerContainerRef.bind(this);
     this.registerHorizontalScrollBarContainerRef =
       this.registerHorizontalScrollBarContainerRef.bind(this);
@@ -334,6 +336,10 @@ export class VirtualizedViewManager {
     }
   }
 
+  registerResetZoomRef(ref: HTMLButtonElement | null) {
+    this.reset_zoom_button = ref;
+  }
+
   registerGhostRowRef(column: string, ref: HTMLElement | null) {
     if (column === 'list' && ref) {
       const scrollableElement = ref.children[0] as HTMLElement | undefined;
@@ -744,6 +750,7 @@ export class VirtualizedViewManager {
     this.recomputeTimelineIntervals();
     this.recomputeSpanToPxMatrix();
     this.enqueueFOVQueryParamSync();
+    this.syncResetZoomButton();
   }
 
   enqueueFOVQueryParamSync() {
@@ -777,6 +784,12 @@ export class VirtualizedViewManager {
     }
   }
 
+  syncResetZoomButton() {
+    if (!this.reset_zoom_button) return;
+    this.reset_zoom_button.disabled =
+      this.trace_view.x === 0 && this.trace_view.width === this.trace_space.width;
+  }
+
   onHorizontalScrollbarScroll(_event: Event) {
     if (!this.scrolling_source) {
       this.scrolling_source = 'fake scrollbar';

static/app/views/performance/newTraceDetails/traceShortcuts.tsx → static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx

@@ -16,6 +16,7 @@ export function TraceShortcuts() {
     traceAnalytics.trackViewShortcuts(organization);
     openModal(props => <TraceShortcutsModal {...props} />);
   }, [organization]);
+
   return (
     <Button size="xs" onClick={onOpenShortcutsClick} aria-label={t('Trace Shortcuts')}>
       ⌘