Fix bad contrast for highlighted search results in tables (#9863) * Fix bad contrast for highlighted search results in tables `searchMatchColorOpaque` and `activeSearchMatchColorOpaque` are blended over the row background to highlight search matches. They were migrated from `withOpacity(0.5)` to `withValues(alpha: 255 / 2)` in #8784; since `withValues` expects alpha in the range 0.0-1.0, `255 / 2` clamps to fully opaque. Matched rows then got a solid yellow/orange background while the row text kept its theme color, making it unreadable (especially in dark mode). Restore the intended 0.5 alpha so the highlight stays translucent and the row text remains legible, and add a regression test. Fixes #9010 * Rename search match colors to *Translucent; add release note
diff --git a/packages/devtools_app/lib/src/shared/table/_table_row.dart b/packages/devtools_app/lib/src/shared/table/_table_row.dart index afecd70..8f2bfbe 100644 --- a/packages/devtools_app/lib/src/shared/table/_table_row.dart +++ b/packages/devtools_app/lib/src/shared/table/_table_row.dart
@@ -324,8 +324,8 @@ final searchAwareBackgroundColor = isSearchMatch ? Color.alphaBlend( isActiveSearchMatch - ? activeSearchMatchColorOpaque - : searchMatchColorOpaque, + ? activeSearchMatchColorTranslucent + : searchMatchColorTranslucent, backgroundColor, ) : backgroundColor;
diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md index 2cd2c92..982483f 100644 --- a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md +++ b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
@@ -15,7 +15,9 @@ ## General updates -TODO: Remove this section if there are not any updates. +* Fixed a bug where highlighted search matches in tables were unreadable in dark + mode because the highlight color had become fully opaque. - + [#9863](https://github.com/flutter/devtools/pull/9863) ## Inspector updates
diff --git a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart index 07c1bf1..0480cf3 100644 --- a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart +++ b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart
@@ -224,10 +224,11 @@ ); const searchMatchColor = Colors.yellow; -final searchMatchColorOpaque = Colors.yellow.withValues(alpha: 255 / 2); +final searchMatchColorTranslucent = Colors.yellow.withValues(alpha: 0.5); const activeSearchMatchColor = Colors.orangeAccent; -final activeSearchMatchColorOpaque = - Colors.orangeAccent.withValues(alpha: 255 / 2); +final activeSearchMatchColorTranslucent = Colors.orangeAccent.withValues( + alpha: 0.5, +); /// Gets an alternating color to use for indexed UI elements. Color alternatingColorForIndex(int index, ColorScheme colorScheme) {
diff --git a/packages/devtools_app_shared/test/ui/theme_test.dart b/packages/devtools_app_shared/test/ui/theme_test.dart index fdea9c2..29043fe 100644 --- a/packages/devtools_app_shared/test/ui/theme_test.dart +++ b/packages/devtools_app_shared/test/ui/theme_test.dart
@@ -99,4 +99,15 @@ ); }); }); + + group('search match colors', () { + // Regression test for https://github.com/flutter/devtools/issues/9010: the + // "opaque" search match colors are blended over the row background, so they + // must stay translucent. Otherwise the (theme-colored) row text is drawn on + // a fully opaque highlight and becomes unreadable. + test('are translucent so row text stays legible', () { + expect(searchMatchColorTranslucent.a, closeTo(0.5, 0.001)); + expect(activeSearchMatchColorTranslucent.a, closeTo(0.5, 0.001)); + }); + }); }