Experimental: widget detail search (#3489)

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

@@ -1053,10 +1053,10 @@ class DebuggerController extends DisposableController
 
   // TODO(kenz): search through previous matches when possible.
   @override
-  List<SourceToken> matchesForSearch(
+  Future<List<SourceToken>> matchesForSearch(
     String search, {
     bool searchPreviousMatches = false,
-  }) {
+  }) async {
     if (search == null || search.isEmpty || parsedScript.value == null) {
       return [];
     }

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

@@ -104,6 +104,7 @@ class DiagnosticsNodeDescription extends StatelessWidget {
             searchValue,
             textStyle,
             textStyle.merge(nodeDescriptionHighlightStyle),
+            addQuotes: true,
           ),
         ],
       );
@@ -185,14 +186,34 @@ class DiagnosticsNodeDescription extends StatelessWidget {
     TextStyle textStyle =
         baseStyle.merge(textStyleForLevel(diagnostic.level, colorScheme));
     var descriptionTextStyle = textStyle;
+    final TextStyle searchMatchTextStyle = textStyle?.copyWith(
+      color: nodeDescriptionHighlightStyle?.color,
+      backgroundColor: nodeDescriptionHighlightStyle?.backgroundColor,
+    );
     // TODO(jacobr): use TextSpans and SelectableText instead of Text.
     if (diagnostic.isProperty) {
       // Display of inline properties.
       final String propertyType = diagnostic.propertyType;
       final Map<String, Object> properties = diagnostic.valuePropertiesJson;
 
       if (name?.isNotEmpty == true && diagnostic.showName) {
-        children.add(Text('$name${diagnostic.separator} ', style: textStyle));
+        children.add(
+          RichText(
+            maxLines: 1,
+            text: TextSpan(
+              children: [
+                _buildHighlightedSearchPreview(
+                  name,
+                  searchValue,
+                  textStyle,
+                  searchMatchTextStyle,
+                ),
+                TextSpan(text: '${diagnostic.separator} '),
+              ],
+            ),
+          ),
+        );
+
         // provide some contrast between the name and description if both are
         // present.
         descriptionTextStyle =
@@ -248,16 +269,30 @@ class DiagnosticsNodeDescription extends StatelessWidget {
         textStyle = textStyle..merge(inspector_text_styles.link(colorScheme));
       }
 
+      final TextStyle descriptionSearchMatchTextStyle =
+          descriptionTextStyle?.copyWith(
+        color: nodeDescriptionHighlightStyle?.color,
+        backgroundColor: nodeDescriptionHighlightStyle?.backgroundColor,
+      );
+
       // TODO(jacobr): custom display for units, iterables, and padding.
-      children.add(Flexible(
-        child: buildDescription(
-          description,
-          descriptionTextStyle,
-          context,
-          colorScheme,
-          isProperty: true,
+      children.add(
+        Flexible(
+          child: RichText(
+            maxLines: 1,
+            text: TextSpan(
+              children: [
+                _buildHighlightedSearchPreview(
+                  description,
+                  searchValue,
+                  descriptionTextStyle,
+                  descriptionSearchMatchTextStyle,
+                ),
+              ],
+            ),
+          ),
         ),
-      ));
+      );
 
       if (diagnostic.level == DiagnosticLevel.fine &&
           diagnostic.hasDefaultValue) {
@@ -369,32 +404,34 @@ class DiagnosticsNodeDescription extends StatelessWidget {
     String textPreview,
     String searchValue,
     TextStyle textStyle,
-    TextStyle highlightTextStyle,
-  ) {
+    TextStyle highlightTextStyle, {
+    bool addQuotes = false,
+  }) {
     if (searchValue == null || searchValue.isEmpty) {
       return TextSpan(
-        text: '"$textPreview"',
+        text: addQuotes ? '"$textPreview"' : textPreview,
         style: textStyle,
       );
     }
 
     if (textPreview.caseInsensitiveEquals(searchValue)) {
       return TextSpan(
-        text: '"$textPreview"',
+        text: addQuotes ? '"$textPreview"' : textPreview,
         style: highlightTextStyle,
       );
     }
 
     final matches = searchValue.caseInsensitiveAllMatches(textPreview);
     if (matches.isEmpty) {
       return TextSpan(
-        text: '"$textPreview"',
+        text: addQuotes ? '"$textPreview"' : textPreview,
         style: textStyle,
       );
     }
 
     final quoteSpan = TextSpan(text: '"', style: textStyle);
-    final spans = <TextSpan>[quoteSpan];
+    final spans = <TextSpan>[];
+    if (addQuotes) spans.add(quoteSpan);
     var previousItemEnd = 0;
     for (final match in matches) {
       if (match.start > previousItemEnd) {
@@ -416,7 +453,7 @@ class DiagnosticsNodeDescription extends StatelessWidget {
       text: textPreview.substring(previousItemEnd, textPreview.length),
       style: textStyle,
     ));
-    spans.add(quoteSpan);
+    if (addQuotes) spans.add(quoteSpan);
 
     return TextSpan(children: spans);
   }

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

@@ -85,11 +85,8 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
 
   /// Indicates whether search can be closed. The value is set to true when
   /// search target type dropdown is displayed
-  /// TODO(https://github.com/flutter/devtools/issues/3489) use this variable when adding the scope dropdown
   bool searchPreventClose = false;
 
-  SearchTargetType searchTarget = SearchTargetType.widget;
-
   static const summaryTreeKey = Key('Summary Tree');
   static const detailsTreeKey = Key('Details Tree');
   static const minScreenWidthForTextBeforeScaling = 900.0;
@@ -125,8 +122,6 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
       onLayoutExplorerSupported: _onLayoutExplorerSupported,
     );
 
-    summaryTreeController.setSearchTarget(searchTarget);
-
     addAutoDisposeListener(searchFieldFocusNode, () {
       // Close the search once focus is lost and following conditions are met:
       //  1. Search string is empty.
@@ -241,6 +236,24 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
                   shouldRequestFocus: searchVisible,
                   supportsNavigation: true,
                   onClose: _onSearchVisibleToggle,
+                  prefix: ValueListenableBuilder(
+                    valueListenable: summaryTreeController.searchTarget,
+                    builder: (context, value, child) {
+                      return DropdownButton<SearchTargetType>(
+                        underline: const SizedBox(),
+                        value: value,
+                        items: SearchTargetType.values.map((e) {
+                          return DropdownMenuItem(
+                            child: Text(e.name),
+                            value: e,
+                          );
+                        }).toList(),
+                        onTap: () => searchPreventClose = !searchPreventClose,
+                        onChanged: (value) =>
+                            summaryTreeController.setSearchTarget(value),
+                      );
+                    },
+                  ),
                 ),
               ),
               Expanded(

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

@@ -313,12 +313,17 @@ class InspectorTreeConfig {
 
 enum SearchTargetType {
   widget,
-  // TODO(https://github.com/flutter/devtools/issues/3489) implement other search scopes: details, all etc
+  details,
+  all,
 }
 
 extension SearchTargetTypeExtension on SearchTargetType {
   String get name {
     switch (this) {
+      case SearchTargetType.details:
+        return 'Details';
+      case SearchTargetType.all:
+        return 'All';
       case SearchTargetType.widget:
       default:
         return 'Widget';