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';
@@ -49,6 +50,7 @@ class NetworkController extends DisposableController
     with
         SearchControllerMixin<NetworkRequest>,
         FilterControllerMixin<NetworkRequest>,
+        OfflineScreenControllerMixin,
         AutoDisposeControllerMixin {
   NetworkController() {
     _networkService = NetworkService(this);
@@ -388,6 +390,25 @@ class NetworkController extends DisposableController
     }
   }
 
+  @override
+  OfflineScreenData prepareOfflineScreenData() {
+    final requests =
+        filteredData.value.whereType<DartIOHttpRequestData>().toList();
+    return OfflineScreenData(
+      screenId: NetworkScreen.id,
+      data: serializeRequestDataForOfflineMode(requests),
+    );
+  }
+}
+
+Map<String, Object> serializeRequestDataForOfflineMode(
+  List<DartIOHttpRequestData>? requests,
+) {
+  if (requests == null) return {};
+  return {
+    'requests': requests.map((request) => request.toJson()).toList(),
+  };
+
   Future<void> _fetchFullDataBeforeExport() => Future.wait(
         filteredData.value
             .whereType<DartIOHttpRequestData>()

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

@@ -8,6 +8,7 @@ import 'package:devtools_app_shared/ui.dart';
 import 'package:devtools_app_shared/utils.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
 
 import '../../shared/analytics/analytics.dart' as ga;
@@ -29,6 +30,8 @@ import 'network_controller.dart';
 import 'network_model.dart';
 import 'network_request_inspector.dart';
 
+final _log = Logger('http_request_data');
+
 class NetworkScreen extends Screen {
   NetworkScreen() : super.fromMetaData(ScreenMetaData.network);
 
@@ -123,19 +126,45 @@ class _NetworkScreenBodyState extends State<NetworkScreenBody>
   void didChangeDependencies() {
     super.didChangeDependencies();
     if (!initController()) return;
-    unawaited(controller.startRecording());
-
-    cancelListeners();
+    try {
+      if (offlineDataController.showingOfflineData.value == true) {
+        loadOfflineData(offlineDataController.offlineDataJson);
+      }
+      cancelListeners();
+      if (!offlineDataController.showingOfflineData.value) {
+        unawaited(controller.startRecording());
+        debugPrint('started recording');
+        addAutoDisposeListener(
+          serviceConnection.serviceManager.isolateManager.mainIsolate,
+          () {
+            if (serviceConnection
+                    .serviceManager.isolateManager.mainIsolate.value !=
+                null) {
+              unawaited(controller.startRecording());
+            }
+          },
+        );
+      }
+    } catch (e) {
+      _log.shout('Could not load offline data: $e');
+    }
+  }
 
-    addAutoDisposeListener(
-      serviceConnection.serviceManager.isolateManager.mainIsolate,
-      () {
-        if (serviceConnection.serviceManager.isolateManager.mainIsolate.value !=
-            null) {
-          unawaited(controller.startRecording());
-        }
-      },
-    );
+  void loadOfflineData(Map<String, dynamic> offlineData) {
+    final requestsMap = (offlineData['network']
+        as Map<String, dynamic>)['requests'] as List<dynamic>;
+    final requests = requestsMap
+        .map(
+          (e) => DartIOHttpRequestData.fromJson(
+            e as Map<String, dynamic>,
+            null,
+            null,
+          ),
+        )
+        .toList();
+    controller.filteredData
+      ..clear()
+      ..addAll(requests);
   }
 
   @override
@@ -187,7 +216,7 @@ class _NetworkProfilerControlsState extends State<_NetworkProfilerControls>
   @override
   void initState() {
     super.initState();
-
+    addAutoDisposeListener(offlineDataController.showingOfflineData);
     _recording = widget.controller.recordingNotifier.value;
     addAutoDisposeListener(widget.controller.recordingNotifier, () {
       setState(() {

packages/devtools_app/lib/src/screens/network/utils/http_utils.dart

@@ -0,0 +1,31 @@
+// 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 'dart:convert';
+
+/// Calculates the size of the headers in bytes.
+///
+/// Takes a map of headers [headers], where keys are header names and values
+/// can be strings or lists of strings. Returns the size of the headers
+/// in bytes or -1 if [headers] is null.
+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;
+}

packages/devtools_app/lib/src/shared/feature_flags.dart

@@ -38,6 +38,9 @@ bool get enableBeta => enableExperiments || !isExternalBuild;
 const _kMemoryDisconnectExperience =
     bool.fromEnvironment('memory_disconnect_experience', defaultValue: true);
 
+const _kNetworkOfflineExperiment =
+    bool.fromEnvironment('network_disconnect_experience', defaultValue: true);
+
 // It is ok to have enum-like static only classes.
 // ignore: avoid_classes_with_only_static_members
 /// Flags to hide features under construction.
@@ -62,6 +65,11 @@ abstract class FeatureFlags {
   /// https://github.com/flutter/devtools/issues/5606
   static const memoryDisconnectExperience = _kMemoryDisconnectExperience;
 
+  /// Flag to enable offline data on network screen.
+  ///
+  /// https://github.com/flutter/devtools/issues/3806
+  static const networkOffline = _kNetworkOfflineExperiment;
+
   /// Flag to enable save/load for the Memory screen.
   ///
   /// https://github.com/flutter/devtools/issues/8019

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

@@ -0,0 +1,74 @@
+// 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.
+
+enum HttpRequestDataKeys {
+  connectionInfo,
+  remoteAddress,
+  localPort,
+  contentLength,
+  startedDateTime,
+  time,
+  request,
+  method,
+  url,
+  httpVersion,
+  cookies,
+  headers,
+  queryString,
+  postData,
+  mimeType,
+  text,
+  headersSize,
+  bodySize,
+  followRedirects,
+  maxRedirects,
+  persistentConnection,
+  proxyDetails,
+  proxy,
+  type,
+  error,
+  response,
+  status,
+  statusCode,
+  statusText,
+  redirects,
+  redirectURL,
+  cache,
+  timings,
+  blocked,
+  dns,
+  connect,
+  send,
+  wait,
+  receive,
+  ssl,
+  connection,
+  comment,
+  isolateId,
+  uri,
+  id,
+  startTime,
+  events,
+  timestamp,
+  event,
+  compressionState,
+  isRedirect,
+  reasonPhrase,
+  queryParameters,
+  content,
+  size,
+  connectionId
+}
+
+enum HttpRequestDataValues {
+  json,
+}
+
+class HttpRequestDataDefaults {
+  static const none = 'None';
+  static const error = 'Error';
+  static const httpVersion = 'HTTP/2.0';
+  static const json = 'json';
+  static const httpProfileRequest = '@HttpProfileRequest';
+}