In bug 1109177 I cleaned up the display of nodes listed in the Layout
panel by making them not wrap, and have an ellipsis when they were too
long.
This caused a visual regression in the breadcrumbs of the Elements tree.
The nodes there use the same component and they were affected by my
CSS change.
Namely, the focus outline became taller and got cropped.
In this change, I'm just reverting the change of CSS to NodeText.
Instead, I'm moving this to the layoutPane.css, so it now only applies
to nodes in the Layout pane, and not the breadcrumbs anymore.
Before: https://imgur.com/CTGA6SO.jpg
After: https://imgur.com/sFfUQLk.jpg
Bug: 1124250
Change-Id: I9433cf0187be17a0044766472236470bb1be4b79
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2389035
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Michael Liao <michael.liao@microsoft.com>
There can be many grids on a single page, and therefore many adorners in the
Elements tree and many checkboxes in the Layout panel.
Users may want to turn several of these grids on so they can see visually in
the page how they align.
Right now, all grids share the same colors, this makes it hard to know which
lines and which labels belong to which grids:
Example: https://imgur.com/OqqeFGN.jpg
This change introduces some logic to generate a new color for each grid overlay.
Only the main color is generated, and an alpha value is used to derive the gap
color from it. The labels already match the line colors provided, so no changes
needed for this.
Example: https://imgur.com/Kja5xNK.jpg
To generate colors, we use the HSV format and set the S and V values so that we
can go through the whole hue spectrum and keep some consistency between the
colors.
This does mean, however, that we are limited in how many different colors we can
generate (we need to incremenet the H value quite a bit every time to make sure
colors aren't too similar). Hence, after 10 colors or so, we circle back.
Colors are attributed per nodeId, and stored in a map indexed by those ids. This
means that colors are persistent in a user session.
In a future CL, we'll make the swatches clickable so users can change the
colors.
Bug: 1123052
Change-Id: Ie9fa67432230473bcdd438f9b5adf3fce169d165
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2384794
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Shane Clifford <shanejc@microsoft.com>
This change brings the new Layout panel closer to what the mockups for
this panel specify and also makes a few fixes to manage narrow and wide
sizes better.
For information, the last mockups were shared in this thread:
https://chromium.slack.com/archives/C016SAMDTK7/p1597755197253400?thread_ts=1597421739.244800&cid=C016SAMDTK7
Here is the list of changes:
* Removed the label before the line label drop-down, as per mockups
* Made the line label drop-down first in the settings section
* Fixed a bug where elements would appear as div..class when the
className contained whitespaces
* Centered checkboxes and labels vertically
* Clipped long node previews with an ellipsis to avoid horizontal
scrolling
* Fixed a bug where the checkboxes and select button became smaller
when there was enough space
* Introduced multi-column layout for when the panel is super wide
Before: https://imgur.com/Jo8oMG7.jpg
After: https://imgur.com/zEmGi3V.jpg (also includes moving the settings
to the top, which is in another CL, that I happened to build this CL on)
Bug: 1109177
Change-Id: I1a7c543f7f21d5e003cdb91dbb44dc04765aa0a4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2379226
Reviewed-by: Michael Liao <michael.liao@microsoft.com>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Alex Rudenko
