Skip to content

Commit

Permalink
Create rich tooltip for Flutter frames in the performance view (#3493)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenzieschmoll
kenzieschmoll committed Nov 10, 2021
1 parent 599a2f4 commit 1928974
Show file tree
Hide file tree
Showing 16 changed files with 282 additions and 163 deletions.
1 change: 1 addition & 0 deletions packages/devtools_app/lib/src/analytics/constants.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
22 changes: 10 additions & 12 deletions packages/devtools_app/lib/src/app.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
},
),
);
}
Expand Down
80 changes: 38 additions & 42 deletions packages/devtools_app/lib/src/banner_messages.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: '.',
Expand Down Expand Up @@ -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: '.',
Expand Down Expand Up @@ -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.',
Expand Down Expand Up @@ -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: '.',
Expand Down Expand Up @@ -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,
);
}
81 changes: 76 additions & 5 deletions packages/devtools_app/lib/src/common_widgets.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
);
Expand Down Expand Up @@ -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});

Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/debugger/codeview.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down
20 changes: 8 additions & 12 deletions packages/devtools_app/lib/src/device_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/inspector/diagnostics.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading

0 comments on commit 1928974

Please sign in to comment.