Offline support for Network page

[hrajwade96]

Adding offline support to Network page.

issue link - #4470

List which issues are fixed by this PR.

Please add a note to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md if your change requires release notes. Otherwise, add the 'release-notes-not-required' label to the PR.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read the Flutter Style Guide recently, and have followed its advice.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or there is a reason for not adding tests.

If you need help, consider asking for help on Discord.

[kenzieschmoll]

@hrajwade96 is this PR ready for review or is this still a work in progress?

[hrajwade96]

@hrajwade96 is this PR ready for review or is this still a work in progress?

@kenzieschmoll just finishing up few things, I will mark it ready soon

[kenzieschmoll]

please address this TODO.

[hrajwade96]

While testing I noticed 2 issues :

1. The timings in socket stats are having discrepancy in online and offline mode - I thought this could be due to _timelineMicrosBase but I tried adding/ removing it there was still a discrepancy. Is it due to some time zone or formatting issue? I am trying to figure out.
2. The Request and Response data is missing in offline mode - I think it's because full fetch is not called, if we want to call where can we ideally call it?

Attaching SS for 1st point :
Online mode

Offline mode

[hrajwade96]

Another point is that in offline mode data of socket and http requests is grouped when it's populated.
I think we should show them in their original order as the requests came in? Perhaps we can pack them in a combined way instead, or other way is to reorder before rendering based on timestamps (once we fix the timings) ?

[hrajwade96]

Actually past 2 weeks I've been on vacation, and then unwell so got very little time to investigate.

[kenzieschmoll]

The table should already sort the data by timestamp.

[hrajwade96]

2nd and 3rd points are remaining,
for (2) - I tried fetching full data with periodic timer

  void startPeriodicExport() {
    _periodicExportTimer = Timer.periodic(const Duration(milliseconds: 500), (
      _,
    ) async {
      try {
        unawaited(_fetchFullDataBeforeExport());
        debugPrint('Export data fetched successfully');
      } catch (e) {
        debugPrint('Error during periodic export fetch: $e');
      }
    });
  }

  void stopPeriodicExport() {
    _periodicExportTimer?.cancel();
    _periodicExportTimer = null;
  }

so that full data is always available before entering in offline mode. Or alternatively we can fetch each time new request data is added in the current list. Is this fine? or any better ideas?

[hrajwade96]

for (3) is there any simple way to add anther check for showing exit offline cta?
such as whenever it is disconnected, current check doesn't seem to work after page refresh

[hrajwade96]

BTW I will be unavailable here for the next 4 days (27th - 1st Dec)

[kenzieschmoll]

For point 3 (offline mode data disappearing after a page refresh): this is a known issue and should be fixed holistically for the offline framework. This is out of scope for this PR, so you don't need to worry about this case.

[kenzieschmoll]

For point 2, can you just call await _fetchFullDataBeforeExport() at the beginning of prepareOfflineScreenData like we do at the beginning of the exportAsHarFile method?

[kenzieschmoll]

Please add test coverage for this change. Thanks!

[kenzieschmoll]

Just a couple more comments. Thank you for all your work on this change!

[kenzieschmoll]

Looks like there are several failing checks. Please also add an entry to NEXT_RELEASE_NOTES.md so that the release notes check passes.

[kenzieschmoll]

You will likely have several merge conflicts after pulling in the tip of the master branch. A change just landed that upgraded the Flutter version used in DevTools, which updated to a new version of the dart formatter. Here's what I recommend to make this merge simpler for you:

1. Merge the master branch into your branch.
2. For all conflicts, accept your revision of the file..
3. Run dt update-flutter-sdk. This will update the flutter sdk contained at tool/flutter-sdk to the version used on the DevTools CI.
4. Run tool/flutter-sdk/bin/dart format from the devtools_app directory. This will format your files with your changes to use the new formatter.