The horizontal scrollbar for the style sub-panes in the elements panel
originally had the horizontal scrollbar hidden as items wrap in case of
horizontal overflow. This change partially reverts crrev.com/c/2367354 which
had changed this behaviour, but we are still keeping the vertical scrollbar
fixed to avoid the offset to the right of the component.
R=tvanderlippe@chromium.org
Fixed: 1153267
Change-Id: Iaf3b8edb4193d04cbb68a6bf72e440e87b68459a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2572674
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>
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
