devtools
47428d49 - Fix Network toolbar and footer overflow on narrow screens (#10057)

Commit
1 day ago
Fix Network toolbar and footer overflow on narrow screens (#10057) * Fix Network toolbar and footer overflow on narrow screens 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 #10004 Assisted-by: Devin AI * Preserve toolbar field state and footer spacing across resizes Give the Network search and filter fields stable keys so their widget state (text, selection, and focus) survives being reparented between toolbar rows when the window crosses the 600 and 900 pixel breakpoints. Previously each reparent recreated the filter field's text controller and focus, losing the selection and focus, and the remounted search field's autofocus stole focus. Wrap the footer's page status in Flexible instead of Expanded so it keeps its natural width and the status line's spaceBetween alignment keeps spacing even on wide screens, matching the layout before the responsive change. It still shrinks below its natural width, and ellipsizes, when space is constrained. Assisted-by: Devin AI * Consolidate responsive layout tests per review feedback Reduce the responsive test matrix to the representative widths suggested in review (328, 600, 601, 900, 1400), keep full standalone width coverage for the Network toolbar and footer, and collapse embedded coverage to a single smoke test since the toolbar does not read the embed mode. Consolidate StatusLine geometry and disconnected-state tests, retaining icon-vs-text assertions at the xs boundary and the no-page-status case. Replace the pumpDevToolsScaffold setup for the isolated StatusLine tests with wrapWithControllers over a fake screen whose page status needs no screen controller, so no NetworkController is initialized and no polling timers need cleanup. Drop the toolbar behavior group already covered by the Network screen's own tests, keep a single PopupMenuButton selection per menu item, and add TODOs for the reusable URL launcher, analytics, and text-ellipsis helpers. Assisted-by: Devin AI * Test the 901px boundary in network responsive resize coverage --------- Co-authored-by: NemesisDevX <nemesisdevx@users.noreply.github.com>
Author
Parents
Loading