Add filtering to the Network profiler

packages/devtools_app/lib/src/common_widgets.dart

@@ -537,6 +537,62 @@ class ExportButton extends StatelessWidget {
   }
 }
 
+class FilterButton extends StatelessWidget {
+  const FilterButton({
+    Key key,
+    @required this.onPressed,
+    @required this.isFilterActive,
+  }) : super(key: key);
+
+  final VoidCallback onPressed;
+
+  final bool isFilterActive;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return RoundedOutlinedBorder(
+      child: SizedBox(
+        height: defaultButtonHeight,
+        child: Tooltip(
+          message: 'Filter',
+          child: FlatButton(
+            key: key,
+            onPressed: onPressed,
+            color: isFilterActive
+                ? colorScheme.toggleButtonBackgroundColor
+                : Colors.transparent,
+            child: createIcon(
+              Icons.filter_list,
+              color: isFilterActive
+                  ? colorScheme.toggleButtonForegroundColor
+                  : null,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+Widget clearTextFieldButton(VoidCallback onPressed) {
+  return textFieldSuffixButton(Icons.clear, onPressed);
+}
+
+Widget textFieldSuffixButton(IconData icon, VoidCallback onPressed) {
+  return Container(
+    padding: const EdgeInsets.symmetric(horizontal: densePadding),
+    width: 24.0,
+    child: IconButton(
+      padding: const EdgeInsets.all(0.0),
+      onPressed: onPressed,
+      iconSize: defaultIconSize,
+      splashRadius: defaultIconSize,
+      icon: Icon(icon),
+    ),
+  );
+}
+
 class OutlineDecoration extends StatelessWidget {
   const OutlineDecoration({Key key, this.child}) : super(key: key);
 

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

@@ -94,7 +94,7 @@ class ScriptPickerState extends State<ScriptPicker> {
             child: Padding(
               padding: const EdgeInsets.all(denseSpacing),
               child: SizedBox(
-                height: defaultSearchTextHeight,
+                height: defaultTextFieldHeight,
                 child: TextField(
                   decoration: InputDecoration(
                     labelText:

packages/devtools_app/lib/src/device_dialog.dart

@@ -164,7 +164,7 @@ class _VMFlagsDialogState extends State<VMFlagsDialog> with AutoDisposeMixin {
           const Expanded(child: SizedBox(width: denseSpacing)),
           Container(
             width: defaultSearchTextWidth,
-            height: defaultSearchTextHeight,
+            height: defaultTextFieldHeight,
             child: TextField(
               controller: filterController,
               decoration: const InputDecoration(

packages/devtools_app/lib/src/dialogs.dart

@@ -83,20 +83,20 @@ class DialogCancelButton extends StatelessWidget {
   }
 }
 
-/// A FlatButton used to close a containing dialog (OK).
-class DialogOkButton extends StatelessWidget {
-  const DialogOkButton(this.onOk) : super();
+/// A FlatButton used to close a containing dialog (APPLY).
+class DialogApplyButton extends StatelessWidget {
+  const DialogApplyButton({@required this.onPressed}) : super();
 
-  final Function onOk;
+  final Function onPressed;
 
   @override
   Widget build(BuildContext context) {
     return FlatButton(
       onPressed: () {
-        if (onOk != null) onOk();
+        if (onPressed != null) onPressed();
         Navigator.of(context).pop(_dialogDefaultContext);
       },
-      child: const Text('OK'),
+      child: const Text('APPLY'),
     );
   }
 }

packages/devtools_app/lib/src/logging/logging_screen.dart

@@ -108,7 +108,7 @@ class _LoggingScreenState extends State<LoggingScreenBody>
           const Spacer(),
           Container(
             width: defaultSearchTextWidth,
-            height: defaultSearchTextHeight,
+            height: defaultTextFieldHeight,
             child: TextField(
               controller: filterController,
               decoration: const InputDecoration(

packages/devtools_app/lib/src/memory/memory_filter.dart

@@ -246,8 +246,8 @@ class SnapshotFilterState extends State<SnapshotFilterDialog>
     return Row(
       mainAxisAlignment: MainAxisAlignment.end,
       children: [
-        DialogOkButton(
-          () {
+        DialogApplyButton(
+          onPressed: () {
             // Re-generate librariesFiltered
             controller.libraryFilters.clearFilters();
             controller.filteredLibrariesByGroupName.forEach((groupName, value) {

packages/devtools_app/lib/src/memory/memory_heap_tree_view.dart

@@ -678,7 +678,7 @@ class HeapTreeViewState extends State<HeapTree>
         Container(
           // TODO(terry): Use a more adaptive layout than forcing to 300.0
           width: defaultSearchTextWidth,
-          height: defaultSearchTextHeight,
+          height: defaultTextFieldHeight,
           child: buildAutoCompleteSearchField(
             controller: controller,
             searchFieldKey: memorySearchFieldKey,
@@ -689,13 +689,11 @@ class HeapTreeViewState extends State<HeapTree>
           ),
         ),
         const SizedBox(width: denseSpacing),
-        Tooltip(
-          message: 'Filter',
-          child: OutlineButton(
-            key: filterButtonKey,
-            onPressed: _filter,
-            child: createIcon(Icons.filter_list),
-          ),
+        FilterButton(
+          key: filterButtonKey,
+          onPressed: _filter,
+          // TODO(kenz): implement isFilterActive
+          isFilterActive: false,
         ),
         // TODO: Add these back in when _settings() is implemented.
 //        const SizedBox(width: denseSpacing),

packages/devtools_app/lib/src/network/network_controller.dart

@@ -21,6 +21,8 @@ class NetworkController with SearchControllerMixin<NetworkRequest> {
     _networkService = NetworkService(this);
   }
 
+  static NetworkFilter defaultFilter = NetworkFilter();
+
   /// Notifies that new Network requests have been processed.
   ValueListenable<NetworkRequests> get requests => _requests;
 
@@ -30,6 +32,15 @@ class NetworkController with SearchControllerMixin<NetworkRequest> {
 
   final _selectedRequest = ValueNotifier<NetworkRequest>(null);
 
+  ValueListenable<List<NetworkRequest>> get filteredRequests =>
+      _filteredRequests;
+
+  final _filteredRequests = ValueNotifier<List<NetworkRequest>>([]);
+
+  ValueListenable<NetworkFilter> get activeFilter => _activeFilter;
+
+  final _activeFilter = ValueNotifier<NetworkFilter>(defaultFilter);
+
   /// Notifies that the timeline is currently being recorded.
   ValueListenable<bool> get recordingNotifier => _recordingNotifier;
   final _recordingNotifier = ValueNotifier<bool>(false);
@@ -169,6 +180,7 @@ class NetworkController with SearchControllerMixin<NetworkRequest> {
       invalidRequests: [],
       outstandingRequestsMap: Map.from(requests.value.outstandingHttpRequests),
     );
+    filterData(_activeFilter.value);
     refreshSearchMatches();
   }
 
@@ -255,6 +267,7 @@ class NetworkController with SearchControllerMixin<NetworkRequest> {
   Future<void> clear() async {
     await _networkService.clearData();
     _requests.value = NetworkRequests();
+    _filteredRequests.value = [];
     refreshSearchMatches();
     _selectedRequest.value = null;
   }
@@ -268,12 +281,83 @@ class NetworkController with SearchControllerMixin<NetworkRequest> {
     // TODO(kenz): support intelligent search queries like t:http (type = http)
     // or m:GET (method = GET).
 
-    final currentRequests = _requests.value.requests;
+    final currentRequests = _filteredRequests.value;
     for (final request in currentRequests) {
       if (request.uri.toLowerCase().contains(caseInsensitiveSearch)) {
         matches.add(request);
       }
     }
     return matches;
   }
+
+  void filterData(NetworkFilter filter) {
+    if (filter == defaultFilter) {
+      _filteredRequests.value = List.from(_requests.value.requests);
+    }
+    _filteredRequests.value =
+        _requests.value.requests.where((NetworkRequest r) {
+      if (!filter.showHttp && r is HttpRequestData) {
+        return false;
+      }
+      if (!filter.showWebSocket && r is WebSocket) {
+        return false;
+      }
+      if (filter.method != null &&
+          r.method.toLowerCase() != filter.method.toLowerCase()) {
+        return false;
+      }
+      if (filter.uriSubstring != null &&
+          !r.uri.toLowerCase().contains(filter.uriSubstring.toLowerCase())) {
+        return false;
+      }
+      if (filter.status != null &&
+          r.status.toLowerCase() != filter.status.toLowerCase()) {
+        return false;
+      }
+      if (filter.type != null &&
+          r.type.toLowerCase() != filter.type.toLowerCase()) {
+        return false;
+      }
+      return true;
+    }).toList();
+    _activeFilter.value = filter;
+  }
+
+  void resetFilters() {
+    _activeFilter.value = defaultFilter;
+  }
+}
+
+class NetworkFilter {
+  NetworkFilter({
+    this.method,
+    this.uriSubstring,
+    this.status,
+    this.type,
+    this.showHttp = true,
+    this.showWebSocket = true,
+  });
+
+  static NetworkFilter from(NetworkFilter filter) {
+    return NetworkFilter(
+      method: filter.method,
+      uriSubstring: filter.uriSubstring,
+      status: filter.status,
+      type: filter.type,
+      showHttp: filter.showHttp,
+      showWebSocket: filter.showWebSocket,
+    );
+  }
+
+  String method;
+
+  String uriSubstring;
+
+  String status;
+
+  String type;
+
+  bool showHttp;
+
+  bool showWebSocket;
 }