Use new icons for DevTools screens (flutter#8181)

packages/devtools_app/integration_test/test/live_connection/debugger_panel_test.dart

@@ -33,7 +33,8 @@ void main() {
     await pumpAndConnectDevTools(tester, testApp);
     await switchToScreen(
       tester,
-      tabIcon: ScreenMetaData.debugger.icon!,
+      tabIcon: ScreenMetaData.debugger.icon,
+      tabIconAsset: ScreenMetaData.debugger.iconAsset,
       screenId: ScreenMetaData.debugger.id,
     );
     await tester.pump(safePumpDuration);

packages/devtools_app/integration_test/test/live_connection/devtools_extensions_test.dart

@@ -199,6 +199,7 @@ Future<void> _switchToExtensionScreen(
   await switchToScreen(
     tester,
     tabIcon: extensionConfig.icon,
+    tabIconAsset: null,
     screenId: extensionConfig.displayName,
     warnIfTapMissed: false,
   );
@@ -224,7 +225,11 @@ Future<void> _verifyExtensionTabVisibility(
     '${!visible ? 'not' : ''} visible',
   );
   final extensionConfig = extensionService.availableExtensions[extensionIndex];
-  final tabFinder = await findTab(tester, extensionConfig.icon);
+  final tabFinder = await findTab(
+    tester,
+    icon: extensionConfig.icon,
+    iconAsset: extensionConfig.name,
+  );
   expect(tabFinder.evaluate(), visible ? isNotEmpty : isEmpty);
 }
 

packages/devtools_app/integration_test/test/live_connection/eval_utils.dart

@@ -61,7 +61,8 @@ class EvalTester {
     // Open the inspector screen.
     await switchToScreen(
       tester,
-      tabIcon: ScreenMetaData.inspector.icon!,
+      tabIcon: ScreenMetaData.inspector.icon,
+      tabIconAsset: ScreenMetaData.inspector.iconAsset,
       screenId: ScreenMetaData.inspector.id,
     );
     await tester.pumpAndSettle();

packages/devtools_app/integration_test/test/live_connection/memory_screen_helpers.dart

@@ -21,7 +21,8 @@ Future<void> prepareMemoryUI(
   // Open memory screen.
   await switchToScreen(
     tester,
-    tabIcon: ScreenMetaData.memory.icon!,
+    tabIcon: ScreenMetaData.memory.icon,
+    tabIconAsset: ScreenMetaData.memory.iconAsset,
     screenId: ScreenMetaData.memory.id,
   );
 

packages/devtools_app/integration_test/test/live_connection/performance_screen_event_recording_test.dart

@@ -35,7 +35,8 @@ void main() {
 
       await switchToScreen(
         tester,
-        tabIcon: ScreenMetaData.performance.icon!,
+        tabIcon: ScreenMetaData.performance.icon,
+        tabIconAsset: ScreenMetaData.performance.iconAsset,
         screenId: ScreenMetaData.performance.id,
       );
       await tester.pump(safePumpDuration);

packages/devtools_app/integration_test/test/live_connection/service_extensions_test.dart

@@ -46,7 +46,8 @@ void main() {
       // on the inspector screen for this to pass.
       await switchToScreen(
         tester,
-        tabIcon: ScreenMetaData.inspector.icon!,
+        tabIcon: ScreenMetaData.inspector.icon,
+        tabIconAsset: ScreenMetaData.inspector.iconAsset,
         screenId: ScreenMetaData.inspector.id,
       );
       await tester.pump(longDuration);

packages/devtools_app/lib/src/extensions/extension_settings.dart

@@ -20,7 +20,7 @@ import 'extension_screen.dart';
 class ExtensionSettingsAction extends ScaffoldAction {
   ExtensionSettingsAction({super.key, super.color})
       : super(
-          icon: Icons.extension_outlined,
+          iconAsset: 'icons/app_bar/devtools_extensions.png',
           tooltip: 'DevTools Extensions',
           onPressed: (context) {
             unawaited(

packages/devtools_app/lib/src/screens/logging/logging_screen.dart

@@ -25,12 +25,7 @@ import 'shared/constants.dart';
 
 /// Presents logs from the connected app.
 class LoggingScreen extends Screen {
-  LoggingScreen()
-      : super(
-          id,
-          title: ScreenMetaData.logging.title,
-          icon: ScreenMetaData.logging.icon,
-        );
+  LoggingScreen() : super.fromMetaData(ScreenMetaData.logging);
 
   static final id = ScreenMetaData.logging.id;
 

packages/devtools_app/lib/src/screens/logging/logging_screen_v2/logging_screen_v2.dart

@@ -17,12 +17,7 @@ import 'logging_table_v2.dart';
 
 /// Presents logs from the connected app.
 class LoggingScreenV2 extends Screen {
-  LoggingScreenV2()
-      : super(
-          id,
-          title: ScreenMetaData.logging.title,
-          icon: ScreenMetaData.logging.icon,
-        );
+  LoggingScreenV2() : super.fromMetaData(ScreenMetaData.logging);
 
   static final id = ScreenMetaData.logging.id;
 

packages/devtools_app/lib/src/shared/common_widgets.dart

@@ -24,6 +24,7 @@ import 'globals.dart';
 import 'primitives/flutter_widgets/linked_scroll_controller.dart';
 import 'primitives/utils.dart';
 import 'routing.dart';
+import 'ui/icons.dart';
 import 'utils.dart';
 
 double get assumedMonospaceCharacterWidth =>
@@ -663,13 +664,25 @@ class ToolbarAction extends StatelessWidget {
 abstract class ScaffoldAction extends StatelessWidget {
   const ScaffoldAction({
     super.key,
-    required this.icon,
     required this.tooltip,
     required this.onPressed,
+    this.icon,
+    this.iconAsset,
     this.color,
-  });
+  }) : assert(
+          (icon == null) != (iconAsset == null),
+          'Exactly one of icon and iconAsset must be specified.',
+        );
 
-  final IconData icon;
+  /// The icon to use for this scaffold action.
+  ///
+  /// Only one of [icon] or [iconAsset] may be non-null.
+  final IconData? icon;
+
+  /// The icon asset path to render as the icon for this scaffold action.
+  ///
+  /// Only one of [icon] or [iconAsset] may be non-null.
+  final String? iconAsset;
 
   final String tooltip;
 
@@ -687,8 +700,9 @@ abstract class ScaffoldAction extends StatelessWidget {
           width: actionWidgetSize,
           height: actionWidgetSize,
           alignment: Alignment.center,
-          child: Icon(
-            icon,
+          child: DevToolsIcon(
+            icon: icon,
+            iconAsset: iconAsset,
             size: actionsIconSize,
             color: color,
           ),

packages/devtools_app/lib/src/shared/screen.dart

@@ -19,33 +19,34 @@ import 'ui/icons.dart';
 
 final _log = Logger('screen.dart');
 
+// TODO(kenz): use correct assets.
 enum ScreenMetaData {
   home(
     'home',
-    icon: Icons.home_rounded,
+    iconAsset: 'icons/app_bar/devtools.png',
     requiresConnection: false,
     tutorialVideoTimestamp: '?t=0',
   ),
   inspector(
     'inspector',
     title: 'Flutter Inspector',
-    icon: Octicons.deviceMobile,
+    iconAsset: 'icons/app_bar/inspector.png',
     requiresFlutter: true,
     requiresDebugBuild: true,
     tutorialVideoTimestamp: '?t=172',
   ),
   performance(
     'performance',
     title: 'Performance',
-    icon: Octicons.pulse,
+    iconAsset: 'icons/app_bar/performance.png',
     worksWithOfflineData: true,
     requiresConnection: false,
     tutorialVideoTimestamp: '?t=261',
   ),
   cpuProfiler(
     'cpu-profiler',
     title: 'CPU Profiler',
-    icon: Octicons.dashboard,
+    iconAsset: 'icons/app_bar/cpu_profiler.png',
     requiresDartVm: true,
     worksWithOfflineData: true,
     requiresConnection: false,
@@ -54,7 +55,7 @@ enum ScreenMetaData {
   memory(
     'memory',
     title: 'Memory',
-    icon: Octicons.package,
+    iconAsset: 'icons/app_bar/memory.png',
     requiresDartVm: true,
     // ignore: avoid_redundant_argument_values, false positive
     requiresConnection: !FeatureFlags.memoryOffline,
@@ -72,14 +73,14 @@ enum ScreenMetaData {
   network(
     'network',
     title: 'Network',
-    icon: Icons.network_check,
+    iconAsset: 'icons/app_bar/network.png',
     requiresDartVm: true,
     tutorialVideoTimestamp: '?t=547',
   ),
   logging(
     'logging',
     title: 'Logging',
-    icon: Octicons.clippy,
+    iconAsset: 'icons/app_bar/logging.png',
     tutorialVideoTimestamp: '?t=558',
   ),
   provider(
@@ -92,15 +93,15 @@ enum ScreenMetaData {
   appSize(
     'app-size',
     title: 'App Size',
-    icon: Octicons.fileZip,
+    iconAsset: 'icons/app_bar/app_size.png',
     requiresConnection: false,
     requiresDartVm: true,
     tutorialVideoTimestamp: '?t=575',
   ),
   deepLinks(
     'deep-links',
     title: 'Deep Links',
-    icon: Icons.link_rounded,
+    iconAsset: 'icons/app_bar/deep_links.png',
     requiresConnection: false,
     requiresDartVm: true,
   ),
@@ -116,6 +117,7 @@ enum ScreenMetaData {
     this.id, {
     this.title,
     this.icon,
+    this.iconAsset,
     this.requiresConnection = true,
     this.requiresDartVm = false,
     this.requiresFlutter = false,
@@ -124,11 +126,15 @@ enum ScreenMetaData {
     this.worksWithOfflineData = false,
     this.requiresLibrary,
     this.tutorialVideoTimestamp,
-  });
+  }) : assert(
+          icon == null || iconAsset == null,
+          'Only one of icon or iconAsset may be specified.',
+        );
 
   final String id;
   final String? title;
   final IconData? icon;
+  final String? iconAsset;
   final bool requiresConnection;
   final bool requiresDartVm;
   final bool requiresFlutter;
@@ -177,6 +183,7 @@ abstract class Screen {
     this.title,
     this.titleGenerator,
     this.icon,
+    this.iconAsset,
     this.tabKey,
     this.requiresLibrary,
     this.requiresConnection = true,
@@ -186,7 +193,14 @@ abstract class Screen {
     this.requiresVmDeveloperMode = false,
     this.worksWithOfflineData = false,
     this.showFloatingDebuggerControls = true,
-  }) : assert((title == null) || (titleGenerator == null));
+  })  : assert(
+          title == null || titleGenerator == null,
+          'Only one of title or titleGenerator may be specified.',
+        ),
+        assert(
+          icon == null || iconAsset == null,
+          'Only one of icon or iconAsset may be specified.',
+        );
 
   const Screen.conditional({
     required String id,
@@ -202,6 +216,7 @@ abstract class Screen {
     String? title,
     String Function()? titleGenerator,
     IconData? icon,
+    String? iconAsset,
     Key? tabKey,
   }) : this(
           id,
@@ -216,6 +231,7 @@ abstract class Screen {
           title: title,
           titleGenerator: titleGenerator,
           icon: icon,
+          iconAsset: iconAsset,
           tabKey: tabKey,
         );
 
@@ -239,6 +255,7 @@ abstract class Screen {
           title: titleGenerator == null ? metadata.title : null,
           titleGenerator: titleGenerator,
           icon: metadata.icon,
+          iconAsset: metadata.iconAsset,
           tabKey: tabKey,
         );
 
@@ -269,8 +286,16 @@ abstract class Screen {
 
   String get _userFacingTitle => title ?? titleGenerator?.call() ?? '';
 
+  /// The icon to use for this screen's tab.
+  ///
+  /// Only one of [icon] or [iconAsset] may be non-null.
   final IconData? icon;
 
+  /// The icon asset path to render as the icon for this screen's tab.
+  ///
+  /// Only one of [icon] or [iconAsset] may be non-null.
+  final String? iconAsset;
+
   /// An optional key to use when creating the Tab widget (for use during
   /// testing).
   final Key? tabKey;
@@ -335,7 +360,7 @@ abstract class Screen {
       text: TextSpan(text: title),
       textDirection: TextDirection.ltr,
     )..layout();
-    const measurementBuffer = 2.0;
+    const measurementBuffer = 1.0;
     return painter.width +
         denseSpacing +
         defaultIconSize +
@@ -360,7 +385,15 @@ abstract class Screen {
           key: tabKey,
           child: Row(
             children: <Widget>[
-              Icon(icon, size: defaultIconSize),
+              if (icon != null || iconAsset != null)
+                DevToolsIcon(
+                  icon: icon,
+                  iconAsset: iconAsset,
+                  size: iconAsset != null
+                      // Add 1.0 to adjust for margins on the screen icon assets.
+                      ? scaleByFontFactor(defaultIconSizeBeforeScaling + 1.0)
+                      : defaultIconSize,
+                ),
               if (title.isNotEmpty)
                 Padding(
                   padding: const EdgeInsets.only(left: denseSpacing),