Skip to content

Fix treemap tooltip text color across light and dark themes - #10035

Open
prateek601 wants to merge 5 commits into
flutter:masterfrom
prateek601:fix/tooltip-text-color
Open

prateek601 wants to merge 5 commits into
flutter:masterfrom
prateek601:fix/tooltip-text-color

Conversation

@prateek601

@prateek601 prateek601 commented Oct 11, 2026 •

Copy link
Copy Markdown

Issue 1 : Currently tooltip text color for the nodes under the title bar shows white color text on the white background tooltip in dark mode on the Diff tab of App Size Screen. Rendering white text on white background of tooltip is not clearly visible as can be seen in screenshot.
Issue 2: Also in the light theme the tooltip renders greyish background and currently black color text is shown on the tooltip on the Analysis tab on the App Size screen for the nodes under the title bar (screenshot attached for reference) which is less visible as well. This is also being fixed in this PR.

This PR fixes both the above mentioned issues. Now the DevToolsToolTip richMessage parameter explicitly passes the color parameter in the displayTextSpan method which shows the appropriate tooltip color in light and dark theme modes.
Earlier since color was not explicitly passed, the tooltip text color was defaulted to black in Analysis tab and white in Diff tab

Before
in dark theme --> Diff tab --> tooltip text color is not visible
Screenshot 2026-10-10 at 10 01 00 AM

After
tooltip text color is visible
Screenshot 2026-10-10 at 10 01 33 AM

Before
in light theme --> Analysis tab --> black tooltip text color is not giving proper contrast (less visible)
Screenshot 2026-10-10 at 10 00 02 AM

After
tooltip text color is clearly visible
Screenshot 2026-10-11 at 3 51 59 PM

Pre-launch Checklist

General checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read the Flutter Style Guide recently, and have followed its advice.
  • I signed the CLA.
  • I updated/added relevant documentation (doc comments with ///).

Issues checklist

Tests checklist

  • I added new tests to check the change I am making...
  • OR there is a reason for not adding tests, which I explained in the PR description.

AI-tooling checklist

  • I did not use any AI tooling in creating this PR.
  • OR I did use AI tooling, and...
    • I read the AI contributions guidelines and agree to follow them.
    • I reviewed all AI-generated code before opening this PR.
    • I understand and am able to discuss the code in this PR.
    • I have verifed the accuracy of any AI-generated text included in the PR description.
    • I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

Feature-change checklist

  • This PR does not change the DevTools UI or behavior and...
    • I added the release-notes-not-required label or left a comment requesting the label be added.
  • OR this PR does change the DevTools UI or behavior and...
    • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.
    • I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
    • I ran the DevTools app locally to manually verify my changes.

build.yaml badge

If you need help, consider asking for help on Discord.

@prateek601
prateek601 marked this pull request as ready for review October 11, 2026 10:42
@prateek601
prateek601 requested a review from a team as a code owner October 11, 2026 10:42
@prateek601
prateek601 requested review from srawlins and removed request for a team October 11, 2026 10:42

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request fixes the treemap tooltip text color across light and dark themes by applying the correct theme color to the text span. It also updates the test wrappers to support dark theme configuration and adds tests to verify the tooltip text color in both themes. The review feedback suggests extracting a duplicated theme configuration block in the test wrappers into a helper function to adhere to the DRY principle.

Comment on lines 37 to 44
theme: themeFor(
isDarkTheme: false,
isDarkTheme: isDarkTheme,
ideTheme: IdeTheme(),
theme: ThemeData(useMaterial3: true, colorScheme: lightColorScheme),
theme: ThemeData(
useMaterial3: true,
colorScheme: isDarkTheme ? darkColorScheme : lightColorScheme,
),
),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

[CONCERN] The theme configuration block is duplicated between wrap and wrapSimple. Consider extracting this into a private helper function to adhere to the DRY principle and improve maintainability.

You can define the helper function at the top level of the file:

ThemeData _testTheme({required bool isDarkTheme}) {
  return themeFor(
    isDarkTheme: isDarkTheme,
    ideTheme: IdeTheme(),
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: isDarkTheme ? darkColorScheme : lightColorScheme,
    ),
  );
}
    theme: _testTheme(isDarkTheme: isDarkTheme),
References
  1. Use shared primitives and components rather than recreating them from scratch. Flag duplicated code blocks and suggest extracting them. (link)

… a helper function to adhere to the DRY principle

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant