A little bit of cleanup:
- Remove most uses of any. Two remain where I didn't find an
alternative.
- Add typedefs for the plugin interface
- I couldn't manage to factor out the common plugin definitions in a way
that made the plugins acutally easier to use or write, but I simplified
them a little.
Drive-By: AsyncScope-ify a helper in sources-helpers.
Change-Id: I92cd1ce21aaec0629ea60534246d33a2ecd380e3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2374215
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Eric Leese <leese@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
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>
Right-clicking on the (styled like a console message) issues banner
generated an error (only visible on the DevTools on DevTools console)
and no context menu would be shown. This CL fixes this behavior.
'toExportString()' was added to fix the context menu's 'Save as...'
option.
Screenshot: https://i.imgur.com/xQINU9F.png
Bug: chromium:1123455
Change-Id: Ia0ef9846fe321248d6498c61a6b650926558439c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2382862
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
This CL adds two helpers assertElement and assertElements that
can be used in conjunction with querySelector and querySelectorAll
to assert the element types of the results. The functions rely on
instanceof (thereby also performing a null check), and have types
that makes TypeScript reflect the check in the type system (i.e.
after asserting, e.g. assertElement(e, HTMLInputElement) TypeScript
knows that e is of type HTMLInputElement.
The CL also applies the function in a couple of places, and found
a bug in test/unittests/front_end/elements/LayoutPane_test.ts where
a HTMLButtonElement as incorrectly asserted as HTMLInputElement.
Bug: chromium:1011811
Change-Id: Icca56588a75597879003a298040e061fa088da78
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2388388
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
This CL does two things:
1. Makes the tests fail if a CSS file fails to preload correctly.
2. Fixes the 404 by adding layoutPane.css to the list of files to be copied.
It's not good that the copying of the CSS is done by the
unit_test/frontend/BUILD.gn. A follow up CL will move the copying of CSS
files into the respective BUILD.gns of the source code (e.g. `ui/*.css`
will be copied to gen in `ui/BUILD.gn`).
Change-Id: Ia46cbcd2b00757b62fce3b5b128a01c30df0281d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2390062
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
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>
The grid overlay supports RTL directed grids, to some extent. The lines and gaps
are drawn correctly, but the number, names, sizing and area labels are
misplaced.
For labels to work, a backend change is required, this will be done in a
separate CL. But a couple of minor things also are required in the frontend:
- Making sure the logic to know if labels are too close to each other works with
RTL (this requires comparing absolute distances).
- Making sure area name labels are within their areas (instead of starting at
the right line, but going in the wrong direction, outside of the area).
These 2 things are fixed in this CL. And a new debug file is added for RTL.
Bug: 1096971
Change-Id: I5cbb21283f1eece2c377c4a5ad07e1850e3f36bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2375585
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Allowing language extensions to directly report value representations
for known-constant variables saves evaluator roundtrips (Query,
JIT-compile, Send to the engine, execute, retrieve result), which take
quite some time. Additionally, the new API also allows us to test the
display of variable values, since we're now able to easily provide
values to the frontend from a test extension.
Bug: chromium:1113662
Change-Id: I883115816f53e9d85b0e86549fb23d0f588050b8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339556
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Eric Leese <leese@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Add a web component called PieChart2. The old non-component version
is called PieChart already. We'll replace it with this one once it lands
and then remove the original PieChart and rename this one.
Switch over one user of PieChart (TimelineUIUtils) to use the new
version.
Add tests and examples to the component server.
Change-Id: I563059e0322739d533a95155735fcafbe414e815
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339562
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
The backend now sends the writing-mode value for the highlighted grid.
See CL: https://chromium-review.googlesource.com/c/chromium/src/+/2363050/
By default, grid containers are horizontal-tb, unless the CSS specifies
otherwise. The only other 2 values that can be given by the backend are:
vertical-lr and vertical-rl.
Other values are either deprecated (tb, bt, ...) or not supported yet (sideways)
Based on the writing-mode, the overlay frontend applies a transformation to the
canvas context that draws the grid lines. It then saves this as a matrix so it
can be reused to transform the points where labels are placed (since those are
not part of the canvas).
GIF: https://imgur.com/n3tX2Zm.gif
Bug: 1096971
Change-Id: Ie7ec08850c51170fe973ed50d0787824792bdd16
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2364455
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
When typing new classes in the .cls pane, they get applied to the
selected element as you type, in order to be previewed live.
However, if you press Escape, the classes go away from the .cls pane
but they stay on the element itself.
They should not.
This change fixes that by making sure we re-apply the active classes
when this happens.
It also adds a new e2e test for the .cls panel.
Gif of the fix: https://imgur.com/BjDiEQY.gif
Bug: 1114726
Change-Id: If5823db63c504e3502513bd09e9a82c0cfa0d612
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354238
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tony Ross <tross@microsoft.com>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Alex Rudenko
