[Performance] Retime markers against nav start records

The current timeline behavior assumes that time 0 is the start of the
trace. This assumption holds up just fine under many cases, but in page
load contexts in particular, it does not. Indeed there is a difference
between the values for metrics like FCP and LCP as reported in the trace
as compared to the values reported by PerformanceObserver, since the
former is measured from the trace start, where the latter measures since
the NavigationStart trace event.

This CL changes two things: 1) it changes the times shown in the ruler
to be relative to NavigationStart events, should any exist; 2) it
modifies the time reported in the details for markers to again be
relative to the nearerst NavigationStart event. Every time there is a
navigation event, the ruler's time is reset to 0ms, thus we catch traces
with multiple navigation events.

See https://imgur.com/a/ueU7GbD for before & after images.

Bug: 974550
Change-Id: Ic75ac3940ec18ba3413745ceb7c7ae528f5e9019
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2252159
Commit-Queue: Paul Lewis <[email protected]>
Reviewed-by: Jan Scheffler <[email protected]>
11 files changed
tree: 4f30edf6c6b384c40b6ef00901576b044009a1f0
  1. back_end/
  2. build_overrides/
  3. docs/
  4. front_end/
  5. node_modules/
  6. scripts/
  7. test/
  8. third_party/
  9. v8/
  10. .clang-format
  11. .editorconfig
  12. .eslintignore
  13. .eslintrc.js
  14. .gitattributes
  15. .gitignore
  16. .gn
  17. .npmignore
  18. .npmrc
  19. .style.yapf
  20. .stylelintignore
  21. .stylelintrc.json
  22. AUTHORS
  23. BUILD.gn
  24. COMMON_OWNERS
  25. DEPS
  26. ENG_REVIEW_OWNERS
  27. INFRA_OWNERS
  28. LICENSE
  29. LIGHTHOUSE_OWNERS
  30. OWNERS
  31. package-lock.json
  32. package.json
  33. PRESUBMIT.py
  34. protocol.json
  35. README.md
  36. tsconfig.base.json
  37. tsconfig.json
  38. 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 here.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found here.

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