Skip to content

[Property Editor] Add a footer for opening documentation / reporting errors #9099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 4, 2025
Merged

[Property Editor] Add a footer for opening documentation / reporting errors #9099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7cbbea3
WIP
elliette Apr 1, 2025
8b5b6bf
Add footer for documentation / filing a bug
elliette Apr 3, 2025
1c84be7
Clean up
elliette Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...s/devtools_app/lib/src/shared/analytics/constants/_property_editor_sidebar_constants.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}) =>
Expand Down
105 changes: 90 additions & 15 deletions .../devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_panel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -115,22 +117,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(
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),
],
),
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
PropertyEditorView(controller: widget.controller),
],
),
),
const _PropertyEditorFooter(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use the existing StatusLine widget or at least its sub components?

Copy link
Member Author

@elliette elliette Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the StatusLine and its components expect there to be a Screen, which doesn't exist for the Property Editor or other side panels - I think there would be some refactoring necessary to make that work but could do as a follow-up!

The side panel "screens" are actually widgets and not Screens:

devtools/packages/devtools_app/lib/src/standalone_ui/standalone_screen.dart

Line 63 in bb11f19

class _DtdConnectedScreen extends StatelessWidget {

Copy link
Member

@kenzieschmoll kenzieschmoll Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sg to clean up later. At the very least we could make the DocumentationLink widget more general and not depend on a screen

],
),
),
if (shouldReconnect) const ReconnectingOverlay(),
Expand All @@ -140,3 +149,69 @@ class _PropertyEditorConnectedPanelState
);
}
}

class _PropertyEditorFooter extends StatelessWidget {
const _PropertyEditorFooter();

static const _footerHeight = 25.0;

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final documentationLink = _documentationLink();
return Container(
decoration: BoxDecoration(
color: colorScheme.surface,
border: Border(top: BorderSide(color: Theme.of(context).focusColor)),
),
height: _footerHeight,
padding: const EdgeInsets.symmetric(vertical: densePadding),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
if (documentationLink != null)
Padding(
padding: const EdgeInsets.only(left: denseSpacing),
child: _DocsLink(
documentationLink: documentationLink,
color: colorScheme.onSurface,
),
),
const Spacer(),
ReportFeedbackButton(color: colorScheme.onSurface),
],
),
);
}

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';
Comment on lines +192 to +194
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should verify with the docs maintainers that there is a way to ensure we don't have to duplicate the content even if it is documented at two different locations.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, if nothing else I was planning on having these sections link to a shared Property Editor section

}
}

class _DocsLink extends StatelessWidget {
const _DocsLink({required this.documentationLink, required this.color});

final Color color;
final String documentationLink;

@override
Widget build(BuildContext context) {
return LinkIconLabel(
icon: Icons.library_books_outlined,
link: GaLink(
display: 'Docs',
url: documentationLink,
gaScreenName: gac.PropertyEditorSidebar.id,
gaSelectedItemDescription: gac.PropertyEditorSidebar.documentationLink,
),
color: color,
);
}
}
Loading