Enable offline support for all DevTools screens

[kenzieschmoll]

Enabling offline support will:

1. Be helpful for users who want to export data and reload later or to send to other developers for debugging
2. Be especially helpful for faking test data while developing DevTools. Then we can just write SomeScreenData.parse(someOfflineData) to initialize fake testing data for the screen. If we continue to integrate with Stager, this will be useful for both testing and stager development (see https://github.com/flutter/devtools/pull/446)
3. Be helpful for users to be able to include in bug reports

• Inspector - Enable offline debugging of widget trees #1966
• Performance - done
• CPU Profiler - already done, but need to ensure we are including any filters that are set on the data
• Memory Profiler - need to switch to how other screens export data and send data to Downloads (Exported memory data should go to the ~/Downloads folder #3411) and need to audit to ensure that all data from screen is included in the output - Add support for viewing memory data after app disconnect #6759
• Debugger - is there a use case for looking at an "offline" debugger state? This is still useful for creating test data files, but we may want to make these methods visibleForTesting and potentially only expose for debug builds of the DevTools app if we don't want to expose an "Export" button for users.
• Network - we have an "Export as Har" function, but we need to hook this up to our existing import / export framework and ensure that all data to recreate the state of the screen for offline uses is included in the output (e.g. selected request, filters, etc.)
  • Offline support for Network page #8332
  • Add open / save controls to the network screen #8886
• Logging (Support reviewing history for the logging screen #29)
• App Size (Export processed app size data report  #8110)
• Vm Developer Tools Screen

[CoderDake]

It was mentioned that the Logging page might be a good place to start.

[CoderDake]

Network page may also be a good 2nd candidate

[CoderDake]

For the Network Page, consider making sure that we use HAR file format for network requests

[kenzieschmoll]

Exporting as HAR already exists for the network page, but for the full export of the network page, we'll also need to include extra devtools-specific information (things like selected request, filters, etc.).

[polina-c]

Related issue: #4645

[hrajwade96]

@kenzieschmoll, in reference to our earlier discussion (#7970 (comment)), what is the plan for adding offline support to the network page? I am interested in contributing to this effort and would like to know how I can help.

From what I understand - we need to wrap it with another model class OfflineNetworkData (with to and from json), which will contain all the extra data on this page. And add file extension detection (do explain what this detection is needed for).

[kenzieschmoll]

To implement offline support for a screen, you can follow the instructions in the dart doc for OfflineScreenControllerMixin: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/offline_data.dart/#L125

You can look at ProfilerScreenController and PerformanceController as examples.

And add file extension detection (do explain what this detection is needed for)

The more complicated part for the Network page is the fact that we support exporting as a .har file, whereas the offline framework for DevTools only supports importing & exporting to / from a JSON file. So in the current form of the offline framework, if network data is exported as a .har file, it will not be able to be re-imported back into DevTools. Only data exported as a JSON file through the DevTools offline framework can be re-imported back into DevTools.

We can tweak the logic to support loading the .har file for the network page as a special case, but we can do this as a follow up task to adding the full offline support for the Network page. The logic to import data from a file is here: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/import_export/import_export.dart/#L61-L98

[hrajwade96]

To implement offline support for a screen, you can follow the instructions in the dart doc for OfflineScreenControllerMixin: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/offline_data.dart/#L125

You can look at ProfilerScreenController and PerformanceController as examples.

And add file extension detection (do explain what this detection is needed for)

The more complicated part for the Network page is the fact that we support exporting as a .har file, whereas the offline framework for DevTools only supports importing & exporting to / from a JSON file. So in the current form of the offline framework, if network data is exported as a .har file, it will not be able to be re-imported back into DevTools. Only data exported as a JSON file through the DevTools offline framework can be re-imported back into DevTools.

We can tweak the logic to support loading the .har file for the network page as a special case, but we can do this as a follow up task to adding the full offline support for the Network page. The logic to import data from a file is here: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/import_export/import_export.dart/#L61-L98

Thanks for sharing the details,
I had noticed that at present only exported 'json' format is supported for importing, I was thinking to make it accept 'har' as well. But as you mentioned, I will raise a separate PR for that change.
I will work on adding offline support with below feature for network screen - when the app gets disconnected, view offline data and check the instructions and references shared by you.