Skip to content

Add a horizontal scrollbar to DevTools tables - #9482

Merged
elliette merged 14 commits into
flutter:masterfrom
elliette:horizontal-scrolling
Oct 23, 2025
Merged

elliette merged 14 commits into
flutter:masterfrom
elliette:horizontal-scrolling

Conversation

@elliette

Copy link
Copy Markdown
Member

Fixes #9465
Work towards #8190

Previously without a scrollbar, the table had to be clicked and dragged to be scrolled horizontally. That meant that if the table was wider than the current viewport, it was impossible to select text (and therefore copy text) within the table:

table_no_scrollbar

Now scrolling is handled by the scrollbar, which means that the text inside the table can be selected and copied, even when the table is wider than the current viewport:

network_scrollbar

@elliette
elliette requested a review from a team as a code owner October 21, 2025 22:04
@elliette
elliette requested review from bkonyi and srawlins and removed request for a team October 21, 2025 22:04

@srawlins srawlins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very elegant!

@bkonyi bkonyi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice!

@elliette
elliette merged commit 6b9ba48 into flutter:master Oct 23, 2025
66 of 68 checks passed
copybara-service Bot pushed a commit to dart-lang/sdk that referenced this pull request Oct 28, 2025
Cherry-picked commits in DevTools repo include:

* flutter/devtools@1b39a2e
  "Add basic support for Flutter web applications served with -d web-server"
  flutter/devtools#9468
* flutter/devtools@fb4fa1f
  "Handle shortcuts for actions like copy/paste when embedded inside VS Code"
  flutter/devtools#9472
* flutter/devtools@cd14e27
  "Fix position and width of "error count" badge in Network in app bar"
  flutter/devtools#9470
* flutter/devtools@6b9ba48
  "Add a horizontal scrollbar to DevTools tables"
  flutter/devtools#9482
* flutter/devtools@1f8b3f5
  "Disable screens not compatible with DWDS websocket mode"
  flutter/devtools#9481
* flutter/devtools@8a42447
  "Table columns are resizable"
  flutter/devtools#9485
* flutter/devtools@5c0b17a
  "Network panel: disable Header ExpansionTiles when no data"
  flutter/devtools#9492
* flutter/devtools@0dbead1
  "Network: add a banner indicating when we are not logging network requests"
  flutter/devtools#9495

Issue description: Users were unable to use various functions in the
DevTools Network screen, including copy+paste, view requests, and
view the request table when embedded in a small window.
What is the fix: Various fixes are included for these user issues.
Why cherry-pick: Users reported these issues in the user survey pre-dating Flutter 3.35; it is important for user trust to fix these in
Flutter 3.38.
Risk: Low, this fix only affects DevTools.
Issue link(s): Dart-Code/Dart-Code#3488, flutter/devtools#7253, flutter/devtools#9435, flutter/devtools#8920, flutter/devtools#9465, flutter/devtools#9488, flutter/devtools#9464
Cherry-pick: flutter/devtools@v2.51.0...2.51.1
Change-Id: Iae696151778849fdb6faf6bf83a123f518fee77c
Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/458020
Reviewed-by: Devon Carew <devoncarew@google.com>
Commit-Queue: Samuel Rawlins <srawlins@google.com>
Reviewed-by: Elliott Brooks <elliottbrooks@google.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing horizontal scrollbar in Network panel

3 participants