commit | d996f5589a7b6a4085fe99786572898949b8895b | [log] [tgz] |
---|---|---|
author | Patrick Brosset <patrick.brosset@microsoft.com> | Mon Aug 24 08:55:56 2020 |
committer | Commit Bot <commit-bot@chromium.org> | Mon Aug 24 20:04:26 2020 |
tree | 100bdf9375ba547ac140d5d404878b955b83c116 | |
parent | 867fe2fbf0fb8ce24f253bd37e9e401dafd1bb77 [diff] |
Allow horizontal scrolling in the Elements tree The Elements tree does not scroll horizontally for now. In most cases, it's good, because some nodes tend to be quite long, and it's better to have them wrap on multiple lines so you can still see everything at once without constantly scrolling left and right (which, depending on the mouse/trackpad device you use, can be difficult). However, we often run in cases where the lack of horizontal scrollbar is a problem: - long attribute values, such as urls wrap in places where it doesn't make much sense and are harder to read - more importantly: some web pages have deeply nested DOM trees, so much that after a point, the nodes have so much left indentation that they have no space left to the right to display any content. So you can be in situations where a node is displayed 1 character at a time, over many lines. Or even worse, certain nodes are not visible anymore. This change removes the overflow-x:hidden CSS property so the Elements panel can scroll if needed. The change still retains the nodes' abilities to wrap (using word-break: normal; make them wrap at word boundaries only) so in a lot of cases, nothing will change for users. However, this also introduces a minimum width for every node in the tree which will force the horizontal scrollbar to appear after a point, and will make sure each node has at least that much horizontal space to display content. Before/after example screenshot: https://imgur.com/MPO04CU.jpg Bug: 880265 Change-Id: Ia3bfc1476868ce31ab8ac2f0d8adc59c61894d90 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366972 Reviewed-by: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Changhao Han <changhaohan@chromium.org> Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
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 here.
Instructions to set up, use, and maintain a DevTools frontend checkout can be found here.
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