Repository navigation
Conversation
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 firefox-devtools#5352
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Main | Deploy preview
Summary
Fixes #5352
This PR adds a tooltip to the call tree strategy dropdown (the "data source" selector) so that users can see the description of the currently selected option even when the dropdown menu is closed.
Problem
Previously, the
<select>element for choosing between "Timing", "Deallocated memory", "Deallocation sites", etc. only showed tooltips on individual<option>elements. This meant users could only see what an option meant while the dropdown menu was open. Once closed, hovering over the select showed no description.Solution
CallTreeStrategySettingImplfrom a class component to a function componentuseLocalization()hook from@fluent/reactto retrieve the localized description of the currently selected strategytitleattribute on the<select>element itselfNow when users hover over the closed dropdown, they see a tooltip explaining what the selected data source means.
Changes
src/components/shared/CallTreeStrategySetting.tsx: Converted class component to function component, addedtitleattribute to<select>using localized stringTest Plan