Added size support to network tab

Author: Victowolf

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

@@ -29,6 +29,9 @@ abstract class NetworkRequest
 
   int? get port;
 
+  int? get requestBytes => null;
+  int? get responseBytes => null;
+
   bool get didFail;
 
   /// True if the request hasn't completed yet.
@@ -160,6 +163,12 @@ class Socket extends NetworkRequest {
   @override
   int get port => _socket.port;
 
+  @override
+  int get requestBytes => writeBytes;
+
+  @override
+  int get responseBytes => readBytes;
+
   // TODO(kenz): what determines a web socket request failure?
   @override
   bool get didFail => false;

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

@@ -658,6 +658,14 @@ class NetworkRequestOverviewView extends StatelessWidget {
         ),
         const SizedBox(height: defaultSpacing),
       ],
+      const SizedBox(height: defaultSpacing),
+      _buildRow(
+        context: context,
+        title: 'Size',
+        child: _valueText(_formatBytes(data.responseBytes)),
+      ),
+      const SizedBox(height: defaultSpacing),
+
       if (data.contentType != null) ...[
         _buildRow(
           context: context,
@@ -669,6 +677,15 @@ class NetworkRequestOverviewView extends StatelessWidget {
     ];
   }
 
+  String _formatBytes(int? bytes) {
+    if (bytes == null) return '-';
+    if (bytes < 1024) return '$bytes B';
+    if (bytes < 1024 * 1024) {
+      return '${(bytes / 1024).toStringAsFixed(1)} KB';
+    }
+    return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
+  }
+
   List<Widget> _buildTimingOverview(BuildContext context) {
     return [
       _buildRow(

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

@@ -371,6 +371,7 @@ class NetworkRequestsTable extends StatelessWidget {
     statusColumn,
     typeColumn,
     durationColumn,
+    const ResponseSizeColumn(),
     timestampColumn,
     actionsColumn,
   ];
@@ -405,6 +406,28 @@ class NetworkRequestsTable extends StatelessWidget {
   }
 }
 
+String _formatBytes(int? bytes) {
+  if (bytes == null) return '-';
+  if (bytes < 1024) return '$bytes B';
+  if (bytes < 1024 * 1024) {
+    return '${(bytes / 1024).toStringAsFixed(1)} KB';
+  }
+  return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
+}
+
+class ResponseSizeColumn extends ColumnData<NetworkRequest> {
+  const ResponseSizeColumn()
+    : super('Size', alignment: ColumnAlignment.right, fixedWidthPx: 90);
+
+  @override
+  int? getValue(NetworkRequest data) => data.responseBytes;
+
+  @override
+  String getDisplayValue(NetworkRequest data) {
+    return _formatBytes(data.responseBytes);
+  }
+}
+
 class AddressColumn extends ColumnData<NetworkRequest>
     implements ColumnRenderer<NetworkRequest> {
   AddressColumn()

packages/devtools_app/lib/src/shared/http/http_request_data.dart

@@ -212,6 +212,20 @@ class DartIOHttpRequestData extends NetworkRequest {
     return connectionInfo != null ? connectionInfo[_localPortKey] : null;
   }
 
+  @override
+  int? get responseBytes {
+    final headers = responseHeaders;
+    final contentLength = headers?['content-length'];
+
+    if (contentLength is String) {
+      return int.tryParse(contentLength);
+    }
+    if (contentLength is List && contentLength.isNotEmpty) {
+      return int.tryParse(contentLength.first);
+    }
+    return null;
+  }
+
   /// True if the HTTP request hasn't completed yet, determined by the lack of
   /// an end time in the response data.
   @override