Google GitGoogle Git
Sign in
chromium/devtools/devtools-frontend/1a4e76c316a732c547ae36c136e3a9c355ece6c9
commit
1a4e76c316a732c547ae36c136e3a9c355ece6c9
[log]
author
Wolfgang Beyer <wolfi@chromium.org>
Mon Dec 18 09:07:40 2023
committer
Devtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>
Mon Dec 18 09:58:29 2023
tree
3e9985d6fd2a52922bc367d3fb0bd5ae3eb02db2
parent
94742f6391be41d2c62cd06693c40aa5c4b554fb [diff]
[Autofill]Highlight on hover by crosslinking address and filled fields

- Process autofill events in AutofillManager:
  - Turn addressUi into a single string, for better searchability.
  - Create array of matches, which link from a filled field to a sub-
    string of the address.
- In AutofillView render address string as a sequence of spans. Each
  span can reference multiple filled fields, so that when hovering
  over a span, the corresponding grid rows are highlighted.
- Vice versa, when hovering over a grid row, the corresponding span in
  the address is highlighted.

Screencast: https://i.imgur.com/ZsLrNeT.mp4

Bug: 1509753
Change-Id: I810173623ed7d099efd2645042a9b68e44eea552
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5130867
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
Auto-Submit: Wolfgang Beyer <wolfi@chromium.org>
6 files changed
tree: 3e9985d6fd2a52922bc367d3fb0bd5ae3eb02db2
  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. .eslintignore
  19. .eslintrc.js
  20. .git-blame-ignore-revs
  21. .gitattributes
  22. .gitignore
  23. .gitmodules
  24. .gn
  25. .mailmap
  26. .npmignore
  27. .npmrc
  28. .style.yapf
  29. .stylelintignore
  30. .stylelintrc.json
  31. AUTHORS
  32. BUILD.gn
  33. codereview.settings
  34. DEPS
  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 project documentation for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation.

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