Google Git
Sign in
chromium/devtools/devtools-frontend/fd2ca9ccf2a7f8eeeb88b60fb458a04c09f39e35
commit
fd2ca9ccf2a7f8eeeb88b60fb458a04c09f39e35
[log]
author
Patrick Brosset <patrick.brosset@microsoft.com>
Tue Oct 20 12:42:28 2020
committer
Commit Bot <commit-bot@chromium.org>
Wed Oct 21 14:08:55 2020
tree
191b457fb7f577a6481deab0f7fd2b342dbbf51d
parent
b60a4fdffcbb41ffabbc03cf4f2272d8dc908a31 [diff]
Grid: Simplify the label color logic to reduce the bundle size

The css grid overlay's label background color is a slightly lighter
shade than the main line color.
To achieve this, the overlay blends the line colors with a
semi-transparent white color.
This requires importing the Color.js module.

It turns out that because the 10 default colors we use are already
really light, making them slightly lighter makes almost no difference at
all.
So, in order to make the overlay bundle smaller, I'm removing this logic
altogether.

In the process, I'm also removing the color-contrast logic as we want
the label text color to always be dark.

Before/after comparisons: https://imgur.com/a/RChe3zt

Bug: 1139906
Change-Id: I5bf62f3a5df8e137dc02f4fcda3a1fa32661333c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2485032
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
3 files changed
tree: 191b457fb7f577a6481deab0f7fd2b342dbbf51d
  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 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