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

Author: gords2

packages/devtools_app/lib/src/shared/table/_table_row.dart

@@ -324,8 +324,8 @@ class _TableRowState<T> extends State<TableRow<T>>
     final searchAwareBackgroundColor = isSearchMatch
         ? Color.alphaBlend(
             isActiveSearchMatch
-                ? activeSearchMatchColorOpaque
-                : searchMatchColorOpaque,
+                ? activeSearchMatchColorTranslucent
+                : searchMatchColorTranslucent,
             backgroundColor,
           )
         : backgroundColor;

packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

@@ -15,7 +15,9 @@ To learn more about DevTools, check out the
 
 ## 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
 

packages/devtools_app_shared/lib/src/ui/theme/theme.dart

@@ -224,10 +224,11 @@ const darkColorScheme = ColorScheme(
 );
 
 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) {

packages/devtools_app_shared/test/ui/theme_test.dart

@@ -99,4 +99,15 @@ void main() {
       );
     });
   });
+
+  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));
+    });
+  });
 }