Inspector widget selection improvements (#3489)

packages/devtools_app/lib/src/common_widgets.dart

@@ -41,6 +41,9 @@ class PaddedDivider extends StatelessWidget {
   const PaddedDivider.thin({Key key})
       : padding = const EdgeInsets.only(bottom: 4.0);
 
+  PaddedDivider.vertical({Key key, double padding = densePadding})
+      : padding = EdgeInsets.symmetric(vertical: padding);
+
   /// The padding to place around the divider.
   final EdgeInsets padding;
 
@@ -118,6 +121,7 @@ class IconLabelButton extends StatelessWidget {
     this.elevatedButton = false,
     this.tooltip,
     this.tooltipPadding,
+    this.outlined = true,
   })  : assert((icon == null) != (imageIcon == null)),
         super(key: key);
 
@@ -140,6 +144,8 @@ class IconLabelButton extends StatelessWidget {
 
   final EdgeInsetsGeometry tooltipPadding;
 
+  final bool outlined;
+
   @override
   Widget build(BuildContext context) {
     final iconLabel = MaterialIconLabel(
@@ -169,12 +175,23 @@ class IconLabelButton extends StatelessWidget {
         width: !includeText(context, minScreenWidthForTextBeforeScaling)
             ? buttonMinWidth
             : null,
-        child: OutlinedButton(
-          style: denseAwareOutlinedButtonStyle(
-              context, minScreenWidthForTextBeforeScaling),
-          onPressed: onPressed,
-          child: iconLabel,
-        ),
+        child: outlined
+            ? OutlinedButton(
+                style: denseAwareOutlinedButtonStyle(
+                  context,
+                  minScreenWidthForTextBeforeScaling,
+                ),
+                onPressed: onPressed,
+                child: iconLabel,
+              )
+            : TextButton(
+                onPressed: onPressed,
+                child: iconLabel,
+                style: denseAwareOutlinedButtonStyle(
+                  context,
+                  minScreenWidthForTextBeforeScaling,
+                ),
+              ),
       ),
     );
   }
@@ -1816,3 +1833,20 @@ class _BlinkingIconState extends State<BlinkingIcon> {
     );
   }
 }
+
+class SmallCircularProgressIndicator extends StatelessWidget {
+  const SmallCircularProgressIndicator({
+    Key key,
+    @required this.valueColor,
+  }) : super(key: key);
+
+  final Animation<Color> valueColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return CircularProgressIndicator(
+      strokeWidth: 2,
+      valueColor: valueColor,
+    );
+  }
+}

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

@@ -35,18 +35,22 @@ class DiagnosticsNodeDescription extends StatelessWidget {
   const DiagnosticsNodeDescription(
     this.diagnostic, {
     this.isSelected,
+    this.searchValue,
     this.errorText,
     this.multiline = false,
     this.style,
     @required this.debuggerController,
+    this.nodeDescriptionHighlightStyle,
   });
 
   final RemoteDiagnosticsNode diagnostic;
   final bool isSelected;
   final String errorText;
+  final String searchValue;
   final bool multiline;
   final TextStyle style;
   final DebuggerController debuggerController;
+  final TextStyle nodeDescriptionHighlightStyle;
 
   Widget _paddedIcon(Widget icon) {
     return Padding(
@@ -90,8 +94,18 @@ class DiagnosticsNodeDescription extends StatelessWidget {
     if (textPreview is String) {
       final preview = textPreview.replaceAll('\n', ' ');
       yield TextSpan(
-        text: ': "$preview"',
-        style: textStyle.merge(inspector_text_styles.unimportant(colorScheme)),
+        children: [
+          TextSpan(
+            text: ': ',
+            style: textStyle,
+          ),
+          _buildHighlightedSearchPreview(
+            preview,
+            searchValue,
+            textStyle,
+            textStyle.merge(nodeDescriptionHighlightStyle),
+          ),
+        ],
       );
     }
   }
@@ -350,4 +364,60 @@ class DiagnosticsNodeDescription extends StatelessWidget {
       ),
     );
   }
+
+  TextSpan _buildHighlightedSearchPreview(
+    String textPreview,
+    String searchValue,
+    TextStyle textStyle,
+    TextStyle highlightTextStyle,
+  ) {
+    if (searchValue == null || searchValue.isEmpty) {
+      return TextSpan(
+        text: '"$textPreview"',
+        style: textStyle,
+      );
+    }
+
+    if (textPreview.caseInsensitiveEquals(searchValue)) {
+      return TextSpan(
+        text: '"$textPreview"',
+        style: highlightTextStyle,
+      );
+    }
+
+    final matches = searchValue.caseInsensitiveAllMatches(textPreview);
+    if (matches.isEmpty) {
+      return TextSpan(
+        text: '"$textPreview"',
+        style: textStyle,
+      );
+    }
+
+    final quoteSpan = TextSpan(text: '"', style: textStyle);
+    final spans = <TextSpan>[quoteSpan];
+    var previousItemEnd = 0;
+    for (final match in matches) {
+      if (match.start > previousItemEnd) {
+        spans.add(TextSpan(
+          text: textPreview.substring(previousItemEnd, match.start),
+          style: textStyle,
+        ));
+      }
+
+      spans.add(TextSpan(
+        text: textPreview.substring(match.start, match.end),
+        style: highlightTextStyle,
+      ));
+
+      previousItemEnd = match.end;
+    }
+
+    spans.add(TextSpan(
+      text: textPreview.substring(previousItemEnd, textPreview.length),
+      style: textStyle,
+    ));
+    spans.add(quoteSpan);
+
+    return TextSpan(children: spans);
+  }
 }

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

@@ -0,0 +1,207 @@
+import 'package:flutter/material.dart';
+
+import '../theme.dart';
+import '../utils.dart';
+import 'inspector_text_styles.dart';
+import 'inspector_tree.dart';
+
+class InspectorBreadcrumbNavigator extends StatelessWidget {
+  const InspectorBreadcrumbNavigator({
+    Key key,
+    @required this.rows,
+    @required this.onTap,
+  }) : super(key: key);
+
+  /// Max number of visible breadcrumbs including root item but not 'more' item.
+  /// E.g. value 5 means root and 4 breadcrumbs can be displayed, other
+  /// breadcrumbs (if any) will be replaced by '...' item.
+  static const _maxNumberOfBreadcrumbs = 5;
+
+  final List<InspectorTreeRow> rows;
+  final Function(InspectorTreeRow) onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    if (rows.isEmpty) {
+      return const SizedBox();
+    }
+
+    final breadcrumbs = _generateBreadcrumbs(rows);
+    return SizedBox(
+      height: isDense() ? 24 : 28,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 6),
+        child: Row(
+          children: breadcrumbs.map((item) {
+            if (item.isChevron) {
+              return Icon(
+                Icons.chevron_right,
+                size: defaultIconSize,
+              );
+            }
+
+            return Flexible(
+              child: _InspectorBreadcrumb(
+                data: item,
+                onTap: () => onTap(item.row),
+              ),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+
+  List<_InspectorBreadcrumbData> _generateBreadcrumbs(
+    List<InspectorTreeRow> rows,
+  ) {
+    final List<_InspectorBreadcrumbData> items = rows.map((row) {
+      return _InspectorBreadcrumbData.wrap(
+        row: row,
+        isSelected: row == rows.safeLast,
+      );
+    }).toList();
+    List<_InspectorBreadcrumbData> breadcrumbs;
+    if (items.length > _maxNumberOfBreadcrumbs) {
+      breadcrumbs = [
+        items[0],
+        _InspectorBreadcrumbData.more(),
+        ...items.sublist(
+            items.length - _maxNumberOfBreadcrumbs + 1, items.length),
+      ];
+    } else {
+      breadcrumbs = items;
+    }
+
+    return breadcrumbs.joinWith(_InspectorBreadcrumbData.chevron());
+  }
+}
+
+class _InspectorBreadcrumb extends StatelessWidget {
+  const _InspectorBreadcrumb({
+    Key key,
+    @required this.data,
+    @required this.onTap,
+  })  : assert(data != null),
+        super(key: key);
+
+  static const BorderRadius _borderRadius =
+      BorderRadius.all(Radius.circular(defaultBorderRadius));
+
+  static const _iconScale = .75;
+
+  final _InspectorBreadcrumbData data;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final text = Text(
+      data.text,
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: regular.copyWith(fontSize: scaleByFontFactor(11)),
+    );
+
+    final icon = data.icon == null
+        ? null
+        : Transform.scale(
+            scale: _iconScale,
+            child: Padding(
+              padding: const EdgeInsets.only(right: iconPadding),
+              child: data.icon,
+            ),
+          );
+
+    return InkWell(
+      onTap: data.isClickable ? onTap : null,
+      borderRadius: _borderRadius,
+      child: Container(
+        padding: const EdgeInsets.symmetric(
+          horizontal: densePadding,
+          vertical: borderPadding,
+        ),
+        decoration: BoxDecoration(
+          borderRadius: _borderRadius,
+          color: data.isSelected
+              ? Theme.of(context).colorScheme.selectedRowBackgroundColor
+              : Colors.transparent,
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (icon != null) icon,
+            Flexible(child: text),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _InspectorBreadcrumbData {
+  const _InspectorBreadcrumbData._({
+    @required this.row,
+    @required this.isSelected,
+    @required this.alternativeText,
+    @required this.alternativeIcon,
+  });
+
+  factory _InspectorBreadcrumbData.wrap({
+    @required InspectorTreeRow row,
+    @required bool isSelected,
+  }) {
+    return _InspectorBreadcrumbData._(
+      row: row,
+      isSelected: isSelected,
+      alternativeText: null,
+      alternativeIcon: null,
+    );
+  }
+
+  /// Construct a special item for showing '…' symbol between other items
+  factory _InspectorBreadcrumbData.more() {
+    return const _InspectorBreadcrumbData._(
+      row: null,
+      isSelected: false,
+      alternativeText: ellipsisValue,
+      alternativeIcon: null,
+    );
+  }
+
+  factory _InspectorBreadcrumbData.chevron() {
+    return const _InspectorBreadcrumbData._(
+      row: null,
+      isSelected: false,
+      alternativeText: null,
+      alternativeIcon: breadcrumbSeparatorIcon,
+    );
+  }
+
+  static const String ellipsisValue = '…';
+  static const IconData breadcrumbSeparatorIcon = Icons.chevron_right;
+
+  final InspectorTreeRow row;
+  final IconData alternativeIcon;
+  final String alternativeText;
+  final bool isSelected;
+
+  String get text => alternativeText ?? row?.node?.diagnostic?.description;
+
+  Widget get icon {
+    if (alternativeIcon != null) {
+      return Icon(
+        Icons.chevron_right,
+        size: defaultIconSize,
+      );
+    }
+
+    return row?.node?.diagnostic?.icon;
+  }
+
+  bool get isChevron =>
+      row == null && alternativeIcon == breadcrumbSeparatorIcon;
+
+  bool get isEllipsis => row == null && alternativeText == ellipsisValue;
+
+  bool get isClickable => !isSelected && !isEllipsis;
+}