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

@@ -7,13 +7,15 @@ import 'dart:convert';
 
 import 'package:devtools_app_shared/utils.dart';
 import 'package:flutter/foundation.dart';
+import 'package:logging/logging.dart';
 import 'package:vm_service/vm_service.dart';
 
 import '../../shared/config_specific/import_export/import_export.dart';
 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 +24,9 @@ import 'har_network_data.dart';
 import 'network_model.dart';
 import 'network_screen.dart';
 import 'network_service.dart';
+import 'offline_network_data.dart';
+
+final _log = Logger('http_request_data');
 
 /// Different types of Network Response which can be used to visualise response
 /// on Response tab
@@ -49,10 +54,12 @@ class NetworkController extends DisposableController
     with
         SearchControllerMixin<NetworkRequest>,
         FilterControllerMixin<NetworkRequest>,
+        OfflineScreenControllerMixin,
         AutoDisposeControllerMixin {
   NetworkController() {
     _networkService = NetworkService(this);
     _currentNetworkRequests = CurrentNetworkRequests();
+    _initHelper();
     addAutoDisposeListener(
       _currentNetworkRequests,
       _filterAndRefreshSearchMatches,
@@ -160,6 +167,58 @@ class NetworkController extends DisposableController
   @visibleForTesting
   bool get isPolling => _pollingTimer != null;
 
+  void _initHelper() async {
+    try {
+      if (offlineDataController.showingOfflineData.value == true) {
+        await maybeLoadOfflineData(
+          NetworkScreen.id,
+          createData: (json) => OfflineNetworkData.fromJson(json),
+          shouldLoad: (data) => !data.isEmpty,
+          loadData: (data) => loadOfflineData(data),
+        );
+      }
+      cancelListeners();
+      if (!offlineDataController.showingOfflineData.value) {
+        unawaited(startRecording());
+        debugPrint('started recording');
+        addAutoDisposeListener(
+          serviceConnection.serviceManager.isolateManager.mainIsolate,
+          () {
+            if (serviceConnection
+                    .serviceManager.isolateManager.mainIsolate.value !=
+                null) {
+              unawaited(startRecording());
+            }
+          },
+        );
+      }
+    } catch (e) {
+      _log.shout('Could not load offline data: $e');
+    }
+  }
+
+  Future<void> loadOfflineData(OfflineNetworkData offlineData) async {
+    // Set filtered data to the requests available in offline data.
+    filteredData
+      ..clear()
+      ..addAll(offlineData.requests);
+
+    // If a selectedRequestId is available, select it in offline mode.
+    if (offlineData.selectedRequestId != null) {
+      final selected = offlineData.getRequest(offlineData.selectedRequestId!);
+      if (selected != null) {
+        selectedRequest.value = selected;
+        if (selectedRequest.value is DartIOHttpRequestData) {
+          unawaited(
+            (selectedRequest.value as DartIOHttpRequestData)
+                .getFullRequestData(),
+          );
+        }
+        resetDropDown();
+      }
+    }
+  }
+
   @visibleForTesting
   void processNetworkTrafficHelper(
     List<SocketStatistic> sockets,
@@ -388,6 +447,19 @@ class NetworkController extends DisposableController
     }
   }
 
+  @override
+  OfflineScreenData prepareOfflineScreenData() {
+    final offlineData = OfflineNetworkData(
+      requests: filteredData.value.whereType<DartIOHttpRequestData>().toList(),
+      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_screen.dart

@@ -123,19 +123,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
@@ -150,7 +137,10 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
   Widget build(BuildContext context) {
     return Column(
       children: [
-        _NetworkProfilerControls(controller: controller),
+        _NetworkProfilerControls(
+          controller: controller,
+          offline: offlineDataController.showingOfflineData.value,
+        ),
         const SizedBox(height: intermediateSpacing),
         Expanded(
           child: _NetworkProfilerBody(controller: controller),
@@ -165,12 +155,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();
@@ -187,7 +180,7 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
   @override
   void initState() {
     super.initState();
-
+    addAutoDisposeListener(offlineDataController.showingOfflineData);
     _recording = widget.controller.recordingNotifier.value;
     addAutoDisposeListener(widget.controller.recordingNotifier, () {
       setState(() {
@@ -214,48 +207,55 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
     final hasRequests = _filteredRequests.isNotEmpty;
     return Row(
       children: [
-        StartStopRecordingButton(
-          recording: _recording,
-          onPressed: () async =>
-              await widget.controller.togglePolling(!_recording),
-          tooltipOverride: _recording
-              ? 'Stop recording network traffic'
-              : 'Resume recording network traffic',
-          minScreenWidthForTextBeforeScaling: double.infinity,
-          gaScreen: gac.network,
-          gaSelection: _recording ? gac.pause : gac.resume,
-        ),
-        const SizedBox(width: denseSpacing),
-        ClearButton(
-          minScreenWidthForTextBeforeScaling:
-              _NetworkProfilerControls._includeTextWidth,
-          gaScreen: gac.network,
-          gaSelection: gac.clear,
-          onPressed: widget.controller.clear,
-        ),
-        const SizedBox(width: defaultSpacing),
-        DownloadButton(
-          minScreenWidthForTextBeforeScaling:
-              _NetworkProfilerControls._includeTextWidth,
-          onPressed: widget.controller.exportAsHarFile,
-          gaScreen: gac.network,
-          gaSelection: gac.NetworkEvent.downloadAsHar.name,
-        ),
-        const SizedBox(width: defaultSpacing),
-        const Expanded(child: SizedBox()),
-        // TODO(kenz): fix focus issue when state is refreshed
-        SearchField<NetworkController>(
-          searchController: widget.controller,
-          searchFieldEnabled: hasRequests,
-          searchFieldWidth: screenWidth <= MediaSize.xs
-              ? defaultSearchFieldWidth
-              : wideSearchFieldWidth,
-        ),
-        const SizedBox(width: denseSpacing),
-        DevToolsFilterButton(
-          onPressed: _showFilterDialog,
-          isFilterActive: _filteredRequests.length != _requests.length,
-        ),
+        if (widget.offline)
+          Padding(
+            padding: const EdgeInsets.only(right: defaultSpacing),
+            child: ExitOfflineButton(gaScreen: gac.cpuProfiler),
+          )
+        else ...[
+          StartStopRecordingButton(
+            recording: _recording,
+            onPressed: () async =>
+                await widget.controller.togglePolling(!_recording),
+            tooltipOverride: _recording
+                ? 'Stop recording network traffic'
+                : 'Resume recording network traffic',
+            minScreenWidthForTextBeforeScaling: double.infinity,
+            gaScreen: gac.network,
+            gaSelection: _recording ? gac.pause : gac.resume,
+          ),
+          const SizedBox(width: denseSpacing),
+          ClearButton(
+            minScreenWidthForTextBeforeScaling:
+                _NetworkProfilerControls._includeTextWidth,
+            gaScreen: gac.network,
+            gaSelection: gac.clear,
+            onPressed: widget.controller.clear,
+          ),
+          const SizedBox(width: defaultSpacing),
+          DownloadButton(
+            minScreenWidthForTextBeforeScaling:
+                _NetworkProfilerControls._includeTextWidth,
+            onPressed: widget.controller.exportAsHarFile,
+            gaScreen: gac.network,
+            gaSelection: gac.NetworkEvent.downloadAsHar.name,
+          ),
+          const SizedBox(width: defaultSpacing),
+          const Expanded(child: SizedBox()),
+          // TODO(kenz): fix focus issue when state is refreshed
+          SearchField<NetworkController>(
+            searchController: widget.controller,
+            searchFieldEnabled: hasRequests,
+            searchFieldWidth: screenWidth <= MediaSize.xs
+                ? defaultSearchFieldWidth
+                : wideSearchFieldWidth,
+          ),
+          const SizedBox(width: denseSpacing),
+          DevToolsFilterButton(
+            onPressed: _showFilterDialog,
+            isFilterActive: _filteredRequests.length != _requests.length,
+          ),
+        ],
       ],
     );
   }

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

@@ -0,0 +1,69 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// 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 '../../shared/http/http_request_data.dart';
+import '../../shared/primitives/utils.dart';
+import 'network_model.dart';
+
+/// Class to encapsulate offline data for the [NetworkController].
+/// It is responsible for serializing and deserializing offline network data.
+class OfflineNetworkData with Serializable {
+  OfflineNetworkData({
+    required this.requests,
+    this.selectedRequestId,
+    this.recording = false,
+  });
+
+  /// Creates an instance of [OfflineNetworkData] from a JSON map.
+  factory OfflineNetworkData.fromJson(Map<String, dynamic> json) {
+    final List<dynamic> requestsJson = json['requests'] ?? [];
+    final requests = requestsJson
+        .map(
+          (e) => DartIOHttpRequestData.fromJson(
+            e as Map<String, dynamic>,
+            null,
+            null,
+          ),
+        )
+        .toList();
+
+    return OfflineNetworkData(
+      requests: requests,
+      selectedRequestId: json['selectedRequestId'] as String?,
+      recording: json['recording'] as bool? ?? false,
+    );
+  }
+  bool get isEmpty => requests.isNullOrEmpty;
+
+  /// List of current [DartIOHttpRequestData] network requests.
+  final List<DartIOHttpRequestData> requests;
+
+  /// Get a request by matching its `id` field.
+  // Temporarily added to check selection in the filtered requests data,
+  // until we have current requests data in place
+  NetworkRequest? getRequest(String id) {
+    // Search through the list of requests and return the one with the matching ID.
+    return requests.firstWhere(
+      (request) => request.id == id,
+    );
+  }
+
+  /// The ID of the currently selected request, if any.
+  final String? selectedRequestId;
+
+  /// Whether the recording state is enabled.
+  final bool recording;
+
+  /// Converts the current offline data to a JSON format.
+  @override
+  Map<String, dynamic> toJson() {
+    return {
+      'requests': requests.map((request) => request.toJson()).toList(),
+      'selectedRequestId': selectedRequestId,
+      'recording': recording,
+    };
+  }
+}