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>
Jack Franklin
