Repository navigation
Fix Network toolbar and footer overflow on narrow screens - #10057
Draft
NemesisDevX wants to merge 1 commit into
Draft
NemesisDevX wants to merge 1 commit into
NemesisDevX wants to merge 1 commit into
Conversation
The Network screen toolbar and the shared footer status line overflowed and overlapped at narrow widths. Network toolbar: below 600 px the search field moves to its own row, and below 900 px the filter field moves to its own row. Layout at 900 px and above is unchanged. Footer (StatusLine, shared by all screens): footer text is truncated instead of overflowing. Below 900 px the video tutorial link and, when DevTools is embedded, the embedded actions move into a More actions menu. Each menu item runs the same action as its inline counterpart. Below 600 px the disconnected status shows an icon with a tooltip instead of text. Fixes flutter#10004 Assisted-by: Devin AI
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #10004
The Network screen toolbar and the shared footer status line overflowed and overlapped at narrow widths (328 to 599 px). The toolbar's search and filter fields were squeezed into one row beside fixed controls. The footer's page status, device text and embedded actions did not fit.
What changes
StatusLine, shared by all screens): footer text is truncated with an ellipsis instead of overflowing. Below 900 px the video tutorial link and, when DevTools is embedded, the Settings, Feedback, About and extension-settings actions move into a "More actions" popup. Each item calls the same callback as its inline control, and the tutorial item records the same analytics event. Below 600 px the disconnected status shows an icon with a tooltip instead of text.DevToolsScaffold.defaultActionsnow returnsList<ScaffoldAction>(wasList<Widget>), so the footer can reuse the existing actions. The other caller inapp.dartis unchanged.Reviewer notes:
Before and after
Before and after captures at 328 px and 411 px, and separate 1400 px desktop comparisons, were taken with headless Chromium against the upstream base (
9ac04e2) and this branch, using the same networking test app. They are attached below as public GitHub attachments.Attachments, all public GitHub user attachments. The GIF and images were captured by scripts that drove headless Chromium against real pages. This is agent-operated capture, not manual testing.
Corrected 9.8-second GIF. Three scenes: 328 px standalone, 411 px embedded footer, and the More actions menu open at 411 px. Each frame shows the upstream base on the left and this branch on the right.
328 px standalone. Base on the left, this branch on the right.
411 px embedded footer. Base on the left, this branch on the right.
411 px embedded, More actions menu open. The popup overlaps part of the footer while it is open.
1400 px desktop, standalone. Base on top, this branch below. The top toolbar band and the request details pane are pixel-identical between builds. The footer request count differs with traffic.
1400 px desktop, embedded. Base on top, this branch below.
Tests
Run on the repository-pinned candidate SDK (Flutter
3.50.0-0.2.pre, revisionfab991537bf):flutter testonstatus_line_test.dartandnetwork_responsive_test.dartflutter teston framework, network, logging, extension, memory diff and property editor suitesdart format --set-exit-if-changed(changed files)dart analyze(changed files) anddart analyze libdt presubmit(without--fix)flutter_lintsresolution warnings in fixture format checks.flutter test test/(fulldevtools_appsuite)+1721 ~12 -1, and+1720 ~12 -1with exit 1). The base9ac04e2run also failed (+1649 ~12 -1). The failures are a CPU-profile benchmark threshold (GenerateFromCpuSamplesBenchmark, expected under 120000) and an intermittent "used after being disposed" error onValueNotifier<StackFrameAndSourcePosition?>. Both also occur on the base. This change does not touch those tests, and I did not alter them. CI is the reference for the full suite.Not run: golden tests,
integration_test/tests, and macOS or Windows desktop builds.Known limitations (pre-existing, not changed here)
PopupMenuButtonbehaves the same on this SDK. The widget tests cover arrow keys under the Flutter test binding, not in a browser.AI assistance disclosure
Implementation and tests were developed with AI assistance (Devin, an AI software agent), which also ran the scripted browser checks. GPT-6, an AI model, reviewed the change and the evidence. The contributor directed and supervised this work and intends to take responsibility for it. Line-by-line human review of the code has not yet been completed, and this PR will not be marked ready for review until it has been. An earlier series of agent-authored development commits is not part of this PR. This PR contains a single commit with the same tree as the tested branch.
Checklist
Pre-launch checklist (boxes left unchecked are for the contributor to confirm personally):
General checklist:
///).Issues checklist:
contributions-welcomeorgood-first-issuelabel. (Not applicable: DevTools Network tab header and footer toolbar controls overlap on narrow screens #10004 has neither label.)contributions-welcomeorgood-first-issuelabel. I understand this means my PR might take longer to be reviewed.Tests checklist:
AI-tooling checklist:
Feature-change checklist:
packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.If you need help, consider asking for help on Discord.