Google Git
Sign in
chromium / devtools / devtools-frontend / 46cdd9cd019f088e1134abe84dbc7d53ac60585a
commit46cdd9cd019f088e1134abe84dbc7d53ac60585a[log] [tgz]
authorChanghao Han <[email protected]>Thu Jun 10 19:45:59 2021
committerDevtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>Thu Jun 10 21:14:18 2021
tree7030c2c8dbb0186794606528395a9f4ac563303c
parent002707d241fdab0edd6a1b3d087296de25c48dec [diff]
Display container queries in the Styles pane and make them editable

This CL uses the new field from CDP's CSS.getMatchedStylesForNode, added
in [1], to display container queries, and uses the new CDP method
CSS.setContainerQueryText added in [2] to support editing in the Styles
pane.

This CL depends on a protocol definition roll [3] before it can land.

This CL also refactors StylePropertiesSection (in StylesSidebarPane.js)
a little bit, mostly renaming `media*` elements that holds
media/container queries to `query*`.

I also plan on refactoring more in StylePropertiesSection to use
LitHTML components query elements.

[1]: https://crrev.com/c/2927584
[2]: https://crrev.com/c/2945781
[3]: https://crrev.com/c/2950762

screencast: https://imgur.com/a/jBa467k

Bug: chromium:1146422
Change-Id: I104f3bc7791a4b0b039a38a0c383f3853f550bb2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2947248
Commit-Queue: Changhao Han <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Tim van der Lippe <[email protected]>
16 files changed
tree: 7030c2c8dbb0186794606528395a9f4ac563303c
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. front_end/
  6. inspector_overlay/
  7. node_modules/
  8. scripts/
  9. test/
  10. third_party/
  11. v8/
  12. .clang-format
  13. .editorconfig
  14. .eslintignore
  15. .eslintrc.js
  16. .gitattributes
  17. .gitignore
  18. .gn
  19. .mailmap
  20. .npmignore
  21. .npmrc
  22. .style.yapf
  23. .stylelintignore
  24. .stylelintrc.json
  25. ARCHITECTURE.md
  26. AUTHORS
  27. BUILD.gn
  28. DEPS
  29. LICENSE
  30. OWNERS
  31. package-lock.json
  32. package.json
  33. PRESUBMIT.py
  34. README.md
  35. tsconfig.base.json
  36. tsconfig.json
  37. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

Source code

The frontend is available on chromium.googlesource.com.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

Additional references

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Getting in touch