[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / 1be087cefa36192fd8c4327b6296f1dff3375c8d
commit1be087cefa36192fd8c4327b6296f1dff3375c8d[log] [tgz]
authorVictor Porof <victorporof@chromium.org>Mon Aug 30 12:56:24 2021
committerDevtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>Mon Aug 30 14:03:45 2021
tree4787c01d23a459fc71430dc59ee96c6db7e5e4b3
parent9d2e021fcda9b277f640948789e9d13541b9be04 [diff]
Preserve native scrollbar look and feel when using the dark theme on all platforms

DevTools uses the native scrollbar look and feel in light theme, but
custom ones styled via CSS in dark theme. This is because the current
theming architecture styles scrollbars using `::-webkit-scrollbar` CSS
selectors. In contrast to the standard `scrollbar-color` CSS rule, they
have the effect of completely disabling the element's appearance.

It looks like this may have been avoided in the past with the
:not(.platform-mac) selector, however that doesn't seem to be functional
or in use anymore. At the same time, it is questionable if this
complexity is desirable: scrollbars being natively-styled when using the
light theme, custom-styled when using the dark theme only on some
platforms, and natively-styled when using the dark theme on others.

This CL removes this complexity in favor of using the native look and
feel on all platforms, allowing the OS dark/light colors to apply. In
the future, if multiple light or dark themes will become available, this
approach will still work: make sure `color-scheme: dark` is used for all
dark theme selectors, (currently only `.-theme-with-dark-background` is
used).

Bug: 1244562
Change-Id: I625739ac87a34943842e730f658c465db0b3053b
Signed-off-by: Victor Porof <victorporof@chromium.org>
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3129462
Reviewed-by: Mathias Bynens <mathias@chromium.org>
1 file changed
tree: 4787c01d23a459fc71430dc59ee96c6db7e5e4b3
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. extension-api/
  6. front_end/
  7. inspector_overlay/
  8. node_modules/
  9. scripts/
  10. test/
  11. third_party/
  12. v8/
  13. .clang-format
  14. .editorconfig
  15. .eslintignore
  16. .eslintrc.js
  17. .gitattributes
  18. .gitignore
  19. .gn
  20. .mailmap
  21. .npmignore
  22. .npmrc
  23. .style.yapf
  24. .stylelintignore
  25. .stylelintrc.json
  26. ARCHITECTURE.md
  27. AUTHORS
  28. BUILD.gn
  29. DEPS
  30. LICENSE
  31. OWNERS
  32. package-lock.json
  33. package.json
  34. PRESUBMIT.py
  35. README.md
  36. tsconfig.json
  37. 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