Create rich tooltip for Flutter frames in the performance view

packages/devtools_app/lib/src/analytics/constants.dart

@@ -60,6 +60,7 @@ const String trackLayouts = 'trackLayouts';
 const disableClipLayersOption = 'disableClipLayers';
 const disableOpacityLayersOption = 'disableOpacityLayers';
 const disablePhysicalShapeLayersOption = 'disablePhysicalShapeLayers';
+const shaderCompilationDocsTooltipLink = 'shaderCompilationDocsTooltipLink';
 
 // CPU profiler UX actions:
 const profileGranularityPrefix = 'profileGranularity';

packages/devtools_app/lib/src/app.dart

@@ -528,18 +528,16 @@ class DevToolsAboutDialog extends StatelessWidget {
   }
 
   Widget _createFeedbackLink(BuildContext context) {
-    final reportIssuesLink = devToolsExtensionPoints.issueTrackerLink();
-    return InkWell(
-      onTap: () async {
-        ga.select(
-          analytics_constants.devToolsMain,
-          analytics_constants.feedbackLink,
-        );
-        await launchUrl(reportIssuesLink.url, context);
-      },
-      child: Text(
-        reportIssuesLink.display,
-        style: Theme.of(context).linkTextStyle,
+    return RichText(
+      text: LinkTextSpan(
+        link: devToolsExtensionPoints.issueTrackerLink(),
+        context: context,
+        onTap: () {
+          ga.select(
+            analytics_constants.devToolsMain,
+            analytics_constants.feedbackLink,
+          );
+        },
       ),
     );
   }

packages/devtools_app/lib/src/banner_messages.dart

@@ -3,12 +3,10 @@
 // found in the LICENSE file.
 
 import 'package:flutter/foundation.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 import 'common_widgets.dart';
-import 'config_specific/launch_url/launch_url.dart';
 import 'globals.dart';
 import 'screen.dart';
 import 'theme.dart';
@@ -243,17 +241,13 @@ Relaunch your application with the '--profile' argument, or ''',
             fontSize: defaultFontSize,
           ),
         ),
-        TextSpan(
-          text: 'relaunch in profile mode from VS Code or IntelliJ',
-          style: TextStyle(
-            decoration: TextDecoration.underline,
-            color: _BannerError.linkColor,
-            fontSize: defaultFontSize,
+        LinkTextSpan(
+          link: const Link(
+            display: 'relaunch in profile mode from VS Code or IntelliJ',
+            url: _runInProfileModeDocsUrl,
           ),
-          recognizer: TapGestureRecognizer()
-            ..onTap = () async {
-              await launchUrl(_runInProfileModeDocsUrl, context);
-            },
+          context: context,
+          style: Theme.of(context).errorMessageLinkStyle,
         ),
         TextSpan(
           text: '.',
@@ -320,17 +314,13 @@ To pre-compile shaders, see the instructions at ''',
             fontSize: defaultFontSize,
           ),
         ),
-        TextSpan(
-          text: preCompileShadersDocsUrl,
-          style: TextStyle(
-            decoration: TextDecoration.underline,
-            color: _BannerError.linkColor,
-            fontSize: defaultFontSize,
+        LinkTextSpan(
+          link: const Link(
+            display: preCompileShadersDocsUrl,
+            url: preCompileShadersDocsUrl,
           ),
-          recognizer: TapGestureRecognizer()
-            ..onTap = () async {
-              await launchUrl(preCompileShadersDocsUrl, context);
-            },
+          context: context,
+          style: Theme.of(context).errorMessageLinkStyle,
         ),
         TextSpan(
           text: '.',
@@ -365,17 +355,13 @@ You are opting in to a high CPU sampling rate. This may affect the performance o
             fontSize: defaultFontSize,
           ),
         ),
-        TextSpan(
-          text: 'documentation',
-          style: TextStyle(
-            decoration: TextDecoration.underline,
-            color: _BannerWarning.linkColor,
-            fontSize: defaultFontSize,
+        LinkTextSpan(
+          link: const Link(
+            display: 'documentation',
+            url: _profileGranularityDocsUrl,
           ),
-          recognizer: TapGestureRecognizer()
-            ..onTap = () async {
-              await launchUrl(_profileGranularityDocsUrl, context);
-            },
+          context: context,
+          style: Theme.of(context).warningMessageLinkStyle,
         ),
         TextSpan(
           text: ' to understand the trade-offs associated with this setting.',
@@ -408,17 +394,13 @@ For the most accurate absolute memory stats, relaunch your application with the
             fontSize: defaultFontSize,
           ),
         ),
-        TextSpan(
-          text: 'relaunch in profile mode from VS Code or IntelliJ',
-          style: TextStyle(
-            decoration: TextDecoration.underline,
-            color: _BannerWarning.linkColor,
-            fontSize: defaultFontSize,
+        LinkTextSpan(
+          link: const Link(
+            display: 'relaunch in profile mode from VS Code or IntelliJ',
+            url: _runInProfileModeDocsUrl,
           ),
-          recognizer: TapGestureRecognizer()
-            ..onTap = () async {
-              await launchUrl(_runInProfileModeDocsUrl, context);
-            },
+          context: context,
+          style: Theme.of(context).warningMessageLinkStyle,
         ),
         TextSpan(
           text: '.',
@@ -454,3 +436,17 @@ void maybePushDebugModeMemoryMessage(
         .addMessage(DebugModeMemoryMessage(screenId).build(context));
   }
 }
+
+extension BannerMessageThemeExtension on ThemeData {
+  TextStyle get warningMessageLinkStyle => TextStyle(
+        decoration: TextDecoration.underline,
+        color: _BannerWarning.linkColor,
+        fontSize: defaultFontSize,
+      );
+
+  TextStyle get errorMessageLinkStyle => TextStyle(
+        decoration: TextDecoration.underline,
+        color: _BannerError.linkColor,
+        fontSize: defaultFontSize,
+      );
+}

packages/devtools_app/lib/src/common_widgets.dart

@@ -6,8 +6,11 @@ import 'dart:convert';
 import 'dart:math';
 
 import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 
+import 'analytics/analytics.dart' as ga;
+import 'config_specific/launch_url/launch_url.dart';
 import 'globals.dart';
 import 'scaffold.dart';
 import 'theme.dart';
@@ -627,17 +630,20 @@ class DevToolsTooltip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    TextStyle style = textStyle;
+    if (richMessage == null) {
+      style = TextStyle(
+        color: Theme.of(context).colorScheme.tooltipTextColor,
+        fontSize: defaultFontSize,
+      );
+    }
     return Tooltip(
       message: message,
       richMessage: richMessage,
       waitDuration: waitDuration,
       preferBelow: preferBelow,
       padding: padding,
-      textStyle: textStyle ??
-          TextStyle(
-            color: Theme.of(context).colorScheme.tooltipTextColor,
-            fontSize: defaultFontSize,
-          ),
+      textStyle: style,
       decoration: decoration,
       child: child,
     );
@@ -1310,6 +1316,71 @@ class FormattedJson extends StatelessWidget {
   }
 }
 
+class MoreInfoLink extends StatelessWidget {
+  const MoreInfoLink({
+    Key key,
+    @required this.url,
+    @required this.gaScreenName,
+    @required this.gaSelectedItemDescription,
+  }) : super(key: key);
+
+  final String url;
+
+  final String gaScreenName;
+
+  final String gaSelectedItemDescription;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return InkWell(
+      onTap: () => _onLinkTap(context),
+      borderRadius: BorderRadius.circular(defaultBorderRadius),
+      child: Padding(
+        padding: const EdgeInsets.all(denseSpacing),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            Text(
+              'More info',
+              style: theme.linkTextStyle,
+            ),
+            const SizedBox(width: densePadding),
+            Icon(
+              Icons.launch,
+              size: tooltipIconSize,
+              color: theme.colorScheme.toggleButtonsTitle,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _onLinkTap(BuildContext context) {
+    launchUrl(url, context);
+    ga.select(gaScreenName, gaSelectedItemDescription);
+  }
+}
+
+class LinkTextSpan extends TextSpan {
+  LinkTextSpan({
+    @required Link link,
+    @required BuildContext context,
+    TextStyle style,
+    VoidCallback onTap,
+  }) : super(
+          text: link.display,
+          style: style ?? Theme.of(context).linkTextStyle,
+          recognizer: TapGestureRecognizer()
+            ..onTap = () async {
+              if (onTap != null) onTap();
+              await launchUrl(link.url, context);
+            },
+        );
+}
+
 class Link {
   const Link({this.display, this.url});
 

packages/devtools_app/lib/src/debugger/codeview.dart

@@ -21,6 +21,7 @@ import '../globals.dart';
 import '../history_viewport.dart';
 import '../theme.dart';
 import '../ui/colors.dart';
+import '../ui/hover.dart';
 import '../ui/search.dart';
 import '../ui/utils.dart';
 import '../utils.dart';
@@ -29,7 +30,6 @@ import 'common.dart';
 import 'debugger_controller.dart';
 import 'debugger_model.dart';
 import 'file_search.dart';
-import 'hover.dart';
 import 'key_sets.dart';
 import 'program_explorer_model.dart';
 import 'variables.dart';

packages/devtools_app/lib/src/device_dialog.dart

@@ -52,20 +52,16 @@ class DeviceDialog extends StatelessWidget {
     final items = {
       'Dart Version': version,
       'CPU / OS': '${vm.targetCPU}$bits / ${vm.operatingSystem}',
+      if (flutterVersion != null) ...{
+        'Flutter Version':
+            '${flutterVersion.version} / ${flutterVersion.channel}',
+        'Framework / Engine': '${flutterVersion.frameworkRevision} / '
+            '${flutterVersion.engineRevision}',
+      },
+      if (serviceManager.service.connectedUri != null)
+        'VM Service Connection': serviceManager.service.connectedUri.toString(),
     };
 
-    if (flutterVersion != null) {
-      items['Flutter Version'] =
-          '${flutterVersion.version} / ${flutterVersion.channel}';
-      items['Framework / Engine'] = '${flutterVersion.frameworkRevision} / '
-          '${flutterVersion.engineRevision}';
-    }
-
-    if (serviceManager.service.connectedUri != null) {
-      items['VM Service Connection'] =
-          serviceManager.service.connectedUri.toString();
-    }
-
     // TODO(kenz): set actions alignment to `spaceBetween` if
     // https://github.com/flutter/flutter/issues/69708 is fixed.
     return DevToolsDialog(

packages/devtools_app/lib/src/inspector/diagnostics.dart

@@ -6,10 +6,10 @@ import 'package:flutter/material.dart';
 
 import '../debugger/debugger_controller.dart';
 import '../debugger/debugger_model.dart';
-import '../debugger/hover.dart';
 import '../debugger/variables.dart';
 import '../globals.dart';
 import '../theme.dart';
+import '../ui/hover.dart';
 import '../ui/icons.dart';
 import '../utils.dart';
 import 'diagnostics_node.dart';