Show the marker keys instead of the labels in marker tooltips when alt is pressed. (#5625)

Author: fqueze

src/components/tooltip/Marker.tsx

@@ -10,6 +10,7 @@ import {
   formatTimestamp,
 } from 'firefox-profiler/utils/format-numbers';
 import explicitConnect from 'firefox-profiler/utils/connect';
+import { useAltKey } from 'firefox-profiler/hooks/useAltKey';
 import {
   getCategories,
   getMarkerSchemaByName,
@@ -88,6 +89,7 @@ type OwnProps = {
   readonly restrictHeightWidth: boolean;
   // Optional callback for when a stack frame is clicked in the backtrace.
   readonly onStackFrameClick?: (stackIndex: IndexIntoStackTable) => void;
+  readonly showKeys?: boolean;
 };
 
 type StateProps = {
@@ -275,8 +277,10 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
             continue;
           }
 
+          // When Alt is pressed (showKeys is true), display the field key instead of label
+          const displayLabel = this.props.showKeys ? key : label || key;
           details.push(
-            <TooltipDetail key={schema.name + '-' + key} label={label || key}>
+            <TooltipDetail key={schema.name + '-' + key} label={displayLabel}>
               {formatMarkupFromMarkerSchema(
                 schema.name,
                 format,
@@ -554,7 +558,7 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
   }
 }
 
-export const TooltipMarker = explicitConnect<
+const ConnectedMarkerTooltipContents = explicitConnect<
   OwnProps,
   StateProps,
   DispatchProps
@@ -579,3 +583,9 @@ export const TooltipMarker = explicitConnect<
   mapDispatchToProps: { changeMarkersSearchString },
   component: MarkerTooltipContents,
 });
+
+// Wrapper component that provides the Alt key state
+export function TooltipMarker(props: OwnProps) {
+  const showKeys = useAltKey();
+  return <ConnectedMarkerTooltipContents {...props} showKeys={showKeys} />;
+}

src/hooks/useAltKey.ts

@@ -0,0 +1,64 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+
+// Global state for Alt key tracking
+let isAltPressed = false;
+const listeners = new Set<(pressed: boolean) => void>();
+
+// Initialize global event listeners once
+if (typeof window !== 'undefined') {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.altKey && !isAltPressed) {
+      isAltPressed = true;
+      listeners.forEach((listener) => listener(true));
+    }
+  };
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (!event.altKey && isAltPressed) {
+      isAltPressed = false;
+      listeners.forEach((listener) => listener(false));
+    }
+  };
+
+  const handleBlur = () => {
+    // Reset Alt state when window loses focus
+    if (isAltPressed) {
+      isAltPressed = false;
+      listeners.forEach((listener) => listener(false));
+    }
+  };
+
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+  window.addEventListener('blur', handleBlur);
+}
+
+/**
+ * Custom hook that tracks whether the Alt key is currently pressed.
+ * Returns true when Alt is pressed, false otherwise.
+ * The state is global and shared across all component instances.
+ */
+export function useAltKey(): boolean {
+  const [altPressed, setAltPressed] = React.useState(isAltPressed);
+
+  React.useEffect(() => {
+    // Set initial state
+    setAltPressed(isAltPressed);
+
+    // Subscribe to changes
+    const listener = (pressed: boolean) => {
+      setAltPressed(pressed);
+    };
+    listeners.add(listener);
+
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+
+  return altPressed;
+}