To remove the module.json file in perf_ui, we need to migrate the
resources to the new `generate_css` template. However, perf_ui is a bit
special, in that it doesn't properly use the widget structure. As such,
it sometimes injects CSS in places where there is no clear shadowRoot
available. Therefore, it is not possible to migrate to CSSStyleSheet in
combination with adoptedStylesheets.
As a workaround (to unblock the module.json removal), we augment
`generate_css` to add legacy file generation. All remaining resources in
DevTools will migrate to these `.css.legacy.js` files. That's because
these resources either are special (perf_ui) or are used in the
`device_mode_emulation_frame` which can't use `CSSStyleSheet` itself.
The files export an object, rather than a plain string. That's because
we need to be able to distinguish what string is referencing a CSS file
path and which strings contain the actual CSS styles. By using an
object, we can remain using the `typeof` check for string in the legacy
CSS infrastructure and otherwise destructure the object.
After this, we can remove perf_ui from the module.json structure and
properly bundle+minify the CSS resources.
R=jacktfranklin@chromium.org
Bug: 1190991, 1127902
Change-Id: I7523333e8025ae5fe5ed74b99b4e45907ff9ad97
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3275787
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
imported exist in the file system.
Initally, we wanted to create a `.d.ts` file for each CSS file to
ensure that the file being imported actually exists. However, when
ninja is building `tsc` uses the generated `tsconfig` file in `gen`.
In the `tsconfig.json` `files` list it will see the original TS file
that's in the source tree. When it goes to see the TS file and sees
the `import styles from 'foo.css.js'`. However, that file does not
exist in the files list of the entrypoint or the source tree, so TS
never finds it.
Instead we went with the approach of adding a `declare module` to type
all `.css.js` files and then use a lint rule to ensure that if you
import `foo.css.js` that there is a `foo.css` file in the tree.
Bug: 1106746
Change-Id: I8a65734bf4a9b359f8210b0011f14800c5d9426b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2953260
Commit-Queue: Kriti Sapra <kritisapra@google.com>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Tim van der Lippe