From e64b1ed5e14e119282b6653809c159fec86493c9 Mon Sep 17 00:00:00 2001
From: Firefox Profiler Contributor <contributor@firefox-profiler.dev>
Date: Mon, 9 Nov 2026 21:57:09 +0800
Subject: [PATCH] Add tooltip to memory dropdown select element (#5352)

The call tree strategy dropdown (data source selector) only showed
tooltips for individual options when the menu was open. This made it
difficult for users to understand what options like "Deallocated memory"
or "Deallocation sites" mean after making a selection.

This fix converts the class component to a function component and uses
the useLocalization hook to get the localized description of the
currently selected strategy, then sets it as the title attribute on
the select element itself. Now users can hover over the closed dropdown
to see what the selected option means.

Fixes #5352
---
 .../shared/CallTreeStrategySetting.tsx        | 70 ++++++++++---------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/shared/CallTreeStrategySetting.tsx b/src/components/shared/CallTreeStrategySetting.tsx
index 39f11b155e..298ba2db3e 100644
--- a/src/components/shared/CallTreeStrategySetting.tsx
+++ b/src/components/shared/CallTreeStrategySetting.tsx
@@ -6,7 +6,7 @@
 // and various allocation call trees. It is only shown when the profile includes
 // allocation data.
 
-import { PureComponent } from 'react';
+import { useLocalization } from '@fluent/react';
 import { Localized } from '@fluent/react';
 
 import { changeCallTreeSummaryStrategy } from 'firefox-profiler/actions/profile-view';
@@ -48,42 +48,46 @@ const STRATEGY_L10N_IDS: Record<CallTreeSummaryStrategy, string> = {
     'StackSettings--call-tree-strategy-native-deallocations-sites',
 };
 
-class CallTreeStrategySettingImpl extends PureComponent<Props> {
-  _onCallTreeSummaryStrategyChange = (
-    e: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    this.props.changeCallTreeSummaryStrategy(
+function CallTreeStrategySettingImpl({
+  availableCallTreeSummaryStrategies,
+  callTreeSummaryStrategy,
+  changeCallTreeSummaryStrategy,
+}: Props) {
+  const { l10n } = useLocalization();
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    changeCallTreeSummaryStrategy(
       toValidCallTreeSummaryStrategy(e.currentTarget.value)
     );
   };
 
-  override render() {
-    const { availableCallTreeSummaryStrategies, callTreeSummaryStrategy } =
-      this.props;
-
-    return (
-      <>
-        <label>
-          <Localized id="StackSettings--use-data-source-label" />{' '}
-          <select
-            className="stackSettingsSelect"
-            onChange={this._onCallTreeSummaryStrategyChange}
-            value={callTreeSummaryStrategy}
-          >
-            {availableCallTreeSummaryStrategies.map((strategy) => (
-              <Localized
-                id={STRATEGY_L10N_IDS[strategy]}
-                attrs={{ title: true }}
-                key={strategy}
-              >
-                <option value={strategy}></option>
-              </Localized>
-            ))}
-          </select>
-        </label>
-      </>
-    );
-  }
+  const selectedTitle = l10n.getString(
+    STRATEGY_L10N_IDS[callTreeSummaryStrategy]
+  );
+
+  return (
+    <>
+      <label>
+        <Localized id="StackSettings--use-data-source-label" />{' '}
+        <select
+          className="stackSettingsSelect"
+          onChange={handleChange}
+          value={callTreeSummaryStrategy}
+          title={selectedTitle}
+        >
+          {availableCallTreeSummaryStrategies.map((strategy) => (
+            <Localized
+              id={STRATEGY_L10N_IDS[strategy]}
+              attrs={{ title: true }}
+              key={strategy}
+            >
+              <option value={strategy}></option>
+            </Localized>
+          ))}
+        </select>
+      </label>
+    </>
+  );
 }
 
 export const CallTreeStrategySetting = explicitConnect<