Commit Graph
12 Commits
Author SHA1 Message Date
Jack Franklin 49a9481a74 Lint color usage in background and border-* properties.
The list of CSS properties we check for colors wasn't thorough and
didn't include `border-left/right/top/bottom` or `background` on its
own. This CL fixes that and disables the rule for any current
violations.

Bug: 1152736
Change-Id: Ic732d653fdfab0462a04dc891bcece1f44e5d471
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2676157
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
2021-02-05 15:39:39 +00:00
Jack Franklin 8064d3ba7a Lint against non-theme-color variables
This CL turns on the use_theme_colors stylelint rule which enforces that
any colors use variables defined in our codebase.

There are many, many violations, unsurprisingly (about 1500), so for now
I have disabled every single violation. The goal of the dark mode
migration will be in part to remove all violations of this rule.

Additionally, new code going forwards should adhere to the rule and not
add the comment to disable the warning.

Bug: 1152736
Change-Id: I51372724ea51485daef3d4f75b7d3f60a7c8016f
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2671323
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2021-02-03 11:02:09 +00:00
Jack Franklin fd9dfaa5e7 [Dark mode] replace #fff background-color
This CL searches for CSS that matches:

- background: #fff
- background: #ffffff
- background: #white
- background-color: #fff
- background-color: #ffffff
- background-color: #white

And replaces the declaration with var(--color-background) from the new
set of color variables.

Bug: 1152736
Change-Id: Ia0575ccfa4e23c92fd4f83e6c911236dbb893fea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2577559
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2021-01-11 16:18:06 +00:00
Changhao Han bb4af12377 Complete ARIA tree support to Computed pane
This CL fixes two issues:
1. The traditional list of Computed styles could not be navigated via
ARIA tree keyboard navigations, due to recent componentization changes.
2. The grouped list was not ARIA-tree-navigatable either.

Bug: chromium:1125511, chromium:1125958
Change-Id: I2fd29ccf7e85019615d5a9fe7fab7647a44c02e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2403320
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
2020-09-11 09:06:46 +00:00
Changhao Han 0a98cc54ea Implements grouped Computed styles in the Computed tab
Design doc: https://goo.gle/devtools-computed-styles

Screencast: https://imgur.com/a/n8Y7jXH

Updated screencast for expanding by default: https://imgur.com/a/0CUnlch

Bug: chromium:1096230, chromium:1084673, chromium:1106251
Change-Id: Ib6f22de5f96cb7e35fe60730c186cbde7d2905fe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2360377
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
2020-08-21 21:30:00 +00:00
Mathias Bynens ca9fa2d73f Consistently format CSS color and opacity values
- Prefer the modern comma-free CSS color function syntax over the
  legacy syntax. [1]
- Explicitly use the `deg` suffix for angle values in colors, to
  clarify the range.
- Explicitly use the `%` suffix for percentages instead of formatting
  the value as a number, again to clarify the range.

[1]: https://twitter.com/mathias/status/1253242715304857601
[2]: https://goo.gle/devtools-css-color

Bug: chromium:1083142
Fixed: chromium:1073885
Change-Id: I8e1582a2dee3553a61df88564051ea84c2011d76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2209091
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
2020-05-19 16:50:26 +00:00
Mathias Bynens b0c1f4bce2 Fix stylelint-config-standard violations
Bug: chromium:1083142
Change-Id: I5ea4cc5d0f83e52856383ba37a47472e33eb19a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204113
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
2020-05-15 17:05:27 +00:00
Kham Udom 047cb6914a Fixed high contrast in Elements panels.
Update the DOM tree panel by fixing missing expanded glyph, removed the
borders, set by the system. The borders should only be visible,
when elements are hovered or selected.

Made sure all the panels, Style, Computed, Event Listeners,
DOM Breakpoints, Properties, and Accessibility, have a hover state,
if there is one, in Default mode. Otherwise, all panels
should be navigable, with keyboard.

Before: https://imgur.com/a/XaXWvFW
After: https://imgur.com/a/1lBV1Br

Update:1
Addressed comments to move styles to a central location,
removed unnecessary use of forced-colors and !important
and unused rule sets.

Update:2
Address change to use border color, more refactoring work
to remove unnecessary !important, more work on centralizing
styles

Bug: 1048378

Change-Id: I6942eb46d6c741fdea3f062ac61ead7c6e9d1bbc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2007930
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-02-04 18:57:20 +00:00
Mathias Bynens 9680e2e8b0 Drop -webkit-user-select in favor of user-select
Bug: chromium:1031475
Change-Id: Ibbf222135c97e79ae3be816216fec9675d643952
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1953613
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
2019-12-06 10:31:53 +00:00
JeffreyCA f3d6d3aeba Make filter box placeholder text visible in dark theme
When devtools is activated with dark theme, colors of certain elements
may be inverted from how they are defined in the stylesheet. The filter
box placeholder color was not explicitly defined in the stylesheet, so
the color inversion did not occur for the placeholder color. This fix
explicitly sets the placeholder color so it is visible in both light
and dark themes.

Bug: 1000628
Change-Id: I7ed29c3135a91b0c1f27cd51bbaeda858997138f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1787337
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Jeffrey Chen <jeffreyca16@gmail.com>
Cr-Original-Commit-Position: refs/heads/master@{#694430}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 4044b263955a059f41c04f150e09efc805cbd940
2019-09-06 21:42:34 +00:00
Erik Luo 94efa87349 DevTools: give visual signal when filters are active
- Non-empty text filters retain their blue outline even when not
  focused.
- Searching the the StylesSidebarPane no longer highlights the
  toolbar yellow, just the selector/prop matches.

Screenshots:
https://imgur.com/a/suybNVy
https://imgur.com/a/s0R04ar

Bug: 808159
Change-Id: I7dc5b89ca96ca181e767bd271cd648bee4cb0ca1
Reviewed-on: https://chromium-review.googlesource.com/1060574
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#571967}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3078ce545f4c4ea7b39d3b3466f12ea330c6e6d8
2018-07-02 19:32:06 +00:00
Blink Reformat 4c46d0969f The Great Blink mv for source files, part 2.
Move and rename files.

NOAUTOREVERT=true
NOPRESUBMIT=true
NOTREECHECKS=true
Bug: 768828
TBR=darin@chromium.org
NOTRY=true

Change-Id: I66d3b155808bc5bdbf237b80208e1e552bcf7f28
Reviewed-on: https://chromium-review.googlesource.com/1001153
Reviewed-by: Blink Reformat <blink-reformat@chromium.org>
Commit-Queue: Blink Reformat <blink-reformat@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#549061}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0aee4434a4dba42a42abaea9bfbc0cd196a63bc1
2018-04-07 15:32:37 +00:00