Adds WebSocket support to Network panel (GSoC'26)

[Victowolf]

Fixes #9507
Tracking issue: Victowolf/GSoC-Progress-Tracking#8

This contribution is part of the Google Summer of Code 2026 project:

"Add WebSocket/gRPC support to Flutter DevTools Network Panel"

This PR adds WebSocket support to the Flutter DevTools Network panel.

Previously, dart:io WebSocket connections appeared as opaque SOCKET requests in the Network screen. This PR extends the existing networking models and UI to recognize WebSocket profiling data and provide dedicated inspection of WebSocket connections and frame activity.

What's included

• Add WebSocket-specific network request modeling.
• Display WebSocket connections in the Network request table as WEBSOCKET.
• Display WebSocket connection details in the Overview section, including:
  • URI
  • Connection ID
  • Protocol
  • Connection status
  • Bytes sent/received
  • Frames sent/received
  • Ping/pong counts
  • Start/end timestamps
  • Connection duration
• Add WebSocket frame inspection in the Network inspector.
• Display WebSocket lifecycle and frame events such as:
  • Connect
  • Open
  • Send
  • Receive
  • Close
  • Error
  • Ping/Pong
• Display frame-level information including:
  • Timestamp
  • Direction
  • Opcode
  • Payload size
• Add WebSocket timing visualization.
• Handle open connections with pending end time/duration and closed connections with calculated duration.
• Add and update tests covering WebSocket models, Network table rendering, Overview, timing, and frame inspection.
• Verify the implementation against a real Dart WebSocket application connected to DevTools through the VM Service.

Tests Extended:

• network_controller_test.dart
• network_model_test.dart
• network_profiler_test.dart
• network_request_inspector_test.dart
• network_table_test.dart

Updated UI:

Pre-launch Checklist

General 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 updated/added relevant documentation (doc comments with ///).

Issues checklist

• I listed at least one issue that this PR fixes in the description above.

Tests checklist

• I added new tests to check the change I am made

AI-tooling checklist

• I did use AI tooling, and...
  • I read the AI contributions guidelines and agree to follow them.
  • I reviewed all AI-generated code before opening this PR.
  • I understand and am able to discuss the code in this PR.
  • I have verifed the accuracy of any AI-generated text included in the PR description.
  • I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

Feature-change checklist

• this PR does change the DevTools UI or behavior and...
  • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.
  • I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
  • I ran the DevTools app locally to manually verify my changes.

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

[gemini-code-assist]

Code Review

This pull request introduces WebSocket profiling support to the DevTools network screen. It adds a new WebSocket request type, updates the NetworkController and NetworkService to fetch and process WebSocket traffic, and implements UI views (WebSocketFramesView and overview rows) to inspect WebSocket connections and their frames. The review feedback highlights a logical bug in updateLastRefreshTime() where socket refresh is called twice instead of updating the WebSocket refresh time, and suggests wrapping the DataTable in WebSocketFramesView with a horizontal scroll view to prevent layout overflows.

[crackedhandle]

For WebSocket frame inspection, should each frame be represented as a separate event in the timeline, or should multiple frames of the same connection be grouped in some way to avoid making the timeline too dense for long-lived connections?

[Victowolf]

This PR aims to integrate the entire WebSocket support from vm_service instrumentation to network panel. For long-lived, dense connections, time-interval-based grouping can be added as an enhancement after this PR lands.