[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / 02948c657a91a1c1e3031f52067478691d57d90e
commit02948c657a91a1c1e3031f52067478691d57d90e[log] [tgz]
authorPatrick Brosset <patrick.brosset@microsoft.com>Wed Mar 03 17:28:10 2021
committerCommit Bot <commit-bot@chromium.org>Wed Mar 03 17:55:15 2021
treedb8c8d25a07132d7ca00400d389db0a2efcb0323
parent33f773352d26e75f5877f1c2dfeaeaf5749be5df [diff]
Highlight flex items on hover of flex/grow/shrink/basis properties

This extends the number of properties we highlight on hover in the
styles pane to flex, flex-grow, flex-shrink and flex-basis.

Now that we have a flex item overlay that shows an arrow indicating if
an item grew or shrank, we can use it to nicely inform users about what
these properties do when they hover over them in the styles pane.

To do this, the only necessary changes are the ones in StylesSidebarPane
and OverlayModel.

The rest of the code is for this one edge case: when an item is also a
container, we normally don't draw the item overlay. So in our case that
means we wouldn't draw the flexibility arrow when hovering over flex:1
if that element was also a flex container.
To avoid this, we check if there actually is any (non-transparent) flex
container config passed to the overlay. If there isn't, we can safely
draw the flex item overlay.

Demo: https://imgur.com/g7UtduW

Bug: 1173995
Change-Id: I6236e869ea88b889ba274dbf37601e90a8c94e84
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2729506
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
4 files changed
tree: db8c8d25a07132d7ca00400d389db0a2efcb0323
  1. build_overrides/
  2. docs/
  3. front_end/
  4. inspector_overlay/
  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. README.md
  40. tsconfig.base.json
  41. tsconfig.json
  42. 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 in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

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