Make several toolbars wrappable so their items don't get hidden When the devtools window gets narrower, some of the toolbars don't have enough space to display their items (icons, dropdowns, buttons, etc.). This is the case for the Network panel, the Console panel, the Coverage panel, the Performance panel (including the various subpanels in it). It's easy to run into this issue with toolbars that have a lot of controls in it (e.g. Network), but for users who require a larger zoom level to use the tools, it's almost unavoidable. This is also more of a problem when you don't have a lot of space for devtools (which is often the case on laptops and with devtools displayed on the side). Turns out toolbars support a wrap mode already, so this is what I've used here to address the issue. I've also given softDropDownButtons the ability to shrink. Otherwise they are fixed at a 120px width, and that takes a lot of space in the toolbars (e.g. the frame switcher in the Console panel). Before/after animations for network and console: https://imgur.com/a/obtGr1n Bug: 1194407 Change-Id: Ia6d04091458a6598f7fa812742d37c833cec2f09 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2796891 Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com> Reviewed-by: Brandon Walderman <brwalder@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org> Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.
The frontend is available on chromium.googlesource.com.
Please be aware that DevTools follows additional development guidelines.
The issue triage guidelines can be found in docs/triage_guidelines.md.
Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.
DevTools frontend repository is mirrored on GitHub.
DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.
The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.
All DevTools commits: View the log or follow @DevToolsCommits on Twitter
All open DevTools tickets on crbug.com
File a new DevTools ticket: new.crbug.com
Code reviews mailing list: devtools-reviews@chromium.org
@ChromeDevTools on Twitter
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools