Offline support for Network page

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

@@ -4,6 +4,7 @@
 
 import 'dart:convert';
 
+import '../../screens/network/utils/http_utils.dart';
 import '../../shared/http/http_request_data.dart';
 import '../../shared/primitives/utils.dart';
 import 'constants.dart';
@@ -131,7 +132,7 @@ class HarDataEntry {
           NetworkEventKeys.text.name: e.requestBody,
         },
         NetworkEventKeys.headersSize.name:
-            _calculateHeadersSize(e.requestHeaders),
+            calculateHeadersSize(e.requestHeaders),
         NetworkEventKeys.bodySize.name: _calculateBodySize(e.requestBody),
       },
       // Response
@@ -150,7 +151,7 @@ class HarDataEntry {
         },
         NetworkEventKeys.redirectURL.name: '',
         NetworkEventKeys.headersSize.name:
-            _calculateHeadersSize(e.responseHeaders),
+            calculateHeadersSize(e.responseHeaders),
         NetworkEventKeys.bodySize.name: _calculateBodySize(e.responseBody),
       },
       // Cache
@@ -263,27 +264,6 @@ class HarDataEntry {
   }
 }
 
-int _calculateHeadersSize(Map<String, Object?>? headers) {
-  if (headers == null) return -1;
-
-  // Combine headers into a single string with CRLF endings
-  String headersString = headers.entries.map((entry) {
-    final key = entry.key;
-    var value = entry.value;
-    // If the value is a List, join it with a comma
-    if (value is List<String>) {
-      value = value.join(', ');
-    }
-    return '$key: $value\r\n';
-  }).join();
-
-  // Add final CRLF to indicate end of headers
-  headersString += '\r\n';
-
-  // Calculate the byte length of the headers string
-  return utf8.encode(headersString).length;
-}
-
 int _calculateBodySize(String? requestBody) {
   if (requestBody.isNullOrEmpty) {
     return 0;

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

@@ -14,6 +14,7 @@ import '../../shared/config_specific/logger/allowed_error.dart';
 import '../../shared/globals.dart';
 import '../../shared/http/http_request_data.dart';
 import '../../shared/http/http_service.dart' as http_service;
+import '../../shared/offline_data.dart';
 import '../../shared/primitives/utils.dart';
 import '../../shared/ui/filter.dart';
 import '../../shared/ui/search.dart';
@@ -22,6 +23,7 @@ import 'har_network_data.dart';
 import 'network_model.dart';
 import 'network_screen.dart';
 import 'network_service.dart';
+import 'offline_network_data.dart';
 
 /// Different types of Network Response which can be used to visualise response
 /// on Response tab
@@ -49,10 +51,12 @@ class NetworkController extends DisposableController
     with
         SearchControllerMixin<NetworkRequest>,
         FilterControllerMixin<NetworkRequest>,
+        OfflineScreenControllerMixin,
         AutoDisposeControllerMixin {
   NetworkController() {
     _networkService = NetworkService(this);
     _currentNetworkRequests = CurrentNetworkRequests();
+    _initHelper();
     addAutoDisposeListener(
       _currentNetworkRequests,
       _filterAndRefreshSearchMatches,
@@ -168,6 +172,43 @@ class NetworkController extends DisposableController
   @visibleForTesting
   bool get isPolling => _pollingTimer != null;
 
+  void _initHelper() async {
+    if (offlineDataController.showingOfflineData.value) {
+      await maybeLoadOfflineData(
+        NetworkScreen.id,
+        createData: (json) => OfflineNetworkData.fromJson(json),
+        shouldLoad: (data) => !data.isEmpty,
+        loadData: (data) => loadOfflineData(data),
+      );
+    } else {
+      await startRecording();
+    }
+  }
+
+  Future<void> loadOfflineData(OfflineNetworkData offlineData) async {
+    final httpProfileData = offlineData.httpRequestData.mapToHttpProfileRequests;
+    final socketStatsData = offlineData.socketData.mapToSocketStatistics;
+
+    _currentNetworkRequests
+      ..clear()
+      ..updateOrAddAll(
+        requests: httpProfileData,
+        sockets: socketStatsData,
+        timelineMicrosOffset: DateTime.now().microsecondsSinceEpoch,
+      );
+    _filterAndRefreshSearchMatches();
+
+    // If a selectedRequestId is available, select it in offline mode.
+    if (offlineData.selectedRequestId != null) {
+      final selected = _currentNetworkRequests
+          .getRequest(offlineData.selectedRequestId ?? '');
+      if (selected != null) {
+        selectedRequest.value = selected;
+        resetDropDown();
+      }
+    }
+  }
+
   @visibleForTesting
   void processNetworkTrafficHelper(
     List<SocketStatistic> sockets,
@@ -395,6 +436,30 @@ class NetworkController extends DisposableController
     }
   }
 
+  @override
+  OfflineScreenData prepareOfflineScreenData() {
+    final httpRequestData = <DartIOHttpRequestData>[];
+    final socketData = <Socket>[];
+    for (final request in _currentNetworkRequests.value) {
+      if (request is DartIOHttpRequestData) {
+        httpRequestData.add(request);
+      } else if (request is Socket) {
+        socketData.add(request);
+      }
+    }
+
+    final offlineData = OfflineNetworkData(
+      httpRequestData: httpRequestData,
+      socketData: socketData,
+      selectedRequestId: selectedRequest.value?.id,
+    );
+
+    return OfflineScreenData(
+      screenId: NetworkScreen.id,
+      data: offlineData.toJson(),
+    );
+  }
+
   Future<void> _fetchFullDataBeforeExport() => Future.wait(
         filteredData.value
             .whereType<DartIOHttpRequestData>()

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

@@ -2,13 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:devtools_shared/devtools_shared.dart';
 import 'package:flutter/material.dart';
 import 'package:vm_service/vm_service.dart';
 
 import '../../shared/primitives/utils.dart';
 import '../../shared/ui/search.dart';
 
-abstract class NetworkRequest with ChangeNotifier, SearchableDataMixin {
+abstract class NetworkRequest
+    with ChangeNotifier, SearchableDataMixin, Serializable {
   String get method;
 
   String get uri;
@@ -85,6 +87,15 @@ abstract class NetworkRequest with ChangeNotifier, SearchableDataMixin {
 class Socket extends NetworkRequest {
   Socket(this._socket, this._timelineMicrosBase);
 
+  factory Socket.fromJson(Map<String, Object?> json) {
+    return Socket(
+      SocketStatistic.parse(
+        json[SocketJsonKey.socket.name] as Map<String, Object?>,
+      )!,
+      json[SocketJsonKey.timelineMicrosBase.name] as int,
+    );
+  }
+
   int _timelineMicrosBase;
 
   SocketStatistic _socket;
@@ -180,4 +191,53 @@ class Socket extends NetworkRequest {
 
   @override
   int get hashCode => id.hashCode;
+
+  SocketStatistic get socketData => _socket;
+
+  @override
+  Map<String, Object?> toJson() {
+    return {
+      SocketJsonKey.timelineMicrosBase.name: _timelineMicrosBase,
+      SocketJsonKey.socket.name: _socket.toJson(),
+    };
+  }
+}
+
+extension on SocketStatistic {
+  Map<String, Object?> toJson() {
+    return {
+      SocketJsonKey.id.name: id,
+      SocketJsonKey.startTime.name: startTime,
+      SocketJsonKey.endTime.name: endTime,
+      //TODO verify if these timings are in correct format
+      SocketJsonKey.lastReadTime.name: lastReadTime,
+      SocketJsonKey.lastWriteTime.name: lastWriteTime,
+      SocketJsonKey.socketType.name: socketType,
+      SocketJsonKey.address.name: address,
+      SocketJsonKey.port.name: port,
+      SocketJsonKey.readBytes.name: readBytes,
+      SocketJsonKey.writeBytes.name: writeBytes,
+    };
+  }
+}
+
+enum SocketJsonKey {
+  id,
+  startTime,
+  endTime,
+  lastReadTime,
+  lastWriteTime,
+  socketType,
+  address,
+  port,
+  readBytes,
+  writeBytes,
+  timelineMicrosBase,
+  socket,
+}
+
+extension SocketExtension on List<Socket> {
+  List<SocketStatistic> get mapToSocketStatistics {
+    return map((socket) => socket._socket).toList();
+  }
 }

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

@@ -14,7 +14,6 @@ import '../../shared/analytics/analytics.dart' as ga;
 import '../../shared/analytics/constants.dart' as gac;
 import '../../shared/common_widgets.dart';
 import '../../shared/config_specific/copy_to_clipboard/copy_to_clipboard.dart';
-import '../../shared/globals.dart';
 import '../../shared/http/curl_command.dart';
 import '../../shared/http/http_request_data.dart';
 import '../../shared/primitives/utils.dart';
@@ -106,19 +105,6 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
   void didChangeDependencies() {
     super.didChangeDependencies();
     if (!initController()) return;
-    unawaited(controller.startRecording());
-
-    cancelListeners();
-
-    addAutoDisposeListener(
-      serviceConnection.serviceManager.isolateManager.mainIsolate,
-      () {
-        if (serviceConnection.serviceManager.isolateManager.mainIsolate.value !=
-            null) {
-          unawaited(controller.startRecording());
-        }
-      },
-    );
   }
 
   @override
@@ -133,7 +119,13 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
   Widget build(BuildContext context) {
     return Column(
       children: [
-        _NetworkProfilerControls(controller: controller),
+        OfflineAwareControls(
+          controlsBuilder: (offline) => _NetworkProfilerControls(
+            controller: controller,
+            offline: offline,
+          ),
+          gaScreen: gac.network,
+        ),
         const SizedBox(height: intermediateSpacing),
         Expanded(
           child: _NetworkProfilerBody(controller: controller),
@@ -148,12 +140,15 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
 class _NetworkProfilerControls extends StatefulWidget {
   const _NetworkProfilerControls({
     required this.controller,
+    required this.offline,
   });
 
   static const _includeTextWidth = 810.0;
 
   final NetworkController controller;
 
+  final bool offline;
+
   @override
   State<_NetworkProfilerControls> createState() =>
       _NetworkProfilerControlsState();
@@ -166,7 +161,6 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
   @override
   void initState() {
     super.initState();
-
     _recording = widget.controller.recordingNotifier.value;
     addAutoDisposeListener(widget.controller.recordingNotifier, () {
       setState(() {
@@ -183,7 +177,8 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
     final hasRequests = widget.controller.filteredData.value.isNotEmpty;
     return Row(
       children: [
-        StartStopRecordingButton(
+        if (!widget.offline) ...[
+          StartStopRecordingButton(
           recording: _recording,
           onPressed: () async =>
               await widget.controller.togglePolling(!_recording),
@@ -211,7 +206,7 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
           gaScreen: gac.network,
           gaSelection: gac.NetworkEvent.downloadAsHar.name,
         ),
-        const SizedBox(width: defaultSpacing),
+        const Spacer(),
         // TODO(kenz): fix focus issue when state is refreshed
         Expanded(
           child: SearchField<NetworkController>(