Google Git
Sign in
chromium / devtools / devtools-frontend / cec728ffcb917a07ed8b9d3b13787b903de1c11d
commitcec728ffcb917a07ed8b9d3b13787b903de1c11d[log] [tgz]
authorPatrick Brosset <[email protected]>Thu Jul 02 15:57:25 2020
committerCommit Bot <[email protected]>Fri Jul 03 09:48:18 2020
treedcc161fc6a9009727f0bc63166fd2c32972478ac
parent307d82aaaccd12f08dbe956b9b5e6c68ebf17cef [diff]
Grid: Draw grid area names

This is based on this backend change:
https://chromium-review.googlesource.com/c/chromium/src/+/2275484

When the backend returns data about the named grid areas (their names
and paths), then the frontend of the overlay needs to draw them.
The mockup for how they should look can be found here:
https://docs.google.com/presentation/d/1krTiCT_c5sIAXBU6hpSok9ev3cZDRyucHf6rnKNTa8o/edit#slide=id.g74d98c0ef3_1_26

Grid areas are basically just highlighted with a thick border around
them, and the name is displayed in the top-left corner.
This change does not handle cases where multiple areas overlap,
resulting in overlapping names. This will be handled later.

This change refactors a little bit the code in css_grid_label_helpers.js
to make it easy to generate more label types in the future.
As before, whenever a grid is drawn, all labels are cleared. This hasn't
changed.
Line number labels and area labels are now in 2 different DOM containers.

A new set of unit test cases were added too.

And finally, a new option in the settings panel was added to turn areas
on or off.

Screenshot: https://i.imgur.com/NVqAUsn.jpg

Bug: 1100384
Change-Id: Icb935a1a6e143bfdd95babb3c66a8f1412c80418
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2277595
Commit-Queue: Patrick Brosset <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Brandon Goddard <[email protected]>
11 files changed
tree: dcc161fc6a9009727f0bc63166fd2c32972478ac
  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