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>
2 files changed
tree: 100bdf9375ba547ac140d5d404878b955b83c116
  1. back_end/
  2. build_overrides/
  3. docs/
  4. front_end/
  5. node_modules/
  6. scripts/
  7. test/
  8. third_party/
  9. v8/
  10. .clang-format
  11. .editorconfig
  12. .eslintignore
  13. .eslintrc.js
  14. .gitattributes
  15. .gitignore
  16. .gn
  17. .npmignore
  18. .npmrc
  19. .style.yapf
  20. .stylelintignore
  21. .stylelintrc.json
  22. all_devtools_files.gni
  23. all_devtools_modules.gni
  24. AUTHORS
  25. BUILD.gn
  26. COMMON_OWNERS
  27. DEPS
  28. devtools_grd_files.gni
  29. devtools_image_files.gni
  30. devtools_module_entrypoints.gni
  31. ENG_REVIEW_OWNERS
  32. INFRA_OWNERS
  33. LICENSE
  34. LIGHTHOUSE_OWNERS
  35. OWNERS
  36. package-lock.json
  37. package.json
  38. PRESUBMIT.py
  39. protocol.json
  40. README.md
  41. tsconfig.base.json
  42. tsconfig.json
  43. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

Source code

The frontend is available on chromium.googlesource.com.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found here.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found here.

Additional references

Source mirrors

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.

Getting in touch