Alternating colors look nice in tables when embedded in IDE (flutter#…

…8498)
kenzieschmoll · Nov 5, 2024 · 2184bba · 2184bba
1 parent f7091d2
commit 2184bba
Show file tree

Hide file tree

Showing 30 changed files with 37 additions and 38 deletions.
diff --git a/packages/devtools_app/lib/src/screens/inspector/layout_explorer/ui/utils.dart b/packages/devtools_app/lib/src/screens/inspector/layout_explorer/ui/utils.dart
@@ -7,7 +7,6 @@ import 'dart:ui';
 import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../shared/common_widgets.dart';
 import '../../../../shared/diagnostics/diagnostics_node.dart';
 import '../../../../shared/primitives/utils.dart';
 import '../../inspector_data_models.dart';

diff --git a/packages/devtools_app/lib/src/screens/inspector_v2/layout_explorer/ui/utils.dart b/packages/devtools_app/lib/src/screens/inspector_v2/layout_explorer/ui/utils.dart
@@ -7,7 +7,6 @@ import 'dart:ui';
 import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../shared/common_widgets.dart';
 import '../../../../shared/diagnostics/diagnostics_node.dart';
 import '../../../../shared/primitives/utils.dart';
 import '../../../inspector/layout_explorer/ui/dimension.dart';

diff --git a/packages/devtools_app/lib/src/screens/logging/metadata.dart b/packages/devtools_app/lib/src/screens/logging/metadata.dart
@@ -9,7 +9,6 @@ import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
 import 'package:logging/logging.dart';
 
-import '../../shared/common_widgets.dart';
 import '../../shared/primitives/utils.dart';
 import '../../shared/ui/icons.dart';
 import 'logging_controller.dart';

diff --git a/packages/devtools_app/lib/src/shared/common_widgets.dart b/packages/devtools_app/lib/src/shared/common_widgets.dart
@@ -940,36 +940,6 @@ extension LinkedScrollControllerGroupExtension on LinkedScrollControllerGroup {
   }
 }
 
-/// Utility extension methods to the [Color] class.
-extension ColorExtension on Color {
-  /// Return a slightly darker color than the current color.
-  Color darken([double percent = 0.05]) {
-    assert(0.0 <= percent && percent <= 1.0);
-    percent = 1.0 - percent;
-
-    final c = this;
-    return Color.from(
-      alpha: c.a,
-      red: c.r * percent,
-      green: c.g * percent,
-      blue: c.b * percent,
-    );
-  }
-
-  /// Return a slightly brighter color than the current color.
-  Color brighten([double percent = 0.05]) {
-    assert(0.0 <= percent && percent <= 1.0);
-
-    final c = this;
-    return Color.from(
-      alpha: c.a,
-      red: c.r + ((1.0 - c.r) * percent),
-      green: c.g + ((1.0 - c.g) * percent),
-      blue: c.b + ((1.0 - c.b) * percent),
-    );
-  }
-}
-
 class BreadcrumbNavigator extends StatelessWidget {
   const BreadcrumbNavigator.builder({
     super.key,

diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
@@ -13,6 +13,7 @@ To learn more about DevTools, check out the
 * Persist filter settings across sessions. - [#8447](https://github.com/flutter/devtools/pull/8447),
 [#8456](https://github.com/flutter/devtools/pull/8456)
 [#8470](https://github.com/flutter/devtools/pull/8470)
+* Tables match IDE theme when embedded in an IDE. - [#8498](https://github.com/flutter/devtools/pull/8498)
 
 ## Inspector updates
 

diff --git a/packages/devtools_app/test/shared/table_test.dart b/packages/devtools_app/test/shared/table_test.dart
@@ -1707,8 +1707,7 @@ void main() {
         final crackleFinder = find.byKey(const Key('Crackle'));
 
         // Expected ARGB color values.
-        const color1Value =
-            '(a: 1.0, r: 0.9490196078431372, g: 0.9411764705882353, b: 0.9568627450980393)';
+        const color1Value = '(a: 1.0, r: 0.94, g: 0.94, b: 0.94)';
         const color2Value = '(a: 1.0, r: 1.0, g: 1.0, b: 1.0)';
         const rowSelectedColorValue = '(a: 1.0, r: 1.0, g: 1.0, b: 1.0)';
 

diff --git a/...devtools_app/test/test_infra/goldens/cpu_profiler/method_table_no_selection.png b/...devtools_app/test/test_infra/goldens/cpu_profiler/method_table_no_selection.png
diff --git a/...vtools_app/test/test_infra/goldens/cpu_profiler/method_table_with_selection.png b/...vtools_app/test/test_infra/goldens/cpu_profiler/method_table_with_selection.png
diff --git a/...ools_app/test/test_infra/goldens/cpu_profiler/method_table_with_selection_2.png b/...ools_app/test/test_infra/goldens/cpu_profiler/method_table_with_selection_2.png
diff --git a/...pp/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png b/...pp/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png
diff --git a/...p/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png b/...p/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png
diff --git a/...infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png b/...infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png
diff --git a/...est_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png b/...est_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png
diff --git a/...t/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png b/...t/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png
diff --git a/...devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png b/...devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png
diff --git a/...s/devtools_app/test/test_infra/goldens/memory/load_offline_data_profile_tab.png b/...s/devtools_app/test/test_infra/goldens/memory/load_offline_data_profile_tab.png
diff --git a/...ges/devtools_app/test/test_infra/goldens/memory/load_offline_data_trace_tab.png b/...ges/devtools_app/test/test_infra/goldens/memory/load_offline_data_trace_tab.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_empty1.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_empty1.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_empty2.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_empty2.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_selected_class.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_selected_class.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_except_diff.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_except_diff.png
diff --git a/...ges/devtools_app/test/test_infra/goldens/memory_diff_snapshot_except_single.png b/...ges/devtools_app/test/test_infra/goldens/memory_diff_snapshot_except_single.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_scene_diff.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_scene_diff.png
diff --git a/...ages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_scene_single.png b/...ages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_scene_single.png
diff --git a/...ages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_showAll_diff.png b/...ages/devtools_app/test/test_infra/goldens/memory_diff_snapshot_showAll_diff.png
diff --git a/...es/devtools_app/test/test_infra/goldens/memory_diff_snapshot_showAll_single.png b/...es/devtools_app/test/test_infra/goldens/memory_diff_snapshot_showAll_single.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_three_snapshots1.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_three_snapshots1.png
diff --git a/packages/devtools_app/test/test_infra/goldens/memory_diff_three_snapshots2.png b/packages/devtools_app/test/test_infra/goldens/memory_diff_three_snapshots2.png
diff --git a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart
@@ -125,6 +125,9 @@ ThemeData _baseTheme({
     ),
     primaryTextTheme: _devToolsTextTheme(theme, theme.primaryTextTheme),
     textTheme: _devToolsTextTheme(theme, theme.textTheme),
+    colorScheme: theme.colorScheme.copyWith(
+      surface: backgroundColor,
+    ),
   );
 }
 
@@ -359,11 +362,10 @@ extension DevToolsSharedColorScheme on ColorScheme {
   Color get _devtoolsLink =>
       isLight ? const Color(0xFF1976D2) : Colors.lightBlueAccent;
 
-  Color get alternatingBackgroundColor1 =>
-      isLight ? Colors.white : const Color(0xFF1B1B1F);
+  Color get alternatingBackgroundColor1 => surface;
 
   Color get alternatingBackgroundColor2 =>
-      isLight ? const Color(0xFFF2F0F4) : const Color(0xFF303033);
+      isLight ? surface.darken(0.06) : surface.brighten(0.06);
 
   Color get selectedRowBackgroundColor =>
       isLight ? const Color(0xFFC7C6CA) : const Color(0xFF5E5E62);

diff --git a/packages/devtools_app_shared/lib/src/ui/ui_utils.dart b/packages/devtools_app_shared/lib/src/ui/ui_utils.dart
@@ -45,3 +45,33 @@ Color? tryParseColor(String? input, {Logger? logger}) {
     return null;
   }
 }
+
+/// Utility extension methods to the [Color] class.
+extension ColorExtension on Color {
+  /// Return a slightly darker color than the current color.
+  Color darken([double percent = 0.05]) {
+    assert(0.0 <= percent && percent <= 1.0);
+    percent = 1.0 - percent;
+
+    final c = this;
+    return Color.from(
+      alpha: c.a,
+      red: c.r * percent,
+      green: c.g * percent,
+      blue: c.b * percent,
+    );
+  }
+
+  /// Return a slightly brighter color than the current color.
+  Color brighten([double percent = 0.05]) {
+    assert(0.0 <= percent && percent <= 1.0);
+
+    final c = this;
+    return Color.from(
+      alpha: c.a,
+      red: c.r + ((1.0 - c.r) * percent),
+      green: c.g + ((1.0 - c.g) * percent),
+      blue: c.b + ((1.0 - c.b) * percent),
+    );
+  }
+}