Google Git
Sign in
chromium / devtools / devtools-frontend / c51cfcf6a73575f01266c8706d330c18a8e8abc9
commitc51cfcf6a73575f01266c8706d330c18a8e8abc9[log] [tgz]
authorJack Franklin <jacktfranklin@chromium.org>Thu Apr 17 10:57:33 2025
committerDevtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>Thu Apr 17 11:33:22 2025
treec54fa3b2cea96daecb392fc827f41ec7bfda9ca2
parent2998da1edd75fa0ee2bf1c581e6588df5e4febe5 [diff]
Reland "RPP: fix dangling animations after hiding ChartViewport"

This is a reland of commit a02b21cb92c743ced852c7687c96d0ed391eb8ae.

It fixes the flakes that were found by:

1. Wrapping the `flameChart` in a `div` and calling `show`. Without
   this, the widget system does not think the chart is visible, and that
   means the `willHide` callback in ChartViewport (which cancels the
   animations) does not show.
2. Add an explicit method to force animations to ensure
   prefers-reduced-motion (which I have set on my machine) doesn't
   impact these tests.


Original change's description:
> RPP: fix dangling animations after hiding ChartViewport
>
> This CL fixes a case where queued animations would continue running even
> though the component was not visible any more.
>
> 1. When the component is hidden, we cancel any animation and jump the
>    left/right time to what was the target time.
> 2. In the animate callback we bail if the component is not visible.
>
> R=szuend@chromium.org
>
> Fixed: 411025393
> Change-Id: If3548366d0a9b1f052fb553532b816af70504c2a
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6461924
> Reviewed-by: Simon Zünd <szuend@chromium.org>
> Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Change-Id: Ic663c5af19dfc5a8984b5a0ccb67fa1d936eb642
Bug: 411025393
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6467836
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>
3 files changed
tree: c54fa3b2cea96daecb392fc827f41ec7bfda9ca2
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. extension-api/
  6. extensions/
  7. front_end/
  8. inspector_overlay/
  9. node_modules/
  10. scripts/
  11. test/
  12. third_party/
  13. v8/
  14. build
  15. buildtools
  16. .clang-format
  17. .editorconfig
  18. .git-blame-ignore-revs
  19. .gitallowed
  20. .gitattributes
  21. .gitignore
  22. .gitmodules
  23. .gn
  24. .mailmap
  25. .npmignore
  26. .npmrc
  27. .style.yapf
  28. .stylelintignore
  29. .stylelintrc.json
  30. AUTHORS
  31. BUILD.gn
  32. codereview.settings
  33. CONTRIBUTING.md
  34. DEPS
  35. eslint.config.mjs
  36. favicon.ico
  37. LICENSE
  38. OWNERS
  39. package-lock.json
  40. package.json
  41. PRESUBMIT.py
  42. README.md
  43. tsconfig.json
  44. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

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

Source code and documentation

The frontend is available on chromium.googlesource.com. Check out the Chromium DevTools documentation for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation.

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

There are a few options to keep an eye on the latest and greatest of DevTools development: