Add toggle to filter out SOCKET rows in Network screen (#9698)

* Add toggle to filter out socket rows in Network screen

* fix: add toggle filter to hide HTTP profiler tcp sockets in Network screen

* Removed visibleForTesting annotation and fixed analyzer warnings

* fix: addresses PR review feedbacks

* Update packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

Co-authored-by: Kenzie Davisson <43759233+kenzieschmoll@users.noreply.github.com>

* Update packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

Co-authored-by: Kenzie Davisson <43759233+kenzieschmoll@users.noreply.github.com>

* Refactor test to use activeFilter.value.settingFilters and set value directly as suggested in review.

* fixed format

---------

Co-authored-by: Kenzie Davisson <43759233+kenzieschmoll@users.noreply.github.com>

Author: rishika0212

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

@@ -91,12 +91,24 @@ class NetworkController extends DevToolsScreenController
     return null;
   }
 
+  static const hideHttpSocketsFilterId = 'network-hide-http-sockets';
+
   static const methodFilterId = 'network-method-filter';
 
   static const statusFilterId = 'network-status-filter';
 
   static const typeFilterId = 'network-type-filter';
 
+  @override
+  SettingFilters<NetworkRequest> createSettingFilters() => [
+    ToggleFilter<NetworkRequest>(
+      id: hideHttpSocketsFilterId,
+      name: 'Hide HTTP profiler sockets',
+      includeCallback: (request) => request is! Socket,
+      defaultValue: false,
+    ),
+  ];
+
   @override
   Map<String, QueryFilterArgument<NetworkRequest>> createQueryFilterArgs() => {
     methodFilterId: QueryFilterArgument<NetworkRequest>(
@@ -237,7 +249,6 @@ class NetworkController extends DevToolsScreenController
     }
   }
 
-  @visibleForTesting
   void processNetworkTrafficHelper(
     List<SocketStatistic> sockets,
     List<HttpProfileRequest>? httpRequests,
@@ -438,7 +449,7 @@ class NetworkController extends DevToolsScreenController
     super.filterData(filter);
     serviceConnection.errorBadgeManager.clearErrorCount(NetworkScreen.id);
     final queryFilter = filter.queryFilter;
-    if (queryFilter.isEmpty) {
+    if (filter.isEmpty) {
       _currentNetworkRequests.value.forEach(_checkForError);
       filteredData
         ..clear()
@@ -449,6 +460,11 @@ class NetworkController extends DevToolsScreenController
       ..clear()
       ..addAll(
         _currentNetworkRequests.value.where((NetworkRequest r) {
+          final filteredOutBySettingFilters = filter.settingFilters.any(
+            (settingFilter) => !settingFilter.includeData(r),
+          );
+          if (filteredOutBySettingFilters) return false;
+
           final filteredOutByQueryFilterArgument = queryFilter.filterArguments
               .any((argument) => !argument.matchesValue(r));
           if (filteredOutByQueryFilterArgument) return false;

packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

@@ -15,7 +15,7 @@ To learn more about DevTools, check out the
 
 ## General updates
 
-TODO: Remove this section if there are not any updates.
+- TODO: Remove this section if there are not any updates.
 
 ## Inspector updates
 
@@ -39,8 +39,7 @@ TODO: Remove this section if there are not any updates.
 
 ## Network profiler updates
 
-- Fix crash in the Network tab when viewing binary multipart request or 
-response bodies. [#9680](https://github.com/flutter/devtools/pull/9680)
+- Added a filter setting to hide HTTP-profiler socket data. [#9698](https://github.com/flutter/devtools/pull/9698)
 
 ## Logging updates
 

packages/devtools_app/test/screens/network/network_controller_test.dart

@@ -259,6 +259,37 @@ void main() {
       expect(profile, hasLength(numRequests));
       expect(controller.filteredData.value, hasLength(2));
     });
+
+    test('filterData hides tcp sockets via setting filter', () async {
+      await controller.startRecording();
+      await controller.networkService.refreshNetworkData();
+
+      const numRequests = 9;
+      const numTcpSockets = 2;
+
+      expect(controller.filteredData.value, hasLength(numRequests));
+
+      // Enable the hide HTTP sockets toggle filter using activeFilter.
+      final socketFilter = controller.activeFilter.value.settingFilters[0];
+      socketFilter.setting.value = true;
+      controller.setActiveFilter();
+
+      expect(
+        controller.filteredData.value,
+        hasLength(numRequests - numTcpSockets),
+      );
+
+      final tcpSockets = controller.filteredData.value
+          .whereType<Socket>()
+          .where((s) => s.socketType == 'tcp')
+          .toList();
+      expect(tcpSockets, isEmpty);
+
+      // Disable and verify sockets are restored.
+      socketFilter.setting.value = false;
+      controller.setActiveFilter();
+      expect(controller.filteredData.value, hasLength(numRequests));
+    });
   });
 
   group('CurrentNetworkRequests', () {