RPP: Calculate transferSize natively within ThirdPartyTreeView

The data is from individual ResourceReceivedData, ResourceFinish, etc
instant events. While these are visible (as instant blue events), they
don't display anything by default in the UI. With this setup, the
precise timestamps of when data is received is used. In other words, if
we zoom to only see when a request was sent out, there are 0 bytes
received.

This work puts us one step closer to having a singular implementation
for aggregated selfTime, transferSize, etc grouped by Third Party or
otherwise.

- Taught TraceTree to calculate transferSize
- Mapped *all* trace events comprising a network request to be mapped to an entity, rather than just the syntheticNetworkRequest.
- The EntityMappings of Renderer, Network and the Mapper are now the same.
- The 3P table's numbers match Bottom-up's.
- "Unattributed" is introduced to the 3P table, as by-product of that consistency. However we will reduce it's impact with upcoming work.
- Moved Jack's change for grid node selection triggering hover dimming up to TimelineTreeView, so all TreeViews benefit.
- Allowed the 3P table to use TTV's base onHover method, as no reason to not reuse.

Change-Id: I8ed6b46f9a0ffa09b5e3960b89a8f917a33e3948
Bug: 388458798
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6220264
Reviewed-by: Adriana Ixba <aixba@chromium.org>
Commit-Queue: Paul Irish <paulirish@chromium.org>
Auto-Submit: Paul Irish <paulirish@chromium.org>
14 files changed
tree: dc77088841e1686a50eb32e1233bd2942ce22d8d
  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. .clang-format
  15. .editorconfig
  16. .git-blame-ignore-revs
  17. .gitallowed
  18. .gitattributes
  19. .gitignore
  20. .gitmodules
  21. .gn
  22. .mailmap
  23. .npmignore
  24. .npmrc
  25. .style.yapf
  26. .stylelintignore
  27. .stylelintrc.json
  28. AUTHORS
  29. BUILD.gn
  30. codereview.settings
  31. CONTRIBUTING.md
  32. DEPS
  33. eslint.config.mjs
  34. favicon.ico
  35. LICENSE
  36. OWNERS
  37. package-lock.json
  38. package.json
  39. PRESUBMIT.py
  40. README.md
  41. tsconfig.json
  42. 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: