Google Git
Sign in
chromium / devtools / devtools-frontend / 9a3d85fa0b69e2aac9e494b2f282a8b6a197a9e3
commit9a3d85fa0b69e2aac9e494b2f282a8b6a197a9e3[log] [tgz]
authorPeter Marshall <[email protected]>Wed Aug 12 14:38:00 2020
committerCommit Bot <[email protected]>Mon Aug 24 07:58:42 2020
tree30b1890b05a531beb0dd340cf56f427fd4355747
parentaeac448bc192ab9eff6296b056cb3f953c9baf79 [diff]
css: Use :focus-visible instead of our custom data-keyboard-focus

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

:focus-visible is basically the exact same functionality as the custom
data-keyboard-focus attribute that devtools maintains. This CL converts
all of our uses of data-keyboard-focus in CSS to use :focus-visible.

This has no intended behaviour change although it's possible there are
small differences in our implementation vs. the web platform one, so
this might cause some regression with focus styles for keyboard
interaction.

I tested a few of these manually to verify they still do the same thing.

The CSS linter was unhappy about the ordering of some rules due to
specificity-ordering checks, so there is some re-ordering too.

A follow-up CL will remove our implementation of data-keyboard-focus.

Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236
Commit-Queue: Peter Marshall <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Reviewed-by: Kalon Hinds <[email protected]>
Reviewed-by: Jack Lynch <[email protected]>
Reviewed-by: Brandon Goddard <[email protected]>
39 files changed
tree: 30b1890b05a531beb0dd340cf56f427fd4355747
  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. all_devtools_files.gni
  23. all_devtools_modules.gni
  24. AUTHORS
  25. BUILD.gn
  26. COMMON_OWNERS
  27. DEPS
  28. devtools_grd_files.gni
  29. devtools_image_files.gni
  30. devtools_module_entrypoints.gni
  31. ENG_REVIEW_OWNERS
  32. INFRA_OWNERS
  33. LICENSE
  34. LIGHTHOUSE_OWNERS
  35. OWNERS
  36. package-lock.json
  37. package.json
  38. PRESUBMIT.py
  39. protocol.json
  40. README.md
  41. tsconfig.base.json
  42. tsconfig.json
  43. 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