From 7cbbea3871b8daf938afd38d274606e3bc0ba6f1 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:40:42 -0700 Subject: [PATCH 1/3] WIP --- .../_property_editor_sidebar_constants.dart | 3 + .../property_editor_panel.dart | 97 ++++++++++++++++--- 2 files changed, 85 insertions(+), 15 deletions(-) diff --git a/packages/devtools_app/lib/src/shared/analytics/constants/_property_editor_sidebar_constants.dart b/packages/devtools_app/lib/src/shared/analytics/constants/_property_editor_sidebar_constants.dart index c38bdd8e07a..b17bda01718 100644 --- a/packages/devtools_app/lib/src/shared/analytics/constants/_property_editor_sidebar_constants.dart +++ b/packages/devtools_app/lib/src/shared/analytics/constants/_property_editor_sidebar_constants.dart @@ -9,6 +9,9 @@ class PropertyEditorSidebar { /// Analytics id to track events that come from the DTD editor sidebar. static String get id => 'propertyEditorSidebar'; + /// Analytics id for opening the documentation. + static String get documentationLink => 'propertyEditorDocumentation'; + /// Analytics event that is sent when the property editor is updated with new /// properties. static String widgetPropertiesUpdate({String? name}) => diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart index 7cb8ff3b5f1..acbea17d441 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart @@ -9,9 +9,11 @@ import 'package:devtools_app_shared/utils.dart'; import 'package:dtd/dtd.dart'; import 'package:flutter/material.dart'; +import '../../../framework/scaffold/report_feedback_button.dart'; import '../../../shared/analytics/analytics.dart' as ga; import '../../../shared/analytics/constants.dart' as gac; import '../../../shared/editor/editor_client.dart'; +import '../../../shared/primitives/query_parameters.dart'; import '../../../shared/ui/common_widgets.dart'; import 'property_editor_controller.dart'; import 'property_editor_view.dart'; @@ -80,6 +82,8 @@ class _PropertyEditorPanelState extends State { class _PropertyEditorConnectedPanel extends StatefulWidget { const _PropertyEditorConnectedPanel(this.editor, {required this.controller}); + static const footerHeight = 25.0; + final EditorClient editor; final PropertyEditorController controller; @@ -115,22 +119,29 @@ class _PropertyEditorConnectedPanelState Scrollbar( controller: scrollController, thumbVisibility: true, - child: SingleChildScrollView( - controller: scrollController, - child: Padding( - padding: const EdgeInsets.fromLTRB( - denseSpacing, - defaultSpacing, - defaultSpacing, // Additional right padding for scroll bar. - defaultSpacing, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - PropertyEditorView(controller: widget.controller), - ], + child: Column( + children: [ + Expanded( + child: SingleChildScrollView( + controller: scrollController, + child: Padding( + padding: const EdgeInsets.fromLTRB( + denseSpacing, + defaultSpacing, + defaultSpacing, // Additional right padding for scroll bar. + defaultSpacing, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + PropertyEditorView(controller: widget.controller), + ], + ), + ), + ), ), - ), + const _PropertyEditorFooter(), + ], ), ), if (shouldReconnect) const ReconnectingOverlay(), @@ -140,3 +151,59 @@ class _PropertyEditorConnectedPanelState ); } } + +class _PropertyEditorFooter extends StatelessWidget { + const _PropertyEditorFooter(); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final colorScheme = theme.colorScheme; + final documentationLink = _documentationLink(); + return Container( + color: colorScheme.secondary, + height: _PropertyEditorConnectedPanel.footerHeight, + padding: const EdgeInsets.symmetric(vertical: densePadding), + alignment: Alignment.center, + child: Row( + children: [ + if (documentationLink != null) + _DocsLink(documentationLink: documentationLink), + const Spacer(), + ReportFeedbackButton(color: colorScheme.onSecondary), + ], + ), + ); + } + + String? _documentationLink() { + final queryParams = DevToolsQueryParams.load(); + final isEmbedded = queryParams.embedMode.embedded; + if (!isEmbedded) return null; + const uriPrefix = 'https://docs.flutter.dev/tools/'; + const uriHash = '#property-editor'; + return '$uriPrefix${queryParams.ide == 'VSCode' ? 'vs-code' : 'android-studio'}$uriHash'; + } +} + +class _DocsLink extends StatelessWidget { + const _DocsLink({required this.documentationLink}); + + final String documentationLink; + + @override + Widget build(BuildContext context) { + return RichText( + text: GaLinkTextSpan( + link: GaLink( + display: 'documentation', + url: documentationLink, + gaScreenName: gac.PropertyEditorSidebar.id, + gaSelectedItemDescription: + gac.PropertyEditorSidebar.documentationLink, + ), + context: context, + ), + ); + } +} From 8b5b6bf732182d36e0d1609e6f146eeff257a595 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Thu, 3 Apr 2025 14:50:26 -0700 Subject: [PATCH 2/3] Add footer for documentation / filing a bug --- .../property_editor/property_editor_panel.dart | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart index acbea17d441..9502a5ce2e2 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart @@ -161,16 +161,19 @@ class _PropertyEditorFooter extends StatelessWidget { final colorScheme = theme.colorScheme; final documentationLink = _documentationLink(); return Container( - color: colorScheme.secondary, + decoration: BoxDecoration( + color: colorScheme.surface, + border: Border(top: BorderSide(color: Theme.of(context).focusColor)), + ), height: _PropertyEditorConnectedPanel.footerHeight, padding: const EdgeInsets.symmetric(vertical: densePadding), alignment: Alignment.center, child: Row( children: [ + const Spacer(), if (documentationLink != null) _DocsLink(documentationLink: documentationLink), - const Spacer(), - ReportFeedbackButton(color: colorScheme.onSecondary), + ReportFeedbackButton(color: colorScheme.onSurface), ], ), ); From 1c84be7beda57976ab7a9011cc0c5875240670fe Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Thu, 3 Apr 2025 15:14:21 -0700 Subject: [PATCH 3/3] Clean up --- .../property_editor_panel.dart | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart index 9502a5ce2e2..368e6a4160a 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart @@ -82,8 +82,6 @@ class _PropertyEditorPanelState extends State { class _PropertyEditorConnectedPanel extends StatefulWidget { const _PropertyEditorConnectedPanel(this.editor, {required this.controller}); - static const footerHeight = 25.0; - final EditorClient editor; final PropertyEditorController controller; @@ -155,6 +153,8 @@ class _PropertyEditorConnectedPanelState class _PropertyEditorFooter extends StatelessWidget { const _PropertyEditorFooter(); + static const _footerHeight = 25.0; + @override Widget build(BuildContext context) { final theme = Theme.of(context); @@ -165,14 +165,20 @@ class _PropertyEditorFooter extends StatelessWidget { color: colorScheme.surface, border: Border(top: BorderSide(color: Theme.of(context).focusColor)), ), - height: _PropertyEditorConnectedPanel.footerHeight, + height: _footerHeight, padding: const EdgeInsets.symmetric(vertical: densePadding), - alignment: Alignment.center, child: Row( + crossAxisAlignment: CrossAxisAlignment.end, children: [ - const Spacer(), if (documentationLink != null) - _DocsLink(documentationLink: documentationLink), + Padding( + padding: const EdgeInsets.only(left: denseSpacing), + child: _DocsLink( + documentationLink: documentationLink, + color: colorScheme.onSurface, + ), + ), + const Spacer(), ReportFeedbackButton(color: colorScheme.onSurface), ], ), @@ -190,23 +196,22 @@ class _PropertyEditorFooter extends StatelessWidget { } class _DocsLink extends StatelessWidget { - const _DocsLink({required this.documentationLink}); + const _DocsLink({required this.documentationLink, required this.color}); + final Color color; final String documentationLink; @override Widget build(BuildContext context) { - return RichText( - text: GaLinkTextSpan( - link: GaLink( - display: 'documentation', - url: documentationLink, - gaScreenName: gac.PropertyEditorSidebar.id, - gaSelectedItemDescription: - gac.PropertyEditorSidebar.documentationLink, - ), - context: context, + return LinkIconLabel( + icon: Icons.library_books_outlined, + link: GaLink( + display: 'Docs', + url: documentationLink, + gaScreenName: gac.PropertyEditorSidebar.id, + gaSelectedItemDescription: gac.PropertyEditorSidebar.documentationLink, ), + color: color, ); } }